Migrate Errors tab to REST API (#1356)

* Migrate Errors tab to REST API

* Reenable Open In IDE in Sandbox

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: kshmidt-digma

eslint.config.mjs

@@ -17,7 +17,7 @@ export default tseslint.config(
       parserOptions: {
         project: "./tsconfig.eslint.json",
         tsconfigRootDir: import.meta.dirname,
-        ecmaVersion: 2022
+        ecmaVersion: 2023
       }
     },
     rules: {

src/components/Errors/ErrorCard/mockData.ts

@@ -1,13 +1,13 @@
-import type { Error } from "../types";
+import type { Error } from "../../../redux/services/types";
 
 export const mockedError: Error = {
   uid: "1",
   name: "Very long long long long long long long error name",
   scoreInfo: {
     score: 100,
     scoreParams: {
-      param1: "value1",
-      param2: "value2"
+      param1: 1,
+      param2: 2
     }
   },
   codeObjectId: "codeObjectId1",

src/components/Errors/ErrorCard/types.ts

@@ -1,4 +1,4 @@
-import type { Error } from "../types";
+import type { Error } from "../../../redux/services/types";
 
 export interface ErrorCardProps {
   data: Error;

src/components/Errors/ErrorDetails/ErrorDetails.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ErrorDetails } from ".";
 import { actions } from "../actions";
-import { mockedErrorDetails } from "./mockData";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof ErrorDetails> = {
@@ -20,13 +19,6 @@ type Story = StoryObj<typeof ErrorDetails>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   play: () => {
-    window.setTimeout(() => {
-      window.postMessage({
-        type: "digma",
-        action: actions.SET_ERROR_DETAILS,
-        payload: mockedErrorDetails
-      });
-    }, 1000);
     window.setTimeout(() => {
       window.postMessage({
         type: "digma",

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/SpanFrameGroup/index.tsx

@@ -1,16 +1,16 @@
 import type { MouseEvent } from "react";
 import { v4 as uuidv4 } from "uuid";
+import type { ErrorFlowFrame } from "../../../../../../redux/services/types";
 import { isString } from "../../../../../../typeGuards/isString";
 import { sendUserActionTrackingEvent } from "../../../../../../utils/actions/sendUserActionTrackingEvent";
 import { CodeIcon } from "../../../../../common/icons/12px/CodeIcon";
 import { OpenTelemetryLogoIcon } from "../../../../../common/icons/12px/OpenTelemetryLogoIcon";
 import { Tooltip } from "../../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../../tracking";
-import type { Frame } from "../../../types";
 import * as s from "./styles";
 import type { FrameItemCodeLocation, SpanFrameGroupProps } from "./types";
 
-const getFrameItemText = (frame: Frame) => {
+const getFrameItemText = (frame: ErrorFlowFrame) => {
   if (window.ide === "PyCharm" && frame.executedCode) {
     return frame.executedCode;
   }

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/SpanFrameGroup/typeGuards.ts

@@ -1,8 +1,8 @@
+import type { ErrorOriginService } from "../../../../../../redux/services/types";
 import { isObject } from "../../../../../../typeGuards/isObject";
 import { isString } from "../../../../../../typeGuards/isString";
-import type { ServiceInfo } from "../../../types";
 
 export const isServiceInfoWithName = (
-  x: ServiceInfo | null
-): x is Omit<ServiceInfo, "serviceName"> & { serviceName: string } =>
+  x: ErrorOriginService
+): x is Omit<ErrorOriginService, "serviceName"> & { serviceName: string } =>
   isObject(x) && isString(x.serviceName);

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/SpanFrameGroup/types.ts

@@ -1,4 +1,5 @@
-import type { FilesURIsMap, Frame } from "../../../types";
+import type { ErrorFlowFrame } from "../../../../../../redux/services/types";
+import type { FilesURIsMap } from "../../../types";
 
 export interface FrameItemCodeLocation {
   URI: string;
@@ -7,7 +8,7 @@ export interface FrameItemCodeLocation {
 
 export interface SpanFrameGroupProps {
   spanName: string;
-  frames: Frame[];
+  frames: ErrorFlowFrame[];
   filesURIs: FilesURIsMap;
   onGoCodeLocation: (location: FrameItemCodeLocation) => void;
 }

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import type { DataFetcherConfiguration } from "../../../../../hooks/useFetchData";
 import { useFetchData } from "../../../../../hooks/useFetchData";
+import type { ErrorFlowFrame } from "../../../../../redux/services/types";
 import { useErrorsSelector } from "../../../../../store/errors/useErrorsSelector";
 import { useStore } from "../../../../../store/useStore";
 import { isNull } from "../../../../../typeGuards/isNull";
@@ -15,8 +16,6 @@ import { actions } from "../../../actions";
 import { trackingEvents } from "../../../tracking";
 import type {
   FilesURIsMap,
-  Frame,
-  FrameStack,
   GetFilesURIsPayload,
   GoToCodeLocationPayload,
   GoToTracePayload,
@@ -40,15 +39,12 @@ export const FlowStack = ({ data }: FlowStackProps) => {
   const { setErrorDetailsWorkspaceItemsOnly } = useStore.getState();
   const stacksContainerRef = useRef<HTMLDivElement>(null);
 
-  const frameStacks = useMemo(
-    () => data.frameStacks.filter(Boolean) as FrameStack[],
-    [data]
-  );
+  const frameStacks = useMemo(() => data.frameStacks ?? [], [data]);
 
   const filesURIsPayload = useMemo(
     () => ({
       codeObjectIds: frameStacks
-        .map((stack) => stack.frames.map((x) => x?.codeObjectId))
+        .map((stack) => stack.frames?.map((x) => x?.codeObjectId) ?? [])
         .flat()
         .filter(isString)
     }),
@@ -83,9 +79,10 @@ export const FlowStack = ({ data }: FlowStackProps) => {
         payload: {
           traceId,
           spanName:
-            frameStacks[0].frames[0]?.spanName ??
+            frameStacks[0].frames?.[0]?.spanName ??
             `Sample trace for error ${exceptionType ?? ""}`.trim(),
-          spanCodeObjectId: frameStacks[0].frames[0]?.codeObjectId ?? undefined
+          spanCodeObjectId:
+            frameStacks[0].frames?.[0]?.codeObjectId ?? undefined
         }
       });
     }
@@ -131,7 +128,7 @@ export const FlowStack = ({ data }: FlowStackProps) => {
     <s.Container>
       <s.StacksContainer ref={stacksContainerRef}>
         {frameStacks.map((x) => {
-          const frames = x.frames.filter(Boolean) as Frame[];
+          const frames = x.frames ?? [];
           const visibleFrames = showWorkspaceOnly
             ? frames.filter((x) => x.codeObjectId && filesURIs[x.codeObjectId])
             : frames;
@@ -143,7 +140,7 @@ export const FlowStack = ({ data }: FlowStackProps) => {
               acc[acc.length - 1].push(frame);
             }
             return acc;
-          }, [] as Frame[][]);
+          }, [] as ErrorFlowFrame[][]);
 
           return (
             <s.StackContainer key={uuidv4()}>

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/types.ts

@@ -1,7 +1,7 @@
-import type { FlowInfo } from "../../types";
+import type { ErrorFlowInfo } from "../../../../../redux/services/types";
 
 export interface FlowProps {
-  data: FlowInfo;
+  data: ErrorFlowInfo;
 }
 
 export interface ShowOnlyWorkspaceErrorStackTraceItemsPayload {

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNow } from "../../../../hooks/useNow";
 import { usePrevious } from "../../../../hooks/usePrevious";
-import { isNull } from "../../../../typeGuards/isNull";
 import { isNumber } from "../../../../typeGuards/isNumber";
 import { isString } from "../../../../typeGuards/isString";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
@@ -33,20 +32,21 @@ export const ErrorDetailsCardContent = ({
     }
   }, [previousId, id]);
 
-  const services = data.originServices
-    .filter(isServiceInfoWithName)
-    .map((x) => x.serviceName);
+  const services =
+    data.originServices
+      ?.filter(isServiceInfoWithName)
+      .map((x) => x.serviceName) ?? [];
   const startedTooltip = new Date(data.firstOccurenceTime).toString();
   const startedString = formatTimeDistance(data.firstOccurenceTime, now);
   const lastTooltip = new Date(data.lastOccurenceTime).toString();
   const lastString = formatTimeDistance(data.lastOccurenceTime, now);
   const avgPerDay = data.dayAvg;
 
-  const flows = data.errors.filter((x) => !isNull(x));
+  const flows = data.errors ?? [];
   const currentFlow = flows[currentFlowStack];
 
   const isPreviousFlowButtonDisabled = currentFlowStack === 0;
-  const isNextFlowButtonDisabled = currentFlowStack === flows.length - 1;
+  const isNextFlowButtonDisabled = currentFlowStack >= flows.length - 1;
 
   const handleFlowPaginationButtonClick = (flowNumber: number) => () => {
     sendUserActionTrackingEvent(trackingEvents.FLOW_PAGINATION_BUTTON_CLICKED);
@@ -101,8 +101,10 @@ export const ErrorDetailsCardContent = ({
           <span>
             Flow Stacks{" "}
             <s.FlowsCountNumber>
-              <s.CurrentFlowNumber>{currentFlowStack + 1}</s.CurrentFlowNumber>/
-              {data.errors.length}
+              <s.CurrentFlowNumber>
+                {flows.length > 0 ? currentFlowStack + 1 : 0}
+              </s.CurrentFlowNumber>
+              /{flows.length}
             </s.FlowsCountNumber>
           </span>
           <s.IconButton
@@ -116,7 +118,9 @@ export const ErrorDetailsCardContent = ({
             />
           </s.IconButton>
         </s.FlowPagination>
-        <FlowStack data={currentFlow} key={currentFlowStack} />
+        {flows.length > 0 && (
+          <FlowStack data={currentFlow} key={currentFlowStack} />
+        )}
       </s.FlowsContainer>
     </s.Container>
   );