Tempo: Fix metricSummary sorting in spanCount and errorPercentage (#74542)

* Fix sorting in spanCount and errorPercentage

* Update types

* Spelling

* Update errorPercentage

public/app/plugins/datasource/tempo/metricsSummary.test.ts

@@ -118,9 +118,9 @@ describe('MetricsSummary', () => {
                   "displayNameFromDS": "Span count",
                 },
                 "name": "spanCount",
-                "type": "string",
+                "type": "number",
                 "values": [
-                  "10",
+                  10,
                 ],
               },
               {
@@ -132,9 +132,9 @@ describe('MetricsSummary', () => {
                   "unit": "percent",
                 },
                 "name": "errorPercentage",
-                "type": "string",
+                "type": "number",
                 "values": [
-                  "10",
+                  10,
                 ],
               },
               {
@@ -148,7 +148,7 @@ describe('MetricsSummary', () => {
                 "name": "p50",
                 "type": "number",
                 "values": [
-                  "1",
+                  1,
                 ],
               },
               {
@@ -162,7 +162,7 @@ describe('MetricsSummary', () => {
                 "name": "p90",
                 "type": "number",
                 "values": [
-                  "2",
+                  2,
                 ],
               },
               {
@@ -176,7 +176,7 @@ describe('MetricsSummary', () => {
                 "name": "p95",
                 "type": "number",
                 "values": [
-                  "3",
+                  3,
                 ],
               },
               {
@@ -190,7 +190,7 @@ describe('MetricsSummary', () => {
                 "name": "p99",
                 "type": "number",
                 "values": [
-                  "4",
+                  4,
                 ],
               },
             ],
@@ -219,15 +219,15 @@ describe('MetricsSummary', () => {
       expect(result).toMatchInlineSnapshot(`
         {
           "contains_sink": "true",
-          "errorPercentage": "10",
+          "errorPercentage": 10,
           "kind": "server",
-          "p50": "1",
-          "p90": "2",
-          "p95": "3",
-          "p99": "4",
+          "p50": 1,
+          "p90": 2,
+          "p95": 3,
+          "p99": 4,
           "room": "kitchen",
           "span.http.status_code": 208,
-          "spanCount": "10",
+          "spanCount": 10,
           "spanKind": "server",
           "spanStatus": "ok",
           "temperature": 38.1,

public/app/plugins/datasource/tempo/metricsSummary.ts

@@ -32,12 +32,12 @@ type Series = {
 };
 
 type MetricsData = {
-  spanCount: string;
-  errorPercentage: string;
-  p50: string;
-  p90: string;
-  p95: string;
-  p99: string;
+  spanCount: number;
+  errorPercentage: number | string;
+  p50: number;
+  p90: number;
+  p95: number;
+  p99: number;
   [key: string]: string | number;
 };
 
@@ -76,12 +76,12 @@ export function createTableFrameFromMetricsSummaryQuery(
       },
       {
         name: 'spanCount',
-        type: FieldType.string,
+        type: FieldType.number,
         config: { displayNameFromDS: 'Span count', custom: { width: 150 } },
       },
       {
         name: 'errorPercentage',
-        type: FieldType.string,
+        type: FieldType.number,
         config: { displayNameFromDS: 'Error', unit: 'percent', custom: { width: 150 } },
       },
       getPercentileRow('p50'),
@@ -108,17 +108,17 @@ export function createTableFrameFromMetricsSummaryQuery(
 
 export const transformToMetricsData = (data: MetricsSummary) => {
   const errorPercentage = data.errorSpanCount
-    ? ((parseInt(data.errorSpanCount, 10) / parseInt(data.spanCount, 10)) * 100).toString()
+    ? (getNumberForMetric(data.errorSpanCount) / getNumberForMetric(data.spanCount)) * 100
     : '0%';
 
   const metricsData: MetricsData = {
     kind: 'server', // so the user knows all results are of kind = server
-    spanCount: data.spanCount,
+    spanCount: getNumberForMetric(data.spanCount),
     errorPercentage,
-    p50: data.p50,
-    p90: data.p90,
-    p95: data.p95,
-    p99: data.p99,
+    p50: getNumberForMetric(data.p50),
+    p90: getNumberForMetric(data.p90),
+    p95: getNumberForMetric(data.p95),
+    p99: getNumberForMetric(data.p99),
   };
 
   data.series.forEach((series: Series) => {
@@ -262,6 +262,11 @@ const getPercentileRow = (name: string) => {
   };
 };
 
+const getNumberForMetric = (metric: string) => {
+  const number = parseInt(metric, 10);
+  return isNaN(number) ? 0 : number;
+};
+
 export const emptyResponse = new MutableDataFrame({
   name: 'Metrics Summary',
   refId: 'metrics-summary',