Merge pull request #1141 from tailwarden/develop

v3.1.3 release 🚀

CONTRIBUTING.md

@@ -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
 
@@ -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 {
@@ -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]]
@@ -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
 
@@ -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,
@@ -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:

Makefile

@@ -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:

cmd/config.go

@@ -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",

dashboard/README.md

@@ -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:

dashboard/components/explorer/DependencyGraph.tsx

@@ -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, {
@@ -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;
@@ -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(
@@ -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,
@@ -150,7 +165,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
           }
         ]}
         cy={(cy: Cytoscape.Core) => cyActionHandlers(cy)}
-      />
+      /> */}
       {dataIsEmpty ? (
         <>
           <div className="translate-y-[201px]">

dashboard/components/explorer/filter/DependendencyGraphFilter.tsx

@@ -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} />