feat: add custom label functionality

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/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;
 }