feat: v1 display of ClusterDiff section in NavDiff

kubeshop · Oct 28, 2021 · 2387cb0 · 2387cb0
1 parent 5fdb8e9
commit 2387cb0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 29 deletions.
diff --git a/src/components/organisms/NavigatorDiff/NavigatorDiff.tsx b/src/components/organisms/NavigatorDiff/NavigatorDiff.tsx
@@ -7,6 +7,8 @@ import AppContext from '@src/AppContext';
 import {NAVIGATOR_HEIGHT_OFFSET} from '@constants/constants';
 import {HelmValuesFile} from '@models/helm';
 import {K8sResource} from '@models/k8sresource';
+import {ClusterToLocalResourcesMatch} from '@models/appstate';
+import ClusterDiffSectionBlueprint, {ClusterDiffScopeType} from '@src/navsections/ClusterDiffSectionBlueprint';
 import * as S from './NavigatorDiff.styled';
 
 function NavigatorDiff(props: {hideTitleBar?: boolean}) {
@@ -33,6 +35,11 @@ function NavigatorDiff(props: {hideTitleBar?: boolean}) {
           level={0}
           isLastSection={false}
         />
+        <SectionRenderer<ClusterToLocalResourcesMatch, ClusterDiffScopeType>
+          sectionBlueprint={ClusterDiffSectionBlueprint}
+          level={0}
+          isLastSection={false}
+        />
       </S.List>
     </>
   );

diff --git a/src/components/organisms/NotificationsDrawer/NotificationsDrawer.tsx b/src/components/organisms/NotificationsDrawer/NotificationsDrawer.tsx
@@ -26,7 +26,7 @@ const StyledNoNotificationsContainer = styled(StyledDiv)`
 const StyledMessageBodyContainer = styled(StyledDiv)`
   display: flex;
   flex-direction: column;
-  width: 100%
+  width: 100%;
 `;
 
 const StyledSpan = styled.span`

diff --git a/src/navsections/ClusterDiffSectionBlueprint/ClusterDiffSectionBlueprint.ts b/src/navsections/ClusterDiffSectionBlueprint/ClusterDiffSectionBlueprint.ts
@@ -3,23 +3,11 @@ import {SectionBlueprint} from '@models/navigator';
 import {makeResourceNameKindNamespaceIdentifier} from '@utils/resources';
 import {v4 as uuidv4} from 'uuid';
 
-type ClusterDiffScopeType = {
+export type ClusterDiffScopeType = {
   resourceMap: ResourceMapType;
   clusterToLocalResourcesMatches: ClusterToLocalResourcesMatch[];
 };
 
-const getResourceIdentifierFromMatch = (match: ClusterToLocalResourcesMatch, resourceMap: ResourceMapType) => {
-  if (match.clusterResourceId) {
-    const clusterResource = resourceMap[match.clusterResourceId];
-    return makeResourceNameKindNamespaceIdentifier(clusterResource);
-  }
-  if (match.localResourceIds && match.localResourceIds.length > 0) {
-    const firstLocalResource = resourceMap[match.localResourceIds[0]];
-    return makeResourceNameKindNamespaceIdentifier(firstLocalResource);
-  }
-  return uuidv4();
-};
-
 const ClusterDiffSectionBlueprint: SectionBlueprint<ClusterToLocalResourcesMatch, ClusterDiffScopeType> = {
   name: 'Cluster Diff',
   id: 'Cluster Diff',
@@ -39,10 +27,25 @@ const ClusterDiffSectionBlueprint: SectionBlueprint<ClusterToLocalResourcesMatch
   },
   itemBlueprint: {
     getName(rawItem, scope) {
-      return getResourceIdentifierFromMatch(rawItem, scope.resourceMap);
+      const clusterResource = rawItem.clusterResourceId ? scope.resourceMap[rawItem.clusterResourceId] : undefined;
+      const firstLocalResource =
+        rawItem.localResourceIds && rawItem.localResourceIds.length > 0
+          ? scope.resourceMap[rawItem.localResourceIds[0]]
+          : undefined;
+      const leftName = clusterResource ? clusterResource.name : 'Resource not found in Cluster.';
+      const rightName = firstLocalResource ? firstLocalResource.name : 'Resource not found locally.';
+      return `${leftName} <---> ${rightName}`;
     },
     getInstanceId(rawItem, scope) {
-      return getResourceIdentifierFromMatch(rawItem, scope.resourceMap);
+      if (rawItem.clusterResourceId) {
+        const clusterResource = scope.resourceMap[rawItem.clusterResourceId];
+        return makeResourceNameKindNamespaceIdentifier(clusterResource);
+      }
+      if (rawItem.localResourceIds && rawItem.localResourceIds.length > 0) {
+        const firstLocalResource = scope.resourceMap[rawItem.localResourceIds[0]];
+        return makeResourceNameKindNamespaceIdentifier(firstLocalResource);
+      }
+      return uuidv4();
     },
   },
 };

diff --git a/src/navsections/ClusterDiffSectionBlueprint/index.ts b/src/navsections/ClusterDiffSectionBlueprint/index.ts
@@ -1 +1,2 @@
 export {default} from './ClusterDiffSectionBlueprint';
+export type {ClusterDiffScopeType} from './ClusterDiffSectionBlueprint';
diff --git a/src/redux/reducers/main.ts b/src/redux/reducers/main.ts
@@ -519,19 +519,6 @@ export const mainSlice = createSlice({
       }
     });
 
-    builder.addMatcher(
-      action => true,
-      (state, action) => {
-        if (action.payload?.alert) {
-          const notification: AlertType = action.payload.alert;
-          notification.id = uuidv4();
-          notification.hasSeen = false;
-          notification.createdAt = new Date().getTime();
-          state.notifications = [notification, ...state.notifications];
-        }
-      }
-    );
-
     builder
       .addCase(loadNavigatorDiff.pending, state => {
         state.hasNavigatorDiffLoaded = false;
@@ -610,6 +597,19 @@ export const mainSlice = createSlice({
       state.clusterToLocalResourcesMatches = [];
       state.hasNavigatorDiffLoaded = false;
     });
+
+    builder.addMatcher(
+      action => true,
+      (state, action) => {
+        if (action.payload?.alert) {
+          const notification: AlertType = action.payload.alert;
+          notification.id = uuidv4();
+          notification.hasSeen = false;
+          notification.createdAt = new Date().getTime();
+          state.notifications = [notification, ...state.notifications];
+        }
+      }
+    );
   },
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export {default} from './ClusterDiffSectionBlueprint';
		export type {ClusterDiffScopeType} from './ClusterDiffSectionBlueprint';