From ba408944cc76590ed87d50bd124914807cdf02df Mon Sep 17 00:00:00 2001 From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com> Date: Tue, 12 Sep 2023 13:09:05 +0300 Subject: [PATCH] feat: enlarge single namespace overview (#477) --- .../sources.manage.styled.tsx | 5 ++-- .../containers/overview/overview/overview.tsx | 23 ++++++++++--------- .../containers/overview/overview/utils.tsx | 12 +++++----- frontend/webapp/package.json | 2 +- frontend/webapp/utils/constants/urls.tsx | 20 ++++++++-------- frontend/webapp/yarn.lock | 8 +++---- 6 files changed, 36 insertions(+), 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 index 6f54fb1831..380815937e 100644 --- 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 index 04a9797064..15a3a3ebad 100644 --- 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 index 86919e1ad0..abbaaf2ed9 100644 --- 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 index d3657b0897..3f15989d6d 100644 --- 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 index 584f320f78..3e22e4cec8 100644 --- 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 index 750e7d66d1..19112865c9 100644 --- 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/design-system@1.0.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/design-system@1.0.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"