Icon Mapping is now divided into external and internal icons

Author: mbrill-nt

src/options/DefaultSettings.tsx

@@ -45,6 +45,9 @@ export const DefaultSettings: PanelSettings = {
       pattern: 'spok|star trek',
       filename: 'star_trek',
     },
+  ],
+
+  externalIcons: [
     {
       pattern: 'web',
       filename: 'web',

src/options/iconMapping/IconMapping.tsx

@@ -42,39 +42,40 @@ export class IconMapping extends React.PureComponent<Props, State> {
   }
 
   addMapping() {
-    const { icons } = this.state.context.options;
     const { path } = this.state.item;
+    const icons = this.state.context.options[path];
     icons.push({ pattern: 'my-type', filename: 'default' });
     this.state.onChange.call(path, icons);
   }
 
   removeMapping(index: number) {
-    const { icons } = this.state.context.options;
     const { path } = this.state.item;
+    const icons = this.state.context.options[path];
     icons.splice(index, 1);
     this.state.onChange.call(path, icons);
   }
 
   setPatternValue(event: React.ChangeEvent<HTMLInputElement>, index: number) {
-    const { icons } = this.state.context.options;
     const { path } = this.state.item;
+    const icons = this.state.context.options[path];
     icons[index].pattern = event.currentTarget.value;
     this.state.onChange.call(path, icons);
   }
 
   setFileNameValue(event: ChangeEvent<HTMLSelectElement>, index: number) {
-    const { icons } = this.state.context.options;
     const { path } = this.state.item;
+    const icons = this.state.context.options[path];
     icons[index].filename = event.currentTarget.value.toString();
     this.props.onChange.call(path, icons);
   }
 
   render() {
-    var { icons } = this.state.context.options;
+    const { path } = this.state.item;
     const { icons: iconNames } = this.state;
+    var icons = this.state.context.options[path];
     if (icons === undefined) {
       icons = this.state.item.defaultValue;
-      this.state.context.options.icons = this.state.item.defaultValue;
+      this.state.context.options[path] = this.state.item.defaultValue;
     }
 
     return (

src/options/options.tsx

@@ -229,10 +229,26 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
         id: 'iconMapping',
         editor: IconMapping,
         name: '',
+        description:
+          'This setting controls which images should be mapped to your directly monitored nodes. ' +
+          'The node names are matched by the regex pattern provided in the "Target Name(Regex) column.',
         category: ['Icon Mapping'],
         defaultValue: DefaultSettings.icons,
       })
 
+      //External Icon Mapping
+      .addCustomEditor({
+        path: 'externalIcons',
+        id: 'externalIconMapping',
+        editor: IconMapping,
+        name: '',
+        description:
+          'This setting controls which images should be mapped to the external nodes. ' +
+          'The given type column is matched by the regex pattern provided in the "Target Name(Regex) column.',
+        category: ['External Icon Mapping'],
+        defaultValue: DefaultSettings.externalIcons,
+      })
+
       //Tracing Drilldown
       .addTextInput({
         path: 'drillDownLink',

src/panel/asset_utils.tsx

@@ -1,13 +1,13 @@
 import { find } from 'lodash';
-import { ExternalIconResource } from 'types';
+import { IconResource } from 'types';
 
 export default {
   getAssetUrl(assetName: string) {
     var baseUrl = 'public/plugins/novatec-sdg-panel';
     return baseUrl + '/assets/' + assetName;
   },
 
-  getTypeSymbol(type: string, externalIcons: ExternalIconResource[], resolveName = true) {
+  getTypeSymbol(type: string, externalIcons: IconResource[], resolveName = true) {
     if (!type) {
       return this.getAssetUrl('default.png');
     }

src/panel/canvas/graph_canvas.ts

@@ -124,7 +124,8 @@ export default class CanvasDrawer {
 
   _getImageAsset(assetName: string, resolveName = true) {
     if (!_.has(this.imageAssets, assetName)) {
-      const assetUrl = assetUtils.getTypeSymbol(assetName, this.controller.getSettings(true).icons, resolveName);
+      const { externalIcons } = this.controller.getSettings(true);
+      const assetUrl = assetUtils.getTypeSymbol(assetName, externalIcons, resolveName);
       this._loadImage(assetUrl, assetName);
     }
 
@@ -538,7 +539,7 @@ export default class CanvasDrawer {
     });
 
     if (mapping) {
-      const image = this._getAsset(mapping.filename, 'service_icons/' + mapping.filename + '.png');
+      const image = this._getAsset(mapping.filename, 'icons/' + mapping.filename + '.png');
       if (image != null) {
         const cX = node.position().x;
         const cY = node.position().y;

src/types.tsx

@@ -8,6 +8,7 @@ export interface PanelSettings {
   showDebugInformation: boolean;
   showConnectionStats: boolean;
   icons: IconResource[];
+  externalIcons: IconResource[];
   dataMapping: DataMapping;
   drillDownLink: string;
   showBaselines: boolean;
@@ -45,11 +46,6 @@ export interface IconResource {
   filename: string;
 }
 
-export interface ExternalIconResource {
-  pattern: string;
-  filename: string;
-}
-
 export interface QueryResponseColumn {
   type?: string;
   text: string;