Gauge fixes for NaN and composition policy

e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js

@@ -133,4 +133,50 @@ test.describe('Gauge', () => {
 
     // TODO: Verify changes in the UI
   });
+
+  test('Gauge does not display NaN when data not available', async ({ page }) => {
+    // Create a Gauge
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Unnamed Gauge'
+    });
+
+    // Create a Sine Wave Generator in the Gauge with a loading delay
+    await page.getByRole('button', { name: ' Create ' }).click();
+    await page.getByRole('menuitem', { name: ' Sine Wave Generator' }).click();
+    await page
+      .getByRole('dialog')
+      .locator('div')
+      .filter({ hasText: 'Loading Delay (ms)' })
+      .nth(3)
+      .click();
+    await page.getByLabel('Loading Delay (ms)').fill('5000');
+    await page.locator('[aria-label="Save"]').click();
+    await page.getByLabel('Expand My Items folder').click();
+    await page
+      .getByRole('treeitem', { name: 'Expand Unnamed Gauge gauge  Unnamed Gauge' })
+      .locator('a')
+      .click();
+    const gaugeNoDataText = await page.locator('.js-dial-current-value tspan').textContent();
+    expect(gaugeNoDataText).toBe('--');
+  });
+
+  test('Gauge enforces composition policy', async ({ page }) => {
+    // Create a Gauge
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Unnamed Gauge'
+    });
+
+    // Try to create a Folder into the Gauge. Should be disallowed.
+    await page.getByRole('button', { name: ' Create ' }).click();
+    await page.getByRole('menuitem', { name: ' Folder' }).click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+    await page.getByLabel('Cancel').click();
+
+    // Try to create a Display Layout into the Gauge. Should be disallowed.
+    await page.getByRole('button', { name: ' Create ' }).click();
+    await page.getByRole('menuitem', { name: ' Display Layout' }).click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+  });
 });

src/plugins/gauge/GaugeCompositionPolicy.js

@@ -0,0 +1,29 @@
+export default function GaugeCompositionPolicy(openmct) {
+  function hasNumericTelemetry(domainObject) {
+    const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
+    if (!hasTelemetry) {
+      return false;
+    }
+
+    let metadata = openmct.telemetry.getMetadata(domainObject);
+
+    return metadata.values().length > 0 && hasDomainAndRange(metadata);
+  }
+
+  function hasDomainAndRange(metadata) {
+    return (
+      metadata.valuesForHints(['range']).length > 0 &&
+      metadata.valuesForHints(['domain']).length > 0
+    );
+  }
+
+  return {
+    allow: function (parent, child) {
+      if (parent.type === 'gauge') {
+        return hasNumericTelemetry(child);
+      }
+
+      return true;
+    }
+  };
+}

src/plugins/gauge/GaugePlugin.js

@@ -23,6 +23,7 @@
 import mount from 'utils/mount';
 
 import GaugeFormController from './components/GaugeFormController.vue';
+import GaugeCompositionPolicy from './GaugeCompositionPolicy';
 import GaugeViewProvider from './GaugeViewProvider';
 
 export const GAUGE_TYPES = [
@@ -165,6 +166,7 @@ export default function () {
         }
       ]
     });
+    openmct.composition.addPolicy(new GaugeCompositionPolicy(openmct).allow);
   };
 
   function getGaugeFormController(openmct) {
@@ -187,7 +189,8 @@ export default function () {
                 onChange
               };
             },
-            template: `<GaugeFormController :model="model" @on-change="onChange"></GaugeFormController>`
+            template: `
+                          <GaugeFormController :model="model" @on-change="onChange"></GaugeFormController>`
           },
           {
             app: openmct.app,

src/plugins/gauge/components/GaugeComponent.vue

@@ -402,10 +402,10 @@ export default {
       const CHAR_THRESHOLD = 3;
       const START_PERC = 8.5;
       const REDUCE_PERC = 0.8;
-      const RANGE_CHARS_MAX = Math.max(
-        this.rangeLow.toString().length,
-        this.rangeHigh.toString().length
-      );
+      const RANGE_CHARS_MAX =
+        this.rangeLow && this.rangeHigh
+          ? Math.max(this.rangeLow.toString().length, this.rangeHigh.toString().length)
+          : CHAR_THRESHOLD;
 
       return this.fontSizeFromChars(RANGE_CHARS_MAX, CHAR_THRESHOLD, START_PERC, REDUCE_PERC);
     },