Dependency Plugin Options

This PR allows for users to edit the panel and choose to group pods by labels or not. The user can also change the color of the boxes to red, yellow, green, or blue. Fixes issue #164 Signed-off-by: Dhruv-J <dhruvj@vmware.com>
antrea-io · Apr 17, 2023 · 40bcf48 · 40bcf48
1 parent 383b706
commit 40bcf48
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 14 deletions.
diff --git a/build/charts/theia/README.md b/build/charts/theia/README.md
@@ -52,7 +52,7 @@ Kubernetes: `>= 1.16.0-0`
 | grafana.enable | bool | `true` | Determine whether to install Grafana. It is used as a data visualization and monitoring tool.   |
 | grafana.homeDashboard | string | `"homepage.json"` | Default home dashboard. |
 | grafana.image | object | `{"pullPolicy":"IfNotPresent","repository":"projects.registry.vmware.com/antrea/theia-grafana","tag":"8.3.3"}` | Container image used by Grafana. |
-| grafana.installPlugins | list | `["https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-sankey-plugin-1.0.2.zip;theia-grafana-sankey-plugin","https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-chord-plugin-1.0.1.zip;theia-grafana-chord-plugin","https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-dependency-plugin-1.0.1.zip;theia-grafana-dependency-plugin","grafana-clickhouse-datasource 1.0.1"]` | Grafana plugins to install. |
+| grafana.installPlugins | list | `["https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-sankey-plugin-1.0.2.zip;theia-grafana-sankey-plugin","https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-chord-plugin-1.0.1.zip;theia-grafana-chord-plugin","https://github.com/Dhruv-J/grafana-dependency-plugin/archive/refs/tags/pre2.zip;theia-grafana-dependency-plugin","grafana-clickhouse-datasource 1.0.1"]` | Grafana plugins to install. |
 | grafana.log | object | `{"daily_rotate":"true","level":"info","log_rotate":"true","max_days":"7","max_lines":"1000000","max_size_shift":"27","mode":"console file"}` | Grafana logging options. |
 | grafana.log.daily_rotate | string | `"true"` | Enable daily rotation of files, valid options are false or true. Default is true. Only applicable when “file” used in [log] mode. |
 | grafana.log.level | string | `"info"` | Logging level. Options are “debug”, “info”, “warn”, “error”, and “critical”. Default is info. |

diff --git a/build/charts/theia/values.yaml b/build/charts/theia/values.yaml
@@ -182,7 +182,7 @@ grafana:
   installPlugins:
     - https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-sankey-plugin-1.0.2.zip;theia-grafana-sankey-plugin
     - https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-chord-plugin-1.0.1.zip;theia-grafana-chord-plugin
-    - https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-dependency-plugin-1.0.1.zip;theia-grafana-dependency-plugin
+    - https://github.com/Dhruv-J/grafana-dependency-plugin/archive/refs/tags/pre2.zip;theia-grafana-dependency-plugin
     - grafana-clickhouse-datasource 1.0.1
   # -- The dashboards to be displayed in Grafana UI. The files must be put under
   # provisioning/dashboards.

diff --git a/build/yamls/flow-visibility.yml b/build/yamls/flow-visibility.yml
@@ -6366,7 +6366,7 @@ spec:
       containers:
       - env:
         - name: GF_INSTALL_PLUGINS
-          value: https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-sankey-plugin-1.0.2.zip;theia-grafana-sankey-plugin,https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-chord-plugin-1.0.1.zip;theia-grafana-chord-plugin,https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-dependency-plugin-1.0.1.zip;theia-grafana-dependency-plugin,grafana-clickhouse-datasource
+          value: https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-sankey-plugin-1.0.2.zip;theia-grafana-sankey-plugin,https://downloads.antrea.io/artifacts/grafana-custom-plugins/theia-grafana-chord-plugin-1.0.1.zip;theia-grafana-chord-plugin,https://github.com/Dhruv-J/grafana-dependency-plugin/archive/refs/tags/pre2.zip;theia-grafana-dependency-plugin,grafana-clickhouse-datasource
             1.0.1
         - name: CLICKHOUSE_USERNAME
           valueFrom:

