feat: enhance MetricQueryConfig with warning and critical threshold inputs and improve layout in ArgumentsForm and MetricAlias components

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

@@ -156,13 +156,20 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
       componentProps: CustomElementProps,
     ) => {
       return (
-        <MetricQueryConfig
-          {...componentProps}
-          data={value[arg.id] as MetricQueryConfigData}
-          metricTypes={props.metrics.metricTypes}
-          telemetryAttributes={props.metrics.telemetryAttributes}
-          hideCard={true}
-        />
+        <div className="p-3 border border-gray-200 rounded-lg bg-gray-50">
+          <div className="mb-2">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Query 1
+            </span>
+          </div>
+          <MetricQueryConfig
+            {...componentProps}
+            data={value[arg.id] as MetricQueryConfigData}
+            metricTypes={props.metrics.metricTypes}
+            telemetryAttributes={props.metrics.telemetryAttributes}
+            hideCard={true}
+          />
+        </div>
       );
     };
   };

App/FeatureSet/Dashboard/src/Components/Metrics/MetricAlias.tsx

@@ -15,45 +15,56 @@ const MetricAlias: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <Fragment>
-      <div className="flex space-x-3">
-        {!props.isFormula && (
-          <div className="bg-indigo-500 h-9 rounded w-9 p-3 pt-2 mt-2 font-medium text-white">
-            {props.data.metricVariable}
+      <div className="space-y-3">
+        <div className="flex space-x-3 items-start">
+          {!props.isFormula && props.data.metricVariable && (
+            <div className="bg-indigo-500 h-9 rounded w-9 min-w-9 p-3 pt-2 mt-5 font-medium text-white text-center text-sm">
+              {props.data.metricVariable}
+            </div>
+          )}
+          {props.isFormula && (
+            <div className="bg-indigo-500 h-9 p-2 pt-2.5 rounded w-9 min-w-9 mt-5 font-bold text-white">
+              <Icon thick={ThickProp.Thick} icon={IconProp.ChevronRight} />
+            </div>
+          )}
+          <div className="flex-1">
+            <label className="block text-xs font-medium text-gray-500 mb-1">
+              Title
+            </label>
+            <Input
+              value={props.data.title}
+              onChange={(value: string) => {
+                return props.onDataChanged({
+                  ...props.data,
+                  metricVariable: props.data.metricVariable,
+                  title: value,
+                });
+              }}
+              placeholder="Title..."
+            />
           </div>
-        )}
-        {props.isFormula && (
-          <div className="bg-indigo-500 h-9 p-2 pt-2.5 rounded w-9 mt-2 font-bold text-white">
-            <Icon thick={ThickProp.Thick} icon={IconProp.ChevronRight} />
+          <div className="flex-1">
+            <label className="block text-xs font-medium text-gray-500 mb-1">
+              Description
+            </label>
+            <Input
+              value={props.data.description}
+              onChange={(value: string) => {
+                return props.onDataChanged({
+                  ...props.data,
+                  metricVariable: props.data.metricVariable,
+                  description: value,
+                });
+              }}
+              placeholder="Description..."
+            />
           </div>
-        )}
-        <div>
-          <Input
-            value={props.data.title}
-            onChange={(value: string) => {
-              return props.onDataChanged({
-                ...props.data,
-                metricVariable: props.data.metricVariable,
-                title: value,
-              });
-            }}
-            placeholder="Title..."
-          />
         </div>
-        <div className="w-full">
-          <Input
-            value={props.data.description}
-            onChange={(value: string) => {
-              return props.onDataChanged({
-                ...props.data,
-                metricVariable: props.data.metricVariable,
-                description: value,
-              });
-            }}
-            placeholder="Description..."
-          />
-        </div>
-        <div className="w-1/3 flex space-x-3">
-          <div className="w-full">
+        <div className="flex space-x-3">
+          <div className="flex-1">
+            <label className="block text-xs font-medium text-gray-500 mb-1">
+              Legend
+            </label>
             <Input
               value={props.data.legend}
               onChange={(value: string) => {
@@ -66,7 +77,10 @@ const MetricAlias: FunctionComponent<ComponentProps> = (
               placeholder="Legend (e.g. Response Time)"
             />
           </div>
-          <div>
+          <div className="w-1/3">
+            <label className="block text-xs font-medium text-gray-500 mb-1">
+              Unit
+            </label>
             <Input
               value={props.data.legendUnit}
               onChange={(value: string) => {

App/FeatureSet/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx

@@ -75,8 +75,11 @@ const MetricGraphConfig: FunctionComponent<ComponentProps> = (
             onAttributesRetry={props.onAttributesRetry}
           />
         )}
-        <div className="flex space-x-3 mt-2">
-          <div className="w-1/2">
+        <div className="flex space-x-3 mt-3">
+          <div className="flex-1">
+            <label className="block text-xs font-medium text-gray-500 mb-1">
+              Warning Threshold
+            </label>
             <Input
               value={props.data?.warningThreshold?.toString() || ""}
               type={InputType.NUMBER}
@@ -90,10 +93,13 @@ const MetricGraphConfig: FunctionComponent<ComponentProps> = (
                   });
                 }
               }}
-              placeholder="Warning Threshold"
+              placeholder="e.g. 80"
             />
           </div>
-          <div className="w-1/2">
+          <div className="flex-1">
+            <label className="block text-xs font-medium text-gray-500 mb-1">
+              Critical Threshold
+            </label>
             <Input
               value={props.data?.criticalThreshold?.toString() || ""}
               type={InputType.NUMBER}
@@ -107,7 +113,7 @@ const MetricGraphConfig: FunctionComponent<ComponentProps> = (
                   });
                 }
               }}
-              placeholder="Critical Threshold"
+              placeholder="e.g. 95"
             />
           </div>
         </div>