Add ptp diff (#1496)

* implement version diff for ptp and synce * handle null value in version select * refactor used type in redux reducers
FRINXio · Mar 8, 2024 · 569ff39 · 569ff39
1 parent 8ebc39f
commit 569ff39
Show file tree

Hide file tree

Showing 12 changed files with 501 additions and 54 deletions.
diff --git a/packages/frinx-device-topology/src/__generated__/graphql.ts b/packages/frinx-device-topology/src/__generated__/graphql.ts
diff --git a/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx
@@ -1,20 +1,22 @@
 import { chakra } from '@chakra-ui/react';
 import React, { PointerEvent, VoidFunctionComponent } from 'react';
+import { PtpGraphNodeWithDiff } from '../../helpers/topology-helpers';
 import { GraphPtpNodeInterface, PositionsWithGroupsMap } from '../../pages/topology/graph.helpers';
 import { TopologyMode } from '../../state.actions';
-import { GraphEdge, PtpGraphNode } from '../../__generated__/graphql';
+import { GraphEdge } from '../../__generated__/graphql';
 import NodeIconImage from './node-icon-image';
-import { getDeviceNodeTransformProperties, getNodeInterfaceGroups } from './node-icon.helpers';
+import { getDeviceNodeTransformProperties, getNodeBackgroundColor, getNodeInterfaceGroups } from './node-icon.helpers';
 import NodeInterface from './node-interface';
 
 type Props = {
   isPtpDiffSynceShown: boolean;
   ptpDiffSynceIds: string[];
   positions: PositionsWithGroupsMap<GraphPtpNodeInterface>;
   isFocused: boolean;
+  isSelected: boolean;
   isSelectedForGmPath: boolean;
   isGmPath: boolean;
-  node: PtpGraphNode;
+  node: PtpGraphNodeWithDiff;
   topologyMode: TopologyMode;
   selectedEdge: GraphEdge | null;
   onPointerDown: (event: PointerEvent<SVGRectElement>) => void;
@@ -31,6 +33,7 @@ const PtpNodeIcon: VoidFunctionComponent<Props> = ({
   isPtpDiffSynceShown,
   ptpDiffSynceIds,
   isFocused,
+  isSelected,
   isSelectedForGmPath,
   isGmPath,
   node,
@@ -44,7 +47,10 @@ const PtpNodeIcon: VoidFunctionComponent<Props> = ({
   const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
   const { circleDiameter, sizeTransform } = getDeviceNodeTransformProperties('MEDIUM');
 
-  const ptpDiffSynceNodeColor = isPtpDiffSynceShown && ptpDiffSynceIds?.includes(node.nodeId) ? 'red.200' : 'gray.400';
+  const ptpNodeBackgroundColor =
+    isPtpDiffSynceShown && ptpDiffSynceIds?.includes(node.nodeId)
+      ? 'red.200'
+      : getNodeBackgroundColor({ isSelected, change: node.change });
 
   return (
     <G
@@ -65,9 +71,9 @@ const PtpNodeIcon: VoidFunctionComponent<Props> = ({
       <G>
         <Circle
           r={`${circleDiameter / 2}px`}
-          fill={ptpDiffSynceNodeColor}
+          fill={ptpNodeBackgroundColor}
           strokeWidth={1}
-          stroke={ptpDiffSynceNodeColor}
+          stroke={ptpNodeBackgroundColor}
         />
       </G>
       <Text

diff --git a/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx
@@ -1,23 +1,25 @@
 import { chakra } from '@chakra-ui/react';
 import React, { PointerEvent, VoidFunctionComponent } from 'react';
+import { SynceGraphNodeWithDiff } from '../../helpers/topology-helpers';
 import { GraphSynceNodeInterface, PositionsWithGroupsMap } from '../../pages/topology/graph.helpers';
 import { TopologyMode } from '../../state.actions';
-import { GraphEdge, SynceGraphNode } from '../../__generated__/graphql';
+import { GraphEdge } from '../../__generated__/graphql';
 import NodeIconImage from './node-icon-image';
-import { getDeviceNodeTransformProperties, getNodeInterfaceGroups } from './node-icon.helpers';
+import { getDeviceNodeTransformProperties, getNodeInterfaceGroups, getNodeBackgroundColor } from './node-icon.helpers';
 import NodeInterface from './node-interface';
 
 type Props = {
   positions: PositionsWithGroupsMap<GraphSynceNodeInterface>;
   isFocused: boolean;
   isSelectedForGmPath: boolean;
   isGmPath: boolean;
-  node: SynceGraphNode;
+  node: SynceGraphNodeWithDiff;
   topologyMode: TopologyMode;
   onPointerDown: (event: PointerEvent<SVGRectElement>) => void;
   onPointerMove: (event: PointerEvent<SVGRectElement>) => void;
   onPointerUp: (event: PointerEvent<SVGRectElement>) => void;
   selectedEdge: GraphEdge | null;
+  isSelected: boolean;
 };
 
 const G = chakra('g');
@@ -35,6 +37,7 @@ const SynceNodeIcon: VoidFunctionComponent<Props> = ({
   onPointerMove,
   onPointerUp,
   selectedEdge,
+  isSelected,
 }) => {
   const { x, y } = positions.nodes[node.name];
   const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
@@ -57,7 +60,18 @@ const SynceNodeIcon: VoidFunctionComponent<Props> = ({
         transition="all .2s ease-in-out"
       />
       <G>
-        <Circle r={`${circleDiameter / 2}px`} fill="gray.400" strokeWidth={1} stroke="gray.400" />
+        <Circle
+          r={`${circleDiameter / 2}px`}
+          fill={getNodeBackgroundColor({
+            isSelected,
+            change: node.change,
+          })}
+          strokeWidth={1}
+          stroke={getNodeBackgroundColor({
+            isSelected,
+            change: node.change,
+          })}
+        />
       </G>
       <Text
         height={`${circleDiameter / 2}px`}

diff --git a/packages/frinx-device-topology/src/components/version-select/version-select.tsx b/packages/frinx-device-topology/src/components/version-select/version-select.tsx
@@ -3,7 +3,7 @@ import { format } from 'date-fns';
 import React, { ChangeEvent, VoidFunctionComponent } from 'react';
 import { gql, useQuery } from 'urql';
 import { getLocalDateFromUTC } from '@frinx/shared';
-import { setSelectedVersion } from '../../state.actions';
+import { setSelectedVersion, setSynceDiffVisibility } from '../../state.actions';
 import { useStateContext } from '../../state.provider';
 import { VersionsQuery, VersionsQueryVariables } from '../../__generated__/graphql';
 
@@ -26,6 +26,7 @@ const VersionSelect: VoidFunctionComponent = () => {
   const handleSelectVersionChange = (event: ChangeEvent<HTMLSelectElement>) => {
     const { value } = event.currentTarget;
     dispatch(setSelectedVersion(value === 'none' ? null : value));
+    dispatch(setSynceDiffVisibility(false));
   };
 
   if (isFetchingVersions) {
@@ -37,7 +38,7 @@ const VersionSelect: VoidFunctionComponent = () => {
   return (
     <>
       <FormLabel marginBottom={4}>Compare current topology with:</FormLabel>
-      <Select value={selectedVersion || undefined} onChange={handleSelectVersionChange} background="white">
+      <Select value={selectedVersion ?? 'none'} onChange={handleSelectVersionChange} background="white">
         <option value="none">None</option>
         {versions.map((v) => (
           <option key={`version-${v}`} value={v}>