composite global aliasing with boolean switch (#301)

src/components/PolystatPanel.tsx

@@ -50,7 +50,8 @@ export const PolystatPanel: React.FC<Props> = ({ options, data, id, width, heigh
     options.globalThresholdsConfig,
     options.globalUnitFormat,
     options.sortByDirection,
-    options.sortByField
+    options.sortByField,
+    options.compositeGlobalAliasingEnabled,
   );
   const currentTheme = useTheme2();
 
@@ -132,6 +133,7 @@ export const PolystatPanel: React.FC<Props> = ({ options, data, id, width, heigh
           tooltipSecondarySortByField={options.tooltipSecondarySortByField}
           tooltipDisplayMode={options.tooltipDisplayMode}
           tooltipDisplayTextTriggeredEmpty={options.tooltipDisplayTextTriggeredEmpty}
+          compositeGlobalAliasingEnabled={options.compositeGlobalAliasingEnabled}
         />
       </div>
     </div>

src/components/tooltips/Tooltip.test.tsx

@@ -47,7 +47,7 @@ describe('Test Tooltips', () => {
 
   describe('Tooltip Sorting', () => {
     it('returns unsorted metrics', () => {
-      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val);
+      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val, false);
       const props: TooltipProps = {
         data: applied[0],
         valueEnabled: true,
@@ -72,7 +72,7 @@ describe('Test Tooltips', () => {
       expect(rows[5].innerHTML).toContain('C-series');
     });
     it('returns primary sorted metrics: case sensitive ascending', () => {
-      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val);
+      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val, false);
       const props: TooltipProps = {
         data: applied[0],
         valueEnabled: true,
@@ -98,7 +98,7 @@ describe('Test Tooltips', () => {
     });
 
     it('returns primary sorted metrics: case sensitive descending', () => {
-      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val);
+      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val, false);
       const props: TooltipProps = {
         data: applied[0],
         valueEnabled: true,
@@ -125,7 +125,7 @@ describe('Test Tooltips', () => {
 
     it('returns primary sorted metrics: numerical ascending', () => {
       let internalData = [numericalModelA, numericalModelB, numericalModelC];
-      internalData = ApplyComposites([compositeC], internalData, (val) => val);
+      internalData = ApplyComposites([compositeC], internalData, (val) => val, false);
       const props: TooltipProps = {
         data: internalData[0],
         valueEnabled: true,
@@ -152,7 +152,7 @@ describe('Test Tooltips', () => {
 
     it('returns primary sorted metrics: numerical descending', () => {
       let internalData = [numericalModelA, numericalModelB, numericalModelC];
-      internalData = ApplyComposites([compositeC], internalData, (val) => val);
+      internalData = ApplyComposites([compositeC], internalData, (val) => val, false);
       const props: TooltipProps = {
         data: internalData[0],
         valueEnabled: true,
@@ -178,7 +178,7 @@ describe('Test Tooltips', () => {
     });
 
     it('returns primary sorted metrics: case insensitive ascending', () => {
-      const applied = ApplyComposites([compositeA], [casedModelA, casedModelB, casedModelC], (val) => val);
+      const applied = ApplyComposites([compositeA], [casedModelA, casedModelB, casedModelC], (val) => val, false);
       const props: TooltipProps = {
         data: applied[0],
         valueEnabled: true,
@@ -204,7 +204,7 @@ describe('Test Tooltips', () => {
     });
 
     it('returns primary sorted metrics: case insensitive descending', () => {
-      const applied = ApplyComposites([compositeA], [casedModelA, casedModelB, casedModelC], (val) => val);
+      const applied = ApplyComposites([compositeA], [casedModelA, casedModelB, casedModelC], (val) => val, false);
       const props: TooltipProps = {
         data: applied[0],
         valueEnabled: true,
@@ -232,7 +232,7 @@ describe('Test Tooltips', () => {
 
   describe('Tooltip Generation', () => {
     it('returns tooltip for single metric', () => {
-      const applied = ApplyComposites([compositeA], [modelA], (val) => val);
+      const applied = ApplyComposites([compositeA], [modelA], (val) => val, false);
       const props: TooltipProps = {
         data: applied[0],
         valueEnabled: true,
@@ -252,19 +252,19 @@ describe('Test Tooltips', () => {
       expect(screen.getByRole('table')).toMatchSnapshot();
     });
     it('returns tooltip for composite metric with one metric', () => {
-      const applied = ApplyComposites([compositeA], [modelA], (val) => val);
+      const applied = ApplyComposites([compositeA], [modelA], (val) => val, false);
       props.data = applied[0];
       render(<Tooltip {...props} />);
       expect(screen.getByRole('table')).toMatchSnapshot();
     });
     it('returns tooltip for composite metric with two metrics', () => {
-      const applied = ApplyComposites([compositeA], [modelA, modelB], (val) => val);
+      const applied = ApplyComposites([compositeA], [modelA, modelB], (val) => val, false);
       props.data = applied[0];
       render(<Tooltip {...props} />);
       expect(screen.getByRole('table')).toMatchSnapshot();
     });
     it('returns tooltip for composite metric with three metrics', () => {
-      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val);
+      const applied = ApplyComposites([compositeA], [modelA, modelB, modelC], (val) => val, false);
       props.data = applied[0];
       render(<Tooltip {...props} />);
       expect(screen.getByRole('table')).toMatchSnapshot();
@@ -273,7 +273,7 @@ describe('Test Tooltips', () => {
       modelA.thresholdLevel = 0;
       modelB.thresholdLevel = 1;
       modelC.thresholdLevel = 0;
-      const applied = ApplyComposites([compositeB], [modelA, modelB, modelC], (val) => val);
+      const applied = ApplyComposites([compositeB], [modelA, modelB, modelC], (val) => val, false);
       props.data = applied[0];
       // the displayMode comes from the applied composite, in this case there is one triggered metric
       if (applied[0].displayMode) {

src/components/types.ts

@@ -50,6 +50,7 @@ export interface PolystatOptions {
   overrideConfig: {
     overrides: OverrideItemType[];
   };
+  compositeGlobalAliasingEnabled: boolean;
   compositeConfig: {
     animationSpeed: string;
     composites: CompositeItemType[];

src/data/composite_processor.test.ts

@@ -120,7 +120,7 @@ describe('Composite Processor', () => {
         };
         return value;
       };
-      const applied = ApplyComposites([compositeA], [modelA, modelB], replacer1);
+      const applied = ApplyComposites([compositeA], [modelA, modelB], replacer1, false);
       console.log(JSON.stringify(applied));
       expect(applied.length).toBe(1);
     });

src/data/composite_processor.ts

@@ -6,6 +6,7 @@ import { stringToJsRegex, escapeStringForRegex, ScopedVars, InterpolateFunction,
 import { getTemplateSrv } from '@grafana/runtime';
 import { CompositeItemType, CompositeMetric } from '../components/composites/types';
 import { CUSTOM_SPLIT_DELIMITER } from './types';
+import { ApplyGlobalRegexPattern } from './processor';
 
 export const resolveCompositeTemplates = (
   metricComposites: CompositeItemType[],
@@ -127,7 +128,9 @@ const shallowClone = (item: PolystatModel): PolystatModel => {
 export const ApplyComposites = (
   composites: CompositeItemType[],
   data: PolystatModel[],
-  replaceVariables: InterpolateFunction
+  replaceVariables: InterpolateFunction,
+  compositesGlobalAliasingEnabled: boolean,
+  globalRegexPattern?: string,
 ): PolystatModel[] => {
   if (!composites) {
     return data;
@@ -234,7 +237,11 @@ export const ApplyComposites = (
     }
   }
   // now merge the clonedComposites into data
-  Array.prototype.push.apply(data, clonedComposites);
+  if(compositesGlobalAliasingEnabled && globalRegexPattern) {
+    Array.prototype.push.apply(data, ApplyGlobalRegexPattern(clonedComposites, globalRegexPattern))
+  } else {
+    Array.prototype.push.apply(data, clonedComposites);
+  }
   // remove the keepMetrics from the filteredMetrics list
   // these have been marked by at least one composite to be displayed
   for (let i = 0; i < keepMetrics.length; i++) {

src/data/processor.ts

@@ -55,7 +55,8 @@ export function ProcessDataFrames(
   globalThresholds: PolystatThreshold[],
   globalUnitFormat: string,
   sortByDirection: number,
-  sortByField: string
+  sortByField: string,
+  compositesGlobalAliasingEnabled: boolean,
 ): PolystatModel[] {
 
   // check if data contains a field called Time of type time
@@ -82,7 +83,7 @@ export function ProcessDataFrames(
   );
   // composites
   if (compositesEnabled) {
-    internalData = ApplyComposites(composites, internalData, replaceVariables);
+    internalData = ApplyComposites(composites, internalData, replaceVariables, compositesGlobalAliasingEnabled, globalRegexPattern);
   }
   // clickthroughs
   internalData = ApplyGlobalClickThrough(

src/migrations.ts

@@ -209,6 +209,7 @@ export const migrateDefaults = (angular: AngularPolystatOptions) => {
     overrideConfig: {
       overrides: [],
     },
+    compositeGlobalAliasingEnabled: false,
     compositeConfig: {
       animationSpeed: '',
       composites: [],

src/module.ts

@@ -493,6 +493,14 @@ export const plugin = new PanelPlugin<PolystatOptions>(PolystatPanel)
         },
         category: ['Overrides'],
       })
+      // allow enabling / disabling global aliasing for composite hexagon names
+      .addBooleanSwitch({
+        name: 'Composite Global Aliasing',
+        path: 'compositeGlobalAliasingEnabled',
+        defaultValue: false,
+        description: 'Enable / Disable composite global aliasing',
+        category: ['Composites'],
+      })
       .addCustomEditor({
         name: 'Composites',
         id: 'compositeConfig',