feat: enlarge single namespace overview (#477)

odigos-io · Sep 12, 2023 · ba40894 · ba40894
1 parent ab6de38
commit ba40894
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 34 deletions.
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -46,6 +46,7 @@ export const ManagedListWrapper = styled.div`
   overflow: scroll;
   gap: 24px;
   grid-template-columns: repeat(5, 1fr);
+  height: 75vh;
   ::-webkit-scrollbar {
     display: none;
   }
@@ -62,10 +63,10 @@ export const ManagedListWrapper = styled.div`
     grid-template-columns: repeat(2, 1fr);
   }
   @media screen and (max-height: 800px) {
-    height: 60vh;
+    height: 70vh;
   }
   @media screen and (max-height: 700px) {
-    height: 50vh;
+    height: 60vh;
   }
 `;
 

diff --git a/frontend/webapp/containers/overview/overview/overview.tsx b/frontend/webapp/containers/overview/overview/overview.tsx
@@ -1,11 +1,11 @@
-"use client";
-import React, { useCallback, useMemo, useState } from "react";
-import { KeyvalDataFlow, KeyvalLoader } from "@/design.system";
-import { QUERIES } from "@/utils/constants";
-import { useQuery } from "react-query";
-import { getDestinations, getSources } from "@/services";
-import { getEdges, groupSourcesNamespace, getNodes } from "./utils";
-import { OverviewDataFlowWrapper } from "./overview.styled";
+'use client';
+import React, { useCallback, useMemo, useState } from 'react';
+import { KeyvalDataFlow, KeyvalLoader } from '@/design.system';
+import { QUERIES } from '@/utils/constants';
+import { useQuery } from 'react-query';
+import { getDestinations, getSources } from '@/services';
+import { getEdges, groupSourcesNamespace, getNodes } from './utils';
+import { OverviewDataFlowWrapper } from './overview.styled';
 
 const NAMESPACE_NODE_HEIGHT = 84;
 const NAMESPACE_NODE_POSITION = 0;
@@ -29,10 +29,11 @@ export function OverviewContainer() {
   const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
 
   const sourcesNodes = useMemo(() => {
+    const groupedSources = groupSourcesNamespace(sources);
     const nodes = getNodes(
       containerHeight,
-      groupSourcesNamespace(sources),
-      "namespace",
+      groupedSources.length > 1 ? groupSourcesNamespace(sources) : sources,
+      'namespace',
       NAMESPACE_NODE_HEIGHT,
       NAMESPACE_NODE_POSITION,
       true
@@ -46,7 +47,7 @@ export function OverviewContainer() {
       getNodes(
         containerHeight,
         destinations,
-        "destination",
+        'destination',
         destinations?.length > 1
           ? DESTINATION_NODE_HEIGHT
           : NAMESPACE_NODE_HEIGHT,

diff --git a/frontend/webapp/containers/overview/overview/utils.tsx b/frontend/webapp/containers/overview/overview/utils.tsx
@@ -64,8 +64,8 @@ export function getNodes(
     });
     if (index === centerIndex && addCenterNode) {
       nodes.push({
-        id: "centerNode",
-        type: "custom",
+        id: 'centerNode',
+        type: 'custom',
         data: null,
         position: { x: 400, y },
       });
@@ -82,18 +82,18 @@ export function getEdges(
   return [
     ...destinations.flatMap((node, index) => ({
       id: `edges-${node.id}`,
-      source: "centerNode",
+      source: 'centerNode',
       target: `destination-${index}`,
       animated: true,
-      style: { stroke: "#96f3ff8e" },
+      style: { stroke: '#96f3ff8e' },
       data: null,
     })),
     ...sources.flatMap((node, index) => ({
       id: `edges-${node.id}`,
       source: `namespace-${index}`,
-      target: "centerNode",
+      target: 'centerNode',
       animated: true,
-      style: { stroke: "#96f3ff8e" },
+      style: { stroke: '#96f3ff8e' },
       data: null,
     })),
   ];

diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
@@ -10,7 +10,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@keyval-dev/design-system": "1.0.3",
+    "@keyval-dev/design-system": "1.0.5",
     "@next/font": "^13.4.7",
     "@svgr/webpack": "^6.2.1",
     "@types/node": "20.3.3",

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
@@ -1,7 +1,7 @@
 const env = process.env.NODE_ENV;
 
-const LOCALHOST = "http://localhost:8080/api";
-const BASE_URL = env === "production" ? "/api" : LOCALHOST;
+const LOCALHOST = 'http://localhost:8085/api';
+const BASE_URL = env === 'production' ? '/api' : LOCALHOST;
 
 const API = {
   CONFIG: `${BASE_URL}/config`,
@@ -13,16 +13,16 @@ const API = {
 };
 
 const QUERIES = {
-  API_CONFIG: "apiConfig",
-  API_NAMESPACES: "apiNamespaces",
-  API_APPLICATIONS: "apiApplications",
-  API_DESTINATIONS: "apiDestinations",
-  API_SOURCES: "apiSources",
-  API_DESTINATION_TYPE: "apiDestinationType",
-  API_DESTINATION_TYPES: "apiDestinationTypes",
+  API_CONFIG: 'apiConfig',
+  API_NAMESPACES: 'apiNamespaces',
+  API_APPLICATIONS: 'apiApplications',
+  API_DESTINATIONS: 'apiDestinations',
+  API_SOURCES: 'apiSources',
+  API_DESTINATION_TYPE: 'apiDestinationType',
+  API_DESTINATION_TYPES: 'apiDestinationTypes',
 };
 
 const SLACK_INVITE_LINK =
-  "https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email";
+  'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
 
 export { API, QUERIES, SLACK_INVITE_LINK };
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
@@ -1173,10 +1173,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@keyval-dev/[email protected].3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-1.0.3.tgz#6a81bc5760a37862d02f80c688b1ff924dca1f7d"
-  integrity sha512-CGkk/vhifg49oe4LFVa8MIs5wZIw5Edthm+/i2Y0KPGSQ0+VO/2nSGdU1Qw46h4xgRQeu9liM8pt5Mr0/ilHeA==
+"@keyval-dev/[email protected].5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-1.0.5.tgz#ed3d489af2e75ac1f775b2a5561da70146d67cce"
+  integrity sha512-etxX8phEE5v8X0ZvdFzwTpA/joVgbkLCxl85+9ThvVPPzIEWU3kE5DFdK2PWo/REJdlUuGDbYWF3zOUjriN8sg==
   dependencies:
     "@svgr/core" "^8.0.0"
     "@svgr/webpack" "^8.0.1"