Add Live View to the Recent Activity

.storybook/preview-head.html

@@ -5,4 +5,8 @@
     font-weight: 500;
     font-style: normal;
   }
+
+  #storybook-root {
+    height: 100%;
+  }
 </style>

package.json

@@ -79,12 +79,15 @@
   "dependencies": {
     "@floating-ui/react": "^0.21.0",
     "@tanstack/react-table": "^8.7.8",
+    "allotment": "^1.19.0",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.29.3",
     "react": "^18.2.0",
     "react-cool-dimensions": "^3.0.1",
     "react-dom": "^18.2.0",
+    "react-scrollbar-size": "^5.0.0",
     "react-transition-group": "^4.4.5",
+    "recharts": "^2.6.2",
     "styled-components": "^5.3.6"
   }
 }

src/components/Assets/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { dispatcher } from "../../dispatcher";
+import { isNumber } from "../../typeGuards/isNumber";
 import { addPrefix } from "../../utils/addPrefix";
 import { groupBy } from "../../utils/groupBy";
 import { AssetList } from "./AssetList";
@@ -13,10 +14,9 @@ import {
   GroupedAssetEntries
 } from "./types";
 
-const REFRESH_INTERVAL =
-  typeof window.assetsRefreshInterval === "number"
-    ? window.assetsRefreshInterval
-    : 10 * 1000; // in milliseconds
+const REFRESH_INTERVAL = isNumber(window.assetsRefreshInterval)
+  ? window.assetsRefreshInterval
+  : 10 * 1000; // in milliseconds
 
 const ACTION_PREFIX = "ASSETS";
 

src/components/Assets/types.ts

@@ -1,4 +1,8 @@
-import { Duration } from "../../globals";
+import {
+  DurationPercentileWithChange,
+  SpanInfo,
+  SpanInstanceInfo
+} from "../../types";
 
 export interface AssetsProps {
   data?: AssetsData;
@@ -25,38 +29,19 @@ export interface Insight {
   };
 }
 
-export interface DurationPercentiles {
-  percentile: number;
-  currentDuration: Duration;
-  previousDuration: Duration | null;
-  changeTime: string | null;
-  changeVerified: boolean | null;
-  traceIds: string[];
+export interface AssetEntrySpanInfo extends SpanInfo {
+  classification: string;
+  role: string;
 }
 
 export interface AssetEntry {
-  span: {
-    classification: string;
-    role: string;
-    name: string;
-    displayName: string;
-    instrumentationLibrary: string;
-    methodCodeObjectId: string;
-    spanCodeObjectId: string;
-    kind: string;
-    codeObjectId: string;
-  };
+  span: AssetEntrySpanInfo;
   assetType: string;
   serviceName: string;
   endpointCodeObjectId: string | null;
-  durationPercentiles: DurationPercentiles[];
+  durationPercentiles: DurationPercentileWithChange[];
   insights: Insight[];
-  lastSpanInstanceInfo: {
-    traceId: string;
-    spanId: string;
-    startTime: string;
-    duration: Duration;
-  };
+  lastSpanInstanceInfo: SpanInstanceInfo;
   firstDataSeenTime: string;
 }
 

src/components/InstallationWizard/Step/index.tsx

@@ -2,6 +2,7 @@ import { useRef } from "react";
 import useDimensions from "react-cool-dimensions";
 import { CSSTransition } from "react-transition-group";
 import { useTheme } from "styled-components";
+import { isNumber } from "../../../typeGuards/isNumber";
 import { CheckmarkCircleInvertedIcon } from "../../common/icons/CheckmarkCircleInvertedIcon";
 import * as s from "./styles";
 import { StepProps } from "./types";
@@ -13,10 +14,9 @@ const DEFAULT_TRANSITION_DURATION = 300; // in milliseconds
 export const Step = (props: StepProps) => {
   const theme = useTheme();
 
-  const transitionDuration =
-    typeof props.transitionDuration === "number"
-      ? props.transitionDuration
-      : DEFAULT_TRANSITION_DURATION;
+  const transitionDuration = isNumber(props.transitionDuration)
+    ? props.transitionDuration
+    : DEFAULT_TRANSITION_DURATION;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const numberRef = useRef<HTMLSpanElement>(null);

src/components/InstallationWizard/index.tsx

@@ -6,6 +6,7 @@ import { IDE } from "../../globals";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
 import { ide } from "../../platform";
+import { isString } from "../../typeGuards/isString";
 import { addPrefix } from "../../utils/addPrefix";
 import { actions as globalActions } from "../common/App";
 import { getThemeKind } from "../common/App/styles";
@@ -77,8 +78,7 @@ const firstStep = window.wizardSkipInstallationStep === true ? 1 : 0;
 const preselectedIsObservabilityEnabled =
   window.isObservabilityEnabled === true;
 
-const preselectedEmail =
-  typeof window.userEmail === "string" ? window.userEmail : "";
+const preselectedEmail = isString(window.userEmail) ? window.userEmail : "";
 
 // TO DO:
 // add environment variable for presetting the correct installation type

src/components/RecentActivity/LiveView/LiveView.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LiveView } from ".";
+import { mockData } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof LiveView> = {
+  title: "Recent Activity/LiveView",
+  component: LiveView,
+  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>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+export const Empty: Story = {
+  args: {
+    data: {
+      ...mockData,
+      liveDataRecords: []
+    }
+  }
+};
+
+export const WithData: Story = {
+  args: {
+    data: mockData
+  }
+};

src/components/RecentActivity/LiveView/TooltipContent/index.tsx

@@ -0,0 +1,6 @@
+import * as s from "./styles";
+import { TooltipContentProps } from "./types";
+
+export const TooltipContent = (props: TooltipContentProps) => (
+  <s.Container>{props.children}</s.Container>
+);

src/components/RecentActivity/LiveView/TooltipContent/styles.ts

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  padding: 8px;
+  gap: 4px;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#4d668a";
+      case "dark":
+      case "dark-jetbrains":
+        return "#dadada";
+    }
+  }};
+
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#fbfdff";
+      case "dark":
+      case "dark-jetbrains":
+        return "#2e2e2e";
+    }
+  }};
+`;

src/components/RecentActivity/LiveView/TooltipContent/types.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface TooltipContentProps {
+  children: ReactNode;
+}