dark theme + unknown square shape

netobserv · Nov 16, 2022 · c325ddb · c325ddb
1 parent 9e4d237
commit c325ddb
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 39 deletions.
diff --git a/web/src/components/netflow-topology/components/edge.tsx b/web/src/components/netflow-topology/components/edge.tsx
@@ -42,6 +42,7 @@ type BaseEdgeProps = {
   shadowed?: boolean;
   filtered?: boolean;
   highlighted?: boolean;
+  isDark?: boolean;
   tag?: string;
   tagClass?: string;
   tagStatus?: NodeStatus;
@@ -71,6 +72,7 @@ const BaseEdge: React.FC<BaseEdgeProps> = ({
   shadowed,
   filtered,
   highlighted,
+  isDark,
   tag,
   tagClass,
   tagStatus,
@@ -106,7 +108,8 @@ const BaseEdge: React.FC<BaseEdgeProps> = ({
     'topology',
     shadowed && 'shadowed',
     filtered && 'edge-filtered',
-    highlighted && 'edge-highlighted'
+    highlighted && 'edge-highlighted',
+    isDark && 'dark'
   );
 
   const edgeAnimationDuration = animationDuration ?? getEdgeAnimationDuration(element.getEdgeAnimationSpeed());

diff --git a/web/src/components/netflow-topology/components/node.tsx b/web/src/components/netflow-topology/components/node.tsx
@@ -65,6 +65,7 @@ type BaseNodeProps = {
   shadowed?: boolean;
   filtered?: boolean;
   highlighted?: boolean;
+  isDark?: boolean;
   label?: string; // Defaults to element.getLabel()
   secondaryLabel?: string;
   showLabel?: boolean; // Defaults to true
@@ -115,6 +116,7 @@ const BaseNode: React.FunctionComponent<BaseNodeProps> = ({
   shadowed,
   filtered,
   highlighted,
+  isDark,
   secondaryLabel,
   labelClassName,
   labelPosition,
@@ -219,7 +221,8 @@ const BaseNode: React.FunctionComponent<BaseNodeProps> = ({
     'topology',
     shadowed && 'shadowed',
     filtered && 'node-filtered',
-    highlighted && 'node-highlighted'
+    highlighted && 'node-highlighted',
+    isDark && 'dark'
   );
 
   const backgroundClassName = css(

diff --git a/web/src/components/netflow-topology/netflow-topology.css b/web/src/components/netflow-topology/netflow-topology.css
@@ -44,28 +44,56 @@ g.netobserv.topology.shadowed {
   opacity: 0.5;
 }
 
-g.netobserv.topology.node-filtered>g>ellipse {
+g.netobserv.topology.pf-topology__edge>.pf-topology__edge__background {
+  stroke-width: 6px;
+}
+
+g.netobserv.topology.pf-topology__edge.dark>.pf-topology__edge__tag>.pf-topology__edge__tag__background{
+  fill: #E0E0E0;
+}
+
+g.netobserv.topology.pf-topology__edge>.pf-topology__edge__link,
+g.netobserv.topology.pf-topology__edge>.pf-topology-connector-arrow {
+  stroke: #6A6E73;
+  fill: #E0E0E0;
+}
+
+g.netobserv.topology.pf-topology__edge.dark>.pf-topology__edge__link,
+g.netobserv.topology.pf-topology__edge.dark>.pf-topology-connector-arrow {
+  stroke: #E0E0E0;
+  fill: #6A6E73;
+}
+
+g.netobserv.topology.node-filtered>g>.pf-topology__node__background {
   stroke: #EF9234;
   stroke-width: 2px;
 }
 
-g.netobserv.topology.edge-filtered>.pf-topology__edge__link,
-g.netobserv.topology.edge-filtered>.pf-topology-connector-arrow {
+g.netobserv.topology.pf-topology__edge.edge-filtered>.pf-topology__edge__link,
+g.netobserv.topology.pf-topology__edge.edge-filtered>.pf-topology-connector-arrow,
+g.netobserv.topology.pf-topology__edge.edge-filtered.dark>.pf-topology__edge__link,
+g.netobserv.topology.pf-topology__edge.edge-filtered.dark>.pf-topology-connector-arrow {
   stroke: #EF9234;
   fill: #773D00;
 }
 
-g.netobserv.topology>g>ellipse {
+g.netobserv.topology>g>.pf-topology__node__background {
   fill: #FFFFFF;
 }
 
-g.netobserv.topology.node-highlighted>g>ellipse {
+g.netobserv.topology.dark>g>.pf-topology__node__background {
+  fill: #26292D;
+}
+
+g.netobserv.topology.node-highlighted>g>.pf-topology__node__background {
   stroke: #0066CC;
   stroke-width: 2px;
 }
 
-g.netobserv.topology.edge-highlighted>.pf-topology__edge__link,
-g.netobserv.topology.edge-highlighted>.pf-topology-connector-arrow {
+g.netobserv.topology.pf-topology__edge.edge-highlighted>.pf-topology__edge__link,
+g.netobserv.topology.pf-topology__edge.edge-highlighted>.pf-topology-connector-arrow,
+g.netobserv.topology.pf-topology__edge.edge-highlighted.dark>.pf-topology__edge__link,
+g.netobserv.topology.pf-topology__edge.edge-highlighted.dark>.pf-topology-connector-arrow {
   stroke: #0066CC;
   fill: #002952;
 }
@@ -88,6 +116,6 @@ g.netobserv.pf-topology__group.pf-m-selected>.pf-topology__group__background {
   border: none;
 }
 
-.topology-icon > text {
+.topology-icon>text {
   fill: white;
 }
diff --git a/web/src/components/netflow-topology/netflow-topology.tsx b/web/src/components/netflow-topology/netflow-topology.tsx
@@ -72,6 +72,7 @@ export const TopologyContent: React.FC<{
   toggleTopologyOptions: () => void;
   selected: GraphElementPeer | undefined;
   onSelect: (e: GraphElementPeer | undefined) => void;
+  isDark?: boolean;
 }> = ({
   k8sModels,
   range,
@@ -86,7 +87,8 @@ export const TopologyContent: React.FC<{
   setFilters,
   toggleTopologyOptions,
   selected,
-  onSelect
+  onSelect,
+  isDark
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const controller = useVisualizationController();
@@ -327,7 +329,8 @@ export const TopologyContent: React.FC<{
       highlightedId,
       filters,
       t,
-      k8sModels
+      k8sModels,
+      isDark
     );
     const allIds = [...(updatedModel.nodes || []), ...(updatedModel.edges || [])].map(item => item.id);
     controller.getElements().forEach(e => {
@@ -365,7 +368,8 @@ export const TopologyContent: React.FC<{
     searchValue,
     filters,
     t,
-    k8sModels
+    k8sModels,
+    isDark
   ]);
 
   //update model on layout / metrics / filters change
@@ -565,6 +569,7 @@ export const NetflowTopology: React.FC<{
   toggleTopologyOptions: () => void;
   selected: GraphElementPeer | undefined;
   onSelect: (e: GraphElementPeer | undefined) => void;
+  isDark?: boolean;
 }> = ({
   loading,
   k8sModels,
@@ -581,7 +586,8 @@ export const NetflowTopology: React.FC<{
   setFilters,
   toggleTopologyOptions,
   selected,
-  onSelect
+  onSelect,
+  isDark
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const [controller, setController] = React.useState<Visualization>();
@@ -622,6 +628,7 @@ export const NetflowTopology: React.FC<{
           toggleTopologyOptions={toggleTopologyOptions}
           selected={selected}
           onSelect={onSelect}
+          isDark={isDark}
         />
       </VisualizationProvider>
     );

diff --git a/web/src/components/netflow-topology/styles/styleNode.tsx b/web/src/components/netflow-topology/styles/styleNode.tsx
@@ -82,35 +82,17 @@ const getTypeIcon = (resourceKind?: string): React.ComponentClass<any, any> => {
   }
 };
 
-const getTypeIconColor = (resourceKind?: string): string => {
-  switch (resourceKind) {
-    case 'Service':
-    case 'Pod':
-    case 'Namespace':
-    case 'Node':
-    case 'CatalogSource':
-    case 'DaemonSet':
-    case 'Deployment':
-    case 'StatefulSet':
-    case 'Job':
-      return '#393F44';
-    default:
-      return '#c9190b';
-  }
-};
-
 const renderIcon = (data: Decorated<NodeData>, element: NodePeer): React.ReactNode => {
   const { width, height } = element.getDimensions();
   const shape = element.getNodeShape();
   const iconSize =
     (shape === NodeShape.trapezoid ? width : Math.min(width, height)) -
     (shape === NodeShape.stadium ? 5 : ICON_PADDING) * 2;
   const Component = getTypeIcon(data.resourceKind);
-  const color = getTypeIconColor(data.resourceKind);
 
   return (
     <g transform={`translate(${(width - iconSize) / 2}, ${(height - iconSize) / 2})`}>
-      <Component style={{ fill: color }} width={iconSize} height={iconSize} />
+      <Component width={iconSize} height={iconSize} />
     </g>
   );
 };

diff --git a/web/src/components/netflow-traffic.tsx b/web/src/components/netflow-traffic.tsx
@@ -792,6 +792,7 @@ export const NetflowTraffic: React.FC<{
             toggleTopologyOptions={() => onToggleTopologyOptions(!isShowTopologyOptions)}
             selected={selectedElement}
             onSelect={onElementSelect}
+            isDark={isDarkTheme}
           />
         );
         break;

diff --git a/web/src/model/topology.ts b/web/src/model/topology.ts
@@ -218,7 +218,8 @@ export const generateNode = (
   highlightedId: string,
   filters: Filter[],
   t: TFunction,
-  k8sModels: { [key: string]: K8sModel }
+  k8sModels: { [key: string]: K8sModel },
+  isDark?: boolean
 ): NodeModel => {
   const id = getTopologyNodeId(data.resourceKind, data.namespace, data.name, data.addr, data.host);
   const label = data.displayName || data.name || data.addr || ''; // should never be empty
@@ -241,14 +242,15 @@ export const generateNode = (
     label,
     width: DEFAULT_NODE_SIZE,
     height: DEFAULT_NODE_SIZE,
-    shape: NodeShape.ellipse,
+    shape: k8sModel ? NodeShape.ellipse : NodeShape.rect,
     status: NodeStatus.default,
     style: { padding: 20 },
     data: {
       ...data,
       shadowed,
       filtered,
       highlighted,
+      isDark,
       isFiltered: isElementFiltered(data, filters, t),
       labelPosition: LabelPosition.bottom,
       badge: k8sModel?.abbr,
@@ -317,7 +319,8 @@ export const generateEdge = (
   options: TopologyOptions,
   shadowed = false,
   filtered = false,
-  highlightedId: string
+  highlightedId: string,
+  isDark?: boolean
 ): EdgeModel => {
   const id = `${sourceId}.${targetId}`;
 
@@ -335,6 +338,7 @@ export const generateEdge = (
       shadowed,
       filtered,
       highlighted,
+      isDark,
       //edges are directed from src to dst. It will become bidirectionnal if inverted pair is found
       startTerminalType: EdgeTerminalType.none,
       startTerminalStatus: NodeStatus.default,
@@ -355,7 +359,8 @@ export const generateDataModel = (
   highlightedId: string,
   filters: Filter[],
   t: TFunction,
-  k8sModels: { [key: string]: K8sModel }
+  k8sModels: { [key: string]: K8sModel },
+  isDark?: boolean
 ): Model => {
   let nodes: NodeModel[] = [];
   const edges: EdgeModel[] = [];
@@ -384,6 +389,7 @@ export const generateDataModel = (
           name,
           nodeType,
           resourceKind,
+          isDark,
           parentKind: parentData?.resourceKind,
           parentName: parentData?.name,
           labelPosition: LabelPosition.bottom,
@@ -420,7 +426,7 @@ export const generateDataModel = (
         n.data.host === data.host
     );
     if (!node) {
-      node = generateNode(data, opts, searchValue, highlightedId, filters, t, k8sModels);
+      node = generateNode(data, opts, searchValue, highlightedId, filters, t, k8sModels, isDark);
       nodes.push(node);
     }
 
@@ -446,14 +452,15 @@ export const generateDataModel = (
         ...edge.data,
         shadowed,
         filtered,
+        isDark,
         //edges are directed from src to dst. It will become bidirectionnal if inverted pair is found
         startTerminalType: edge.data.sourceId !== sourceId ? EdgeTerminalType.directional : edge.data.startTerminalType,
         tag: getEdgeTag(stat, options),
         tagStatus: getTagStatus(stat, options.maxEdgeStat),
         bps: stat
       };
     } else {
-      edge = generateEdge(sourceId, targetId, stat, opts, shadowed, filtered, highlightedId);
+      edge = generateEdge(sourceId, targetId, stat, opts, shadowed, filtered, highlightedId, isDark);
       edges.push(edge);
     }