[GEN-2031]: add 'replicasets' resource to ClusterRole permissions (#2006

) This pull request includes a variety of changes across multiple files to refine the user interface, enhance functionality, and clean up the codebase. The most important changes include adding new resources to the `NewUIClusterRole`, updating background colors in various components, removing unused imports, and modifying the logic for building nodes in the overview data flow. ### UI and Styling Updates: * [`frontend/webapp/components/main/header/index.tsx`](diffhunk://#diff-2c96f91ec30d2116981a9c0a562820ff9fd87c8292cb5dca11a45d6fb2ac6c04L16-R16): Updated the background color of the header to use `dark_grey` instead of `darker_grey`. * [`frontend/webapp/components/setup/header/index.tsx`](diffhunk://#diff-b797fa218a1303de084fa2eed814d4512fb9cb215a914c0adfaee658d7558db9L21-R21): Updated the background color of the setup header to use `dark_grey` instead of `darker_grey`. ### Code Cleanup: * [`frontend/webapp/containers/main/actions/action-drawer/index.tsx`](diffhunk://#diff-5f56695cd2d0ca6bcd28f372653c71d8c4dab572b08715c1f36b7acc5cf50f60L6-R9): Removed and re-added the import of `ACTION`, `DATA_CARDS`, and `getActionIcon` to clean up the import statements. * [`frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx`](diffhunk://#diff-f5288a6a2e6ccce16445bdd7486abda1bbd12662ea0e0bc846ff0f60b85b12f9L8-R8): Removed the unused `Text` import from `reuseable-components`. ### Node Building Enhancements: * [`frontend/webapp/containers/main/overview/overview-data-flow/build-action-nodes.ts`](diffhunk://#diff-2a2957e6035bd001e3c0c52f29f01f4473b6b99a8ce4381a08e9de504916c3b1R9): Added an `allowBuild` parameter to conditionally build action nodes or skeletons based on the parameter value. [[1]](diffhunk://#diff-2a2957e6035bd001e3c0c52f29f01f4473b6b99a8ce4381a08e9de504916c3b1R9) [[2]](diffhunk://#diff-2a2957e6035bd001e3c0c52f29f01f4473b6b99a8ce4381a08e9de504916c3b1L31-R32) [[3]](diffhunk://#diff-2a2957e6035bd001e3c0c52f29f01f4473b6b99a8ce4381a08e9de504916c3b1L67-R68) [[4]](diffhunk://#diff-2a2957e6035bd001e3c0c52f29f01f4473b6b99a8ce4381a08e9de504916c3b1R95-R107) * [`frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts`](diffhunk://#diff-aa30a6b7893a9d1393f196b9846b1fdc19956c7c07f4099570cb25ff2f77fa43R9): Added an `allowBuild` parameter to conditionally build destination nodes or skeletons based on the parameter value. [[1]](diffhunk://#diff-aa30a6b7893a9d1393f196b9846b1fdc19956c7c07f4099570cb25ff2f77fa43R9) [[2]](diffhunk://#diff-aa30a6b7893a9d1393f196b9846b1fdc19956c7c07f4099570cb25ff2f77fa43L30-R31) [[3]](diffhunk://#diff-aa30a6b7893a9d1393f196b9846b1fdc19956c7c07f4099570cb25ff2f77fa43L66-R67) [[4]](diffhunk://#diff-aa30a6b7893a9d1393f196b9846b1fdc19956c7c07f4099570cb25ff2f77fa43R79-R91) * [`frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts`](diffhunk://#diff-a37edc5ed2e31d0b06f407f3d1d5b155d499c689f95609db388f0e8246a1800bR9): Added an `allowBuild` parameter to conditionally build rule nodes or skeletons based on the parameter value. [[1]](diffhunk://#diff-a37edc5ed2e31d0b06f407f3d1d5b155d499c689f95609db388f0e8246a1800bR9) [[2]](diffhunk://#diff-a37edc5ed2e31d0b06f407f3d1d5b155d499c689f95609db388f0e8246a1800bL30-R31) [[3]](diffhunk://#diff-a37edc5ed2e31d0b06f407f3d1d5b155d499c689f95609db388f0e8246a1800bL66-R67) [[4]](diffhunk://#diff-a37edc5ed2e31d0b06f407f3d1d5b155d499c689f95609db388f0e8246a1800bR79-R91) * [`frontend/webapp/containers/main/overview/overview-data-flow/build-source-nodes.ts`](diffhunk://#diff-278da68d858c88d202c10e2011bc1263fe6c0b543dc9d0fc4995a0f0675d3db1R10-L13): Added an `allowBuild` parameter to conditionally build source nodes or skeletons based on the parameter value. [[1]](diffhunk://#diff-278da68d858c88d202c10e2011bc1263fe6c0b543dc9d0fc4995a0f0675d3db1R10-L13) [[2]](diffhunk://#diff-278da68d858c88d202c10e2011bc1263fe6c0b543dc9d0fc4995a0f0675d3db1L39-R39) ### Resource Addition: * [`cli/cmd/resources/ui.go`](diffhunk://#diff-c286e10d34710a80a59127b2b7951e8a33d9b9554e47d2f2b827fd690f2e53abL253-R253): Added `replicasets` to the list of resources in the `NewUIClusterRole` function. ----- This PR also fixes the following production error: ```json { "errors": [ { "message": "error listing replicasets: replicasets.apps is forbidden: User \"system:serviceaccount:odigos-system:odigos-ui\" cannot list resource \"replicasets\" in API group \"apps\" in the namespace \"default\"", "path": [ "describeSource" ] } ], "data": null } ```
odigos-io · Dec 16, 2024 · 5c4ab5b · 5c4ab5b
1 parent a84e408
commit 5c4ab5b
Show file tree

