feat: add Gauge icon and update related components for enhanced dashboard functionality

App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx

@@ -328,7 +328,18 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
             buttonStyle={ButtonStyleType.OUTLINE}
             icon={IconProp.Add}
             onClick={() => {
+              const variableIndex: number = multiQueryConfigs.length + 1; // +1 because primary query is "a"
+              const variableLetter: string = String.fromCharCode(
+                97 + variableIndex,
+              ); // b, c, d, ...
               const newQuery: MetricQueryConfigData = {
+                metricAliasData: {
+                  metricVariable: variableLetter,
+                  title: undefined,
+                  description: undefined,
+                  legend: undefined,
+                  legendUnit: undefined,
+                },
                 metricQueryData: {
                   filterData: {},
                   groupBy: undefined,

App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx

@@ -201,35 +201,24 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
   const chartMetricViewData: MetricViewData = {
     queryConfigs: queryConfigs.map(
       (config: MetricQueryConfigData, index: number) => {
-        // For the first query, apply the chart-level title/description/legend
-        if (index === 0) {
-          return {
-            ...config,
-            metricAliasData: {
-              title:
-                config.metricAliasData?.title ||
-                props.component.arguments.chartTitle ||
-                undefined,
-              description:
-                config.metricAliasData?.description ||
-                props.component.arguments.chartDescription ||
-                undefined,
-              metricVariable:
-                config.metricAliasData?.metricVariable || undefined,
-              legend:
-                config.metricAliasData?.legend ||
-                props.component.arguments.legendText ||
-                undefined,
-              legendUnit:
-                config.metricAliasData?.legendUnit ||
-                props.component.arguments.legendUnit ||
-                undefined,
-            },
-            chartType: config.chartType || getMetricChartType(),
-          };
-        }
         return {
           ...config,
+          metricAliasData: {
+            metricVariable:
+              config.metricAliasData?.metricVariable || undefined,
+            title:
+              (index === 0
+                ? config.metricAliasData?.title ||
+                  props.component.arguments.chartTitle
+                : config.metricAliasData?.title) || undefined,
+            description:
+              (index === 0
+                ? config.metricAliasData?.description ||
+                  props.component.arguments.chartDescription
+                : config.metricAliasData?.description) || undefined,
+            legend: config.metricAliasData?.legend || undefined,
+            legendUnit: config.metricAliasData?.legendUnit || undefined,
+          },
           chartType: config.chartType || getMetricChartType(),
         };
       },

App/FeatureSet/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx

@@ -438,7 +438,7 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
                   />
                   <MoreMenuItem
                     text={"Gauge"}
-                    icon={IconProp.Activity}
+                    icon={IconProp.Gauge}
                     key={"add-gauge"}
                     onClick={() => {
                       props.onAddComponentClick(DashboardComponentType.Gauge);
@@ -456,7 +456,7 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
                   />
                   <MoreMenuItem
                     text={"Trace List"}
-                    icon={IconProp.QueueList}
+                    icon={IconProp.Waterfall}
                     key={"add-trace-list"}
                     onClick={() => {
                       props.onAddComponentClick(

Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts

@@ -18,8 +18,6 @@ export default interface DashboardChartComponent extends BaseComponent {
     metricQueryConfigs?: Array<MetricQueryConfigData> | undefined;
     chartTitle?: string | undefined;
     chartDescription?: string | undefined;
-    legendText?: string | undefined;
-    legendUnit?: string | undefined;
     chartType?: DashboardChartType | undefined;
     warningThreshold?: number | undefined;
     criticalThreshold?: number | undefined;

Common/Types/Icon/IconProp.ts

@@ -321,6 +321,7 @@ enum IconProp {
   UserIcon = "UserIcon",
   XCircle = "XCircle",
   Kubernetes = "Kubernetes",
+  Gauge = "Gauge",
 }
 
 export default IconProp;

Common/UI/Components/Icon/Icon.tsx

@@ -2784,6 +2784,43 @@ const Icon: FunctionComponent<ComponentProps> = ({
         {spokes}
       </>,
     );
+  } else if (icon === IconProp.Gauge) {
+    // Gauge/speedometer icon — semicircular meter with needle
+    return getSvgWrapper(
+      <>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18Z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 21c-4.97 0-9-4.03-9-9"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M5.636 7.636l1.414 1.414"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 5v2"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M18.364 7.636l-1.414 1.414"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 12l-3.5-3.5"
+        />
+        <circle cx="12" cy="12" r="1.5" />
+      </>,
+    );
   }
 
   return <></>;

Common/Utils/Dashboard/Components/DashboardChartComponent.ts

@@ -44,6 +44,13 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       minWidthInDashboardUnits: 6,
       arguments: {
         metricQueryConfig: {
+          metricAliasData: {
+            metricVariable: "a",
+            title: undefined,
+            description: undefined,
+            legend: undefined,
+            legendUnit: undefined,
+          },
           metricQueryData: {
             filterData: {},
             groupBy: undefined,
@@ -129,23 +136,6 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       section: DisplaySection,
     });
 
-    componentArguments.push({
-      name: "Legend Text",
-      description: "Label shown in the chart legend",
-      required: false,
-      type: ComponentInputType.Text,
-      id: "legendText",
-      section: DisplaySection,
-    });
-
-    componentArguments.push({
-      name: "Legend Unit",
-      description: 'Unit suffix in the legend (e.g. "ms", "%")',
-      required: false,
-      type: ComponentInputType.Text,
-      id: "legendUnit",
-      section: DisplaySection,
-    });
 
     componentArguments.push({
       name: "Warning Threshold",