diff --git a/App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx b/App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx index 890a7ee2b8..86dca939cb 100644 --- a/App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx @@ -328,7 +328,18 @@ const ArgumentsForm: FunctionComponent = ( 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, diff --git a/App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx index 4c99f913ce..13cacd6c21 100644 --- a/App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx @@ -201,35 +201,24 @@ const DashboardChartComponentElement: FunctionComponent = ( 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(), }; }, diff --git a/App/FeatureSet/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx b/App/FeatureSet/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx index eb382426cc..4ffa8dc5b9 100644 --- a/App/FeatureSet/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx @@ -438,7 +438,7 @@ const DashboardToolbar: FunctionComponent = ( /> { props.onAddComponentClick(DashboardComponentType.Gauge); @@ -456,7 +456,7 @@ const DashboardToolbar: FunctionComponent = ( /> { props.onAddComponentClick( diff --git a/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts b/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts index 15b4a04704..b3b9127a1a 100644 --- a/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts +++ b/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts @@ -18,8 +18,6 @@ export default interface DashboardChartComponent extends BaseComponent { metricQueryConfigs?: Array | undefined; chartTitle?: string | undefined; chartDescription?: string | undefined; - legendText?: string | undefined; - legendUnit?: string | undefined; chartType?: DashboardChartType | undefined; warningThreshold?: number | undefined; criticalThreshold?: number | undefined; diff --git a/Common/Types/Icon/IconProp.ts b/Common/Types/Icon/IconProp.ts index 1c62875be1..be374377a1 100644 --- a/Common/Types/Icon/IconProp.ts +++ b/Common/Types/Icon/IconProp.ts @@ -321,6 +321,7 @@ enum IconProp { UserIcon = "UserIcon", XCircle = "XCircle", Kubernetes = "Kubernetes", + Gauge = "Gauge", } export default IconProp; diff --git a/Common/UI/Components/Icon/Icon.tsx b/Common/UI/Components/Icon/Icon.tsx index fa1978556f..8d746b74e9 100644 --- a/Common/UI/Components/Icon/Icon.tsx +++ b/Common/UI/Components/Icon/Icon.tsx @@ -2784,6 +2784,43 @@ const Icon: FunctionComponent = ({ {spokes} , ); + } else if (icon === IconProp.Gauge) { + // Gauge/speedometer icon — semicircular meter with needle + return getSvgWrapper( + <> + + + + + + + + , + ); } return <>; diff --git a/Common/Utils/Dashboard/Components/DashboardChartComponent.ts b/Common/Utils/Dashboard/Components/DashboardChartComponent.ts index f370428bcd..ac9c3bdcee 100644 --- a/Common/Utils/Dashboard/Components/DashboardChartComponent.ts +++ b/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",