Skip to content

Commit

Permalink
Merge pull request #1141 from tailwarden/develop
Browse files Browse the repository at this point in the history
v3.1.3 release 🚀
  • Loading branch information
mlabouardy authored Oct 31, 2023
2 parents a2e811b + 131c5b4 commit 3a4ccec
Show file tree
Hide file tree
Showing 41 changed files with 2,364 additions and 766 deletions.
78 changes: 45 additions & 33 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,33 +108,18 @@ The core Komiser Engine is written in Go (Golang) and leverages Go Modules. Here
2. 🔧 **GOPATH**:
- Ensure that the **`GOPATH`** environment variable is configured appropriately.
---
## 🛠️ Komiser Installation
### **Step 1: Installing Komiser CLI**
Follow the instructions in the [documentation](https://docs.komiser.io/getting-started/installation) to install the **Komiser CLI** for your operating system.
### **Step 2: Connect to a Cloud Account**
To deploy a **self-hosted (local) instance** of Komiser, connect your Komiser CLI to a cloud account of your choice. Refer to the documentation of the [supported cloud providers](https://docs.komiser.io/configuration/cloud-providers/aws).
### **Step 3: Accessing the Komiser UI**
Access the dashboard UI at **`http://localhost:3002`** once the local Komiser instance is running.
![komiser-dashboard](https://hackmd.io/_uploads/Syo0bMtgT.png)
---
## 🌟 Ways to Contribute to Komiser Engine
Komiser is an open-source cloud-agnostic resource manager. It helps you break down cloud resource costs at the resource level. As a cloud-agnostic cloud management tool, we always have more providers and cloud services to add, update, and cost-calculate.
### 1️⃣ Adding a new Cloud Provider
- Step 1: Create **`provider_name.go`** in **`providers/provider_name`** directory.
### ☁️ Adding a new Cloud Provider
- Step 2: Add the following boilerplate:
#### 1️⃣ Create provider.
Create `provider_name.go` in `providers/provider_name` directory.
#### 2️⃣ Add the following boilerplate:
```go
package PROVIDER_NAME
Expand Down Expand Up @@ -164,7 +149,8 @@ func FetchProviderData(ctx context.Context, client ProviderClient, db *bun.DB) {
}
```
- Step 3: Add SDK client details in [**`providers/provider.go`**](https://github.com/tailwarden/komiser/blob/develop/providers/providers.go):
#### 3️⃣ Add SDK client details:
Add your client details to [**`providers/provider.go`**](https://github.com/tailwarden/komiser/blob/develop/providers/providers.go)
```go
type ProviderClient struct {
Expand All @@ -188,7 +174,8 @@ type AzureClient struct {
}
```
- **Step 4:** Add provider configuration in TOML format in **`config.toml`**:
#### 4️⃣ Add provider configuration:
Add provider configuration in TOML format in **`config.toml`**
```toml
[[gcp]]
Expand All @@ -198,27 +185,27 @@ source="ENVIRONMENT_VARIABLES"
profile="production"
```
- **Step 5:** Compile a new Komiser binary:
#### 5️⃣ Compile a new Komiser binary:
```bash
go build
```
- **Step 6:** Start a new Komiser development server:
#### 6️⃣ Start a new Komiser development server:
```bash
./komiser start
```
### 2️⃣ Adding a new Cloud Service/Resource
### 🔋 Adding a new Cloud Service/Resource
Here are the general steps to add a new service/resource for a cloud provider in Komiser:
**Step 1:**
Create a new file **`servicename.go`** under the path **`providers/provider_name/servicename`**
#### 1️⃣ Create Service
Create a new file `servicename.go` under the path `providers/provider_name/servicename`
**Step 2:**
#### 2️⃣ Add boilerplate
Add the following boilerplate code, which defines the structure of any new service/resource to be added for a cloud provider:
```go
package service
Expand All @@ -243,10 +230,10 @@ func MyServiceResources(ctx context.Context, client ProviderClient) ([]Resource,
To understand how to write the required logic, you may refer any [existing examples](https://github.com/tailwarden/komiser/tree/develop/providers/aws) for inspiration!
**Step 3:**
Call the **`MyServiceResources()`** function from the above file, by adding it to **`providers/providername/provider.go`** file's **`listOfSupportedServices()`** function.
#### 3️⃣ Edit Provider
Call the `MyServiceResources()` function from the above file, by adding it to `providers/providername/provider.go` file's `listOfSupportedServices()` function.
```
```go
func listOfSupportedServices() []providers.FetchDataFunction {
return []providers.FetchDataFunction{
ec2.Instances,
Expand All @@ -267,15 +254,40 @@ func listOfSupportedServices() []providers.FetchDataFunction {
.
```
**Step 4:**
Repeat steps **`4,5,6`** accordingly and you'll see a new resource/service added to Komiser, in the dashboard!
#### 4️⃣
Do above mentioned steps [4](#4️⃣-add-provider-configuration), [5](#5️⃣-compile-a-new-komiser-binary) and [6](#6️⃣-start-a-new-komiser-development-server). You'll see a new resource/service added to Komiser, in the dashboard!
Additionally, [here](https://youtu.be/Vn5uc2elcVg?feature=shared) is a video tutorial of the entire process for your reference.
> 💡 Tip: you can also start the server via `go run *.go start --config ./config.toml` if you do want to skip the compile step!
### 3️⃣ Enhance existing Cloud service/resource
**So, you wish to improve the code quality of an existing cloud service/resource?** Feel free to discuss your ideas with us on our [Discord Server](https://discord.tailwarden.com) and [open a new issue](https://github.com/tailwarden/komiser/issues).
## 🧪 Testing Your Changes
We leverage the [testing](https://pkg.go.dev/testing) package for tests. Test names follow the `TestXxx(*testing.T)` format where Xxx does not start with a lowercase letter. The function name serves to identify the test routine.
For creating a new test you create a `[name]_test.go` next to the file you'd like to test and replace `[name]` with your filename of the implementation. Look at any of the `*_test.go` files for an example or read the [official docs](https://pkg.go.dev/testing).
You then can run it with `go test /path/to/your/folder/where/the/test/is`. You can run all of our engine tests with `make tests`. You should see something similar to this:
```logtalk
go test ./... | grep -v /dashboard/
...
ok github.com/tailwarden/komiser/internal (cached) [no tests to run]
? github.com/tailwarden/komiser/providers/aws/ecr [no test files]
? github.com/tailwarden/komiser/providers/aws/ecs [no test files]
? github.com/tailwarden/komiser/providers/aws/efs [no test files]
? github.com/tailwarden/komiser/providers/aws/eks [no test files]
? github.com/tailwarden/komiser/providers/aws/elasticache [no test files]
? github.com/tailwarden/komiser/providers/aws/elb [no test files]
? github.com/tailwarden/komiser/providers/aws/iam [no test files]
ok github.com/tailwarden/komiser/providers/aws/ec2 (cached)
? github.com/tailwarden/komiser/providers/aws/kms [no test files]
? github.com/tailwarden/komiser/providers/aws/lambda [no test file
...
```
# 🚀 Contributing to Komiser Dashboard UI
Komiser Dashboard utilizes a modern tech stack. Here's a brief about it:
Expand Down
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ package:

## test: Run tests.
test:
go test -v $(go list ./... | grep -v /dashboard/)
go test ./... | grep -v /dashboard/

## version: Show version.
version:
Expand Down
2 changes: 1 addition & 1 deletion cmd/config.go
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ var configCmd = &cobra.Command{
Run: func(cmd *cobra.Command, args []string) {
c := models.Config{
AWS: []models.AWSConfig{
models.AWSConfig{
{
Name: "Demo",
Source: "CREDENTIALS_FILE",
Profile: "default",
Expand Down
2 changes: 1 addition & 1 deletion dashboard/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Follow the [Contribution Guide](https://github.com/tailwarden/komiser/blob/devel
From the Komiser root folder start the Komiser server by running:

```shell
go run \*.go start --config /path/to/config.toml
go run *.go start --config /path/to/config.toml
```

In a different terminal tab navigate to the `/dashboard` folder:
Expand Down
21 changes: 18 additions & 3 deletions dashboard/components/explorer/DependencyGraph.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, memo, useEffect } from 'react';
import CytoscapeComponent from 'react-cytoscapejs';
import Cytoscape, { EventObject } from 'cytoscape';
import Cytoscape, { EdgeSingular, EventObject } from 'cytoscape';
import popper from 'cytoscape-popper';

import nodeHtmlLabel, {
Expand Down Expand Up @@ -91,6 +91,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
const content = document.createElement('div');
content.classList.add('popper-div');
content.innerHTML = event.target.data('label');
content.style.pointerEvents = 'none';

document.body.appendChild(content);
return content;
Expand All @@ -108,6 +109,20 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {

// Hide labels when being zoomed out
cy.on('zoom', event => {
if (cy.zoom() <= zoomLevelBreakpoint) {
interface ExtendedEdgeSingular extends EdgeSingular {
popperRefObj?: any;
}

// Check if a tooltip is present and remove it
cy.edges().forEach((edge: ExtendedEdgeSingular) => {
if (edge.popperRefObj) {
edge.popperRefObj.state.elements.popper.remove();
edge.popperRefObj.destroy();
}
});
}

const opacity = cy.zoom() <= zoomLevelBreakpoint ? 0 : 1;

Array.from(
Expand All @@ -126,7 +141,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {

return (
<div className="relative h-full flex-1 bg-dependency-graph bg-[length:40px_40px]">
<CytoscapeComponent
{/* <CytoscapeComponent
className="h-full w-full"
elements={CytoscapeComponent.normalizeElements({
nodes: data.nodes,
Expand All @@ -150,7 +165,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
}
]}
cy={(cy: Cytoscape.Core) => cyActionHandlers(cy)}
/>
/> */}
{dataIsEmpty ? (
<>
<div className="translate-y-[201px]">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function DependendencyGraphFilter({
{!hasFilters ? (
<>
<div
className="flex w-fit cursor-pointer items-center gap-1 rounded-md border-2 border-dashed border-black-200 border-opacity-60 px-3 py-1 overflow-hidden"
className="flex w-fit cursor-pointer items-center gap-1 overflow-hidden rounded-md border-2 border-dashed border-black-200 border-opacity-60 px-3 py-1"
onClick={toggle}
>
<PlusIcon width={16} height={16} />
Expand Down
Loading

0 comments on commit 3a4ccec

Please sign in to comment.