feat: icon speed & static graph toggle

newrelic · Sep 18, 2024 · 0983a81 · 0983a81
1 parent b270962
commit 0983a81
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 8 deletions.
diff --git a/nerdlets/observability-maps-nerdlet/components/custom-nodes/default.js b/nerdlets/observability-maps-nerdlet/components/custom-nodes/default.js
@@ -77,7 +77,8 @@ export default class CustomNode extends React.PureComponent {
     iconOne,
     colorTwo,
     colorOne,
-    closeCharts
+    closeCharts,
+    iconSpinSpeed
   ) => {
     const isOpen = this.state[`popup_${nodeId}`] || false;
     const iconOuter = `circle ${iconOne}`;
@@ -88,7 +89,13 @@ export default class CustomNode extends React.PureComponent {
           <Popup
             className="popup-custom"
             trigger={
-              <Icon loading size="big" color={colorTwo} name={iconOuter} />
+              <Icon
+                loading
+                size="big"
+                className={`spin-speed-${iconSpinSpeed}`}
+                color={colorTwo}
+                name={iconOuter}
+              />
             }
             // on="click"
             style={{ borderRadius: 0 }}
@@ -98,7 +105,13 @@ export default class CustomNode extends React.PureComponent {
             content={<HoverContent metrics={metrics} />}
           />
         ) : (
-          <Icon loading size="big" color={colorTwo} name={iconOuter} />
+          <Icon
+            className={`spin-speed-${iconSpinSpeed}`}
+            loading
+            size="big"
+            color={colorTwo}
+            name={iconOuter}
+          />
         )}
 
         <Popup
@@ -127,7 +140,7 @@ export default class CustomNode extends React.PureComponent {
 
     return (
       <DataConsumer>
-        {({ userIcons, mapData, closeCharts }) => {
+        {({ userIcons, mapData, closeCharts, mapConfig }) => {
           const data = ((mapData || {}).nodeData || {})[node.id] || {};
           const icon = data.icon || setEntityDesign(data.entityType).icon;
           const metrics = buildNodeMetrics(data);
@@ -150,6 +163,8 @@ export default class CustomNode extends React.PureComponent {
             iconOne = customAlertDesign.iconOne;
           }
 
+          const iconSpinSpeed = mapConfig?.settings?.iconSpinSpeed || '2';
+
           return (
             <div style={{ height: nodeSize / 10, width: nodeSize / 10 }}>
               <div
@@ -165,7 +180,8 @@ export default class CustomNode extends React.PureComponent {
                   iconOne,
                   colorTwo,
                   colorOne,
-                  closeCharts
+                  closeCharts,
+                  iconSpinSpeed
                 )}
               </div>
             </div>

diff --git a/nerdlets/observability-maps-nerdlet/components/map/settings.js b/nerdlets/observability-maps-nerdlet/components/map/settings.js
@@ -35,7 +35,9 @@ export default class MapSettings extends React.PureComponent {
       backgroundPosition,
       backgroundRepeat,
       backgroundSize,
-      linkType
+      linkType,
+      iconSpinSpeed,
+      staticGraph
     } = tempState;
 
     if (!mapConfig.settings) {
@@ -63,6 +65,9 @@ export default class MapSettings extends React.PureComponent {
     mapConfig.settings.backgroundSize =
       this.state.backgroundSize || backgroundSize;
     mapConfig.settings.linkType = this.state.linkType || linkType;
+    mapConfig.settings.iconSpinSpeed =
+      this.state.iconSpinSpeed || iconSpinSpeed;
+    mapConfig.settings.staticGraph = this.state.staticGraph || staticGraph;
 
     if (storageLocation.type === 'user') {
       await writeUserDocument(
@@ -90,7 +95,9 @@ export default class MapSettings extends React.PureComponent {
       backgroundPosition: null,
       backgroundRepeat: null,
       backgroundSize: null,
-      linkType: null
+      linkType: null,
+      iconSpinSpeed: null,
+      staticGraph: null
     });
   };
 
@@ -112,7 +119,9 @@ export default class MapSettings extends React.PureComponent {
             backgroundPosition: '',
             backgroundRepeat: '',
             backgroundSize: '',
-            linkType: ''
+            linkType: '',
+            iconSpinSpeed: '',
+            staticGraph: ''
           };
 
           if (mapConfig.settings) {
@@ -123,6 +132,8 @@ export default class MapSettings extends React.PureComponent {
             tempState.backgroundRepeat = mapConfig.settings.backgroundRepeat;
             tempState.backgroundSize = mapConfig.settings.backgroundSize;
             tempState.linkType = mapConfig.settings.linkType;
+            tempState.iconSpinSpeed = mapConfig.settings.iconSpinSpeed;
+            tempState.staticGraph = mapConfig.settings.staticGraph;
           }
 
           const value = name =>
@@ -229,6 +240,36 @@ export default class MapSettings extends React.PureComponent {
                       ]}
                       onChange={(e, d) => this.handleChange(e, d, 'linkType')}
                     />
+                    <Form.Select
+                      fluid
+                      label="Icon Spin Speed"
+                      width="8"
+                      value={value('iconSpinSpeed')}
+                      options={[
+                        { key: '1', text: '1', value: '1' },
+                        { key: '2', text: '2', value: '2' },
+                        { key: '3', text: '3', value: '3' },
+                        { key: '4', text: '4', value: '4' },
+                        { key: '5', text: '5', value: '5' }
+                      ]}
+                      onChange={(e, d) =>
+                        this.handleChange(e, d, 'iconSpinSpeed')
+                      }
+                    />
+
+                    <Form.Select
+                      fluid
+                      label="Static Graph"
+                      width="8"
+                      value={value('staticGraph')}
+                      options={[
+                        { key: '1', text: 'true', value: 'true' },
+                        { key: '2', text: 'false', value: 'false' }
+                      ]}
+                      onChange={(e, d) =>
+                        this.handleChange(e, d, 'staticGraph')
+                      }
+                    />
                   </Form.Group>
                 </Form>
                 <br />

diff --git a/nerdlets/observability-maps-nerdlet/components/observability-maps.js b/nerdlets/observability-maps-nerdlet/components/observability-maps.js
@@ -77,6 +77,9 @@ export default class ObservabilityMaps extends React.Component {
           d3MapConfig.link.type =
             mapConfig?.settings?.linkType || 'CURVE_SMOOTH';
 
+          d3MapConfig.staticGraph =
+            (mapConfig?.settings?.staticGraph || false) === 'true';
+
           if (isWidget) {
             if (!vizMapStorage) {
               errors.push('Map storage not selected');

diff --git a/nerdlets/observability-maps-nerdlet/styles.scss b/nerdlets/observability-maps-nerdlet/styles.scss
@@ -530,3 +530,28 @@ i {
 .ace-monokai .ace_nrql.ace_operator {
   color: #70c0b1;
 }
+
+.spin-speed-1.icon.loading {
+  animation: icon-loading 1s linear infinite !important;
+  -webkit-animation: icon-loading 1s linear infinite !important;
+}
+
+.spin-speed-2.icon.loading {
+  animation: icon-loading 2s linear infinite !important;
+  -webkit-animation: icon-loading 2s linear infinite !important;
+}
+
+.spin-speed-3.icon.loading {
+  animation: icon-loading 3s linear infinite !important;
+  -webkit-animation: icon-loading 3s linear infinite !important;
+}
+
+.spin-speed-4.icon.loading {
+  animation: icon-loading 4s linear infinite !important;
+  -webkit-animation: icon-loading 4s linear infinite !important;
+}
+
+.spin-speed-5.icon.loading {
+  animation: icon-loading 5s linear infinite !important;
+  -webkit-animation: icon-loading 5s linear infinite !important;
+}