) => (
+
+);
+
+export default ArrowDownIcon;
diff --git a/dashboard/pages/dashboard.tsx b/dashboard/pages/dashboard.tsx
index 122adc9f1..1564ad7b2 100644
--- a/dashboard/pages/dashboard.tsx
+++ b/dashboard/pages/dashboard.tsx
@@ -5,7 +5,7 @@ import DashboardLayout from '../components/dashboard/components/DashboardLayout'
import DashboardResourcesManager from '../components/dashboard/components/resources-manager/DashboardResourcesManager';
import DashboardTopStats from '../components/dashboard/components/top-stats/DashboardTopStats';
import Grid from '../components/grid/Grid';
-import DashboardDependencyGraphWrapper from '../components/explorer/dependency-graph/dependencygraphwrapper';
+import DashboardDependencyGraphWrapper from '../components/explorer/dependency-graph/DependencyGraphWrapper';
function Dashboard() {
return (
diff --git a/dashboard/pages/explorer.tsx b/dashboard/pages/explorer.tsx
index 0608a9393..713ec28d3 100644
--- a/dashboard/pages/explorer.tsx
+++ b/dashboard/pages/explorer.tsx
@@ -1,5 +1,5 @@
import Head from 'next/head';
-import DashboardDependencyGraphWrapper from '../components/explorer/dependency-graph/dependencygraphwrapper';
+import DashboardDependencyGraphWrapper from '../components/explorer/dependency-graph/DependencyGraphWrapper';
function Explorer() {
return (
From e8a7f56ef71f0d5daee8051832299202d4dc80c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
<320272+Traxmaxx@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:09:01 +0200
Subject: [PATCH 29/36] chore: improve file structure
---
.../explorer/{dependency-graph => }/DependencyGraph.tsx | 0
.../explorer/{dependency-graph => }/DependencyGraphError.tsx | 2 +-
.../explorer/{dependency-graph => }/DependencyGraphLoader.tsx | 3 ++-
.../{dependency-graph => }/DependencyGraphSkeleton.tsx | 0
.../{dependency-graph => }/DependencyGraphWrapper.tsx | 0
.../components/explorer/{dependency-graph => }/config.ts | 0
.../filter/DependencyGraphFilterDropdown.tsx | 0
.../filter/DependencyGraphFilterField.tsx | 0
.../filter/DependencyGraphFilterOptions.tsx | 0
.../filter/DependencyGraphFilterSummary.tsx | 0
.../filter/DependendencyGraphFilter.tsx | 0
.../{dependency-graph => }/hooks/useDependencyGraph.tsx | 4 ++--
dashboard/pages/dashboard.tsx | 2 +-
dashboard/pages/explorer.tsx | 2 +-
14 files changed, 7 insertions(+), 6 deletions(-)
rename dashboard/components/explorer/{dependency-graph => }/DependencyGraph.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/DependencyGraphError.tsx (97%)
rename dashboard/components/explorer/{dependency-graph => }/DependencyGraphLoader.tsx (90%)
rename dashboard/components/explorer/{dependency-graph => }/DependencyGraphSkeleton.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/DependencyGraphWrapper.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/config.ts (100%)
rename dashboard/components/explorer/{dependency-graph => }/filter/DependencyGraphFilterDropdown.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/filter/DependencyGraphFilterField.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/filter/DependencyGraphFilterOptions.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/filter/DependencyGraphFilterSummary.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/filter/DependendencyGraphFilter.tsx (100%)
rename dashboard/components/explorer/{dependency-graph => }/hooks/useDependencyGraph.tsx (95%)
diff --git a/dashboard/components/explorer/dependency-graph/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/DependencyGraph.tsx
rename to dashboard/components/explorer/DependencyGraph.tsx
diff --git a/dashboard/components/explorer/dependency-graph/DependencyGraphError.tsx b/dashboard/components/explorer/DependencyGraphError.tsx
similarity index 97%
rename from dashboard/components/explorer/dependency-graph/DependencyGraphError.tsx
rename to dashboard/components/explorer/DependencyGraphError.tsx
index 1bbe0e785..f996e2ec4 100644
--- a/dashboard/components/explorer/dependency-graph/DependencyGraphError.tsx
+++ b/dashboard/components/explorer/DependencyGraphError.tsx
@@ -1,4 +1,4 @@
-import Button from '../../button/Button';
+import Button from '@components/button/Button';
type DashboardDependencyGraphErrorProps = {
fetch: () => void;
diff --git a/dashboard/components/explorer/dependency-graph/DependencyGraphLoader.tsx b/dashboard/components/explorer/DependencyGraphLoader.tsx
similarity index 90%
rename from dashboard/components/explorer/dependency-graph/DependencyGraphLoader.tsx
rename to dashboard/components/explorer/DependencyGraphLoader.tsx
index 41a070957..1e64707e7 100644
--- a/dashboard/components/explorer/dependency-graph/DependencyGraphLoader.tsx
+++ b/dashboard/components/explorer/DependencyGraphLoader.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
import DependencyGraphError from './DependencyGraphError';
import DependencyGraphSkeleton from './DependencyGraphSkeleton';
import DependencyGraphView from './DependencyGraph';
@@ -25,4 +26,4 @@ function DependencyGraphLoader({
return null;
}
-export default DependencyGraphLoader;
+export default memo(DependencyGraphLoader);
diff --git a/dashboard/components/explorer/dependency-graph/DependencyGraphSkeleton.tsx b/dashboard/components/explorer/DependencyGraphSkeleton.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/DependencyGraphSkeleton.tsx
rename to dashboard/components/explorer/DependencyGraphSkeleton.tsx
diff --git a/dashboard/components/explorer/dependency-graph/DependencyGraphWrapper.tsx b/dashboard/components/explorer/DependencyGraphWrapper.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/DependencyGraphWrapper.tsx
rename to dashboard/components/explorer/DependencyGraphWrapper.tsx
diff --git a/dashboard/components/explorer/dependency-graph/config.ts b/dashboard/components/explorer/config.ts
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/config.ts
rename to dashboard/components/explorer/config.ts
diff --git a/dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterDropdown.tsx b/dashboard/components/explorer/filter/DependencyGraphFilterDropdown.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterDropdown.tsx
rename to dashboard/components/explorer/filter/DependencyGraphFilterDropdown.tsx
diff --git a/dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterField.tsx b/dashboard/components/explorer/filter/DependencyGraphFilterField.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterField.tsx
rename to dashboard/components/explorer/filter/DependencyGraphFilterField.tsx
diff --git a/dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterOptions.tsx b/dashboard/components/explorer/filter/DependencyGraphFilterOptions.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterOptions.tsx
rename to dashboard/components/explorer/filter/DependencyGraphFilterOptions.tsx
diff --git a/dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterSummary.tsx b/dashboard/components/explorer/filter/DependencyGraphFilterSummary.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/filter/DependencyGraphFilterSummary.tsx
rename to dashboard/components/explorer/filter/DependencyGraphFilterSummary.tsx
diff --git a/dashboard/components/explorer/dependency-graph/filter/DependendencyGraphFilter.tsx b/dashboard/components/explorer/filter/DependendencyGraphFilter.tsx
similarity index 100%
rename from dashboard/components/explorer/dependency-graph/filter/DependendencyGraphFilter.tsx
rename to dashboard/components/explorer/filter/DependendencyGraphFilter.tsx
diff --git a/dashboard/components/explorer/dependency-graph/hooks/useDependencyGraph.tsx b/dashboard/components/explorer/hooks/useDependencyGraph.tsx
similarity index 95%
rename from dashboard/components/explorer/dependency-graph/hooks/useDependencyGraph.tsx
rename to dashboard/components/explorer/hooks/useDependencyGraph.tsx
index 96ed12362..72c27f07c 100644
--- a/dashboard/components/explorer/dependency-graph/hooks/useDependencyGraph.tsx
+++ b/dashboard/components/explorer/hooks/useDependencyGraph.tsx
@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
-import { InventoryFilterData } from 'components/inventory/hooks/useInventory/types/useInventoryTypes';
-import settingsService from '../../../../services/settingsService';
+import { InventoryFilterData } from '@components/inventory/hooks/useInventory/types/useInventoryTypes';
+import settingsService from '@services/settingsService';
export type ReactFlowData = {
nodes: any[];
diff --git a/dashboard/pages/dashboard.tsx b/dashboard/pages/dashboard.tsx
index 1564ad7b2..e4d185cc9 100644
--- a/dashboard/pages/dashboard.tsx
+++ b/dashboard/pages/dashboard.tsx
@@ -5,7 +5,7 @@ import DashboardLayout from '../components/dashboard/components/DashboardLayout'
import DashboardResourcesManager from '../components/dashboard/components/resources-manager/DashboardResourcesManager';
import DashboardTopStats from '../components/dashboard/components/top-stats/DashboardTopStats';
import Grid from '../components/grid/Grid';
-import DashboardDependencyGraphWrapper from '../components/explorer/dependency-graph/DependencyGraphWrapper';
+import DashboardDependencyGraphWrapper from '../components/explorer/DependencyGraphWrapper';
function Dashboard() {
return (
diff --git a/dashboard/pages/explorer.tsx b/dashboard/pages/explorer.tsx
index 713ec28d3..a6bf6152d 100644
--- a/dashboard/pages/explorer.tsx
+++ b/dashboard/pages/explorer.tsx
@@ -1,5 +1,5 @@
import Head from 'next/head';
-import DashboardDependencyGraphWrapper from '../components/explorer/dependency-graph/DependencyGraphWrapper';
+import DashboardDependencyGraphWrapper from '../components/explorer/DependencyGraphWrapper';
function Explorer() {
return (
From 61e3757a982441fcc16d2a4d23e722b01934e71c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
<320272+Traxmaxx@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:10:18 +0200
Subject: [PATCH 30/36] feat: size nodes based on weight aka connected edges
aka degree
---
dashboard/components/explorer/config.ts | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/dashboard/components/explorer/config.ts b/dashboard/components/explorer/config.ts
index 532619309..c8e6d06b5 100644
--- a/dashboard/components/explorer/config.ts
+++ b/dashboard/components/explorer/config.ts
@@ -11,7 +11,7 @@ export const graphLayoutConfig = {
// - "proof" slow cooling rate
quality: 'default',
// Whether to include labels in node dimensions. Useful for avoiding label overlap
- nodeDimensionsIncludeLabels: false,
+ nodeDimensionsIncludeLabels: true,
// number of ticks per frame; higher is faster but more jerky
refresh: 30,
// Whether to fit the network view after when done
@@ -54,8 +54,12 @@ export const graphLayoutConfig = {
};
export const nodeStyeConfig = {
- width: 45,
- height: 45,
+ width(node) {
+ return Math.max(1, Math.ceil(node.degree(false) / 2)) * 20;
+ },
+ height(node) {
+ return Math.max(1, Math.ceil(node.degree(false) / 2)) * 20;
+ },
shape: 'ellipse',
'text-opacity': 1,
'font-size': 17,
From 129d8365080bf306f20bf309b045aeacaae1e621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
<320272+Traxmaxx@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:25:48 +0200
Subject: [PATCH 31/36] fix: improve node sizing formula
---
dashboard/components/explorer/config.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/dashboard/components/explorer/config.ts b/dashboard/components/explorer/config.ts
index c8e6d06b5..9b91f9f3e 100644
--- a/dashboard/components/explorer/config.ts
+++ b/dashboard/components/explorer/config.ts
@@ -55,10 +55,10 @@ export const graphLayoutConfig = {
export const nodeStyeConfig = {
width(node) {
- return Math.max(1, Math.ceil(node.degree(false) / 2)) * 20;
+ return Math.max(2, Math.ceil(node.degree(false) / 2)) * 20;
},
height(node) {
- return Math.max(1, Math.ceil(node.degree(false) / 2)) * 20;
+ return Math.max(2, Math.ceil(node.degree(false) / 2)) * 20;
},
shape: 'ellipse',
'text-opacity': 1,
From 52d4a9938b982ad8a6dc9b8e3f8e041b8f7a36db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
<320272+Traxmaxx@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:34:42 +0200
Subject: [PATCH 32/36] chore: cleanup
---
CONTRIBUTING.md | 47 -------------------
.../components/explorer/DependencyGraph.tsx | 6 +--
2 files changed, 3 insertions(+), 50 deletions(-)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5dadbca66..dd4c8d824 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -125,50 +125,3 @@ npm run dev
```
go-bindata-assetfs -o template.go dist/ dist/assets/images/
```
-
-## About Dependency graph feature
-
-A dependency graph is a graph that aims to show the relationship that exists between individual cloud resources. This feature would help users of Komiser get a better view of their running resources.
-
-### Approach we are following and work done by now
-
-We have decided to divide the entire feature into two different parts, i.e., frontend and backend.
-
-- Backend: The role of the backend is to fetch resources along with their list of relationships that exist. For now, the relationships are manually found, i.e., for individual resources, individual functions are written where relationships are found and returned along with resource data. The frontend can get this data by calling URL/resources/relations`.
-- Frontend: We managed to prepare the skeleton for the feature in the frontend.
-
-### TODO
-
-For **Backend**:
-Support for more resources. For now, the Komiser backend only returns resources from AWS, specifically Instances and Elastic IPs with relations.
-- To do so, a function needs to be created at the individual resource level that populates the `Relation` array field of the return value `resources` with relationships. For example, refer to AWS Instances and ElasticIp code.
-- Logic written for fetching relations is currently manual work and can be improved if there is a way to do that automatically.
-- Once we have the Relation field populated, the backend will handle the rest of things on its own.
-
-For **Frontend**:
-The initial attempt for the graph was to use [ReactFlow](https://reactflow.dev/docs/quickstart/) to represent resources as nodes and their edges as their relationships with other resources. However, it was found that scalability was a concern, and we were also a bit restricted when it came to UI.
-
-Another alternative that came to discussion was libraries like [d3-force](https://github.com/d3/d3-force), [reaflow](https://github.com/reaviz/reaflow), [sigma js](https://github.com/jacomyal/sigma.js) etc.
-
-[React-Sigma](https://github.com/sim51/react-sigma) seems to fulfil all our requirements. Still, the work is in progress. In order to contribute to the frontend part, trying react-sigma or any other library of choice would be the best way to start. Make sure to consider the following things while working with a library:
-
-- The library supports large number of nodes and edges
-- Positioning of nodes is in circular form and edges are directed
-- Nodes and edges UIs are highly customizable
-
-### Steps to follow
-
-- Checkout the `wip-dep-graph` branch from the remote upstream to your local.
-
-```sh
- git checkout wip-dep-graph
-```
-
-- Now checkout a new branch from this branch and make your changes
-
-```sh
- git checkout -b
-```
-
-- Raise a PR after you're done with changes
- - Make sure to raise this against `wip-dep-graph` branch itself
diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
index 2b50f6bc4..f0a76c377 100644
--- a/dashboard/components/explorer/DependencyGraph.tsx
+++ b/dashboard/components/explorer/DependencyGraph.tsx
@@ -43,7 +43,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
};
const cyActionHandlers = (cy: Cytoscape.Core) => {
- // make sure we did n ot init already, otherwise this will be bound more than once
+ // make sure we did not init already, otherwise this will be bound more than once
if (!initDone) {
// Add HTML labels for better flexibility
// @ts-ignore
@@ -62,14 +62,14 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
0 0 5px #F4F9F9,0 0 5px #F4F9F9,
0 0 5px #F4F9F9,0 0 5px #F4F9F9;" class="text-black-400 text-ellipsis max-w-[100px] overflow-hidden whitespace-nowrap text-center font-thin">${
templateData.service || ' '
- }