diff --git a/plugins/grafana-custom-plugins/grafana-dependency-plugin/CHANGELOG.md b/plugins/grafana-custom-plugins/grafana-dependency-plugin/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.2 - 04-xx-2023
+
+Added label view toggle and color choice.
+
 ## 1.0.1 - 04-13-2023
 
 Added theming for dependency plugin.

diff --git a/plugins/grafana-custom-plugins/grafana-dependency-plugin/src/DependencyPanel.tsx b/plugins/grafana-custom-plugins/grafana-dependency-plugin/src/DependencyPanel.tsx
@@ -19,8 +19,10 @@ export const DependencyPanel: React.FC<Props> = ({ options, data, width, height
   const theme = useTheme2();
   const frame = data.series[0];
   const sourcePodNames = frame.fields.find((field) => field.name === 'sourcePodName');
+  const sourcePodLabels = frame.fields.find((field) => field.name === 'sourcePodLabels');
   const sourceNodeNames = frame.fields.find((field) => field.name === 'sourceNodeName');
   const destinationPodNames = frame.fields.find((field) => field.name === 'destinationPodName');
+  const destinationPodLabels = frame.fields.find((field) => field.name === 'destinationPodLabels');
   const destinationNodeNames = frame.fields.find((field) => field.name === 'destinationNodeName');
   const destinationServicePortNames = frame.fields.find((field) => field.name === 'destinationServicePortName');
   const octetDeltaCounts = frame.fields.find((field) => field.name === 'octetDeltaCount');
@@ -29,12 +31,27 @@ export const DependencyPanel: React.FC<Props> = ({ options, data, width, height
   let srcToDestMap = new Map<string, Map<string, number>>();
 
   let graphString = 'graph LR;\n';
+  let boxColor;
+  switch(options.color) {
+    case 'red':
+      boxColor = theme.colors.error.main;
+      break;
+    case 'yellow':
+      boxColor = theme.colors.warning.main;
+      break;
+    case 'green':
+      boxColor = theme.colors.success.main;
+      break;
+    case 'blue':
+      boxColor = theme.colors.primary.main;
+      break;
+  }
 
   mermaid.initialize({
     startOnLoad: true,
     theme: 'base',
     themeVariables: {
-      primaryColor: theme.colors.warning.main,
+      primaryColor: boxColor,
       secondaryColor: theme.colors.background.canvas,
       tertiaryColor: theme.colors.background.canvas,
       primaryTextColor: theme.colors.text.maxContrast,
@@ -44,26 +61,49 @@ export const DependencyPanel: React.FC<Props> = ({ options, data, width, height
 
   for (let i = 0; i < frame.length; i++) {
     const sourcePodName = sourcePodNames?.values.get(i);
+    const sourcePodLabel = sourcePodLabels?.values.get(i);
     const sourceNodeName = sourceNodeNames?.values.get(i);
     const destinationPodName = destinationPodNames?.values.get(i);
+    const destinationPodLabel = destinationPodLabels?.values.get(i);
     const destinationNodeName = destinationNodeNames?.values.get(i);
     const destinationServicePortName = destinationServicePortNames?.values.get(i);
     const octetDeltaCount = octetDeltaCounts?.values.get(i);
 
+    function getName(groupByLabel: boolean, source: boolean, labelJSON: string) {
+      if(!groupByLabel || labelJSON === undefined) {
+        return source ? sourcePodName : destinationPodName;
+      }
+      console.log('attempting to log JSON: '+labelJSON);
+      let labels = JSON.parse(labelJSON);
+      if(labels['app'] !== undefined) {
+        return labels['app'];
+      } else if(labels['k8s-app'] !== undefined) {
+        return labels['k8s-app'];
+      }
+      return sourcePodName;
+    }
+
+    // TODO add button or switch to set groupByLabelVariable
+    let groupByLabel = options.groupByLabel;
+    console.log('new label: '+groupByLabel);
+    let srcName = getName(groupByLabel, true, sourcePodLabel);
+    let dstName = getName(groupByLabel, false, destinationPodLabel);
+
     // determine which nodes contain which pods
-    if (nodeToPodMap.has(sourceNodeName) && !nodeToPodMap.get(sourceNodeName)?.includes(sourcePodName)) {
-      nodeToPodMap.get(sourceNodeName)?.push(sourcePodName);
+    if (nodeToPodMap.has(sourceNodeName) && !nodeToPodMap.get(sourceNodeName)?.includes(srcName)) {
+      nodeToPodMap.get(sourceNodeName)?.push(srcName);
     } else if (!nodeToPodMap.has(sourceNodeName)) {
-      nodeToPodMap.set(sourceNodeName, [sourcePodName]);
+      nodeToPodMap.set(sourceNodeName, [srcName]);
     }
-    if (nodeToPodMap.has(destinationNodeName) && !nodeToPodMap.get(destinationNodeName)?.includes(destinationPodName)) {
-      nodeToPodMap.get(destinationNodeName)?.push(destinationPodName);
+    if (nodeToPodMap.has(destinationNodeName) && !nodeToPodMap.get(destinationNodeName)?.includes(dstName)) {
+      nodeToPodMap.get(destinationNodeName)?.push(dstName);
     } else if (!nodeToPodMap.has(destinationNodeName)) {
-      nodeToPodMap.set(destinationNodeName, [destinationPodName]);
+      nodeToPodMap.set(destinationNodeName, [dstName]);
     }
+
     // determine how much traffic is being sent
-    let pod_src = sourceNodeName+'_pod_'+sourcePodName;
-    let pod_dst = destinationNodeName+'_pod_'+destinationPodName;
+    let pod_src = sourceNodeName+'_pod_'+srcName;
+    let pod_dst = destinationNodeName+'_pod_'+dstName;
     let svc_dst = 'svc_'+destinationServicePortName;
     let dests = new Map<string, number>();
     dests.set(pod_dst, octetDeltaCount);

diff --git a/plugins/grafana-custom-plugins/grafana-dependency-plugin/src/module.ts b/plugins/grafana-custom-plugins/grafana-dependency-plugin/src/module.ts
@@ -2,4 +2,32 @@ import { PanelPlugin } from '@grafana/data';
 import { DependencyOptions } from './types';
 import { DependencyPanel } from './DependencyPanel';
 
-export const plugin = new PanelPlugin<DependencyOptions>(DependencyPanel).setPanelOptions((builder) => builder);
+export const plugin = new PanelPlugin<DependencyOptions>(DependencyPanel).setPanelOptions((builder) => builder.addBooleanSwitch({
+    path: 'groupByLabel',
+    name: 'Group By Label',
+    defaultValue: false,
+}).addRadio({
+    path: 'color',
+    name: 'Box Color',
+    defaultValue: 'yellow',
+    settings: {
+        options: [
+            {
+                value: 'red',
+                label: 'Red',
+            },
+            {
+                value: 'yellow',
+                label: 'Yellow',
+            },
+            {
+                value: 'green',
+                label: 'Green',
+            },
+            {
+                value: 'blue',
+                label: 'Blue',
+            }
+        ]
+    },
+}));
diff --git a/plugins/grafana-custom-plugins/grafana-dependency-plugin/src/types.ts b/plugins/grafana-custom-plugins/grafana-dependency-plugin/src/types.ts
@@ -1 +1,6 @@
-export interface DependencyOptions {}
+type BoxColor = 'red' | 'yellow' | 'green' | 'blue'
+
+export interface DependencyOptions {
+    groupByLabel: boolean;
+    color: BoxColor;
+}