Hide file tree

Showing 27 changed files with 278 additions and 215 deletions.
diff --git a/cli/cmd/resources/ui.go b/cli/cmd/resources/ui.go
@@ -250,7 +250,7 @@ func NewUIClusterRole() *rbacv1.ClusterRole {
 			},
 			{
 				APIGroups: []string{"apps"},
-				Resources: []string{"deployments", "statefulsets", "daemonsets"},
+				Resources: []string{"deployments", "statefulsets", "daemonsets", "replicasets"},
 				Verbs:     []string{"get", "list", "watch", "patch", "update"},
 			},
 			{

diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
@@ -13,7 +13,7 @@ interface MainHeaderProps {}
 const HeaderContainer = styled(FlexRow)`
   width: 100%;
   padding: 12px 0;
-  background-color: ${({ theme }) => theme.colors.darker_grey};
+  background-color: ${({ theme }) => theme.colors.dark_grey};
   border-bottom: 1px solid rgba(249, 249, 249, 0.16);
 `;
 

diff --git a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx
@@ -24,6 +24,7 @@ export const DescribeDrawer: React.FC<Props> = () => {
           data={[
             {
               type: DataCardFieldTypes.CODE,
+              width: 'inherit',
               value: JSON.stringify({ language: 'json', code: safeJsonStringify(describe) }),
             },
           ]}

diff --git a/frontend/webapp/components/setup/header/index.tsx b/frontend/webapp/components/setup/header/index.tsx
@@ -18,7 +18,7 @@ const HeaderContainer = styled.div`
   justify-content: space-between;
   padding: 0 24px 0 32px;
   align-items: center;
-  background-color: ${({ theme }) => theme.colors.darker_grey};
+  background-color: ${({ theme }) => theme.colors.dark_grey};
   border-bottom: 1px solid rgba(249, 249, 249, 0.16);
   height: 80px;
 `;

diff --git a/frontend/webapp/containers/main/actions/action-drawer/index.tsx b/frontend/webapp/containers/main/actions/action-drawer/index.tsx
@@ -3,10 +3,10 @@ import buildCard from './build-card';
 import { ActionFormBody } from '../';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { ACTION, DATA_CARDS, getActionIcon } from '@/utils';
 import buildDrawerItem from './build-drawer-item';
 import { DataCard } from '@/reuseable-components';
 import { useActionCRUD, useActionFormData } from '@/hooks';
+import { ACTION, DATA_CARDS, getActionIcon } from '@/utils';
 import OverviewDrawer from '../../overview/overview-drawer';
 import { ACTION_OPTIONS } from '../action-modal/action-options';
 import { OVERVIEW_ENTITY_TYPES, type ActionDataParsed } from '@/types';

diff --git a/...ebapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/...ebapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -5,7 +5,7 @@ import { extractMonitors } from '@/utils';
 import { DeleteWarning } from '@/components';
 import { IAppState, useAppStore } from '@/store';
 import { OVERVIEW_ENTITY_TYPES, type ConfiguredDestination } from '@/types';
-import { DataCardFields, DataTab, IconButton, Text } from '@/reuseable-components';
+import { DataCardFields, DataTab, IconButton } from '@/reuseable-components';
 
 const Container = styled.div`
   display: flex;
@@ -27,7 +27,6 @@ const ListItem: React.FC<{ item: ConfiguredDestination; isLastItem: boolean }> =
     <>
       <DataTab
         title={item.displayName}
-        subTitle=''
         logo={item.imageUrl}
         monitors={extractMonitors(item.exportedSignals)}
         monitorsWithLabels

diff --git a/...stination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx b/...stination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx
diff --git a/...s/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx b/...s/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx
@@ -3,14 +3,14 @@ import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
 import { IDestinationListItem } from '@/hooks';
 import { capitalizeFirstLetter } from '@/utils';
-import { DestinationListItem } from './destination-list-item';
-import { NoDataFound, SectionTitle } from '@/reuseable-components';
+import { DataTab, NoDataFound, SectionTitle } from '@/reuseable-components';
 import { PotentialDestinationsList } from './potential-destinations-list';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-self: stretch;
+  gap: 24px;
   max-height: calc(100vh - 450px);
   overflow-y: auto;
 
@@ -44,12 +44,21 @@ const DestinationsList: React.FC<DestinationsListProps> = ({ items, setSelectedI
       );
     }
 
-    return items.map((item) => {
+    return items.map((categoryItem) => {
       return (
-        <ListsWrapper key={`category-${item.name}`}>
-          <SectionTitle size='small' title={capitalizeFirstLetter(item.name)} description={item.description} />
-          {item.items.map((categoryItem) => (
-            <DestinationListItem key={`destination-${categoryItem.type}`} item={categoryItem} onSelect={setSelectedItems} />
+        <ListsWrapper key={`category-${categoryItem.name}`}>
+          <SectionTitle size='small' title={capitalizeFirstLetter(categoryItem.name)} description={categoryItem.description} />
+          {categoryItem.items.map((destinationItem) => (
+            <DataTab
+              key={`destination-${destinationItem.type}`}
+              data-id={`destination-${destinationItem.displayName}`}
+              title={destinationItem.displayName}
+              logo={destinationItem.imageUrl}
+              hoverText='Select'
+              monitors={Object.keys(destinationItem.supportedSignals).filter((signal) => destinationItem.supportedSignals[signal].supported)}
+              monitorsWithLabels
+              onClick={() => setSelectedItems(destinationItem)}
+            />
           ))}
         </ListsWrapper>
       );

diff --git a/...ion-modal/choose-destination-body/destinations-list/potential-destinations-list/index.tsx b/...ion-modal/choose-destination-body/destinations-list/potential-destinations-list/index.tsx
@@ -2,23 +2,22 @@ import React from 'react';
 import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
 import { usePotentialDestinations } from '@/hooks';
-import { DestinationListItem } from '../destination-list-item';
-import { SectionTitle, SkeletonLoader } from '@/reuseable-components';
+import { DataTab, SectionTitle, SkeletonLoader } from '@/reuseable-components';
+
+interface Props {
+  setSelectedItems: (item: DestinationTypeItem) => void;
+}
 
 const ListsWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
 
-interface PotentialDestinationsListProps {
-  setSelectedItems: (item: DestinationTypeItem) => void;
-}
-
-export const PotentialDestinationsList: React.FC<PotentialDestinationsListProps> = ({ setSelectedItems }) => {
-  const { loading, data } = usePotentialDestinations();
+export const PotentialDestinationsList: React.FC<Props> = ({ setSelectedItems }) => {
+  const { data, loading } = usePotentialDestinations();
 
-  if (!data.length) return null;
+  if (!data.length && !loading) return null;
 
   return (
     <ListsWrapper>
@@ -28,7 +27,22 @@ export const PotentialDestinationsList: React.FC<PotentialDestinationsListProps>
         title='Detected by Odigos'
         description='Odigos detects destinations for which automatic connection is available. All data will be filled out automatically.'
       />
-      {loading ? <SkeletonLoader size={1} /> : data.map((item) => <DestinationListItem key={item.displayName} item={item} onSelect={setSelectedItems} />)}
+      {loading ? (
+        <SkeletonLoader size={1} />
+      ) : (
+        data.map((item) => (
+          <DataTab
+            key={`destination-${item.type}`}
+            data-id={`destination-${item.displayName}`}
+            title={item.displayName}
+            logo={item.imageUrl}
+            hoverText='Select'
+            monitors={Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported)}
+            monitorsWithLabels
+            onClick={() => setSelectedItems(item)}
+          />
+        ))
+      )}
     </ListsWrapper>
   );
 };
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-action-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-action-nodes.ts
@@ -6,6 +6,7 @@ import { getActionIcon, getEntityIcon, getEntityLabel } from '@/utils';
 import { NODE_TYPES, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, STATUSES, type ComputePlatformMapped } from '@/types';
 
 interface Params {
+  loading: boolean;
   entities: ComputePlatformMapped['computePlatform']['actions'];
   positions: NodePositions;
   unfilteredCounts: EntityCounts;
@@ -28,7 +29,7 @@ const mapToNodeData = (entity: Params['entities'][0]) => {
   };
 };
 
-export const buildActionNodes = ({ entities, positions, unfilteredCounts }: Params) => {
+export const buildActionNodes = ({ loading, entities, positions, unfilteredCounts }: Params) => {
   const nodes: Node[] = [];
   const position = positions[OVERVIEW_ENTITY_TYPES.ACTION];
   const unfilteredCount = unfilteredCounts[OVERVIEW_ENTITY_TYPES.ACTION];
@@ -48,7 +49,20 @@ export const buildActionNodes = ({ entities, positions, unfilteredCounts }: Para
     },
   });
 
-  if (!entities.length) {
+  if (loading) {
+    nodes.push({
+      id: 'action-skeleton',
+      type: NODE_TYPES.SKELETON,
+      position: {
+        x: position['x'],
+        y: position['y'](),
+      },
+      data: {
+        nodeWidth,
+        size: 3,
+      },
+    });
+  } else if (!entities.length) {
     nodes.push({
       id: 'action-add',
       type: NODE_TYPES.ADD,

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts
@@ -6,6 +6,7 @@ import { extractMonitors, getEntityIcon, getEntityLabel, getHealthStatus } from
 import { NODE_TYPES, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, STATUSES, type ComputePlatformMapped } from '@/types';
 
 interface Params {
+  loading: boolean;
   entities: ComputePlatformMapped['computePlatform']['destinations'];
   positions: NodePositions;
   unfilteredCounts: EntityCounts;
@@ -27,7 +28,7 @@ const mapToNodeData = (entity: Params['entities'][0]) => {
   };
 };
 
-export const buildDestinationNodes = ({ entities, positions, unfilteredCounts }: Params) => {
+export const buildDestinationNodes = ({ loading, entities, positions, unfilteredCounts }: Params) => {
   const nodes: Node[] = [];
   const position = positions[OVERVIEW_ENTITY_TYPES.DESTINATION];
   const unfilteredCount = unfilteredCounts[OVERVIEW_ENTITY_TYPES.DESTINATION];
@@ -47,7 +48,20 @@ export const buildDestinationNodes = ({ entities, positions, unfilteredCounts }:
     },
   });
 
-  if (!entities.length) {
+  if (loading) {
+    nodes.push({
+      id: 'destination-skeleton',
+      type: NODE_TYPES.SKELETON,
+      position: {
+        x: position['x'],
+        y: position['y'](),
+      },
+      data: {
+        nodeWidth,
+        size: 3,
+      },
+    });
+  } else if (!entities.length) {
     nodes.push({
       id: 'destination-add',
       type: NODE_TYPES.ADD,

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts
@@ -6,6 +6,7 @@ import { getEntityIcon, getEntityLabel, getRuleIcon } from '@/utils';
 import { NODE_TYPES, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, STATUSES, type ComputePlatformMapped } from '@/types';
 
 interface Params {
+  loading: boolean;
   entities: ComputePlatformMapped['computePlatform']['instrumentationRules'];
   positions: NodePositions;
   unfilteredCounts: EntityCounts;
@@ -27,7 +28,7 @@ const mapToNodeData = (entity: Params['entities'][0]) => {
   };
 };
 
-export const buildRuleNodes = ({ entities, positions, unfilteredCounts }: Params) => {
+export const buildRuleNodes = ({ loading, entities, positions, unfilteredCounts }: Params) => {
   const nodes: Node[] = [];
   const position = positions[OVERVIEW_ENTITY_TYPES.RULE];
   const unfilteredCount = unfilteredCounts[OVERVIEW_ENTITY_TYPES.RULE];
@@ -47,7 +48,20 @@ export const buildRuleNodes = ({ entities, positions, unfilteredCounts }: Params
     },
   });
 
-  if (!entities.length) {
+  if (loading) {
+    nodes.push({
+      id: 'rule-skeleton',
+      type: NODE_TYPES.SKELETON,
+      position: {
+        x: position['x'],
+        y: position['y'](),
+      },
+      data: {
+        nodeWidth,
+        size: 3,
+      },
+    });
+  } else if (!entities.length) {
     nodes.push({
       id: 'rule-add',
       type: NODE_TYPES.ADD,
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ export const DescribeDrawer: React.FC<Props> = () => { @@
               data={[
                 {
                   type: DataCardFieldTypes.CODE,
+                  width: 'inherit',
                   value: JSON.stringify({ language: 'json', code: safeJsonStringify(describe) }),
                 },
               ]}
@@ Expand Down @@