From a17338651c17b5e2bda0d252dbbaca2af636704a Mon Sep 17 00:00:00 2001 From: Zacqary Adam Xeper Date: Wed, 23 Sep 2020 13:53:16 -0500 Subject: [PATCH] [Metrics UI] Minor fixes to inventory timeline (#78226) --- .../components/waffle/interval_label.tsx | 2 +- .../inventory_view/hooks/use_timeline.ts | 39 ++++++++++++------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/interval_label.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/interval_label.tsx index 6e031c8396f076..dbbfb0f49c0e9c 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/interval_label.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/interval_label.tsx @@ -22,7 +22,7 @@ export const IntervalLabel = ({ intervalAsString }: Props) => {

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_timeline.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_timeline.ts index 650eda0362d9e2..acf9011ac7ddd4 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_timeline.ts +++ b/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(