Handle assets without duration data

src/components/Assets/AssetList/AssetEntry/AssetEntry.stories.tsx

@@ -39,30 +39,32 @@ export const Default: Story = {
       serviceName: "PetClinicWithAgent",
       endpointCodeObjectId:
         "endpoint:epHTTP:HTTP GET /SampleInsights/ErrorRecordedOnLocalRootSpan",
+      p50: {
+        value: 804.65,
+        unit: "μs",
+        raw: 804649.5
+      },
+      p95: {
+        value: 62.47,
+        unit: "ms",
+        raw: 62466300.59999996
+      },
       durationPercentiles: [
         {
           percentile: 0.5,
           currentDuration: {
             value: 804.65,
             unit: "μs",
             raw: 804649.5
-          },
-          previousDuration: null,
-          changeTime: null,
-          changeVerified: null,
-          traceIds: ["79410CF020D937E9F78EFECC703907D6"]
+          }
         },
         {
           percentile: 0.95,
           currentDuration: {
             value: 62.47,
             unit: "ms",
             raw: 62466300.59999996
-          },
-          previousDuration: null,
-          changeTime: null,
-          changeVerified: null,
-          traceIds: ["7343BEA8BDBC98BA4779A8808E5BD7C9"]
+          }
         }
       ],
       impactScores: {

src/components/Assets/AssetList/AssetEntry/index.tsx

@@ -59,13 +59,8 @@ export const AssetEntry = (props: AssetEntryProps) => {
 
   const name = props.entry.span.displayName;
   const otherServices = props.entry.relatedServices.slice(1);
-  const performanceDuration = props.entry.durationPercentiles.find(
-    (duration) => duration.percentile === 0.5
-  )?.currentDuration;
-
-  const slowestFivePercentDuration = props.entry.durationPercentiles.find(
-    (duration) => duration.percentile === 0.95
-  )?.currentDuration;
+  const performanceDuration = props.entry.p50;
+  const slowestFivePercentDuration = props.entry.p95;
 
   const lastSeenDateTime = props.entry.lastSpanInstanceInfo.startTime;
 

src/components/Assets/AssetList/index.tsx

@@ -1,5 +1,7 @@
 import { ChangeEvent, useMemo, useState } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
+import { isNumber } from "../../../typeGuards/isNumber";
+import { getPercentileKey } from "../../../utils/getPercentileKey";
 import { Menu } from "../../common/Menu";
 import { Popover } from "../../common/Popover";
 import { PopoverContent } from "../../common/Popover/PopoverContent";
@@ -42,22 +44,21 @@ const sortEntries = (
     percentile: number,
     isDesc: boolean
   ) => {
-    const aDuration = a.durationPercentiles.find(
-      (duration) => duration.percentile === percentile
-    )?.currentDuration.raw;
-    const bDuration = b.durationPercentiles.find(
-      (duration) => duration.percentile === percentile
-    )?.currentDuration.raw;
+    const aPercentile = getPercentileKey(percentile);
+    const aDuration = aPercentile && a[aPercentile]?.raw;
+
+    const bPercentile = getPercentileKey(percentile);
+    const bDuration = bPercentile && b[bPercentile]?.raw;
 
     if (!aDuration && !bDuration) {
       return 0;
     }
 
-    if (!aDuration) {
+    if (!isNumber(aDuration)) {
       return isDesc ? 1 : -1;
     }
 
-    if (!bDuration) {
+    if (!isNumber(bDuration)) {
       return isDesc ? -1 : 1;
     }