Migrate Errors tab to REST API

Author: kshmidt-digma

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/digmaCodeGen";
 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 | null
+): 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,10 @@ 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,
+  ErrorFlowFrameStack
+} from "../../../../../redux/services/types";
 import { useErrorsSelector } from "../../../../../store/errors/useErrorsSelector";
 import { useStore } from "../../../../../store/useStore";
 import { isNull } from "../../../../../typeGuards/isNull";
@@ -15,8 +19,6 @@ import { actions } from "../../../actions";
 import { trackingEvents } from "../../../tracking";
 import type {
   FilesURIsMap,
-  Frame,
-  FrameStack,
   GetFilesURIsPayload,
   GoToCodeLocationPayload,
   GoToTracePayload,
@@ -41,7 +43,7 @@ export const FlowStack = ({ data }: FlowStackProps) => {
   const stacksContainerRef = useRef<HTMLDivElement>(null);
 
   const frameStacks = useMemo(
-    () => data.frameStacks.filter(Boolean) as FrameStack[],
+    () => data.frameStacks.filter(Boolean) as ErrorFlowFrameStack[],
     [data]
   );
 
@@ -131,7 +133,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.filter(Boolean) as ErrorFlowFrame[];
           const visibleFrames = showWorkspaceOnly
             ? frames.filter((x) => x.codeObjectId && filesURIs[x.codeObjectId])
             : frames;
@@ -143,7 +145,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/types.ts

@@ -1,6 +1,6 @@
-import type { ErrorDetails } from "../types";
+import type { GetErrorResponse } from "../../../../redux/services/types";
 
 export interface ErrorDetailsCardContentProps {
   id: string;
-  data: ErrorDetails;
+  data: GetErrorResponse;
 }

src/components/Errors/ErrorDetails/ErrorDetailsCardHeader/types.ts

@@ -1,6 +1,6 @@
-import type { ErrorDetails } from "../types";
+import type { GetErrorResponse } from "../../../../redux/services/types";
 
 export interface ErrorDetailsCardHeaderProps {
   onGoBack: () => void;
-  data: ErrorDetails;
+  data: GetErrorResponse;
 }