duration change

src/components/Insights/DurationChange/DurationChange.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DurationChange } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof DurationChange> = {
+  title: "Insights/DurationChange",
+  component: DurationChange,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Success: Story = {
+  args: {
+    previousDuration: {
+      value: 455.16,
+      unit: "ms",
+      raw: 455156000
+    },
+    currentDuration: {
+      value: 3.22,
+      unit: "sec",
+      raw: 3222871000
+    },
+    changeTime: "2023-06-30T11:09:55.000Z"
+  }
+};

src/components/Insights/common/DurationChange/DurationChange.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DurationChange } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof DurationChange> = {
+  title: "Insights/common/DurationChange",
+  component: DurationChange,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Degradation: Story = {
+  args: {
+    previousDuration: {
+      value: 455.16,
+      unit: "ms",
+      raw: 455156000
+    },
+    currentDuration: {
+      value: 3.22,
+      unit: "sec",
+      raw: 3222871000
+    },
+    changeTime: "2023-06-30T11:09:55.000Z"
+  }
+};
+
+export const Improved: Story = {
+  args: {
+    previousDuration: {
+      value: 3.22,
+      unit: "sec",
+      raw: 3222871000
+    },
+    currentDuration: {
+      value: 455.16,
+      unit: "ms",
+      raw: 455156000
+    },
+    changeTime: "2023-06-30T11:09:55.000Z"
+  }
+};

src/components/Insights/common/DurationChange/index.tsx

@@ -0,0 +1,111 @@
+import { formatDuration, intervalToDuration } from "date-fns";
+import { Duration } from "../../../../globals";
+import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
+import { roundTo } from "../../../../utils/roundTo";
+import { ArrowIcon } from "../../../common/icons/ArrowIcon";
+import { Direction } from "../../../common/icons/types";
+import { Tag } from "../../../common/v3/Tag";
+import { TagType } from "../../../common/v3/Tag/types";
+import { Tooltip } from "../../../common/v3/Tooltip";
+import * as s from "./styles";
+import { DurationChangeProps } from "./types";
+
+const DURATION_RATIO_MIN_LIMIT = 0.1;
+const DURATION_DIFF_MIN_LIMIT = 10 * 1000; // in nanoseconds
+
+const getTagType = (direction?: Direction): TagType => {
+  switch (direction) {
+    case Direction.DOWN:
+      return "success";
+    case Direction.UP:
+      return "highSeverity";
+    case Direction.LEFT:
+    case Direction.RIGHT:
+    default:
+      return "default";
+  }
+};
+
+export const isChangeMeaningfulEnough = (
+  currentDuration: Duration,
+  previousDuration: Duration | null,
+  changeTime: string | null
+): boolean => {
+  let isChangeMeaningfulEnough = false;
+
+  if (previousDuration && changeTime) {
+    const diff = Math.abs(currentDuration.raw - previousDuration.raw);
+
+    isChangeMeaningfulEnough =
+      diff / previousDuration.raw > DURATION_RATIO_MIN_LIMIT &&
+      diff > DURATION_DIFF_MIN_LIMIT;
+  }
+
+  return isChangeMeaningfulEnough;
+};
+
+export const getDurationDifferenceString = (
+  previousDuration: Duration,
+  currentDuration: Duration
+) => {
+  const diff =
+    Math.abs(previousDuration.raw - currentDuration.raw) / 1000 / 1000; // in milliseconds
+
+  if (diff < 1000) {
+    return `${roundTo(diff, 2)} ms`;
+  }
+
+  const seconds = diff / 1000;
+
+  if (seconds < 60) {
+    return `${roundTo(seconds, 2)} sec`;
+  }
+
+  const minutes = seconds / 60;
+
+  if (minutes < 60) {
+    return `${roundTo(minutes, 2)} min`;
+  }
+
+  return formatDuration(intervalToDuration({ start: 0, end: diff })); // approximate for the units larger then hours as start and end dates are unknown
+};
+
+export const DurationChange = (props: DurationChangeProps) => {
+  const isChangeMeaningful = isChangeMeaningfulEnough(
+    props.currentDuration,
+    props.previousDuration,
+    props.changeTime
+  );
+
+  const direction =
+    props.previousDuration &&
+    props.previousDuration.raw > props.currentDuration.raw
+      ? Direction.DOWN
+      : Direction.UP;
+
+  return (
+    <>
+      {props.previousDuration && props.changeTime && isChangeMeaningful && (
+        <Tag
+          type={getTagType(direction)}
+          content={
+            <Tooltip title={formatTimeDistance(props.changeTime)}>
+              <s.ArrowContainer>
+                <ArrowIcon
+                  direction={direction}
+                  color="currentColor"
+                  size={12}
+                />
+
+                {getDurationDifferenceString(
+                  props.previousDuration,
+                  props.currentDuration
+                )}
+              </s.ArrowContainer>
+            </Tooltip>
+          }
+        />
+      )}
+    </>
+  );
+};

src/components/Insights/common/DurationChange/styles.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const ArrowContainer = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;

src/components/Insights/common/DurationChange/types.ts

@@ -0,0 +1,7 @@
+import { Duration } from "../../../../globals";
+
+export interface DurationChangeProps {
+  currentDuration: Duration;
+  previousDuration: Duration | null;
+  changeTime: string | null;
+}