feat: add custom label functionality (#109)

* feat: add custom label functionality

* feat: add custom label component

Author: Kav91

nerdlets/entity-mode/components/observability-map.js

@@ -53,7 +53,8 @@ function ObservabilityMap(props) {
         highlightStrokeColor: 'blue',
         fontSize: 16,
         highlightFontSize: 16,
-        labelProperty: node => cleanNodeId(node.name || node.id),
+        labelProperty: node =>
+          cleanNodeId(node.customLabel || node.name || node.id),
         // fontColor: 'white',
         viewGenerator: node => <NodeHandler node={node} nodeSize={nodeSize} />
       },

nerdlets/observability-maps-nerdlet/components/node/edit/custom-label.js

@@ -0,0 +1,97 @@
+/* eslint
+no-console: 0
+*/
+
+import React from 'react';
+import { Button, Form, Input } from 'semantic-ui-react';
+import { DataConsumer } from '../../../context/data';
+
+export default class CustomLabel extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      customLabel: null
+    };
+  }
+
+  updateDashboard = async (
+    updateDataContextState,
+    mapConfig,
+    nodeId,
+    action
+  ) => {
+    if (action === 'save') {
+      if (!this.state.customLabel) {
+        delete mapConfig.nodeData[nodeId].customLabel;
+      } else {
+        mapConfig.nodeData[nodeId].customLabel = this.state.customLabel;
+      }
+    } else if (action === 'delete') {
+      delete mapConfig.nodeData[nodeId].customLabel;
+    }
+    await updateDataContextState({ mapConfig }, ['saveMap']);
+  };
+
+  render() {
+    return (
+      <DataConsumer>
+        {({ mapConfig, selectedNode, updateDataContextState }) => {
+          const currentCustomLabel =
+            mapConfig.nodeData[selectedNode].customLabel;
+
+          return (
+            <>
+              <Form.Group>
+                <Form.Field
+                  width="16"
+                  control={Input}
+                  value={
+                    this.state.customLabel === null
+                      ? currentCustomLabel
+                      : this.state.customLabel
+                  }
+                  label="Custom Label"
+                  onChange={e => this.setState({ customLabel: e.target.value })}
+                />
+              </Form.Group>
+
+              {/* <Button
+                style={{ float: 'right' }}
+                disabled={!currentCustomLabel}
+                negative
+                onClick={() => {
+                  this.updateDashboard(
+                    updateDataContextState,
+                    mapConfig,
+                    selectedNode,
+                    'delete'
+                  );
+                }}
+              >
+                Clear
+              </Button> */}
+
+              <Button
+                style={{ float: 'right' }}
+                // disabled={addDisabled}
+                positive
+                onClick={() => {
+                  this.updateDashboard(
+                    updateDataContextState,
+                    mapConfig,
+                    selectedNode,
+                    'save'
+                  );
+                }}
+              >
+                Save
+              </Button>
+
+              <br />
+            </>
+          );
+        }}
+      </DataConsumer>
+    );
+  }
+}

nerdlets/observability-maps-nerdlet/components/node/edit/edit-node.js

@@ -7,6 +7,7 @@ import IconSet from './icon-set';
 import CustomAlertSeverity from './custom-alert-severity';
 import Options from './options';
 import DrilldownDashboard from './drilldown-dashboard';
+import CustomLabel from './custom-label';
 
 export default class EditNode extends React.PureComponent {
   constructor(props) {
@@ -41,6 +42,8 @@ export default class EditNode extends React.PureComponent {
                 return <Options />;
               case 'dash':
                 return <DrilldownDashboard />;
+              case 'customLabel':
+                return <CustomLabel />;
               default:
                 return '';
             }
@@ -110,6 +113,15 @@ export default class EditNode extends React.PureComponent {
                       })
                     }
                   />
+                  <Menu.Item
+                    name="Custom Label"
+                    active={selectedEditOption === 'customLabel'}
+                    onClick={() =>
+                      this.setState({
+                        selectedEditOption: 'customLabel'
+                      })
+                    }
+                  />
                 </Menu>
 
                 <Form>{componentSelect()}</Form>

nerdlets/observability-maps-nerdlet/components/observability-maps.js

@@ -44,7 +44,7 @@ export default class ObservabilityMaps extends React.Component {
         highlightStrokeColor: 'blue',
         fontSize: 16,
         highlightFontSize: 16,
-        labelProperty: node => cleanNodeId(node.id),
+        labelProperty: node => cleanNodeId(node.customLabel || node.id),
         fontColor: 'white',
         viewGenerator: node => <NodeHandler node={node} nodeSize={nodeSize} />
       },

nerdlets/observability-maps-nerdlet/styles.scss

@@ -438,7 +438,7 @@ i {
   margin: 0 !important;
 }
 
-.icons  > .icon {
+.icons > .icon {
   margin: 0 !important;
 }