[7.x] [Metrics UI] Minor fixes to inventory timeline (#78226) (#78339)

Author: Zacqary

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/interval_label.tsx

@@ -22,7 +22,7 @@ export const IntervalLabel = ({ intervalAsString }: Props) => {
       <p>
         <FormattedMessage
           id="xpack.infra.homePage.toolbar.showingLastOneMinuteDataText"
-          defaultMessage="Last {duration} of data"
+          defaultMessage="Last {duration} of data for the selected time"
           values={{ duration: intervalAsString }}
         />
       </p>

x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_timeline.ts

@@ -28,21 +28,28 @@ const ONE_MINUTE = 60;
 const ONE_HOUR = ONE_MINUTE * 60;
 const ONE_DAY = ONE_HOUR * 24;
 const ONE_WEEK = ONE_DAY * 7;
+const ONE_MONTH = ONE_DAY * 30;
+
+const getDisplayInterval = (interval: string | undefined) => {
+  if (interval) {
+    const intervalInSeconds = getIntervalInSeconds(interval);
+    if (intervalInSeconds < 300) return '5m';
+  }
+  return interval;
+};
 
 const getTimeLengthFromInterval = (interval: string | undefined) => {
   if (interval) {
     const intervalInSeconds = getIntervalInSeconds(interval);
-    const multiplier =
-      intervalInSeconds < ONE_MINUTE
-        ? ONE_HOUR / intervalInSeconds
-        : intervalInSeconds < ONE_HOUR
-        ? 60
-        : intervalInSeconds < ONE_DAY
-        ? 7
-        : intervalInSeconds < ONE_WEEK
-        ? 30
-        : 1;
-    const timeLength = intervalInSeconds * multiplier;
+    // Get up to 288 datapoints based on interval
+    const timeLength =
+      intervalInSeconds <= ONE_MINUTE * 15
+        ? ONE_DAY
+        : intervalInSeconds <= ONE_MINUTE * 35
+        ? ONE_DAY * 3
+        : intervalInSeconds <= ONE_HOUR * 2.5
+        ? ONE_WEEK
+        : ONE_MONTH;
     return { timeLength, intervalInSeconds };
   } else {
     return { timeLength: 0, intervalInSeconds: 0 };
@@ -67,15 +74,19 @@ export function useTimeline(
     );
   };
 
-  const timeLengthResult = useMemo(() => getTimeLengthFromInterval(interval), [interval]);
+  const displayInterval = useMemo(() => getDisplayInterval(interval), [interval]);
+
+  const timeLengthResult = useMemo(() => getTimeLengthFromInterval(displayInterval), [
+    displayInterval,
+  ]);
   const { timeLength, intervalInSeconds } = timeLengthResult;
 
   const timerange: InfraTimerangeInput = {
-    interval: interval ?? '',
+    interval: displayInterval ?? '',
     to: currentTime + intervalInSeconds * 1000,
     from: currentTime - timeLength * 1000,
-    lookbackSize: 0,
     ignoreLookback: true,
+    forceInterval: true,
   };
 
   const { error, loading, response, makeRequest } = useHTTPRequest<SnapshotNodeResponse>(