ThreadMap: Added advanced Filter

Author: simonros123

Live-Tracing/grafana-plugins/ThreadMap-panel/src/ThreadMap.tsx

@@ -57,6 +57,11 @@ export const ThreadMap: React.FC<ThreadMapPanelProps> = ({ options, data, width,
     }
     let minValLength = (minVal.toString().length) * 11
 
+    //Call Filter
+    if(options.UseFileSystemFinder) {
+      FileSystemFinder();
+    }
+
     drawThreadMap()
 
     //functions
@@ -86,7 +91,7 @@ export const ThreadMap: React.FC<ThreadMapPanelProps> = ({ options, data, width,
       }
       return(Colour)
     }
-    
+
     function ColourAssignment(Colour: any, lDatalength: any) {
       let ctrTpP = 0
       var ThreadHeatValue: any[] = []
@@ -247,12 +252,22 @@ export const ThreadMap: React.FC<ThreadMapPanelProps> = ({ options, data, width,
           cy: 140,
           r: 6,
           colour: Colour,
-          class: "Thread"
+          class: "Thread",
+          stroke: ''
         }
       )
     }
 
-function drawThreadMap() {
+    function FileSystemFinder() {
+      for (let i = 0; i < MapData.length; i++) {
+        if (MapData[i].affiliated.includes(options.FileSystemFinder)) {
+          MapData[i].stroke = 'pink';
+        }       
+      }
+      console.log(MapData)
+    }
+
+    function drawThreadMap() {
   const svgTM = d3.select('#ThreadMapMain');
   const backgroundTooltip = d3
       .select('#ThreadMapMain')
@@ -315,6 +330,11 @@ function drawThreadMap() {
         .style('fill', function (d: any) {
           return d.colour;
         })
+        .attr('stroke', function (d: any) {
+          return d.stroke;     
+        })
+        .attr('stroke-width', 2)
+
         .on('mouseover', function (d) {
           d3.select(this).transition().duration(50).attr('opacity', '.85');
           backgroundTooltip.transition().duration(50).style('opacity', 1);
@@ -414,11 +434,24 @@ function drawThreadMap() {
           ProcessIDForceGraph
           .attr('ProcessID', d.name)
           //Remove old highlight
-          d3.selectAll('circle').attr('stroke', null);
+          d3.selectAll('circle')
+          .filter(function() {return d3.select(this).attr('r') === '8';})
+          .attr('stroke', null);
           //Add Highliting
           d3.select(this).attr('stroke', 'blue').attr('stroke-width', 2);
           }
         });
+        //Highlight Threads with filtered Filenames
+        //Remove old highlight
+        d3.selectAll('circle')
+          .filter(function() {return d3.select(this).attr('r') === '6';})
+          .attr('stroke', null);
+        d3.selectAll('circle')
+        .filter(function() {return d3.select(this).attr('r') === '6';})
+        .attr('stroke', function (d: any) {
+            return d.stroke;     
+        })
+        .attr('stroke-width', 2)
         //Style MinMax Display
         //remove old min max
         d3.select('#minValueText').remove();

Live-Tracing/grafana-plugins/ThreadMap-panel/src/module.ts

@@ -44,5 +44,18 @@ export const plugin = new PanelPlugin<PanelOptions>(ThreadMap).setPanelOptions(b
     category,
     showIf: (config) => config.UseMinMaxBoolean
     })
+    .addBooleanSwitch({
+      path: 'UseFileSystemFinder',
+      name: 'Activate FileSystemFinder',
+      defaultValue: defaultPanelOptions.UseFileSystemFinder,
+      category,
+    })
+    .addTextInput({
+      path: 'FileSystemFinder',
+      name: 'FileSystemFinder:',
+      description: '',
+      defaultValue: defaultPanelOptions.FileSystemFinder,
+      category,
+    })
 
 })

Live-Tracing/grafana-plugins/ThreadMap-panel/src/options.ts

@@ -3,8 +3,10 @@
 //Options to Panel
 export interface PanelOptions {
     UseMinMaxBoolean: any;
-    ThreadMapColor: { min: any; max: any; }
-    SortThreadMapBy: [string, string, string]
+    ThreadMapColor: { min: any; max: any; };
+    SortThreadMapBy: [string, string, string];
+    UseFileSystemFinder: any;
+    FileSystemFinder: string;
 }
 
 export const defaultPanelOptions: PanelOptions = {
@@ -17,5 +19,7 @@ export const defaultPanelOptions: PanelOptions = {
         'default',
         'MaxBytes',
         'Filesystem'
-    ]
+    ],
+    UseFileSystemFinder: false,
+    FileSystemFinder: 'pfs',
 };