From f80e614e64d727cfeed2dc33034b55c8a7776135 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 22 Mar 2024 15:19:12 +0200 Subject: [PATCH 01/66] Added Create Env Panel --- .../CreateEnvironmentPanel.stories.tsx | 27 +++ .../Tab/Tab.stories.tsx | 41 ++++ .../CreateEnvironmentPanel/Tab/index.tsx | 20 ++ .../CreateEnvironmentPanel/Tab/styles.ts | 41 ++++ .../CreateEnvironmentPanel/Tab/types.ts | 14 ++ .../CreateEnvironmentPanel/index.tsx | 34 +++ .../CreateEnvironmentPanel/styles.ts | 51 +++++ .../CreateEnvironmentPanel/types.ts | 8 + .../CreateEnvironmentWizard/index.tsx | 216 ++++++++++++++++++ .../CreateEnvironmentWizard/styles.ts | 29 +++ .../CreateEnvironmentWizard/types.ts | 21 ++ src/components/common/App/typographies.ts | 6 + .../common/icons/12px/CheckIcon.tsx | 25 ++ 13 files changed, 533 insertions(+) create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/index.tsx create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/styles.ts create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/index.tsx create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/styles.ts create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/types.ts create mode 100644 src/components/common/icons/12px/CheckIcon.tsx diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx new file mode 100644 index 000000000..fc8845437 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { CreateEnvironmentPanel } from "."; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Recent Activity/CreateEnvironmentPanel", + component: CreateEnvironmentPanel, + 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; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Local: Story = { + args: { + tabs: [ + { index: 1, name: "Environment Name", state: "confirmed" }, + { index: 2, name: "Register", state: "active" }, + { index: 3, name: "Environment Type", state: "pending" } + ] + } +}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx new file mode 100644 index 000000000..78eadccd4 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx @@ -0,0 +1,41 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { Tab } from "."; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Recent Activity/CreateEnvironmentPanel/Tab", + component: Tab, + 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; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Active: Story = { + args: { + index: 1, + name: "Environment Name", + state: "active" + } +}; + +export const Pending: Story = { + args: { + index: 1, + name: "Environment Name", + state: "pending" + } +}; + +export const Cnofirmed: Story = { + args: { + index: 1, + name: "Environment Name", + state: "confirmed" + } +}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx new file mode 100644 index 000000000..e38655877 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx @@ -0,0 +1,20 @@ +import { useTheme } from "styled-components"; +import { CheckIcon } from "../../../../common/icons/12px/CheckIcon"; +import * as s from "./styles"; +import { TabProps } from "./types"; + +export const Tab = ({ index, name, state }: TabProps) => { + const theme = useTheme(); + return ( + + + {state === "confirmed" ? ( + + ) : ( + index + )} + + {name} + + ); +}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts new file mode 100644 index 000000000..f927fe977 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts @@ -0,0 +1,41 @@ +import styled from "styled-components"; +import { + caption2BoldTypography, + footnoteRegularTypography +} from "../../../../common/App/typographies"; +import { IndexProps, NameProps } from "./types"; + +export const Container = styled.div` + display: flex; + align-items: center; + gap: 8px; +`; + +export const Index = styled.div` + display: flex; + width: 20px; + height: 20px; + justify-content: center; + border-radius: 12px; + align-items: center; + ${({ $state, theme }) => { + switch ($state) { + case "active": + return `background: ${theme.colors.v3.surface.brandPrimary};`; + case "pending": + return `border: 1px solid ${theme.colors.v3.surface.highlight};`; + case "confirmed": + return `border: 1px solid ${theme.colors.v3.status.success};`; + default: + return ""; + } + }}; + + ${caption2BoldTypography} +`; + +export const Name = styled.div` + ${footnoteRegularTypography} + display: flex; + opacity: ${({ $isActive }) => (!$isActive ? 0.5 : 1)}; +`; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts new file mode 100644 index 000000000..5a052a48b --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts @@ -0,0 +1,14 @@ +export interface TabProps { + index: number; + name: string; + state: TabState; +} +export type TabState = "active" | "confirmed" | "pending"; + +export interface IndexProps { + $state: TabState; +} + +export interface NameProps { + $isActive: boolean; +} diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/index.tsx new file mode 100644 index 000000000..0cdbc8160 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/index.tsx @@ -0,0 +1,34 @@ +import { Tab } from "./Tab"; +import * as s from "./styles"; +import { CreateEnvironmentPanelProps } from "./types"; + +export const CreateEnvironmentPanel = ({ + onCancel, + tabs +}: CreateEnvironmentPanelProps) => { + return ( + + Add New Environment + + + + {tabs.map((tab) => { + return ( + + ); + })} + + + + + ); +}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/styles.ts new file mode 100644 index 000000000..1bfa81b67 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/styles.ts @@ -0,0 +1,51 @@ +import styled from "styled-components"; +import { subscriptSemiboldTypography } from "../../../common/App/typographies"; +import { Button } from "../../../common/v3/Button"; + +export const Container = styled.div` + display: flex; + align-items: center; + width: 100%; + gap: 4px; + padding: 0 12px; + height: 44px; + box-sizing: border-box; + background: ${({ theme }) => theme.colors.v3.surface.sidePanelHeader}; + box-shadow: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "0 5px 10px 0 rgb(0 0 0 / 15%)"; + case "dark": + case "dark-jetbrains": + return "0 9px 24px 0 rgb(0 0 0 / 30%)"; + } + }}; +`; + +export const Divider = styled.div` + margin: 0 8px; + border-radius: 1px; + width: 1px; + height: 13px; + background: ${({ theme }) => theme.colors.v3.stroke.primary}; +`; + +export const Header = styled.div` + ${subscriptSemiboldTypography} + display: flex; +`; + +export const ContentContainer = styled.div` + display: flex; + justify-content: space-between; + flex: 1; +`; + +export const TabPanel = styled.div` + display: flex; + gap: 16px; +`; + +export const CancelButton = styled(Button)` + border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark}; +`; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts new file mode 100644 index 000000000..cea336ed3 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts @@ -0,0 +1,8 @@ +export interface CreateEnvironmentPanelProps { + onCancel: () => void; + tabs: { + index: number; + name: string; + state: "active" | "confirmed" | "pending"; + }[]; +} diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx new file mode 100644 index 000000000..0f6103cde --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx @@ -0,0 +1,216 @@ +// import { useContext, useState } from "react"; +// import { useTheme } from "styled-components"; +// import { actions as globalActions } from "../../../actions"; +// import { getHostnameFromURL } from "../../../utils/getHostNameFromURL"; +// import { ConfigContext } from "../../common/App/ConfigContext"; +// import { getThemeKind } from "../../common/App/styles"; +// import { EnvironmentType } from "../../common/App/types"; +// import { CodeSnippet } from "../../common/CodeSnippet"; +// import { Link } from "../../common/Link"; +// import { DesktopIcon } from "../../common/icons/DesktopIcon"; +// import { InfinityIcon } from "../../common/icons/InfinityIcon"; +// import { PlayButtonWithCursorIcon } from "../../common/icons/PlayButtonWithCursorIcon"; +// import { SetupOrgDigmaPanel } from "../SetupOrgDigmaPanel"; +// import { Overlay } from "../styles"; +// import * as s from "./styles"; +// import { +// EnvironmentInstructionsPanelContent, +// EnvironmentInstructionsPanelProps +// } from "./types"; + +// const getEnvironmentVariableString = ( +// isMicrometerProject: boolean, +// environmentName: string +// ) => +// isMicrometerProject +// ? `MANAGEMENT_OPENTELEMETRY_RESOURCE-ATTRIBUTES_digma_environment=${environmentName}` +// : `OTEL_RESOURCE_ATTRIBUTES=digma.environment=${environmentName}`; + +// export const EnvironmentInstructionsPanel = ( +// props: EnvironmentInstructionsPanelProps +// ) => { +// const [isOrgDigmaSetupGuideVisible, setIsOrgDigmaSetupGuideVisible] = +// useState(false); +// const theme = useTheme(); +// const themeKind = getThemeKind(theme); +// const config = useContext(ConfigContext); +// const hostname = +// getHostnameFromURL(config.digmaApiUrl) || "[DIGMA_BACKEND_URL]"; +// const environmentVariableString = getEnvironmentVariableString( +// config.isMicrometerProject, +// props.environment.originalName +// ); + +// const handleOrgDigmaSetupGuideLinkClick = () => { +// setIsOrgDigmaSetupGuideVisible(true); +// }; + +// const handleAddToRunConfigLinkClick = () => { +// if (props.onAddEnvironmentToRunConfig) { +// props.onAddEnvironmentToRunConfig(props.environment.originalName); +// } +// }; + +// const handleTroubleshootLinkClick = () => { +// globalActions.OPEN_TROUBLESHOOTING_GUIDE; +// window.sendMessageToDigma({ +// action: globalActions.OPEN_TROUBLESHOOTING_GUIDE +// }); +// }; + +// const handleOrgDigmaSetupClose = () => { +// setIsOrgDigmaSetupGuideVisible(false); +// }; + +// if (isOrgDigmaSetupGuideVisible) { +// return ( +// +// +// +// ); +// } + +// const environmentTypesContent: Record< +// EnvironmentType, +// EnvironmentInstructionsPanelContent +// > = { +// local: { +// icon: DesktopIcon, +// title: "How to setup your Digma Environment", +// instrumentation: { +// title: "Instrument your code", +// content: ( +// <> +// +// Set up the following environment variables when running your code +// to tag the observability data with this run config: +// +// +// +// +// Add to the active run config +// + +// {props.environment.additionToConfigResult === "success" && ( +// +// Successfully added +// +// )} +// {props.environment.additionToConfigResult === "failure" && ( +// +// Failed to add +// +// )} +// +// Troubleshoot +// +// ) +// }, +// run: { +// title: "Run your Application", +// content: ( +// <> +// +// Running your app will integrate your environment and Digma can +// start showing you info! +// +// +// +// ) +// } +// }, +// shared: { +// icon: InfinityIcon, +// title: "Connecting your CI/Prod Environment", +// instrumentation: { +// title: "Instrument your application", +// content: ( +// <> +// +// Add the following to your build/prod deployment scripts, +// don't forget to set the SERVICE_NAME variable +// +// +// +// ) +// }, +// run: { +// title: "Deploy your application / run the build", +// content: ( +// <> +// +// Running your app will integrate your environment and Digma can +// start showing you info! +// +// +// +// +// +// ) +// } +// } +// }; + +// const content = props.environment.type +// ? environmentTypesContent[props.environment.type] +// : null; + +// if (!content) { +// return null; +// } + +// return ( +// +// +// +// +// +// {content.title} +// +// {props.environment.type === "shared" && ( +// +// CI/Prod environments require Digma to be installed in your +// organization. Follow{" "} +// these steps{" "} +// to set that up. +// +// )} +// +// +// +// 1 +// {content.instrumentation.title} +// +// +// {content.instrumentation.content} +// +// +// +// +// 2 +// {content.run.title} +// +// +// {content.run.content} +// +// +// +// +// ); +// }; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/styles.ts new file mode 100644 index 000000000..f2b4df84a --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/styles.ts @@ -0,0 +1,29 @@ +import styled from "styled-components"; + +export const Container = styled.div` + display: flex; + align-items: center; + width: 100%; + gap: 4px; + padding: 0 12px; + height: 36px; + box-sizing: border-box; + background: ${({ theme }) => theme.colors.tabPanel.background}; + box-shadow: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "0 5px 10px 0 rgb(0 0 0 / 15%)"; + case "dark": + case "dark-jetbrains": + return "0 9px 24px 0 rgb(0 0 0 / 30%)"; + } + }}; +`; + +export const Divider = styled.div` + margin: 0 8px; + border-radius: 1px; + width: 1px; + height: 13px; + background: ${({ theme }) => theme.colors.tabPanel.divider}; +`; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/types.ts new file mode 100644 index 000000000..7af046827 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/types.ts @@ -0,0 +1,21 @@ +import { MemoExoticComponent } from "react"; +import { IconProps } from "../../common/icons/types"; +import { ExtendedEnvironment } from "../types"; + +export interface EnvironmentInstructionsPanelProps { + environment: ExtendedEnvironment; + onAddEnvironmentToRunConfig?: (environment: string) => void; +} + +export interface EnvironmentInstructionsPanelContent { + icon: MemoExoticComponent<(props: IconProps) => JSX.Element>; + title: string; + instrumentation: { + title: string; + content: JSX.Element; + }; + run: { + title: string; + content: JSX.Element; + }; +} diff --git a/src/components/common/App/typographies.ts b/src/components/common/App/typographies.ts index bf71ff7d0..782582501 100644 --- a/src/components/common/App/typographies.ts +++ b/src/components/common/App/typographies.ts @@ -71,6 +71,12 @@ export const caption2RegularTypography = css` line-height: ${typographies.captionTwo.lineHeight}px; `; +export const caption2BoldTypography = css` + font-size: ${typographies.captionTwo.fontSize}px; + font-weight: ${typographies.captionTwo.fontWeight.bold}; + line-height: ${typographies.captionTwo.lineHeight}px; +`; + export const footnoteRegularTypography = css` font-size: ${typographies.footNote.fontSize}px; font-weight: ${typographies.footNote.fontWeight.regular}; diff --git a/src/components/common/icons/12px/CheckIcon.tsx b/src/components/common/icons/12px/CheckIcon.tsx new file mode 100644 index 000000000..3b8333f68 --- /dev/null +++ b/src/components/common/icons/12px/CheckIcon.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { RotatableIconProps } from "../types"; + +const CheckIconComponent = (props: RotatableIconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + ); +}; + +export const CheckIcon = React.memo(CheckIconComponent); From 48be132112864b27d9aa2282d634dd3ca8db6dd7 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 22 Mar 2024 19:01:55 +0200 Subject: [PATCH 02/66] Added new Env step --- .../CreateEnvironmentPanel.stories.tsx | 4 +- .../Tab/Tab.stories.tsx | 6 +- .../CreateEnvironmentPanel/Tab/index.tsx | 2 +- .../CreateEnvironmentPanel/Tab/styles.ts | 4 +- .../CreateEnvironmentPanel/Tab/types.ts | 7 +- .../CreateEnvironmentPanel/types.ts | 4 +- .../EnvironmentNameStep.stories.tsx | 21 ++ .../EnvironmentNameStep/index.tsx | 67 +++++ .../EnvironmentNameStep/styles.ts | 51 ++++ .../EnvironmentNameStep/types.ts | 8 + .../CreateEnvironmentWizard/index.tsx | 273 +++++------------- .../CreateEnvironmentWizard/styles.ts | 36 +-- src/components/common/App/typographies.ts | 6 + .../common/icons/12px/CheckCircleIcon.tsx | 34 +++ .../common/icons/12px/CheckIcon.tsx | 4 +- .../common/icons/12px/ErrorIcon.tsx | 33 +++ .../common/v3/TextField/TextField.stories.tsx | 30 ++ src/components/common/v3/TextField/index.tsx | 36 +++ src/components/common/v3/TextField/styles.ts | 27 ++ src/components/common/v3/TextField/types.ts | 14 + 20 files changed, 425 insertions(+), 242 deletions(-) create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/EnvironmentNameStep.stories.tsx create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/styles.ts create mode 100644 src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/types.ts create mode 100644 src/components/common/icons/12px/CheckCircleIcon.tsx create mode 100644 src/components/common/icons/12px/ErrorIcon.tsx create mode 100644 src/components/common/v3/TextField/TextField.stories.tsx create mode 100644 src/components/common/v3/TextField/index.tsx create mode 100644 src/components/common/v3/TextField/styles.ts create mode 100644 src/components/common/v3/TextField/types.ts diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx index fc8845437..a4ec108fb 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/CreateEnvironmentPanel.stories.tsx @@ -19,9 +19,9 @@ type Story = StoryObj; export const Local: Story = { args: { tabs: [ - { index: 1, name: "Environment Name", state: "confirmed" }, + { index: 1, name: "Environment Name", state: "completed" }, { index: 2, name: "Register", state: "active" }, - { index: 3, name: "Environment Type", state: "pending" } + { index: 3, name: "Environment Type", state: "not-completed" } ] } }; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx index 78eadccd4..8c06ddbcb 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx @@ -28,14 +28,14 @@ export const Pending: Story = { args: { index: 1, name: "Environment Name", - state: "pending" + state: "not-completed" } }; -export const Cnofirmed: Story = { +export const Confirmed: Story = { args: { index: 1, name: "Environment Name", - state: "confirmed" + state: "completed" } }; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx index e38655877..9a575ee47 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx @@ -8,7 +8,7 @@ export const Tab = ({ index, name, state }: TabProps) => { return ( - {state === "confirmed" ? ( + {state === "completed" ? ( ) : ( index diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts index f927fe977..b7bbcd763 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts @@ -22,9 +22,9 @@ export const Index = styled.div` switch ($state) { case "active": return `background: ${theme.colors.v3.surface.brandPrimary};`; - case "pending": + case "not-completed": return `border: 1px solid ${theme.colors.v3.surface.highlight};`; - case "confirmed": + case "completed": return `border: 1px solid ${theme.colors.v3.status.success};`; default: return ""; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts index 5a052a48b..e590e7e93 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts @@ -1,12 +1,13 @@ +import { StepStatus } from "../../../../InstallationWizard/Step/types"; + export interface TabProps { index: number; name: string; - state: TabState; + state: StepStatus; } -export type TabState = "active" | "confirmed" | "pending"; export interface IndexProps { - $state: TabState; + $state: StepStatus; } export interface NameProps { diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts index cea336ed3..d7fa3ed77 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts @@ -1,8 +1,10 @@ +import { StepStatus } from "../../../InstallationWizard/Step/types"; + export interface CreateEnvironmentPanelProps { onCancel: () => void; tabs: { index: number; name: string; - state: "active" | "confirmed" | "pending"; + state: StepStatus; }[]; } diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/EnvironmentNameStep.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/EnvironmentNameStep.stories.tsx new file mode 100644 index 000000000..6294fa679 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/EnvironmentNameStep.stories.tsx @@ -0,0 +1,21 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EnvironmentNameStep } from "."; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Recent Activity/CreateEnvironmentPanel/EnvironmentNameStep", + component: EnvironmentNameStep, + 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; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Default: Story = { + args: {} +}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx new file mode 100644 index 000000000..de3229a87 --- /dev/null +++ b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx @@ -0,0 +1,67 @@ +import { ChangeEvent, useState } from "react"; +import { useTheme } from "styled-components"; +import { CheckCircleIcon } from "../../../common/icons/12px/CheckCircleIcon"; +import { ErrorIcon } from "../../../common/icons/12px/ErrorIcon"; +import { Button } from "../../../common/v3/Button"; +import * as s from "./styles"; +import { EnvironmentNameStepProps } from "./types"; + +const ENVIRONMENT_NAME_REGEX = /^[A-Z0-9_.-]{1,50}$/; + +export const EnvironmentNameStep = ({ + onNameChange, + onNext +}: EnvironmentNameStepProps) => { + const theme = useTheme(); + const [name, setName] = useState(null); + const [isValid, setIsValid] = useState(true); + + const changeHandler = (e: ChangeEvent) => { + const value = e.target.value.toUpperCase(); + setName(value); + + if (!ENVIRONMENT_NAME_REGEX.test(value)) { + setIsValid(false); + return; + } + setIsValid(true); + onNameChange(value); + }; + + const getInputState = () => { + if (name === null) { + return <>; + } + + return isValid ? ( + + ) : ( + + ); + }; + + return ( + + + Name your Environment + + Name must contain only Latin letters (A-Z), digits (0-9), hyphen (-), + underscore (_) and dot(.) and must be at most 50 characters long + + + + + - - - - ); -}; diff --git a/src/components/RecentActivity/AddEnvironmentDialog/styles.ts b/src/components/RecentActivity/AddEnvironmentDialog/styles.ts deleted file mode 100644 index 2298be958..000000000 --- a/src/components/RecentActivity/AddEnvironmentDialog/styles.ts +++ /dev/null @@ -1,64 +0,0 @@ -import styled from "styled-components"; - -export const Container = styled.div` - display: flex; - flex-direction: column; - gap: 8px; - padding: 8px; - font-size: 14px; - width: 302px; - border-radius: 2px; - box-shadow: 0 4px 4px 0 rgb(0 0 0 / 12%); - color: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#818594"; - case "dark": - case "dark-jetbrains": - return "#b4b8bf"; - } - }}; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f7f8fa"; - case "dark": - case "dark-jetbrains": - return "#2b2d30"; - } - }}; -`; - -export const Header = styled.div` - display: flex; - justify-content: space-between; -`; - -export const CloseButton = styled.button` - padding: 0; - cursor: pointer; - background: none; - border: none; - height: 14px; -`; - -export const ButtonsContainer = styled.div` - display: flex; - gap: 8px; - justify-content: flex-end; -`; - -export const ErrorMessage = styled.div` - display: flex; - align-items: center; - gap: 4px; - color: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#e00036"; - case "dark": - case "dark-jetbrains": - return "#f93967"; - } - }}; -`; diff --git a/src/components/RecentActivity/AddEnvironmentDialog/types.ts b/src/components/RecentActivity/AddEnvironmentDialog/types.ts deleted file mode 100644 index 99a0038a6..000000000 --- a/src/components/RecentActivity/AddEnvironmentDialog/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ExtendedEnvironment } from "../types"; - -export interface AddEnvironmentDialogProps { - onClose: () => void; - onEnvironmentAdd: (environmentName: string) => void; - environments: ExtendedEnvironment[]; -} diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorsPanel.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorsPanel.stories.tsx index 4e78f2ff3..ec7cd905b 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorsPanel.stories.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorsPanel.stories.tsx @@ -18,7 +18,11 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Default: Story = { args: { - title: "Incorrect name", - description: "Please use a valid name for your environment." + errors: [ + { + title: "Incorrect name", + description: "Please use a valid name for your environment." + } + ] } }; diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx index 37c883242..349a7f779 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx @@ -20,7 +20,7 @@ export const Local: Story = { args: { environment: { name: "MY_ENV", - originalName: "MY_ENV", + id: "MY_ENV", isPending: true, hasRecentActivity: false, additionToConfigResult: null, @@ -36,7 +36,7 @@ export const Shared: Story = { args: { environment: { name: "MY_ENV", - originalName: "MY_ENV", + id: "MY_ENV", isPending: true, hasRecentActivity: false, additionToConfigResult: null, diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index 48adeebc8..987468efd 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -38,7 +38,7 @@ export const EnvironmentInstructionsPanel = ( getHostnameFromURL(config.digmaApiUrl) || "[DIGMA_BACKEND_URL]"; const environmentVariableString = getEnvironmentVariableString( config.isMicrometerProject, - props.environment.originalName + props.environment.id ); const handleOrgDigmaSetupGuideLinkClick = () => { @@ -47,7 +47,7 @@ export const EnvironmentInstructionsPanel = ( const handleAddToRunConfigLinkClick = () => { if (props.onAddEnvironmentToRunConfig) { - props.onAddEnvironmentToRunConfig(props.environment.originalName); + props.onAddEnvironmentToRunConfig(props.environment.id); } }; @@ -144,7 +144,7 @@ curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-ja export JAVA_TOOL_OPTIONS="-javaagent:/otel/opentelemetry-javaagent.jar -Dotel.exporter.otlp.endpoint=http://${hostname}:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar -Dotel.metrics.exporter=none -Dotel.logs.exporter=none -Dotel.exporter.otlp.protocol=grpc" export OTEL_SERVICE_NAME={--ENTER YOUR SERVICE NAME HERE--} -export OTEL_RESOURCE_ATTRIBUTES=digma.environment=${props.environment.originalName}`} +export OTEL_RESOURCE_ATTRIBUTES=digma.environment=${props.environment.id}`} language={"bash"} /> diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx index be46cc900..65716ca9c 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx @@ -49,7 +49,7 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { const handleMenuItemSelect = (value: string) => { switch (value) { case "delete": - props.onEnvironmentDelete(props.environment.originalName); + props.onEnvironmentDelete(props.environment.id); break; } diff --git a/src/components/RecentActivity/EnvironmentPanel/index.tsx b/src/components/RecentActivity/EnvironmentPanel/index.tsx index aa4942901..ddcd49d24 100644 --- a/src/components/RecentActivity/EnvironmentPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/index.tsx @@ -208,12 +208,9 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => { {props.environments.map((environment) => ( diff --git a/src/components/RecentActivity/RecentActivity.stories.tsx b/src/components/RecentActivity/RecentActivity.stories.tsx index c800e754b..1955bc98f 100644 --- a/src/components/RecentActivity/RecentActivity.stories.tsx +++ b/src/components/RecentActivity/RecentActivity.stories.tsx @@ -24,7 +24,7 @@ const data: RecentActivityData = { environments: [ { name: "ENV_RENDER", - originalName: "ENV_RENDER", + id: "ENV_RENDER", isPending: false, additionToConfigResult: null, type: "public", @@ -34,7 +34,7 @@ const data: RecentActivityData = { }, { name: "ENV_RENDER", - originalName: "ENV_RENDER1", + id: "ENV_RENDER1", isPending: false, additionToConfigResult: null, type: "public", @@ -44,7 +44,7 @@ const data: RecentActivityData = { }, { name: "UNSET_ENV", - originalName: "UNSET_ENV", + id: "UNSET_ENV", isPending: false, additionToConfigResult: null, type: "public", @@ -54,7 +54,7 @@ const data: RecentActivityData = { }, { name: "PENDING_NO_TYPE", - originalName: "PENDING_NO_TYPE", + id: "PENDING_NO_TYPE", isPending: true, additionToConfigResult: null, type: null, @@ -64,7 +64,7 @@ const data: RecentActivityData = { }, { name: "PENDING_LOCAL", - originalName: "PENDING_LOCAL", + id: "PENDING_LOCAL", isPending: true, additionToConfigResult: null, type: "private", @@ -74,7 +74,7 @@ const data: RecentActivityData = { }, { name: "PENDING_SHARED", - originalName: "PENDING_SHARED", + id: "PENDING_SHARED", isPending: true, additionToConfigResult: null, type: "public", @@ -84,7 +84,7 @@ const data: RecentActivityData = { }, { name: "PENDING_SHARED_LOCALHOST", - originalName: "PENDING_SHARED_LOCALHOST", + id: "PENDING_SHARED_LOCALHOST", isPending: true, additionToConfigResult: null, type: "public", @@ -94,7 +94,7 @@ const data: RecentActivityData = { }, { name: "PENDING_SHARED_CUSTOM_DOMAIN", - originalName: "PENDING_SHARED_CUSTOM_DOMAIN", + id: "PENDING_SHARED_CUSTOM_DOMAIN", isPending: true, additionToConfigResult: null, type: "public", @@ -104,8 +104,7 @@ const data: RecentActivityData = { }, { name: "VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-LONG-NAME", - originalName: - "VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-LONG-NAME", + id: "VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-LONG-NAME", isPending: false, additionToConfigResult: null, type: "private", @@ -653,7 +652,7 @@ export const WithEmptyEnv: Story = { environments: [ { name: "ENV_RENDER", - originalName: "ENV_RENDER", + id: "ENV_RENDER", isPending: false, additionToConfigResult: null, type: "private", diff --git a/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx b/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx index 8d68ac3c4..6af407e15 100644 --- a/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx +++ b/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx @@ -20,7 +20,7 @@ export const Default: Story = { args: { environment: { name: "MY_ENV", - originalName: "MY_ENV", + id: "MY_ENV", isPending: true, hasRecentActivity: false, additionToConfigResult: null, diff --git a/src/components/RecentActivity/SetupOrgDigmaPanel/index.tsx b/src/components/RecentActivity/SetupOrgDigmaPanel/index.tsx index 40a601aa7..5804cf143 100644 --- a/src/components/RecentActivity/SetupOrgDigmaPanel/index.tsx +++ b/src/components/RecentActivity/SetupOrgDigmaPanel/index.tsx @@ -144,18 +144,18 @@ export const SetupOrgDigmaPanel = (props: SetupOrgDigmaPanelProps) => { }; const handleCloseButtonClick = () => { - props.onCancel(props.environment.originalName); + props.onCancel(props.environment.id); }; const handleCancelButtonClick = () => { - props.onCancel(props.environment.originalName); + props.onCancel(props.environment.id); }; const handleTestConnectionButtonClick = () => { window.sendMessageToDigma({ action: actions.CHECK_REMOTE_ENVIRONMENT_CONNECTION, payload: { - environment: props.environment.originalName, + environment: props.environment.id, token: apiToken, serverAddress: serverApiUrl } @@ -183,7 +183,7 @@ export const SetupOrgDigmaPanel = (props: SetupOrgDigmaPanelProps) => { }); if (areSettingsMatch) { - props.onFinish(props.environment.originalName); + props.onFinish(props.environment.id); } else { setIsSettingsMessageVisible(true); } @@ -194,7 +194,7 @@ export const SetupOrgDigmaPanel = (props: SetupOrgDigmaPanelProps) => { }; if (skipOrgDigmaSetupGuide) { - props.onFinish(props.environment.originalName); + props.onFinish(props.environment.id); return null; } diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index a2e0e2e32..4e04b0470 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -65,8 +65,8 @@ export const RecentActivity = (props: RecentActivityProps) => { data ? data.environments.map((environment) => ({ ...environment, - hasRecentActivity: environmentActivities[environment.originalName] - ? environmentActivities[environment.originalName].some(isRecent) + hasRecentActivity: environmentActivities[environment.id] + ? environmentActivities[environment.id].some(isRecent) : false })) : [], @@ -76,7 +76,7 @@ export const RecentActivity = (props: RecentActivityProps) => { useEffect(() => { setSelectedEnvironment((selectedEnvironment) => { const environmentToSelect = environments.find( - (x) => x.originalName === selectedEnvironment?.originalName + (x) => x.id === selectedEnvironment?.id ); if (environmentToSelect) { @@ -91,22 +91,6 @@ export const RecentActivity = (props: RecentActivityProps) => { window.sendMessageToDigma({ action: actions.INITIALIZE }); - - // const handleOpenRegistrationDialog = () => { - // setIsRegistrationPopupVisible(true); - // }; - - // dispatcher.addActionListener( - // actions.OPEN_REGISTRATION_DIALOG, - // handleOpenRegistrationDialog - // ); - - // return () => { - // dispatcher.removeActionListener( - // actions.OPEN_REGISTRATION_DIALOG, - // handleOpenRegistrationDialog - // ); - // }; }, []); const handleEnvironmentSelect = (environment: ExtendedEnvironment) => { @@ -119,7 +103,7 @@ export const RecentActivity = (props: RecentActivityProps) => { action: actions.GO_TO_SPAN, payload: { span, - environment: selectedEnvironment.originalName + environment: selectedEnvironment.id } }); } @@ -185,8 +169,8 @@ export const RecentActivity = (props: RecentActivityProps) => { } if ( - !environmentActivities[selectedEnvironment.originalName] || - !environmentActivities[selectedEnvironment.originalName].length + !environmentActivities[selectedEnvironment.id] || + !environmentActivities[selectedEnvironment.id].length ) { return ( { { return showCreationWizard ? ( { - if (newEnvName) { - const newEnv = environments.find((x) => x.name == newEnvName); + onClose={(newEnvId) => { + if (newEnvId) { + const newEnv = environments.find((x) => x.id == newEnvId); newEnv && setSelectedEnvironment(newEnv); } setShowCreationWizard(false); diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts index 51e9b9d90..c0a610d8e 100644 --- a/src/components/RecentActivity/types.ts +++ b/src/components/RecentActivity/types.ts @@ -62,7 +62,7 @@ export interface ActivityEntry { export interface Environment { name: string; - originalName: string; + id: string; isPending: boolean; additionToConfigResult: "success" | "failure" | null; type: EnvironmentType | null; diff --git a/src/components/Tests/index.tsx b/src/components/Tests/index.tsx index 6376f03d4..88d48e793 100644 --- a/src/components/Tests/index.tsx +++ b/src/components/Tests/index.tsx @@ -85,9 +85,9 @@ export const Tests = (props: TestsProps) => { const environmentMenuItems: MenuItem[] = (config.environments || []).map( (environment) => ({ - value: environment.originalName, + value: environment.id, label: environment.name, - selected: selectedEnvironments.includes(environment.originalName) + selected: selectedEnvironments.includes(environment.id) }) ); @@ -96,7 +96,7 @@ export const Tests = (props: TestsProps) => { environments: selectedEnvironments.length > 0 ? selectedEnvironments - : (config.environments || []).map((x) => x.originalName) + : (config.environments || []).map((x) => x.id) }), [selectedEnvironments, config.environments] ); diff --git a/src/components/common/App/types.ts b/src/components/common/App/types.ts index 9b9abcecd..31b75a068 100644 --- a/src/components/common/App/types.ts +++ b/src/components/common/App/types.ts @@ -34,7 +34,7 @@ export enum DeploymentType { export type EnvironmentType = "public" | "private"; export interface Environment { - originalName: string; + id: string; name: string; type: EnvironmentType | null; } diff --git a/src/components/common/EnvironmentIcon/index.tsx b/src/components/common/EnvironmentIcon/index.tsx index 86a13cee6..fbb505461 100644 --- a/src/components/common/EnvironmentIcon/index.tsx +++ b/src/components/common/EnvironmentIcon/index.tsx @@ -7,7 +7,7 @@ export const EnvironmentIcon = (props: EnvironmentIconProps) => { return null; } - return props.environment.name === props.environment.originalName ? ( + return props.environment.id === props.environment.id ? ( ) : ( diff --git a/src/typeGuards/isEnvironment.ts b/src/typeGuards/isEnvironment.ts index ad97340c1..cbd4d7616 100644 --- a/src/typeGuards/isEnvironment.ts +++ b/src/typeGuards/isEnvironment.ts @@ -3,7 +3,4 @@ import { isObject } from "./isObject"; import { isString } from "./isString"; export const isEnvironment = (x: unknown): x is Environment => - isObject(x) && - isString(x.originalName) && - isString(x.name) && - isString(x.type); + isObject(x) && isString(x.id) && isString(x.name) && isString(x.type); From 4d91c3b8bac3fd7f082fbdc8e624a6234f46056f Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 29 Mar 2024 11:39:36 +0200 Subject: [PATCH 15/66] Fixed styles --- .../Navigation/ScopeNavigation/index.tsx | 15 +------------ .../RegisterStep/index.tsx | 2 +- .../CreateEnvironmentWizard/index.tsx | 13 ++++++----- .../CreateEnvironmentWizard/types.ts | 1 + .../RecentActivity/RecentActivity.stories.tsx | 21 ++++++++++++++++++ src/components/RecentActivity/index.tsx | 22 ++++++++++++++----- src/components/RecentActivity/styles.ts | 4 ++++ src/components/RecentActivity/types.ts | 2 ++ 8 files changed, 53 insertions(+), 27 deletions(-) diff --git a/src/components/Navigation/ScopeNavigation/index.tsx b/src/components/Navigation/ScopeNavigation/index.tsx index a0516170f..77adfc5b1 100644 --- a/src/components/Navigation/ScopeNavigation/index.tsx +++ b/src/components/Navigation/ScopeNavigation/index.tsx @@ -5,11 +5,7 @@ import { usePrevious } from "../../../hooks/usePrevious"; import { HistoryManager } from "../../../utils/HistoryManager"; import { ConfigContext } from "../../common/App/ConfigContext"; import { Scope } from "../../common/App/types"; -import { - ChangeEnvironmentPayload, - ChangeScopePayload, - ChangeViewPayload -} from "../types"; +import { ChangeScopePayload, ChangeViewPayload } from "../types"; import { actions as globalActions } from "./../actions"; import { HistoryNavigationPanel } from "./HistoryNavigationPanel"; import { ScopeNavigationProps } from "./types"; @@ -88,15 +84,6 @@ export const ScopeNavigation = (props: ScopeNavigationProps) => { } }); } - - if (historyStep && historyStep.environment) { - window.sendMessageToDigma({ - action: globalActions.CHANGE_ENVIRONMENT, - payload: { - environment: historyStep.environment.id - } - }); - } } }; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx index 9cc0ca0f3..bc73f24cd 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx @@ -1,12 +1,12 @@ import { KeyboardEvent, useContext, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import { actions as globalActions } from "../../../../actions"; import { usePrevious } from "../../../../hooks/usePrevious"; import { isValidEmailFormat } from "../../../../utils/isValidEmailFormat"; import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent"; import { ConfigContext } from "../../../common/App/ConfigContext"; import { EnvelopeIcon } from "../../../common/icons/16px/EnvelopeIcon"; import { UserIcon } from "../../../common/icons/UserIcon"; -import { actions as globalActions } from "../../actions"; import { isWorkEmail } from "./isWorkEmail"; import * as s from "./styles"; import { RegisterStepProps, RegistrationFormValues } from "./types"; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx index 9c5b4e0c6..50e23caf7 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx @@ -28,25 +28,26 @@ export const CreateEnvironmentWizard = ({ type: null }); const [completed, setCompleted] = useState(false); - const [errors, setErrors] = useState([ - { description: "blabla", title: "again" } - ]); + const [errors, setErrors] = useState([]); const [stepsStatus, setStepsStatus] = useState([ { key: ENVIRONMENT_NAME_STEP, name: "Environment Name", - status: "not-completed" + status: "not-completed", + errors: [] }, { key: REGISTER_STEP, name: "Register", status: "not-completed", + errors: [], isHidden: !!config.userRegistrationEmail }, { key: ENVIRONMENT_TYPE_STEP, name: "Environment Type", - status: "not-completed" + status: "not-completed", + errors: [] } ]); @@ -76,7 +77,7 @@ export const CreateEnvironmentWizard = ({ handleEnvironmentCreated ); }; - }, []); + }, [errors]); const getSteps = () => stepsStatus.filter((x) => !x.isHidden); diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/types.ts index 486a0dfd3..52f810c82 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/types.ts @@ -14,4 +14,5 @@ export interface StepDefinitions { name: string; isFinished?: boolean; isHidden?: boolean; + errors?: []; } diff --git a/src/components/RecentActivity/RecentActivity.stories.tsx b/src/components/RecentActivity/RecentActivity.stories.tsx index 1955bc98f..2e0b815ec 100644 --- a/src/components/RecentActivity/RecentActivity.stories.tsx +++ b/src/components/RecentActivity/RecentActivity.stories.tsx @@ -116,6 +116,7 @@ const data: RecentActivityData = { entries: [ { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /webjars/**", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /webjars/**", @@ -144,6 +145,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /webjars/**", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /webjars/**", @@ -165,6 +167,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/{ownerId}", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /owners/{ownerId}", @@ -196,6 +199,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /owners", @@ -235,6 +239,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/find", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /owners/find", @@ -257,6 +262,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /", @@ -278,6 +284,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /vets.html", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /vets.html", @@ -317,6 +324,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP POST /owners/{ownerId}/pets/new", firstEntrySpan: { @@ -349,6 +357,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/{ownerId}/pets/new", firstEntrySpan: { @@ -372,6 +381,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP POST /owners/{ownerId}/edit", firstEntrySpan: { @@ -412,6 +422,7 @@ const data: RecentActivityData = { }, { environment: "ENV_RENDER", + environmentId: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/{ownerId}/edit", firstEntrySpan: { @@ -435,6 +446,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /whiskey/get/{name}", firstEntrySpan: { displayText: "na:na", @@ -455,6 +467,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /book/get/{id}", firstEntrySpan: { displayText: "na:na", @@ -475,6 +488,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /book/id/{id}", firstEntrySpan: { displayText: "na:na", @@ -495,6 +509,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET GET - /", firstEntrySpan: { displayText: "na:na", @@ -515,6 +530,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /users/get/{username}", firstEntrySpan: { displayText: "na:na", @@ -535,6 +551,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /book", firstEntrySpan: { displayText: "na:na", @@ -555,6 +572,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/HighUsage", firstEntrySpan: { @@ -576,6 +594,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/ErrorHotspot", firstEntrySpan: { @@ -597,6 +616,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/SpanBottleneck", firstEntrySpan: { @@ -618,6 +638,7 @@ const data: RecentActivityData = { }, { environment: "UNSET_ENV", + environmentId: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/SlowEndpoint", firstEntrySpan: { diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index 4e04b0470..ed6852f93 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -56,7 +56,7 @@ export const RecentActivity = (props: RecentActivityProps) => { const { observe, entry } = useDimensions(); const environmentActivities = useMemo( - () => (data ? groupBy(data.entries, (x) => x.environment) : {}), + () => (data ? groupBy(data.entries, (x) => x.environmentId) : {}), [data] ); @@ -164,13 +164,20 @@ export const RecentActivity = (props: RecentActivityProps) => { }; const renderContent = () => { - if (!selectedEnvironment) { - return ; + if ( + !selectedEnvironment || + !environmentActivities[selectedEnvironment.id] + ) { + return ( + + + + ); } if ( - !environmentActivities[selectedEnvironment.id] || - !environmentActivities[selectedEnvironment.id].length + !environmentActivities[selectedEnvironment.id].length && + selectedEnvironment.isNew ) { return ( { onClose={(newEnvId) => { if (newEnvId) { const newEnv = environments.find((x) => x.id == newEnvId); - newEnv && setSelectedEnvironment(newEnv); + if (newEnv) { + newEnv.isNew = true; + setSelectedEnvironment(newEnv); + } } setShowCreationWizard(false); }} diff --git a/src/components/RecentActivity/styles.ts b/src/components/RecentActivity/styles.ts index b97a6b01d..125040d0f 100644 --- a/src/components/RecentActivity/styles.ts +++ b/src/components/RecentActivity/styles.ts @@ -111,3 +111,7 @@ export const Overlay = styled.div` overflow: auto; z-index: ${LAYERS.OVERLAY}; `; + +export const NoDataContainer = styled.div` + padding: 16px 12px 20px; +`; diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts index c0a610d8e..132b34e4c 100644 --- a/src/components/RecentActivity/types.ts +++ b/src/components/RecentActivity/types.ts @@ -51,6 +51,7 @@ export interface SlimInsight { export interface ActivityEntry { environment: string; + environmentId: string; traceFlowDisplayName: string; firstEntrySpan: EntrySpan; lastEntrySpan: EntrySpan | null; @@ -73,6 +74,7 @@ export interface Environment { export interface ExtendedEnvironment extends Environment { hasRecentActivity: boolean; + isNew?: boolean; } export interface RecentActivityData { From 0978eea27dce07b9d6c768b91a1ee56bed15c324 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 29 Mar 2024 17:01:01 +0200 Subject: [PATCH 16/66] fixed autoselect --- src/components/Navigation/types.ts | 2 +- .../Tab/Tab.stories.tsx | 8 ++ .../CreateEnvironmentPanel/Tab/index.tsx | 22 +++-- .../CreateEnvironmentPanel/Tab/types.ts | 2 +- .../CreateEnvironmentPanel/types.ts | 2 +- .../EnvironmentNameStep/index.tsx | 11 ++- .../EnvironmentNameStep/types.ts | 1 + .../CreateEnvironmentWizard/index.tsx | 90 ++++++++++++++----- .../CreateEnvironmentWizard/types.ts | 8 +- src/components/RecentActivity/index.tsx | 5 +- src/components/RecentActivity/types.ts | 6 +- src/types.ts | 3 +- 12 files changed, 117 insertions(+), 43 deletions(-) diff --git a/src/components/Navigation/types.ts b/src/components/Navigation/types.ts index 9c82ba32d..8213b8477 100644 --- a/src/components/Navigation/types.ts +++ b/src/components/Navigation/types.ts @@ -16,7 +16,7 @@ export interface OpenDocumentationPayload { } export interface OpenDashboardPayload { - environment?: Environment | null; + environment?: string | null; } export interface GoToCodeLocationPayload { diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx index 8c06ddbcb..cc55c7acb 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/Tab.stories.tsx @@ -39,3 +39,11 @@ export const Confirmed: Story = { state: "completed" } }; + +export const Error: Story = { + args: { + index: 1, + name: "Environment Name", + state: "error" + } +}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx index 9a575ee47..1f17ed8df 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx @@ -1,19 +1,27 @@ import { useTheme } from "styled-components"; +import { DefaultTheme } from "styled-components/dist/types"; import { CheckIcon } from "../../../../common/icons/12px/CheckIcon"; +import { ErrorIcon } from "../../../../common/icons/16px/ErrorIcon"; +import { StepStatus } from "../../types"; import * as s from "./styles"; import { TabProps } from "./types"; +const getState = (index: number, theme: DefaultTheme, state: StepStatus) => { + switch (state) { + case "completed": + return ; + case "error": + return ; + default: + return index; + } +}; + export const Tab = ({ index, name, state }: TabProps) => { const theme = useTheme(); return ( - - {state === "completed" ? ( - - ) : ( - index - )} - + {getState(index, theme, state)} {name} ); diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts index e590e7e93..30d6a0400 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/types.ts @@ -1,4 +1,4 @@ -import { StepStatus } from "../../../../InstallationWizard/Step/types"; +import { StepStatus } from "../../types"; export interface TabProps { index: number; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts index 3e4bbfa84..5741217df 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/types.ts @@ -1,4 +1,4 @@ -import { StepStatus } from "../../../InstallationWizard/Step/types"; +import { StepStatus } from "../types"; export interface CreateEnvironmentPanelProps { onCancel: () => void; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx index 6ec057738..1318eb52e 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useState } from "react"; +import { ChangeEvent, useEffect, useState } from "react"; import { useTheme } from "styled-components"; import { CheckCircleIcon } from "../../../common/icons/12px/CheckCircleIcon"; import { ErrorIcon } from "../../../common/icons/12px/ErrorIcon"; @@ -10,11 +10,16 @@ const ENVIRONMENT_NAME_REGEX = /^[A-Z0-9_.-]{1,50}$/; export const EnvironmentNameStep = ({ onNameChange, - onNext + onNext, + isInvalid }: EnvironmentNameStepProps) => { const theme = useTheme(); const [name, setName] = useState(null); - const [isValid, setIsValid] = useState(true); + const [isValid, setIsValid] = useState(!isInvalid); + + useEffect(() => { + setIsValid(!isInvalid); + }, [isInvalid]); const handleNext = () => { onNext(false); diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/types.ts index c0049c0d4..c458baade 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/types.ts @@ -1,4 +1,5 @@ export interface EnvironmentNameStepProps { onNameChange: (name: string) => void; onNext: (isFinished: boolean) => void; + isInvalid?: boolean; } diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx index 50e23caf7..a131121c2 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx @@ -1,8 +1,13 @@ import { useContext, useEffect, useState } from "react"; import { dispatcher } from "../../../dispatcher"; import { ConfigContext } from "../../common/App/ConfigContext"; +import { Environment } from "../../common/App/types"; import { actions } from "../actions"; -import { CreateEnvironmentPayload, EnvironmentCreatedData } from "../types"; +import { + CreateEnvironmentPayload, + EnvironmentCreatedData, + ErrorResponseData +} from "../types"; import { CreateEnvironmentPanel } from "./CreateEnvironmentPanel"; import { EnvironmentCreated } from "./EnvironmentCreated"; import { EnvironmentNameStep } from "./EnvironmentNameStep"; @@ -11,7 +16,11 @@ import { ErrorsPanel } from "./ErrorsPanel"; import { ErrorData } from "./ErrorsPanel/types"; import { RegisterStep } from "./RegisterStep"; import * as s from "./styles"; -import { CreateEnvironmentWizardProps, StepDefinitions } from "./types"; +import { + CreateEnvironmentWizardProps, + ErrorDefinitions, + StepDefinitions +} from "./types"; const ENVIRONMENT_NAME_STEP = "environment name"; const ENVIRONMENT_TYPE_STEP = "environment type"; @@ -22,11 +31,11 @@ export const CreateEnvironmentWizard = ({ }: CreateEnvironmentWizardProps) => { const config = useContext(ConfigContext); const [currentStep, setCurrentStep] = useState(0); - const [newEnvironment, setNewEnvironment] = - useState({ - environment: "", - type: null - }); + const [newEnvironment, setNewEnvironment] = useState({ + name: "", + type: null, + id: "" + }); const [completed, setCompleted] = useState(false); const [errors, setErrors] = useState([]); const [stepsStatus, setStepsStatus] = useState([ @@ -34,36 +43,67 @@ export const CreateEnvironmentWizard = ({ key: ENVIRONMENT_NAME_STEP, name: "Environment Name", status: "not-completed", - errors: [] + errors: { + ExistingEnvironmentName: "Incorrect name" + } }, { key: REGISTER_STEP, name: "Register", status: "not-completed", - errors: [], + errors: {}, isHidden: !!config.userRegistrationEmail }, { key: ENVIRONMENT_TYPE_STEP, name: "Environment Type", status: "not-completed", - errors: [] + errors: {} } ]); useEffect(() => { + const getFailedSteps = (result: EnvironmentCreatedData) => { + return stepsStatus.filter((x) => + result.errors?.find((e) => x.errors && x.errors[e.errorCode]) + ); + }; + + const markFailedSteps = (steps: StepDefinitions[]) => { + steps.forEach((step) => (step.status = "error")); + setStepsStatus(stepsStatus); + }; + + const showErrors = ( + steps: StepDefinitions[], + errors: ErrorResponseData[] + ) => { + const errorsDetails: ErrorDefinitions = steps.reduce( + (errorsMap, step) => { + return { ...errorsMap, ...step.errors }; + }, + {} + ); + + setErrors( + errors.map((x) => ({ + title: errorsDetails[x.errorCode] || x.errorCode, + description: x.errorDescription + })) + ); + }; + const handleEnvironmentCreated = (data: unknown) => { const result = data as EnvironmentCreatedData; - if (!result.errorCode) { + if (!result.errors) { setCompleted(true); + setNewEnvironment({ ...newEnvironment, id: result.id }); return; } - errors.push({ - title: result.errorCode, - description: result.errorDescription - }); - setErrors(errors); + const failedSteps = getFailedSteps(result); + markFailedSteps(failedSteps); + showErrors(failedSteps, result.errors); }; dispatcher.addActionListener( @@ -77,7 +117,7 @@ export const CreateEnvironmentWizard = ({ handleEnvironmentCreated ); }; - }, [errors]); + }, [stepsStatus, newEnvironment]); const getSteps = () => stepsStatus.filter((x) => !x.isHidden); @@ -88,9 +128,13 @@ export const CreateEnvironmentWizard = ({ setStepsStatus(stepsStatus); if (currentStep === getSteps().length - 1) { + setErrors([]); window.sendMessageToDigma({ action: actions.CREATE_ENVIRONMENT, - payload: newEnvironment + payload: { + environment: newEnvironment.name, + type: newEnvironment.type + } }); return; @@ -151,7 +195,7 @@ export const CreateEnvironmentWizard = ({ }} cancelDisabled={completed} tabs={getSteps().map((step, index) => ({ - ...step, + name: step.name, index: index + 1, state: index === currentStep ? "active" : step.status }))} @@ -165,8 +209,12 @@ export const CreateEnvironmentWizard = ({ > x.key === ENVIRONMENT_NAME_STEP) + ?.status === "error" + } onNameChange={(value) => - setNewEnvironment({ ...newEnvironment, environment: value }) + setNewEnvironment({ ...newEnvironment, name: value }) } /> @@ -193,7 +241,7 @@ export const CreateEnvironmentWizard = ({ { - onClose(newEnvironment.environment); + onClose(newEnvironment.id); }} /> diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/types.ts index 52f810c82..818e17207 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/types.ts @@ -6,7 +6,7 @@ export interface StepProps { $isVisible: boolean; } -export type StepStatus = "completed" | "active" | "not-completed"; +export type StepStatus = "completed" | "active" | "not-completed" | "error"; export interface StepDefinitions { key: string; @@ -14,5 +14,9 @@ export interface StepDefinitions { name: string; isFinished?: boolean; isHidden?: boolean; - errors?: []; + errors?: ErrorDefinitions; +} + +export interface ErrorDefinitions { + [key: string]: string; } diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index 0721b200f..09fa039ee 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -3,7 +3,6 @@ import "allotment/dist/style.css"; import { KeyboardEvent, useContext, useEffect, useMemo, useState } from "react"; import useDimensions from "react-cool-dimensions"; import { actions as globalActions } from "../../actions"; -import { usePrevious } from "../../hooks/usePrevious"; import { ChangeEnvironmentPayload } from "../../types"; import { groupBy } from "../../utils/groupBy"; import { ConfigContext } from "../common/App/ConfigContext"; @@ -56,14 +55,12 @@ export const RecentActivity = (props: RecentActivityProps) => { liveData: props.liveData }); const config = useContext(ConfigContext); - const previousEnvironment = usePrevious(config.environment); const { observe, entry } = useDimensions(); const environmentActivities = useMemo( () => (data ? groupBy(data.entries, (x) => x.environmentId) : {}), [data] ); - const environments: ExtendedEnvironment[] = useMemo( () => data @@ -108,7 +105,7 @@ export const RecentActivity = (props: RecentActivityProps) => { window.sendMessageToDigma({ action: globalActions.CHANGE_ENVIRONMENT, payload: { - environment: environmentToSelect + environment: environmentToSelect.id } }); } diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts index 132b34e4c..86e083569 100644 --- a/src/components/RecentActivity/types.ts +++ b/src/components/RecentActivity/types.ts @@ -100,8 +100,12 @@ export interface CreateEnvironmentPayload { type: EnvironmentType | null; } -export interface EnvironmentCreatedData { +export interface ErrorResponseData { errorCode: string; errorDescription: string; +} + +export interface EnvironmentCreatedData { + errors?: ErrorResponseData[]; id: string; } diff --git a/src/types.ts b/src/types.ts index a4080a4bd..5b4d6abf9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,3 @@ -import { Environment } from "./components/common/App/types"; import { Duration } from "./globals"; export enum FeatureFlag { @@ -86,7 +85,7 @@ export interface GetInsightStatsPayload { } export interface ChangeEnvironmentPayload { - environment: Environment; + environment: string; } export interface ChangeScopePayload { From cecc9f54646deb284fbe4d31589d19fcea80bcd3 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 29 Mar 2024 17:38:23 +0200 Subject: [PATCH 17/66] Support delete --- src/components/RecentActivity/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index 09fa039ee..a599d14dd 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -150,7 +150,7 @@ export const RecentActivity = (props: RecentActivityProps) => { const handleConfirmEnvironmentDeletion = () => { window.sendMessageToDigma({ - action: actions.DELETE_ENVIRONMENT, + action: actions.DELETE_ENVIRONMENT_V2, payload: { environment: environmentToDelete } From da6957b602d682f87a3c781a24609b87cc5e13be Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 29 Mar 2024 18:02:25 +0200 Subject: [PATCH 18/66] Add new screen --- src/components/Assets/AssetList/index.tsx | 2 +- .../EnvironmentBar/EnvironmentBar.stories.tsx | 2 +- .../EnvironmentInstructionsPanel.stories.tsx | 4 ++-- .../EnvironmentInstructionsPanel/index.tsx | 6 +++--- .../EnvironmentTypePanel/index.tsx | 10 +++++----- .../RecentActivity/RecentActivity.stories.tsx | 18 +++++++++--------- .../SetupOrgDigmaPanel.stories.tsx | 2 +- src/components/RecentActivity/index.tsx | 10 +++++++--- src/components/common/App/types.ts | 2 +- 9 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 64ed057d2..caa399b50 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -263,7 +263,7 @@ export const AssetList = (props: AssetListProps) => { () => !( config.backendInfo?.deploymentType === DeploymentType.HELM && - config.environment?.type === "public" + config.environment?.type === "Public" ), [config.backendInfo?.deploymentType, config.environment?.type] ); diff --git a/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx b/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx index 7b73b81d5..ff26ca2d5 100644 --- a/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx +++ b/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx @@ -22,7 +22,7 @@ export const Default: Story = { selectedEnvironment: { id: "DEV", name: "DEV", - type: "private" + type: "Private" } } }; diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx index 349a7f779..9bf383916 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx @@ -24,7 +24,7 @@ export const Local: Story = { isPending: true, hasRecentActivity: false, additionToConfigResult: null, - type: "public", + type: "Public", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false @@ -40,7 +40,7 @@ export const Shared: Story = { isPending: true, hasRecentActivity: false, additionToConfigResult: null, - type: "public", + type: "Public", token: "token_string", serverApiUrl: "https://example.com:80", isOrgDigmaSetupFinished: false diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index 89790cb2d..d9266db77 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -81,7 +81,7 @@ export const EnvironmentInstructionsPanel = ( EnvironmentType, EnvironmentInstructionsPanelContent > = { - private: { + Private: { icon: DesktopIcon, title: "How to setup your Digma Environment", instrumentation: { @@ -128,7 +128,7 @@ export const EnvironmentInstructionsPanel = ( ) } }, - public: { + Public: { icon: InfinityIcon, title: "Connecting your CI/Prod Environment", instrumentation: { @@ -181,7 +181,7 @@ export OTEL_RESOURCE_ATTRIBUTES=digma.environment=${props.environment.id}`} return ( {content.title} - {props.environment.type === "public" && ( + {props.environment.type === "Public" && ( CI/Prod environments require Digma to be installed in your organization. Follow{" "} diff --git a/src/components/RecentActivity/EnvironmentTypePanel/index.tsx b/src/components/RecentActivity/EnvironmentTypePanel/index.tsx index 2d84cbed7..bc7381382 100644 --- a/src/components/RecentActivity/EnvironmentTypePanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentTypePanel/index.tsx @@ -24,7 +24,7 @@ export const EnvironmentTypePanel = (props: EnvironmentTypePanelProps) => { }); } - if (type === "public" && !config.backendInfo?.isCentralized) { + if (type === "Public" && !config.backendInfo?.isCentralized) { openURLInDefaultBrowser(DIGMA_FOR_TEAMS_URL); return; } @@ -34,28 +34,28 @@ export const EnvironmentTypePanel = (props: EnvironmentTypePanelProps) => { const environmentTypes: EnvironmentTypeData[] = [ { - type: "private", + type: "Private", title: "Local environment", description: "Define an environment for specific branches, types of tests or other criteria", icon: CodeIcon, button: ( handleEnvironmentTypeButtonClick("private")} + onClick={() => handleEnvironmentTypeButtonClick("Private")} label={"Add"} buttonType={"primary"} /> ) }, { - type: "public", + type: "Public", title: "CI/Prod environment", description: "Connect to centralized org systems such as CI builds, production servers etc.", icon: InfinityIcon, button: ( handleEnvironmentTypeButtonClick("public")} + onClick={() => handleEnvironmentTypeButtonClick("Public")} label={config.backendInfo?.isCentralized ? "Add" : "Learn more"} buttonType={"secondary"} /> diff --git a/src/components/RecentActivity/RecentActivity.stories.tsx b/src/components/RecentActivity/RecentActivity.stories.tsx index 2e0b815ec..491df604e 100644 --- a/src/components/RecentActivity/RecentActivity.stories.tsx +++ b/src/components/RecentActivity/RecentActivity.stories.tsx @@ -27,7 +27,7 @@ const data: RecentActivityData = { id: "ENV_RENDER", isPending: false, additionToConfigResult: null, - type: "public", + type: "Public", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false @@ -37,7 +37,7 @@ const data: RecentActivityData = { id: "ENV_RENDER1", isPending: false, additionToConfigResult: null, - type: "public", + type: "Public", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false @@ -47,7 +47,7 @@ const data: RecentActivityData = { id: "UNSET_ENV", isPending: false, additionToConfigResult: null, - type: "public", + type: "Public", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false @@ -67,7 +67,7 @@ const data: RecentActivityData = { id: "PENDING_LOCAL", isPending: true, additionToConfigResult: null, - type: "private", + type: "Private", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false @@ -77,7 +77,7 @@ const data: RecentActivityData = { id: "PENDING_SHARED", isPending: true, additionToConfigResult: null, - type: "public", + type: "Public", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false @@ -87,7 +87,7 @@ const data: RecentActivityData = { id: "PENDING_SHARED_LOCALHOST", isPending: true, additionToConfigResult: null, - type: "public", + type: "Public", token: null, serverApiUrl: "https://localhost:5051", isOrgDigmaSetupFinished: false @@ -97,7 +97,7 @@ const data: RecentActivityData = { id: "PENDING_SHARED_CUSTOM_DOMAIN", isPending: true, additionToConfigResult: null, - type: "public", + type: "Public", token: "token_string", serverApiUrl: "https://example.com", isOrgDigmaSetupFinished: false @@ -107,7 +107,7 @@ const data: RecentActivityData = { id: "VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-LONG-NAME", isPending: false, additionToConfigResult: null, - type: "private", + type: "Private", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false @@ -676,7 +676,7 @@ export const WithEmptyEnv: Story = { id: "ENV_RENDER", isPending: false, additionToConfigResult: null, - type: "private", + type: "Private", token: null, serverApiUrl: null, isOrgDigmaSetupFinished: false diff --git a/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx b/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx index 6af407e15..224e27306 100644 --- a/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx +++ b/src/components/RecentActivity/SetupOrgDigmaPanel/SetupOrgDigmaPanel.stories.tsx @@ -24,7 +24,7 @@ export const Default: Story = { isPending: true, hasRecentActivity: false, additionToConfigResult: null, - type: "public", + type: "Public", token: "token_string", serverApiUrl: "https://example.com:80", isOrgDigmaSetupFinished: false diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index a599d14dd..df20e81d9 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -81,6 +81,9 @@ export const RecentActivity = (props: RecentActivityProps) => { ); if (environmentToSelect) { + environmentToSelect.isNew = environmentToSelect?.hasRecentActivity + ? false + : selectedEnvironment?.isNew; return environmentToSelect; } @@ -179,8 +182,9 @@ export const RecentActivity = (props: RecentActivityProps) => { const renderContent = () => { if ( - !selectedEnvironment || - !environmentActivities[selectedEnvironment.id] + (!selectedEnvironment || + !environmentActivities[selectedEnvironment.id]) && + !selectedEnvironment?.isNew ) { return ( @@ -190,7 +194,7 @@ export const RecentActivity = (props: RecentActivityProps) => { } if ( - !environmentActivities[selectedEnvironment.id].length && + !environmentActivities[selectedEnvironment.id]?.length || selectedEnvironment.isNew ) { return ( diff --git a/src/components/common/App/types.ts b/src/components/common/App/types.ts index 258ef23b6..d51275086 100644 --- a/src/components/common/App/types.ts +++ b/src/components/common/App/types.ts @@ -31,7 +31,7 @@ export enum DeploymentType { DOCKER_EXTENSION = "DockerExtension" } -export type EnvironmentType = "public" | "private"; +export type EnvironmentType = "Public" | "Private"; export interface Environment { id: string; From 8b2d5634529e3fc120e72eca6cd444933402dca1 Mon Sep 17 00:00:00 2001 From: olehp Date: Mon, 1 Apr 2024 12:33:31 +0300 Subject: [PATCH 19/66] Added new animation --- .../ErrorCard/index.tsx | 50 ++++++++++++------- .../ErrorCard/styles.ts | 14 +++++- .../ErrorCard/types.ts | 3 +- .../CreateEnvironmentWizard/index.tsx | 2 + .../CreateEnvironmentWizard/styles.ts | 39 ++++++++++++++- src/components/RecentActivity/styles.ts | 24 --------- 6 files changed, 86 insertions(+), 46 deletions(-) diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/index.tsx index b133dd520..c5571fad5 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/index.tsx @@ -1,4 +1,5 @@ import { useEffect, useRef, useState } from "react"; +import { CSSTransition } from "react-transition-group"; import { CrossIcon } from "../../../common/icons/12px/CrossIcon"; import { ErrorIcon } from "../../../common/icons/16px/ErrorIcon"; import * as s from "./styles"; @@ -6,6 +7,9 @@ import { ErrorCardProps } from "./types"; const HIDE_INTERVAL = 4000; +const TRANSITION_CLASS_NAME = "error-container"; +const DEFAULT_TRANSITION_DURATION = 500; // in milliseconds + export const ErrorCard = ({ title, description }: ErrorCardProps) => { const [isVisible, setIsVisible] = useState(true); const hideTimerId = useRef(); @@ -21,26 +25,34 @@ export const ErrorCard = ({ title, description }: ErrorCardProps) => { }, []); return ( - { - window.clearTimeout(hideTimerId.current); - }} - onMouseLeave={() => { - startTimer(); - }} + - - - {title} - {description} - + { + window.clearTimeout(hideTimerId.current); + }} + onMouseLeave={() => { + startTimer(); + }} + > + + + {title} + {description} + - } - onClick={() => setIsVisible(false)} - /> - + } + onClick={() => setIsVisible(false)} + /> + + ); }; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/styles.ts index f0f7ed861..4150268e8 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/styles.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/styles.ts @@ -7,7 +7,7 @@ import { Button } from "../../../common/v3/Button"; import { ContainerProps } from "./types"; export const Container = styled.div` - display: ${({ $isVisible }) => ($isVisible ? "flex" : "none")}; + display: flex; padding: 16px 12px; align-items: flex-start; gap: 8px; @@ -15,6 +15,18 @@ export const Container = styled.div` justify-content: space-between; width: 240px; background: ${({ theme }) => theme.colors.v3.status.backgroundHigh}; + + ${({ $transitionClassName, $transitionDuration }) => { + return ` + &.${$transitionClassName}-exit { + opacity: 1; + } + + &.${$transitionClassName}-exit-active { + opacity: 0; + transition: opacity ${$transitionDuration}ms ease-out; + }`; + }} `; export const ContentContainer = styled.div` diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/types.ts b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/types.ts index ebb35918d..6ca0f9180 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/types.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorCard/types.ts @@ -4,5 +4,6 @@ export interface ErrorCardProps { } export interface ContainerProps { - $isVisible: boolean; + $transitionClassName: string; + $transitionDuration: number; } diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx index a131121c2..758e7a24b 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx @@ -201,6 +201,8 @@ export const CreateEnvironmentWizard = ({ }))} /> + + {!completed ? ( <> theme.colors.v3.stroke.dark}; - background: ${({ theme }) => theme.colors.v3.surface.primary}; `; export const Step = styled.div` @@ -25,4 +25,41 @@ export const StepContainer = styled.div` min-height: 210px; flex-direction: column; padding: 12px; + height: 100%; + position: relative; + overflow: hidden; +`; + +export const RecentActivityContainerBackground = styled.div` + position: absolute; + inset: 0; + overflow: hidden; +`; + +export const RecentActivityContainerBackgroundGradient = styled.div` + z-index: -1; + position: absolute; + left: 0; + right: 0; + margin: auto; + top: 0; + height: 383.6%; + width: 82.1%; + border-radius: 100%; + opacity: 0.7; + background: radial-gradient( + 50% 50% at 50% 50%, + rgb(79 93 163 / 60%) 0%, + rgb(79 93 163 / 0%) 100% + ); + filter: blur(5px); +`; + +export const StepBackground = styled.div` + z-index: -1; + position: absolute; + inset: 0; + height: 100%; + width: 100%; + background: ${({ theme }) => theme.colors.v3.surface.primary}; `; diff --git a/src/components/RecentActivity/styles.ts b/src/components/RecentActivity/styles.ts index 125040d0f..166baa281 100644 --- a/src/components/RecentActivity/styles.ts +++ b/src/components/RecentActivity/styles.ts @@ -38,30 +38,6 @@ export const RecentActivityContainer = styled.div` box-sizing: border-box; `; -// export const RecentActivityContainerBackground = styled.div` -// position: absolute; -// inset: 0; -// overflow: hidden; -// `; - -// export const RecentActivityContainerBackgroundGradient = styled.div` -// position: absolute; -// left: 0; -// right: 0; -// margin: auto; -// top: 16.8%; -// height: 413%; -// width: 80.4%; -// border-radius: 413px; -// opacity: 0.7; -// background: radial-gradient( -// 50% 50% at 50% 50%, -// rgb(79 93 163 / 60%) 0%, -// rgb(79 93 163 / 0%) 100% -// ); -// filter: blur(5px); -// `; - export const RecentActivityHeader = styled.div` box-sizing: border-box; z-index: 1; From 99da6acb7251751844041566bfa4a065dcae8584 Mon Sep 17 00:00:00 2001 From: olehp Date: Mon, 1 Apr 2024 16:29:22 +0300 Subject: [PATCH 20/66] Fixed add to config --- .../EnvironmentInstructionsPanel.stories.tsx | 2 - .../EnvironmentInstructionsPanel/index.tsx | 18 +++-- .../EnvironmentInstructionsPanel/types.ts | 10 +++ .../useAddToRunConfig.ts | 39 ++++++++++ .../RecentActivity/RecentActivity.stories.tsx | 74 ++++++------------- src/components/RecentActivity/actions.ts | 1 + src/components/RecentActivity/index.tsx | 18 +---- src/components/RecentActivity/types.ts | 2 - 8 files changed, 84 insertions(+), 80 deletions(-) create mode 100644 src/components/RecentActivity/EnvironmentInstructionsPanel/useAddToRunConfig.ts diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx index 9bf383916..aeb55bee1 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx @@ -23,7 +23,6 @@ export const Local: Story = { id: "MY_ENV", isPending: true, hasRecentActivity: false, - additionToConfigResult: null, type: "Public", token: null, serverApiUrl: null, @@ -39,7 +38,6 @@ export const Shared: Story = { id: "MY_ENV", isPending: true, hasRecentActivity: false, - additionToConfigResult: null, type: "Public", token: "token_string", serverApiUrl: "https://example.com:80", diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index d9266db77..7969fdd9a 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -16,17 +16,19 @@ import { SetupOrgDigmaPanel } from "../SetupOrgDigmaPanel"; import { Overlay } from "../styles"; import * as s from "./styles"; import { + AddToRunConfigState, EnvironmentInstructionsPanelContent, EnvironmentInstructionsPanelProps } from "./types"; +import { useAddToRunConfig } from "./useAddToRunConfig"; const getEnvironmentVariableString = ( isMicrometerProject: boolean, - environmentName: string + environmentId: string ) => isMicrometerProject - ? `MANAGEMENT_OPENTELEMETRY_RESOURCE-ATTRIBUTES_digma_environment=${environmentName}` - : `OTEL_RESOURCE_ATTRIBUTES=digma.environment=${environmentName}`; + ? `MANAGEMENT_OPENTELEMETRY_RESOURCE-ATTRIBUTES_digma_environment=${environmentId}` + : `OTEL_RESOURCE_ATTRIBUTES=digma.environment.id=${environmentId}`; export const EnvironmentInstructionsPanel = ( props: EnvironmentInstructionsPanelProps @@ -43,15 +45,15 @@ export const EnvironmentInstructionsPanel = ( props.environment.id ); + const { addToRunConfig, state } = useAddToRunConfig(props.environment.id); + const handleOrgDigmaSetupGuideLinkClick = () => { // setIsOrgDigmaSetupGuideVisible(true); openURLInDefaultBrowser(CENTRAL_ON_PREM_INSTALLATION_GUIDE_URL); }; const handleAddToRunConfigLinkClick = () => { - if (props.onAddEnvironmentToRunConfig) { - props.onAddEnvironmentToRunConfig(props.environment.id); - } + addToRunConfig(); }; const handleTroubleshootLinkClick = () => { @@ -98,12 +100,12 @@ export const EnvironmentInstructionsPanel = ( Add to the active run config - {props.environment.additionToConfigResult === "success" && ( + {state === AddToRunConfigState.success && ( Successfully added )} - {props.environment.additionToConfigResult === "failure" && ( + {state === AddToRunConfigState.failure && ( Failed to add diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts index 7af046827..6f72c6860 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts @@ -19,3 +19,13 @@ export interface EnvironmentInstructionsPanelContent { content: JSX.Element; }; } + +export interface AddToConfigResult { + environment: string; + result: AddToRunConfigState | null; +} + +export enum AddToRunConfigState { + success = "success", + failure = "failure" +} diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/useAddToRunConfig.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/useAddToRunConfig.ts new file mode 100644 index 000000000..a81581d62 --- /dev/null +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/useAddToRunConfig.ts @@ -0,0 +1,39 @@ +import { useEffect, useState } from "react"; +import { dispatcher } from "../../../dispatcher"; +import { actions } from "../actions"; +import { AddToConfigResult, AddToRunConfigState } from "./types"; + +export const useAddToRunConfig = (environment: string) => { + const [addToConfigState, setAddToConfigState] = + useState(null); + useEffect(() => { + const handleRecentActivityData = (data: unknown) => { + const response = data as AddToConfigResult; + setAddToConfigState(response.result); + }; + + dispatcher.addActionListener( + actions.ADD_ENVIRONMENT_TO_RUN_CONFIG_RESULT, + handleRecentActivityData + ); + + return () => { + dispatcher.removeActionListener( + actions.ADD_ENVIRONMENT_TO_RUN_CONFIG_RESULT, + handleRecentActivityData + ); + }; + }, []); + + return { + addToRunConfig: () => { + window.sendMessageToDigma({ + action: actions.ADD_ENVIRONMENT_TO_RUN_CONFIG, + payload: { + environment + } + }); + }, + state: addToConfigState + }; +}; diff --git a/src/components/RecentActivity/RecentActivity.stories.tsx b/src/components/RecentActivity/RecentActivity.stories.tsx index 491df604e..06e5c3697 100644 --- a/src/components/RecentActivity/RecentActivity.stories.tsx +++ b/src/components/RecentActivity/RecentActivity.stories.tsx @@ -26,7 +26,6 @@ const data: RecentActivityData = { name: "ENV_RENDER", id: "ENV_RENDER", isPending: false, - additionToConfigResult: null, type: "Public", token: null, serverApiUrl: null, @@ -36,7 +35,6 @@ const data: RecentActivityData = { name: "ENV_RENDER", id: "ENV_RENDER1", isPending: false, - additionToConfigResult: null, type: "Public", token: null, serverApiUrl: null, @@ -46,7 +44,6 @@ const data: RecentActivityData = { name: "UNSET_ENV", id: "UNSET_ENV", isPending: false, - additionToConfigResult: null, type: "Public", token: null, serverApiUrl: null, @@ -56,7 +53,6 @@ const data: RecentActivityData = { name: "PENDING_NO_TYPE", id: "PENDING_NO_TYPE", isPending: true, - additionToConfigResult: null, type: null, token: null, serverApiUrl: null, @@ -66,7 +62,6 @@ const data: RecentActivityData = { name: "PENDING_LOCAL", id: "PENDING_LOCAL", isPending: true, - additionToConfigResult: null, type: "Private", token: null, serverApiUrl: null, @@ -76,7 +71,6 @@ const data: RecentActivityData = { name: "PENDING_SHARED", id: "PENDING_SHARED", isPending: true, - additionToConfigResult: null, type: "Public", token: null, serverApiUrl: null, @@ -86,7 +80,6 @@ const data: RecentActivityData = { name: "PENDING_SHARED_LOCALHOST", id: "PENDING_SHARED_LOCALHOST", isPending: true, - additionToConfigResult: null, type: "Public", token: null, serverApiUrl: "https://localhost:5051", @@ -96,7 +89,6 @@ const data: RecentActivityData = { name: "PENDING_SHARED_CUSTOM_DOMAIN", id: "PENDING_SHARED_CUSTOM_DOMAIN", isPending: true, - additionToConfigResult: null, type: "Public", token: "token_string", serverApiUrl: "https://example.com", @@ -106,7 +98,6 @@ const data: RecentActivityData = { name: "VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-LONG-NAME", id: "VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-LONG-NAME", isPending: false, - additionToConfigResult: null, type: "Private", token: null, serverApiUrl: null, @@ -115,8 +106,7 @@ const data: RecentActivityData = { ], entries: [ { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /webjars/**", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /webjars/**", @@ -144,8 +134,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /webjars/**", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /webjars/**", @@ -166,8 +155,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/{ownerId}", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /owners/{ownerId}", @@ -198,8 +186,7 @@ const data: RecentActivityData = { ] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /owners", @@ -238,8 +225,7 @@ const data: RecentActivityData = { ] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/find", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /owners/find", @@ -261,8 +247,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /", @@ -283,8 +268,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /vets.html", firstEntrySpan: { displayText: "PetClinicWithAgent:HTTP GET /vets.html", @@ -323,8 +307,7 @@ const data: RecentActivityData = { ] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP POST /owners/{ownerId}/pets/new", firstEntrySpan: { @@ -356,8 +339,7 @@ const data: RecentActivityData = { ] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/{ownerId}/pets/new", firstEntrySpan: { @@ -380,8 +362,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP POST /owners/{ownerId}/edit", firstEntrySpan: { @@ -421,8 +402,7 @@ const data: RecentActivityData = { ] }, { - environment: "ENV_RENDER", - environmentId: "ENV_RENDER#ID#1", + environment: "ENV_RENDER#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /owners/{ownerId}/edit", firstEntrySpan: { @@ -445,8 +425,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /whiskey/get/{name}", firstEntrySpan: { displayText: "na:na", @@ -466,8 +445,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /book/get/{id}", firstEntrySpan: { displayText: "na:na", @@ -487,8 +465,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /book/id/{id}", firstEntrySpan: { displayText: "na:na", @@ -508,8 +485,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET GET - /", firstEntrySpan: { displayText: "na:na", @@ -529,8 +505,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /users/get/{username}", firstEntrySpan: { displayText: "na:na", @@ -550,8 +525,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "my-first-mn-app:HTTP GET /book", firstEntrySpan: { displayText: "na:na", @@ -571,8 +545,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/HighUsage", firstEntrySpan: { @@ -593,8 +566,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/ErrorHotspot", firstEntrySpan: { @@ -615,8 +587,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/SpanBottleneck", firstEntrySpan: { @@ -637,8 +608,7 @@ const data: RecentActivityData = { slimAggregatedInsights: [] }, { - environment: "UNSET_ENV", - environmentId: "UNSET_ENV#ID#1", + environment: "UNSET_ENV#ID#1", traceFlowDisplayName: "PetClinicWithAgent:HTTP GET /SampleInsights/SlowEndpoint", firstEntrySpan: { @@ -675,7 +645,7 @@ export const WithEmptyEnv: Story = { name: "ENV_RENDER", id: "ENV_RENDER", isPending: false, - additionToConfigResult: null, + type: "Private", token: null, serverApiUrl: null, diff --git a/src/components/RecentActivity/actions.ts b/src/components/RecentActivity/actions.ts index f60a7877b..327c6a472 100644 --- a/src/components/RecentActivity/actions.ts +++ b/src/components/RecentActivity/actions.ts @@ -13,6 +13,7 @@ export const actions = addPrefix(ACTION_PREFIX, { SET_ENVIRONMENT_TYPE: "SET_ENVIRONMENT_TYPE", DELETE_ENVIRONMENT: "DELETE_ENVIRONMENT", ADD_ENVIRONMENT_TO_RUN_CONFIG: "ADD_ENVIRONMENT_TO_RUN_CONFIG", + ADD_ENVIRONMENT_TO_RUN_CONFIG_RESULT: "ADD_ENVIRONMENT_TO_RUN_CONFIG_RESULT", REGISTER: "REGISTER", CHECK_REMOTE_ENVIRONMENT_CONNECTION: "CHECK_REMOTE_ENVIRONMENT_CONNECTION", APPLY_REMOTE_ENVIRONMENT_SETTINGS: "APPLY_REMOTE_ENVIRONMENT_SETTINGS", diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index df20e81d9..bd5b8e524 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -58,7 +58,7 @@ export const RecentActivity = (props: RecentActivityProps) => { const { observe, entry } = useDimensions(); const environmentActivities = useMemo( - () => (data ? groupBy(data.entries, (x) => x.environmentId) : {}), + () => (data ? groupBy(data.entries, (x) => x.environment) : {}), [data] ); const environments: ExtendedEnvironment[] = useMemo( @@ -165,15 +165,6 @@ export const RecentActivity = (props: RecentActivityProps) => { setEnvironmentToDelete(undefined); }; - const handleAddEnvironmentToRunConfig = (environment: string) => { - window.sendMessageToDigma({ - action: actions.ADD_ENVIRONMENT_TO_RUN_CONFIG, - payload: { - environment - } - }); - }; - const handleOverlayKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") { setEnvironmentToDelete(undefined); @@ -197,12 +188,7 @@ export const RecentActivity = (props: RecentActivityProps) => { !environmentActivities[selectedEnvironment.id]?.length || selectedEnvironment.isNew ) { - return ( - - ); + return ; } const headerHeight = entry?.target.clientHeight || 0; diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts index 86e083569..038f51178 100644 --- a/src/components/RecentActivity/types.ts +++ b/src/components/RecentActivity/types.ts @@ -51,7 +51,6 @@ export interface SlimInsight { export interface ActivityEntry { environment: string; - environmentId: string; traceFlowDisplayName: string; firstEntrySpan: EntrySpan; lastEntrySpan: EntrySpan | null; @@ -65,7 +64,6 @@ export interface Environment { name: string; id: string; isPending: boolean; - additionToConfigResult: "success" | "failure" | null; type: EnvironmentType | null; token: string | null; serverApiUrl: string | null; From efa0153eb9dc48e56a10a7831e7fb3c53492c231 Mon Sep 17 00:00:00 2001 From: olehp Date: Tue, 2 Apr 2024 15:04:00 +0300 Subject: [PATCH 21/66] fixed comments --- .../Highlights/TopIssues/useTopIssuesData.ts | 3 +-- .../Navigation/ScopeNavigation/index.tsx | 10 ++++++++++ .../CreateEnvironmentPanel/Tab/index.tsx | 6 +++++- .../CreateEnvironmentPanel/Tab/styles.ts | 5 +++++ .../EnvironmentNameStep/index.tsx | 7 ++++--- .../CreateEnvironmentWizard/RegisterStep/index.tsx | 4 ++-- src/components/common/icons/12px/ErrorIcon.tsx | 4 ++-- src/components/common/icons/16px/ErrorIcon.tsx | 4 ++-- .../common/icons/20px/CheckCircleIcon.tsx | 4 ++-- src/components/common/v3/TextField/index.tsx | 6 +++--- src/components/common/v3/TextField/styles.ts | 14 +++++++------- src/components/common/v3/TextField/types.ts | 8 ++++---- 12 files changed, 47 insertions(+), 28 deletions(-) diff --git a/src/components/Highlights/TopIssues/useTopIssuesData.ts b/src/components/Highlights/TopIssues/useTopIssuesData.ts index 7511d33de..e24be9b8d 100644 --- a/src/components/Highlights/TopIssues/useTopIssuesData.ts +++ b/src/components/Highlights/TopIssues/useTopIssuesData.ts @@ -20,8 +20,7 @@ export const useTopIssuesData = () => { payload: { query: { scopedCodeObjectId: config.scope?.span?.spanCodeObjectId || null, - environments: - config.environments?.map((env) => env.originalName) || [] + environments: config.environments?.map((env) => env.id) || [] } } }); diff --git a/src/components/Navigation/ScopeNavigation/index.tsx b/src/components/Navigation/ScopeNavigation/index.tsx index bd1dd5ea5..618d0e51a 100644 --- a/src/components/Navigation/ScopeNavigation/index.tsx +++ b/src/components/Navigation/ScopeNavigation/index.tsx @@ -6,6 +6,7 @@ import { ChangeScopePayload, ChangeViewPayload } from "../../../types"; import { HistoryManager } from "../../../utils/HistoryManager"; import { ConfigContext } from "../../common/App/ConfigContext"; import { Scope } from "../../common/App/types"; +import { ChangeEnvironmentPayload } from "../types"; import { HistoryNavigationPanel } from "./HistoryNavigationPanel"; import { ScopeNavigationProps } from "./types"; @@ -83,6 +84,15 @@ export const ScopeNavigation = (props: ScopeNavigationProps) => { } }); } + + if (historyStep && historyStep.environment) { + window.sendMessageToDigma({ + action: globalActions.CHANGE_ENVIRONMENT, + payload: { + environment: historyStep.environment.id + } + }); + } } }; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx index 1f17ed8df..e96898923 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx @@ -9,7 +9,11 @@ import { TabProps } from "./types"; const getState = (index: number, theme: DefaultTheme, state: StepStatus) => { switch (state) { case "completed": - return ; + return ( + + + + ); case "error": return ; default: diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts index b7bbcd763..0f59a3f35 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts +++ b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts @@ -39,3 +39,8 @@ export const Name = styled.div` display: flex; opacity: ${({ $isActive }) => (!$isActive ? 0.5 : 1)}; `; + +export const CompletedIcon = styled.div` + display: flex; + color: ${({ theme }) => theme.colors.v3.status.success}; +`; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx index 1318eb52e..e1e8db81d 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx @@ -1,5 +1,6 @@ import { ChangeEvent, useEffect, useState } from "react"; import { useTheme } from "styled-components"; +import { isNull } from "../../../../typeGuards/isNull"; import { CheckCircleIcon } from "../../../common/icons/12px/CheckCircleIcon"; import { ErrorIcon } from "../../../common/icons/12px/ErrorIcon"; import { Button } from "../../../common/v3/Button"; @@ -38,7 +39,7 @@ export const EnvironmentNameStep = ({ }; const getInputState = () => { - if (name === null) { + if (isNull(name)) { return <>; } @@ -62,12 +63,12 @@ export const EnvironmentNameStep = ({ // ] // : []), - ...(props.insight.prefixedCodeObjectId - ? [ - - ] - : []) + ]} /> ); diff --git a/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/types.ts index afcb0038d..1cad4a33d 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/types.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/types.ts @@ -5,12 +5,11 @@ import { SpanDurationsInsight, Trace } from "../../../../types"; export interface DurationInsightProps extends InsightCardCommonProps { insight: SpanDurationsInsight; onHistogramButtonClick: ( - instrumentationLibrary: string, - name: string, + spanCodeObjectId: string, insightType: InsightType, displayName: string ) => void; - onLiveButtonClick: (prefixedCodeObjectId: string) => void; + onLiveButtonClick: (codeObjectId: string) => void; onCompareButtonClick: ( traces: [Trace, Trace], insightType: InsightType diff --git a/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx index 93231b891..304a44777 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx @@ -48,8 +48,7 @@ export const WithEvaluatingChange: Story = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, level: 0, previousDuration: { @@ -73,8 +72,7 @@ export const WithEvaluatingChange: Story = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, level: 0, previousDuration: { @@ -98,9 +96,6 @@ export const WithEvaluatingChange: Story = { } ], scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET SampleInsights/lock/{milisec}", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", serviceName: "Sample.MoneyTransfer.API", spanInfo: { @@ -111,9 +106,7 @@ export const WithEvaluatingChange: Story = { "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", methodCodeObjectId: "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -126,8 +119,6 @@ export const WithEvaluatingChange: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", customStartTime: null, actualStartTime: "2023-06-16T11:10:21.334Z" } diff --git a/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/mockData.ts index 49d8023e6..9d49f5da9 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/mockData.ts @@ -36,8 +36,7 @@ export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = { spanCodeObjectId: "span:SampleInsightsController$_$1D138649EB4FFA92C0E3C8103404F2", methodCodeObjectId: null, - kind: "Client", - codeObjectId: null + kind: "Client" }, traceId: "9C510BC1E1CD59DD7E820BC3E8DFD4C4", duration: { @@ -53,9 +52,6 @@ export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = { } ], scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", route: "epHTTP:HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", serviceName: "PetClinic", spanInfo: { @@ -66,9 +62,7 @@ export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = { "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", methodCodeObjectId: "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -87,8 +81,6 @@ export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = { environment: "SAMPLE_ENV", severity: 0, isRecalculateEnabled: true, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan", customStartTime: null, actualStartTime: "2023-06-16T10:30:33.027Z", status: InsightStatus.Active diff --git a/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/mockData.ts index cdef3be69..6c21b2c99 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/mockData.ts @@ -34,8 +34,7 @@ export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationIn spanCodeObjectId: "span:SampleInsightsController$_$1D138649EB4FFA92C0E3C8103404F2", methodCodeObjectId: null, - kind: "Client", - codeObjectId: null + kind: "Client" }, traceId: "9C510BC1E1CD59DD7E820BC3E8DFD4C4", duration: { @@ -50,9 +49,6 @@ export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationIn } ], scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET /SampleInsights/QueryOptimization", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /SampleInsights/QueryOptimization", route: "epHTTP:HTTP GET /SampleInsights/QueryOptimization", serviceName: "PetClinic", spanInfo: { @@ -63,9 +59,7 @@ export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationIn "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /SampleInsights/QueryOptimization", methodCodeObjectId: "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genQueryOptimization", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.sample.SampleInsightsController$_$genQueryOptimization" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -84,8 +78,6 @@ export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationIn environment: "SAMPLE_ENV", severity: 0, isRecalculateEnabled: true, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genQueryOptimization", customStartTime: null, actualStartTime: "2023-06-16T10:30:33.027Z" }; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/ErrorsInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/ErrorsInsight.stories.tsx index 59ad54ed6..dd3a7d8e2 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/ErrorsInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/ErrorsInsight.stories.tsx @@ -72,8 +72,6 @@ export const Default: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Domain.Services.MoneyTransferDomainService$_$TransferFunds(Int64,Int64,Int32)", customStartTime: null, actualStartTime: "2023-07-03T04:26:43.430Z" } diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/mockData.ts index 4e8c43a46..cb44934b0 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/mockData.ts @@ -56,8 +56,6 @@ export const mockedErrorsInsight: CodeObjectErrorsInsight = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", customStartTime: null, actualStartTime: "2023-06-26T13:53:53.645Z", isDismissed: false, diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx index b39eb4f80..da072787f 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx @@ -49,16 +49,12 @@ export const Default: Story = { spanCodeObjectId: "span:io.opentelemetry.okhttp-3.0$_$HTTP GET mockapi.io", methodCodeObjectId: null, - kind: "Client", - codeObjectId: null + kind: "Client" }, traceId: "00E4D714D4FAD0A00F9D8A39C8A49E8A" } ], scope: InsightScope.EntrySpan, - endpointSpan: "HTTP POST /owners/{ownerId}/pets/new", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", route: "epHTTP:HTTP POST /owners/{ownerId}/pets/new", serviceName: "spring-petclinic", spanInfo: { @@ -69,9 +65,7 @@ export const Default: Story = { "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", methodCodeObjectId: "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -90,8 +84,6 @@ export const Default: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0.0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", customStartTime: null, actualStartTime: "2023-08-10T08:04:00Z" } diff --git a/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/mockData.ts index f42ba6f8e..d1d1ee535 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/mockData.ts @@ -29,9 +29,6 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh typicalCount: 4, traceId: "00D37A4E7208E0F6E89AA7E2E37446A6", scope: InsightScope.EntrySpan, - endpointSpan: "HTTP POST /owners/{ownerId}/pets/new", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", route: "epHTTP:HTTP POST /owners/{ownerId}/pets/new", serviceName: "spring-petclinic", spanInfo: { @@ -42,9 +39,7 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", methodCodeObjectId: "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -63,8 +58,6 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh environment: "BOB-LAPTOP[LOCAL]", severity: 0.0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", customStartTime: null, actualStartTime: "2023-08-10T08:04:00Z", quantile: 0.95 diff --git a/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/index.tsx index 4bba20805..2a810337c 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/index.tsx @@ -7,7 +7,6 @@ import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; import { ConfigContext } from "../../../../../common/App/ConfigContext"; import { ScoreIndicator } from "../../../../../common/ScoreIndicator"; import { Tooltip } from "../../../../../common/Tooltip"; -import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; import { Description, Link } from "../../../../styles"; import { trackingEvents } from "../../../../tracking"; import { Trace } from "../../../../types"; @@ -46,8 +45,8 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => { props.onJiraTicketCreate(props.insight, undefined, event); }; - const spanName = props.insight.clientSpanName || undefined; - const spanCodeObjectId = props.insight.clientSpanCodeObjectId || undefined; + // const spanName = props.insight.clientSpanName || undefined; + // const spanCodeObjectId = props.insight.clientSpanCodeObjectId || undefined; const traceId = props.insight.traceId; const endpoints = props.insight.endpoints || []; @@ -60,7 +59,7 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => { Check the following SELECT statement: - + {/* {spanCodeObjectId ? ( handleSpanLinkClick(spanCodeObjectId)}> @@ -87,13 +86,13 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => { > Trace - )} + )} */} - + {/* Repeats {props.insight.occurrences} (median) - + */} Duration {getDurationString(props.insight.duration)} diff --git a/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/mockData.ts index 5e565d302..8bcec47ff 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/mockData.ts @@ -24,24 +24,7 @@ export const mockedNPlusOneInsight: SpaNPlusOneInsight = { isDismissed: false, isDismissible: true, importance: 2, - span: { - name: "OwnerValidation.ValidateOwner", - displayName: "OwnerValidation.ValidateOwner", - instrumentationLibrary: - "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", - spanCodeObjectId: - "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", - methodCodeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" - }, - occurrences: 100, traceId: "00D37A4E7208E0F6E89AA7E2E37446A6", - clientSpanName: "select * from users where id = :id", - clientSpanCodeObjectId: - "span:OwnerController$_$1D138649EB4FFA92C0E3C8103404F2", duration: { value: 1.64, unit: "sec", @@ -82,9 +65,7 @@ export const mockedNPlusOneInsight: SpaNPlusOneInsight = { "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", methodCodeObjectId: "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" + kind: "Internal" }, shortDisplayInfo: { title: "", @@ -103,8 +84,6 @@ export const mockedNPlusOneInsight: SpaNPlusOneInsight = { environment: "BOB-LAPTOP[LOCAL]", severity: 0.0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", customStartTime: null, actualStartTime: "2023-07-27T08:23:56.500827Z" }; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx index f055ee960..79361ab12 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx @@ -56,8 +56,7 @@ export const Default: Story = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, shortDisplayInfo: { title: "Scaling Issue Found", @@ -77,7 +76,6 @@ export const Default: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: "span:SampleInsightsController$_$WaitForLock", customStartTime: null, actualStartTime: "2023-06-24T00:00:00.000Z", flowHash: null diff --git a/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/index.tsx index 3236e65fa..aec6d53c9 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/index.tsx @@ -10,8 +10,7 @@ export const NoScalingIssueInsight = (props: NoScalingIssueInsightProps) => { const handleHistogramButtonClick = () => { props.insight.spanInfo && props.onHistogramButtonClick( - props.insight.spanInfo.instrumentationLibrary, - props.insight.spanInfo.name, + props.insight.spanInfo.spanCodeObjectId, props.insight.type, props.insight.spanInfo.displayName ); diff --git a/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/types.ts index 322458310..c0ee79510 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/types.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/types.ts @@ -5,8 +5,7 @@ import { SpanScalingWellInsight } from "../../../../types"; export interface NoScalingIssueInsightProps extends InsightCardCommonProps { insight: SpanScalingWellInsight; onHistogramButtonClick: ( - instrumentationLibrary: string, - name: string, + spanCodeObjectId: string, insightType: InsightType, displayName: string ) => void; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx index 5043b7c6a..f98bdd284 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx @@ -66,9 +66,7 @@ export const Default: Story = { "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", methodCodeObjectId: "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" + kind: "Server" }, shortDisplayInfo: { title: "Scaling Data", @@ -82,8 +80,6 @@ export const Default: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", customStartTime: null, actualStartTime: "2023-06-24T00:00:00.000Z" } diff --git a/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/index.tsx index 8d249ad8c..642b1b3fc 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/index.tsx @@ -59,8 +59,7 @@ export const PerformanceAtScaleInsight = ( const handleHistogramButtonClick = () => { props.insight.spanInfo && props.onHistogramButtonClick( - props.insight.spanInfo.instrumentationLibrary, - props.insight.spanInfo.name, + props.insight.spanInfo.spanCodeObjectId, props.insight.type, props.insight.spanInfo.displayName ); diff --git a/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/types.ts index ac4a426f2..aa565ee2a 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/types.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/types.ts @@ -5,8 +5,7 @@ import { SpanScalingInsufficientDataInsight } from "../../../../types"; export interface PerformanceAtScaleInsightProps extends InsightCardCommonProps { insight: SpanScalingInsufficientDataInsight; onHistogramButtonClick: ( - instrumentationLibrary: string, - name: string, + spanCodeObjectId: string, insightType: InsightType, displayName: string ) => void; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/mockData.ts index 395638631..20cb302f1 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/mockData.ts @@ -33,9 +33,7 @@ export const mockedQueryOptimizationInsight: SpanQueryOptimizationInsight = { "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", methodCodeObjectId: "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" + kind: "Internal" }, traceId: "00D37A4E7208E0F6E89AA7E2E37446A6", duration: { @@ -61,9 +59,7 @@ export const mockedQueryOptimizationInsight: SpanQueryOptimizationInsight = { "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", methodCodeObjectId: "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" + kind: "Internal" }, shortDisplayInfo: { title: "", @@ -82,8 +78,6 @@ export const mockedQueryOptimizationInsight: SpanQueryOptimizationInsight = { environment: "BOB-LAPTOP[LOCAL]", severity: 0.0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", customStartTime: null, actualStartTime: "2023-07-27T08:23:56.500827Z", endpoints: [ diff --git a/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx index 3bde136ed..344467a6b 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx @@ -43,18 +43,6 @@ const data: EndpointBreakdownInsight = { hasAsyncSpans: false, isDismissed: false, isDismissible: true, - components: [ - { - type: ComponentType.Internal, - fraction: 0.996539483729232, - duration: null - }, - { - type: ComponentType.Rendering, - fraction: 0.0034605162707679665, - duration: null - } - ], p50Components: [ { type: ComponentType.Internal, @@ -80,8 +68,6 @@ const data: EndpointBreakdownInsight = { } ], scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET /owners/new", - spanCodeObjectId: "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/new", route: "epHTTP:HTTP GET /owners/new", serviceName: "PetClinic", spanInfo: { @@ -92,9 +78,7 @@ const data: EndpointBreakdownInsight = { "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/new", methodCodeObjectId: "method:org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm" + kind: "Server" }, shortDisplayInfo: { title: "Request Breakdown", @@ -107,8 +91,6 @@ const data: EndpointBreakdownInsight = { decorators: null, environment: "SAMPLE_ENV", severity: 0, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm", customStartTime: null, actualStartTime: "2023-06-30T00:00:00.000Z" }; @@ -123,26 +105,6 @@ export const Async: Story = { args: { insight: { ...data, - components: [ - { - type: ComponentType.Internal, - fraction: 0.996539483729232, - duration: { - value: 2.06, - unit: "ms", - raw: 2063332.9999999993 - } - }, - { - type: ComponentType.Rendering, - fraction: 0.0034605162707679665, - duration: { - value: 1.03, - unit: "ms", - raw: 1031666.4999999995 - } - } - ], p50Components: [ { type: ComponentType.Internal, diff --git a/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/index.tsx index 46f5c1342..4c9b60851 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/index.tsx @@ -31,14 +31,14 @@ const DEFAULT_PERCENTILE = 0.5; const getComponents = ( insight: EndpointBreakdownInsight, percentile: number -): Component[] | undefined => { +): Component[] => { switch (percentile) { case 0.5: - return insight.p50Components || undefined; + return insight.p50Components; case 0.95: - return insight.p95Components || undefined; + return insight.p95Components; default: - return undefined; + return []; } }; @@ -57,9 +57,7 @@ export const RequestBreakdownInsight = ( useState(DEFAULT_PERCENTILE); const data = useMemo(() => { - const components = - getComponents(props.insight, percentileViewMode) || - props.insight.components; + const components = getComponents(props.insight, percentileViewMode); const sortedComponents = props.insight.hasAsyncSpans ? [...components].sort((a, b) => diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/index.tsx index 904c4afdd..e0802d0d0 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/index.tsx @@ -38,8 +38,7 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => { const handleHistogramButtonClick = () => { props.insight.spanInfo && props.onHistogramButtonClick( - props.insight.spanInfo.instrumentationLibrary, - props.insight.spanInfo.name, + props.insight.spanInfo.spanCodeObjectId, props.insight.type, props.insight.spanInfo.displayName ); diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/mockData.ts index 2b74f5fdd..6d320b2bf 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/mockData.ts @@ -22,8 +22,6 @@ export const mockedSpanScalingInsight: SpanScalingInsight = { category: InsightCategory.Performance, specifity: 4, importance: 2, - spanName: "WaitForLock", - spanInstrumentationLibrary: "SampleInsightsController", turningPointConcurrency: 17, maxConcurrency: 24, isDismissed: false, @@ -47,8 +45,7 @@ export const mockedSpanScalingInsight: SpanScalingInsight = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, shortDisplayInfo: { title: "Scaling Issue Found", @@ -67,7 +64,6 @@ export const mockedSpanScalingInsight: SpanScalingInsight = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: "span:SampleInsightsController$_$WaitForLock", customStartTime: null, actualStartTime: "2023-06-24T00:00:00.000Z", flowHash: null diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/types.ts index 28d1156be..137f4765f 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/types.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/types.ts @@ -14,8 +14,7 @@ export interface ScalingIssueInsightProps extends InsightCardCommonProps { spanCodeObjectId: string ) => void; onHistogramButtonClick: ( - instrumentationLibrary: string, - name: string, + spanCodeObjectId: string, insightType: InsightType, displayName: string ) => void; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/SessionInViewInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/SessionInViewInsight.stories.tsx index 29ca8bb2d..658c60894 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/SessionInViewInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/SessionInViewInsight.stories.tsx @@ -47,8 +47,7 @@ export const Default: Story = { spanCodeObjectId: "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails", methodCodeObjectId: "", - kind: "Internal", - codeObjectId: "" + kind: "Internal" }, clientSpan: { name: "6AFAE587D3FEC813CD353F4CC91076", @@ -58,16 +57,12 @@ export const Default: Story = { spanCodeObjectId: "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC91076", methodCodeObjectId: "", - kind: "Client", - codeObjectId: "" + kind: "Client" }, traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B0" } ], scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET /owners/{ownerId}", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/{ownerId}", route: "epHTTP:HTTP GET /owners/{ownerId}", serviceName: "spring-petclinic", spanInfo: { @@ -78,9 +73,7 @@ export const Default: Story = { "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/{ownerId}", methodCodeObjectId: "method:org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.OwnerController$_$showOwner" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -99,8 +92,6 @@ export const Default: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0.0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", customStartTime: null, actualStartTime: "2023-08-10T08:59:14.093073Z" } diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/SlowEndpointInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/SlowEndpointInsight.stories.tsx index f3f782e37..cc7749982 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/SlowEndpointInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/SlowEndpointInsight.stories.tsx @@ -64,45 +64,7 @@ export const Default: Story = { unit: "sec", raw: 5007013000 }, - endpointsMedianOfP75: { - value: 0, - unit: "ns", - raw: 0 - }, - min: { - value: 0, - unit: "ns", - raw: 0 - }, - max: { - value: 0, - unit: "ns", - raw: 0 - }, - mean: { - value: 0, - unit: "ns", - raw: 0 - }, - p75: { - value: 0, - unit: "ns", - raw: 0 - }, - p95: { - value: 0, - unit: "ns", - raw: 0 - }, - p99: { - value: 0, - unit: "ns", - raw: 0 - }, scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET SampleInsights/SlowEndpoint", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint", route: "epHTTP:HTTP GET SampleInsights/SlowEndpoint", serviceName: "Sample.MoneyTransfer.API", spanInfo: { @@ -113,9 +75,7 @@ export const Default: Story = { "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint", methodCodeObjectId: "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -128,8 +88,6 @@ export const Default: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", customStartTime: null, actualStartTime: "2023-06-16T11:10:29.277Z" } diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/mockData.ts index 9fd5f7b63..c8ea55f25 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/mockData.ts @@ -32,8 +32,7 @@ export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, probabilityOfBeingBottleneck: 0.6923076923076923, avgDurationWhenBeingBottleneck: { @@ -42,31 +41,7 @@ export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { raw: 2002883447.4474475 }, criticality: 0, - ticketLink: "https://digma.ai/1", - p50: { - fraction: 0, - maxDuration: { - value: 0, - unit: "ns", - raw: 0 - } - }, - p95: { - fraction: 0, - maxDuration: { - value: 0, - unit: "ns", - raw: 0 - } - }, - p99: { - fraction: 0, - maxDuration: { - value: 0, - unit: "ns", - raw: 0 - } - } + ticketLink: "https://digma.ai/1" }, { spanInfo: { @@ -75,8 +50,7 @@ export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, probabilityOfBeingBottleneck: 0.41995841995842, avgDurationWhenBeingBottleneck: { @@ -85,37 +59,10 @@ export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { raw: 4583302698.019802 }, criticality: 0, - ticketLink: "https://digma.ai/1", - p50: { - fraction: 0, - maxDuration: { - value: 0, - unit: "ns", - raw: 0 - } - }, - p95: { - fraction: 0, - maxDuration: { - value: 0, - unit: "ns", - raw: 0 - } - }, - p99: { - fraction: 0, - maxDuration: { - value: 0, - unit: "ns", - raw: 0 - } - } + ticketLink: "https://digma.ai/1" } ], scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET SampleInsights/lock/{milisec}", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", serviceName: "Sample.MoneyTransfer.API", spanInfo: { @@ -126,9 +73,7 @@ export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", methodCodeObjectId: "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -142,8 +87,6 @@ export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: true, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", customStartTime: null, actualStartTime: "2023-06-16T11:10:30.349Z" }; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/mockData.ts index cbe1bef5c..cf055ac41 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/mockData.ts @@ -33,9 +33,7 @@ export const mockedSpanNexusInsight: SpanNexusInsight = { "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", methodCodeObjectId: "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -54,8 +52,6 @@ export const mockedSpanNexusInsight: SpanNexusInsight = { environment: "BOB-LAPTOP[LOCAL]", severity: 0.0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", customStartTime: null, actualStartTime: "2023-08-10T08:04:00Z", flows: 4, diff --git a/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/TopUsageInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/TopUsageInsight.stories.tsx index eeb310a84..6d9d7e509 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/TopUsageInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/TopUsageInsight.stories.tsx @@ -37,7 +37,6 @@ export const Default: Story = { specifity: 4, isRecalculateEnabled: true, importance: 5, - span: "DelayAsync", sampleTrace: null, flows: [ { @@ -93,8 +92,7 @@ export const Default: Story = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, shortDisplayInfo: { title: "", @@ -106,7 +104,6 @@ export const Default: Story = { decorators: null, environment: "BOB-LAPTOP[LOCAL]", severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", customStartTime: null, actualStartTime: "2023-06-17T00:00:00.000Z", isDismissed: false, diff --git a/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/TrafficInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/TrafficInsight.stories.tsx index 7a5cadf21..5499028de 100644 --- a/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/TrafficInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/TrafficInsight.stories.tsx @@ -46,9 +46,6 @@ export const LowTraffic: Story = { ], maxCallsIn1Min: 4, scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET /owners/new", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/new", route: "epHTTP:HTTP GET /owners/new", serviceName: "PetClinic", spanInfo: { @@ -59,9 +56,7 @@ export const LowTraffic: Story = { "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/new", methodCodeObjectId: "method:org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -74,8 +69,6 @@ export const LowTraffic: Story = { environment: "SAMPLE_ENV", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm", customStartTime: null, actualStartTime: "2023-06-16T10:30:22.776Z" } @@ -111,9 +104,6 @@ export const HighTraffic: Story = { ], maxCallsIn1Min: 433, scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET SampleInsights/lock/{milisec}", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", serviceName: "Sample.MoneyTransfer.API", spanInfo: { @@ -124,9 +114,7 @@ export const HighTraffic: Story = { "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", methodCodeObjectId: "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)" + kind: "Server" }, shortDisplayInfo: { title: "", @@ -139,8 +127,6 @@ export const HighTraffic: Story = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", customStartTime: null, actualStartTime: "2023-06-16T11:10:22.773Z" } diff --git a/src/components/Insights/deprecated/InsightList/mockData.ts b/src/components/Insights/deprecated/InsightList/mockData.ts index 4a520fb29..6661ee7c0 100644 --- a/src/components/Insights/deprecated/InsightList/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/mockData.ts @@ -42,8 +42,6 @@ export const mockedHotSpotInsight: CodeObjectHotSpotInsight = { environment: "BOB-LAPTOP[LOCAL]", severity: 0, isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", customStartTime: null, actualStartTime: "2023-06-26T13:53:57.956Z", isDismissed: false, diff --git a/src/components/Insights/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx b/src/components/Insights/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx index e5e565e19..4764692be 100644 --- a/src/components/Insights/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx +++ b/src/components/Insights/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx @@ -38,7 +38,6 @@ const insight: SpanUsagesInsight = { specifity: 4, isRecalculateEnabled: true, importance: 5, - span: "DelayAsync", sampleTrace: null, flows: [], scope: InsightScope.Span, @@ -50,8 +49,7 @@ const insight: SpanUsagesInsight = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null + kind: "Internal" }, shortDisplayInfo: { title: "", @@ -63,7 +61,6 @@ const insight: SpanUsagesInsight = { decorators: null, environment: "BOB-LAPTOP[LOCAL]", severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", customStartTime: null, actualStartTime: "2023-06-17T00:00:00.000Z", ticketLink: null diff --git a/src/components/Insights/insightTickets/common/InsightJiraTicket/index.tsx b/src/components/Insights/insightTickets/common/InsightJiraTicket/index.tsx index 44756e00b..a2ef9ae9b 100644 --- a/src/components/Insights/insightTickets/common/InsightJiraTicket/index.tsx +++ b/src/components/Insights/insightTickets/common/InsightJiraTicket/index.tsx @@ -9,7 +9,9 @@ import { actions } from "../../../actions"; import { InsightJiraTicketProps, InsightsGetDataListQuery, - LinkTicketResponse + LinkTicketPayload, + LinkTicketResponse, + UnlinkTicketPayload } from "./types"; export const InsightJiraTicket = ({ @@ -34,12 +36,11 @@ export const InsightJiraTicket = ({ const linkTicket = (link: string) => { setTicketLink(link); if (link && isValidHttpUrl(link)) { - window.sendMessageToDigma({ + window.sendMessageToDigma({ action: actions.LINK_TICKET, payload: { - codeObjectId: - relatedInsight?.codeObjectId ?? insight.prefixedCodeObjectId, - insightType: relatedInsight?.type ?? insight.type, + insightId: relatedInsight?.id || insight.id, + insightType: relatedInsight?.type || insight.type, ticketLink: link } }); @@ -49,12 +50,11 @@ export const InsightJiraTicket = ({ }; const unlinkTicket = () => { - window.sendMessageToDigma({ + window.sendMessageToDigma({ action: actions.UNLINK_TICKET, payload: { - codeObjectId: - relatedInsight?.codeObjectId ?? insight.prefixedCodeObjectId, - insightType: relatedInsight?.type ?? insight.type + insightId: relatedInsight?.id || insight.id, + insightType: relatedInsight?.type || insight.type } }); }; diff --git a/src/components/Insights/insightTickets/common/InsightJiraTicket/types.ts b/src/components/Insights/insightTickets/common/InsightJiraTicket/types.ts index 61c91f855..1d642f6d5 100644 --- a/src/components/Insights/insightTickets/common/InsightJiraTicket/types.ts +++ b/src/components/Insights/insightTickets/common/InsightJiraTicket/types.ts @@ -21,10 +21,19 @@ export interface LinkTicketResponse { ticketLink: string | null; success: boolean; message: string | null; - codeObjectId: string; - insightType: string; } export interface InsightsGetDataListQuery { query: InsightsQuery; } + +export interface LinkTicketPayload { + insightId: string; + ticketLink: string; + insightType: string; +} + +export interface UnlinkTicketPayload { + insightId: string; + insightType: string; +} diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index ca63305b4..c848e3f6b 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -178,7 +178,6 @@ export interface CodeObjectInsight extends Insight { importance: InsightImportance; severity: number; isRecalculateEnabled: boolean; - prefixedCodeObjectId: string | null; customStartTime: string | null; actualStartTime: string | null; criticality: number; @@ -205,6 +204,7 @@ export interface CodeObjectInsight extends Insight { export interface SpanInsight extends CodeObjectInsight { spanInfo: SpanInfo | null; + scope: InsightScope.Span; } export interface HistogramBarData { @@ -218,38 +218,33 @@ export interface NormalizedHistogramBarData extends HistogramBarData { normalizedCount: number; } +export interface PercentileDurations { + percentile: number; + currentDuration: Duration; + previousDuration: Duration | null; + changeTime: string | null; + changeVerified: boolean | null; + traceIds: string[]; +} + +export interface Plot { + bars: HistogramBarData[]; + quantiles: { + timestamp: Duration; + quantileValue: number; + }[]; +} + export interface SpanDurationsInsight extends SpanInsight { name: "Performance Stats"; type: InsightType.SpanDurations; category: InsightCategory.Performance; specifity: InsightSpecificity.OwnInsight; isRecalculateEnabled: true; - percentiles: { - percentile: number; - currentDuration: Duration; - previousDuration: Duration | null; - changeTime: string | null; - changeVerified: boolean | null; - traceIds: string[]; - }[]; + percentiles: PercentileDurations[]; lastSpanInstanceInfo: SpanInstanceInfo | null; isAsync: boolean; - - /** - * @deprecated - */ - spanCodeObjectId: string; - /** - * @deprecated - */ - span: SpanInfo; - histogramPlot?: { - bars: HistogramBarData[]; - quantiles: { - timestamp: Duration; - quantileValue: number; - }[]; - } | null; + histogramPlot?: Plot | null; average?: Duration; standardDeviation?: Duration; } @@ -277,11 +272,6 @@ export interface SpanUsagesInsight extends SpanInsight { lastService: FlowSpan | null; lastServiceSpan: string | null; }[]; - - /** - * @deprecated - */ - span: string; } interface Percentile { @@ -306,19 +296,6 @@ export interface BottleneckEndpointInfo { criticality: number; requestPercentage: number; traceId: string | null; - - /** - * @deprecated - */ - p50: Percentile; - /** - * @deprecated - */ - p95: Percentile; - /** - * @deprecated - */ - p99: Percentile; } export interface SpanEndpointBottleneckInsight extends SpanInsight { @@ -328,23 +305,6 @@ export interface SpanEndpointBottleneckInsight extends SpanInsight { specifity: InsightSpecificity.TargetFound; importance: InsightImportance.Critical; slowEndpoints: BottleneckEndpointInfo[] | null; - - /** - * @deprecated - */ - p50: Percentile; - /** - * @deprecated - */ - p95: Percentile; - /** - * @deprecated - */ - p99: Percentile; - /** - * @deprecated - */ - span: SpanInfo; } export interface DurationPercentile { @@ -369,29 +329,12 @@ export interface SpanDurationBreakdownInsight extends SpanInsight { isRecalculateEnabled: true; importance: InsightImportance.Info; breakdownEntries: SpanDurationBreakdownEntry[]; - - /** - * @deprecated - */ - spanName: string; - /** - * @deprecated - */ - spanCodeObjectId: string; } -export interface EndpointInsight extends SpanInsight { +export interface EndpointInsight extends Omit { route: string; serviceName: string; - - /** - * @deprecated - */ - endpointSpan: string; - /** - * @deprecated - */ - spanCodeObjectId: string; + scope: InsightScope.EntrySpan; } export interface EndpointLowUsageInsight extends EndpointInsight { @@ -424,6 +367,7 @@ export interface EndpointHighUsageInsight extends EndpointInsight { maxCallsIn1Min: number; } +// SAFE TO REMOVE /** * @deprecated */ @@ -440,19 +384,6 @@ export interface EndpointSlowestSpansInsight extends EndpointInsight { avgDurationWhenBeingBottleneck: Duration; criticality: number; ticketLink: string | null; - - /** - * @deprecated - */ - p50: Percentile; - /** - * @deprecated - */ - p95: Percentile; - /** - * @deprecated - */ - p99: Percentile; }[]; } @@ -472,19 +403,6 @@ export interface EndpointBottleneckInsight extends EndpointInsight { ticketLink: string | null; requestPercentage: number; traceId: string | null; - - /** - * @deprecated - */ - p50: Percentile; - /** - * @deprecated - */ - p95: Percentile; - /** - * @deprecated - */ - p99: Percentile; }; } @@ -499,35 +417,6 @@ export interface SlowEndpointInsight extends EndpointInsight { endpointsMedianOfMedians: Duration; endpointsP75: Duration; median: Duration; - - /** - * @deprecated - */ - endpointsMedianOfP75: Duration; - /** - * @deprecated - */ - min: Duration; - /** - * @deprecated - */ - max: Duration; - /** - * @deprecated - */ - mean: Duration; - /** - * @deprecated - */ - p75: Duration; - /** - * @deprecated - */ - p95: Duration; - /** - * @deprecated - */ - p99: Duration; } export interface RootCauseSpanInfo extends SpanInfo { @@ -555,15 +444,6 @@ export interface SpanScalingInsight extends SpanInsight { rootCauseSpans: RootCauseSpanInfo[]; affectedEndpoints: AffectedEndpoint[] | null; flowHash: string | null; - - /** - * @deprecated - */ - spanName: string; - /** - * @deprecated - */ - spanInstrumentationLibrary: string; } export interface NPlusOneEndpointInfo { @@ -590,19 +470,12 @@ export interface SpaNPlusOneInsight extends SpanInsight { category: InsightCategory.Performance; specifity: InsightSpecificity.TargetAndReasonFound; importance: InsightImportance.Critical; - occurrences: number; traceId: string | null; - clientSpanName: string | null; - clientSpanCodeObjectId: string | null; duration: Duration; endpoints: NPlusOneEndpointInfo[] | null; - - /** - * @deprecated - */ - span: SpanInfo; } +// SAFE TO REMOVE /** * @deprecated */ @@ -688,11 +561,13 @@ export interface EndpointSlowdownSource { changeVerified: boolean; } +// SAFE TO REMOVE /** * @deprecated */ export type DurationSlowdownSource = EndpointSlowdownSource; +// SAFE TO REMOVE /** * @deprecated */ @@ -736,15 +611,11 @@ export interface EndpointBreakdownInsight extends EndpointInsight { specifity: InsightSpecificity.OwnInsight; importance: InsightImportance.Info; isRecalculateEnabled: true; - components: Component[]; - p50Components: Component[] | null; - p95Components: Component[] | null; + p50Components: Component[]; + p95Components: Component[]; hasAsyncSpans: boolean; } -/** - * @deprecated - */ export interface SpanScalingWellInsight extends SpanInsight { name: "Scaling Well"; type: InsightType.SpanScalingWell; @@ -757,17 +628,11 @@ export interface SpanScalingWellInsight extends SpanInsight { flowHash: string | null; } -/** - * @deprecated - */ export interface Concurrency { calls: number; meanDuration: Duration; } -/** - * @deprecated - */ export interface SpanScalingInsufficientDataInsight extends SpanInsight { name: "Scaling Insufficient Data"; type: InsightType.SpanScalingInsufficientData; @@ -790,6 +655,7 @@ export interface EndpointSessionInViewInsight extends EndpointInsight { }[]; } +// SAFE TO REMOVE /** * @deprecated */ @@ -869,6 +735,7 @@ export interface EndpointQueryOptimizationSpan { ticketLink: string | null; } +// SAFE TO REMOVE /** * @deprecated */ diff --git a/src/components/Notifications/NotificationCard/NotificationCard.stories.tsx b/src/components/Notifications/NotificationCard/NotificationCard.stories.tsx index bb4059762..5f5f7bcfb 100644 --- a/src/components/Notifications/NotificationCard/NotificationCard.stories.tsx +++ b/src/components/Notifications/NotificationCard/NotificationCard.stories.tsx @@ -35,8 +35,7 @@ export const Default: Story = { instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx index 2b0a72c67..92a8fcb4a 100644 --- a/src/components/Notifications/Notifications.stories.tsx +++ b/src/components/Notifications/Notifications.stories.tsx @@ -57,9 +57,7 @@ const notifications: Notification[] = [ "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", methodCodeObjectId: "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan" + kind: "Server" }, codeObjectId: "org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan" @@ -83,8 +81,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -107,8 +104,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -131,8 +127,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -155,8 +150,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -179,8 +173,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -203,8 +196,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -227,8 +219,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -251,8 +242,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, @@ -275,8 +265,7 @@ const notifications: Notification[] = [ instrumentationLibrary: "SampleInsightsController", spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", methodCodeObjectId: null, - kind: null, - codeObjectId: null + kind: null }, codeObjectId: "SampleInsightsController$_$WaitForLock" }, diff --git a/src/components/Tests/TestCard/mockData.ts b/src/components/Tests/TestCard/mockData.ts index a6adfebad..b6285bdf5 100644 --- a/src/components/Tests/TestCard/mockData.ts +++ b/src/components/Tests/TestCard/mockData.ts @@ -10,9 +10,7 @@ export const mockedTest: Test = { "span:com.digma.junit$_$GET /owners/{ownerId}/pets/{petId}/visits/new", methodCodeObjectId: "org.springframework.samples.petclinic.owner.VisitController$_$initNewVisitForm", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.owner.VisitController$_$initNewVisitForm" + kind: "Internal" }, result: "success", runAt: "2024-01-04T16:06:46.568728Z", diff --git a/src/types.ts b/src/types.ts index d78bc491c..bdb1e42a6 100644 --- a/src/types.ts +++ b/src/types.ts @@ -57,11 +57,6 @@ export interface SpanInfo { spanCodeObjectId: string; methodCodeObjectId: string | null; kind: string | null; - - /** - * @deprecated - */ - codeObjectId: string | null; } export interface SpanInstanceInfo { From f35555b38c8fee3a804e86e53c5f0988eb3b67ee Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 11 Apr 2024 12:23:14 +0300 Subject: [PATCH 37/66] Login actions --- src/actions.ts | 6 +++++- .../Main/Authentication/Login/Login.stories.tsx | 2 +- .../Main/Authentication/Login/useLogin.ts | 2 +- .../Registration/Registration.stories.tsx | 4 ++-- .../Main/Authentication/Registration/index.tsx | 15 +++++++++------ .../Registration/useRegistration.ts | 17 +++++++++++++---- src/components/Main/Authentication/styles.ts | 9 ++++++++- src/components/Main/actions.ts | 5 +---- src/components/Main/index.tsx | 9 ++++++++- src/components/Main/types.ts | 1 + 10 files changed, 49 insertions(+), 21 deletions(-) diff --git a/src/actions.ts b/src/actions.ts index f4a48d6ea..87d3b8651 100644 --- a/src/actions.ts +++ b/src/actions.ts @@ -42,5 +42,9 @@ export const actions = addPrefix(ACTION_PREFIX, { GET_INSIGHT_STATS: "GET_INSIGHT_STATS", SET_INSIGHT_STATS: "SET_INSIGHT_STATS", CHANGE_ENVIRONMENT: "CHANGE_ENVIRONMENT", - SET_USER_INFO: "SET_USER_INFO" + SET_USER_INFO: "SET_USER_INFO", + LOGIN_RESULT: "LOGIN_RESULT", + LOGIN: "LOGIN", + REGISTRATION: "REGISTRATION", + REGISTRATION_RESULT: "REGISTRATION_RESULT" }); diff --git a/src/components/Main/Authentication/Login/Login.stories.tsx b/src/components/Main/Authentication/Login/Login.stories.tsx index eb734a839..cc1786e78 100644 --- a/src/components/Main/Authentication/Login/Login.stories.tsx +++ b/src/components/Main/Authentication/Login/Login.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; import { Login } from "."; -import { actions } from "../../actions"; +import { actions } from "../../../../actions"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { diff --git a/src/components/Main/Authentication/Login/useLogin.ts b/src/components/Main/Authentication/Login/useLogin.ts index a6e7df601..14b39325f 100644 --- a/src/components/Main/Authentication/Login/useLogin.ts +++ b/src/components/Main/Authentication/Login/useLogin.ts @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; +import { actions } from "../../../../actions"; import { dispatcher } from "../../../../dispatcher"; import { useLoading } from "../../../Insights/insightTickets/common"; -import { actions } from "../../actions"; import { ErrorData, LoginPayload, LoginResult } from "../../types"; export const useLogin = () => { diff --git a/src/components/Main/Authentication/Registration/Registration.stories.tsx b/src/components/Main/Authentication/Registration/Registration.stories.tsx index d6f665230..12b650814 100644 --- a/src/components/Main/Authentication/Registration/Registration.stories.tsx +++ b/src/components/Main/Authentication/Registration/Registration.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; import { Registration } from "."; -import { actions } from "../../actions"; +import { actions } from "../../../../actions"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { @@ -27,7 +27,7 @@ export const Failed: Story = { () => window.postMessage({ type: "digma", - action: actions.REGISTER_RESULT, + action: actions.REGISTRATION_RESULT, payload: { errors: [ { diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx index 2b2f9e7e9..5b5683020 100644 --- a/src/components/Main/Authentication/Registration/index.tsx +++ b/src/components/Main/Authentication/Registration/index.tsx @@ -1,7 +1,6 @@ import { KeyboardEvent, useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; -import { isValidEmailFormat } from "../../../../utils/isValidEmailFormat"; import { TextField } from "../../../common/RegistrationDialog/TextField"; import { LockIcon } from "../../../common/icons/12px/LockIcon"; import { EnvelopeIcon } from "../../../common/icons/16px/EnvelopeIcon"; @@ -16,10 +15,6 @@ const validateEmail = (email: string): string | boolean => { return emailMessage; } - if (!isValidEmailFormat(email)) { - return emailMessage; - } - return true; }; @@ -44,7 +39,12 @@ export const Registration = () => { defaultValues: formDefaultValues }); const values = getValues(); - const { isLoading, register, errors: resultErrors } = useRegistration(); + const { + isLoading, + isSucceed, + register, + errors: resultErrors + } = useRegistration(); useEffect(() => { if (resultErrors?.length > 0) { @@ -146,6 +146,9 @@ export const Registration = () => { /> {errorMessage && {errorMessage}} + {isSucceed && ( + User created successfully! + )} { const [isLoading, setIsLoading] = useLoading(false); const [errors, setErrors] = useState([]); + const [isSucceed, setIsSucceed] = useState(undefined); useEffect(() => { const handleRegister = (data: unknown) => { const result = data as RegisterResult; if (result.errors) { setErrors(result.errors); + setIsSucceed(false); + } else { + setIsSucceed(true); } + setIsLoading(false); }; - dispatcher.addActionListener(actions.REGISTER_RESULT, handleRegister); + dispatcher.addActionListener(actions.REGISTRATION_RESULT, handleRegister); return () => { - dispatcher.removeActionListener(actions.REGISTER_RESULT, handleRegister); + dispatcher.removeActionListener( + actions.REGISTRATION_RESULT, + handleRegister + ); }; }, []); return { isLoading, errors, + isSucceed, register: (payload: RegisterPayload) => { setIsLoading(true); window.sendMessageToDigma({ - action: actions.LOGIN, + action: actions.REGISTRATION, payload: { ...payload } diff --git a/src/components/Main/Authentication/styles.ts b/src/components/Main/Authentication/styles.ts index 7436645df..a810230ed 100644 --- a/src/components/Main/Authentication/styles.ts +++ b/src/components/Main/Authentication/styles.ts @@ -85,15 +85,22 @@ export const ButtonsContainer = styled.div` width: 100%; `; -export const ErrorMessage = styled.span` +const StatusMessage = styled.span` display: flex; font-size: 13px; height: 15px; align-items: center; align-self: flex-start; +`; + +export const ErrorMessage = styled(StatusMessage)` color: ${({ theme }) => theme.colors.v3.status.high}; `; +export const SuccessMessage = styled(StatusMessage)` + color: ${({ theme }) => theme.colors.v3.status.success}; +`; + export const SubmitButton = styled(Button)` align-self: flex-end; width: 100%; diff --git a/src/components/Main/actions.ts b/src/components/Main/actions.ts index 5428e3776..efd223b29 100644 --- a/src/components/Main/actions.ts +++ b/src/components/Main/actions.ts @@ -6,8 +6,5 @@ export const actions = addPrefix(ACTION_PREFIX, { INITIALIZE: "INITIALIZE", SET_VIEWS: "SET_VIEWS", GET_HIGHLIGHTS_TOP_ISSUES_DATA: "GET_HIGHLIGHTS_TOP_ISSUES_DATA", - SET_HIGHLIGHTS_TOP_ISSUES_DATA: "SET_HIGHLIGHTS_TOP_ISSUES_DATA", - LOGIN_RESULT: "LOGIN_RESULT", - LOGIN: "LOGIN", - REGISTER_RESULT: "REGISTER_RESULT" + SET_HIGHLIGHTS_TOP_ISSUES_DATA: "SET_HIGHLIGHTS_TOP_ISSUES_DATA" }); diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index 8cc9d73c0..65460970d 100644 --- a/src/components/Main/index.tsx +++ b/src/components/Main/index.tsx @@ -1,16 +1,19 @@ -import { useLayoutEffect, useState } from "react"; +import { useContext, useLayoutEffect, useState } from "react"; import { dispatcher } from "../../dispatcher"; import { Assets } from "../Assets"; import { Highlights } from "../Highlights"; import { Insights } from "../Insights"; import { SetViewsPayload } from "../Navigation/types"; import { Tests } from "../Tests"; +import { ConfigContext } from "../common/App/ConfigContext"; +import { Authentication } from "./Authentication"; import { actions } from "./actions"; import { isView } from "./typeGuards"; import { View } from "./types"; export const Main = () => { const [view, setView] = useState("insights"); + const config = useContext(ConfigContext); useLayoutEffect(() => { window.sendMessageToDigma({ @@ -32,6 +35,10 @@ export const Main = () => { }; }, []); + if (!config.userInfo?.id) { + return ; + } + switch (view) { case "highlights": return ; diff --git a/src/components/Main/types.ts b/src/components/Main/types.ts index b6951e16c..72e38499a 100644 --- a/src/components/Main/types.ts +++ b/src/components/Main/types.ts @@ -35,4 +35,5 @@ export interface RegisterPayload { export interface RegisterResult { errors?: ErrorData[]; + success: string; } From 27c307833e95f6599be27c9cb421733203432623 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 12 Apr 2024 17:15:45 +0300 Subject: [PATCH 38/66] Configure UI for Login --- src/actions.ts | 1 + .../Main/Authentication/Login/index.tsx | 25 ++----- .../Main/Authentication/Login/useLogin.ts | 10 +-- .../Authentication/Registration/index.tsx | 23 +++++- src/components/Main/Authentication/styles.ts | 3 +- src/components/Main/index.tsx | 4 +- src/components/Main/types.ts | 2 +- src/components/Navigation/KebabMenu/index.tsx | 70 +++++++++++-------- src/components/Navigation/KebabMenu/types.ts | 9 +++ src/components/Navigation/index.tsx | 6 +- src/components/Navigation/styles.ts | 5 ++ .../CreateEnvironmentWizard/index.tsx | 6 +- .../CreateEnvironmentWizard/styles.ts | 25 ------- .../RecentActivity/NoUser/NoUser.stories.tsx | 18 +++++ .../RecentActivity/NoUser/index.tsx | 17 +++++ .../RecentActivity/NoUser/styles.ts | 42 +++++++++++ src/components/RecentActivity/index.tsx | 7 +- src/components/RecentActivity/styles.ts | 25 +++++++ src/utils/isPasswordFormatValid.ts | 6 ++ 19 files changed, 215 insertions(+), 89 deletions(-) create mode 100644 src/components/RecentActivity/NoUser/NoUser.stories.tsx create mode 100644 src/components/RecentActivity/NoUser/index.tsx create mode 100644 src/components/RecentActivity/NoUser/styles.ts create mode 100644 src/utils/isPasswordFormatValid.ts diff --git a/src/actions.ts b/src/actions.ts index 87d3b8651..af487706c 100644 --- a/src/actions.ts +++ b/src/actions.ts @@ -45,6 +45,7 @@ export const actions = addPrefix(ACTION_PREFIX, { SET_USER_INFO: "SET_USER_INFO", LOGIN_RESULT: "LOGIN_RESULT", LOGIN: "LOGIN", + LOGOUT: "LOGOUT", REGISTRATION: "REGISTRATION", REGISTRATION_RESULT: "REGISTRATION_RESULT" }); diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx index d0dc90834..2497be18e 100644 --- a/src/components/Main/Authentication/Login/index.tsx +++ b/src/components/Main/Authentication/Login/index.tsx @@ -1,7 +1,6 @@ import { KeyboardEvent, useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; -import { isValidEmailFormat } from "../../../../utils/isValidEmailFormat"; import { TextField } from "../../../common/RegistrationDialog/TextField"; // TODO: change when new env will be merged import { LockIcon } from "../../../common/icons/12px/LockIcon"; import { EnvelopeIcon } from "../../../common/icons/16px/EnvelopeIcon"; @@ -16,20 +15,6 @@ import { import { LoginFormValues } from "./types"; import { useLogin } from "./useLogin"; -const validateEmail = (email: string): string | boolean => { - const emailMessage = "Please enter a valid work email address"; - - if (email.length === 0) { - return emailMessage; - } - - if (!isValidEmailFormat(email)) { - return emailMessage; - } - - return true; -}; - const formDefaultValues: LoginFormValues = { password: "", email: "" @@ -50,20 +35,20 @@ export const Login = () => { defaultValues: formDefaultValues }); const values = getValues(); - const { isLoading, login, errors: resultErrors } = useLogin(); + const { isLoading, login, error } = useLogin(); useEffect(() => { setFocus("email"); }, [setFocus]); useEffect(() => { - if (resultErrors?.length > 0) { + if (error) { setError("root", { type: "validate", - message: resultErrors.map((x) => x.description).join("\r\n") + message: error }); } - }, [setError, resultErrors]); + }, [setError, error]); useEffect(() => { watch(() => { @@ -96,7 +81,7 @@ export const Login = () => { ( { const [isLoading, setIsLoading] = useLoading(false); - const [errors, setErrors] = useState([]); + const [error, setError] = useState(); useEffect(() => { const handleLogin = (data: unknown) => { const result = data as LoginResult; - if (result.errors) { - setErrors(result.errors); + if (result.error) { + setError(result.error); } setIsLoading(false); }; @@ -35,6 +35,6 @@ export const useLogin = () => { }); }, isLoading, - errors + error }; }; diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx index 5b5683020..9f9e0caa6 100644 --- a/src/components/Main/Authentication/Registration/index.tsx +++ b/src/components/Main/Authentication/Registration/index.tsx @@ -1,6 +1,8 @@ import { KeyboardEvent, useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; +import { isValidPasswordFormat } from "../../../../utils/isPasswordFormatValid"; +import { isValidEmailFormat } from "../../../../utils/isValidEmailFormat"; import { TextField } from "../../../common/RegistrationDialog/TextField"; import { LockIcon } from "../../../common/icons/12px/LockIcon"; import { EnvelopeIcon } from "../../../common/icons/16px/EnvelopeIcon"; @@ -15,6 +17,22 @@ const validateEmail = (email: string): string | boolean => { return emailMessage; } + if (!isValidEmailFormat(email)) { + return emailMessage; + } + + return true; +}; + +const validatePassword = (password: string): string | boolean => { + if (password.length < 6) { + return "Password must be at least 6."; + } + + if (!isValidPasswordFormat(password)) { + return "Password must contain one special character"; + } + return true; }; @@ -105,7 +123,10 @@ export const Registration = () => { name={"password"} control={control} defaultValue={""} - rules={{ required: "Password is required" }} + rules={{ + required: "Password is required", + validate: validatePassword + }} render={({ field }) => ( theme.colors.v3.surface.secondary}; `; export const Header = styled.div` @@ -63,7 +64,7 @@ export const FormContainer = styled.div` `; export const ContentContainer = styled(FormContainer)` - margin-top: 50%; + margin-top: 10%; `; export const Inputs = styled.div` diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index 65460970d..68f36f72d 100644 --- a/src/components/Main/index.tsx +++ b/src/components/Main/index.tsx @@ -33,9 +33,9 @@ export const Main = () => { return () => { dispatcher.removeActionListener(actions.SET_VIEWS, handleSetViewsData); }; - }, []); + }, [config.userInfo?.id]); - if (!config.userInfo?.id) { + if (!config.userInfo?.id && config.backendInfo?.centralize) { return ; } diff --git a/src/components/Main/types.ts b/src/components/Main/types.ts index 72e38499a..729aacbe7 100644 --- a/src/components/Main/types.ts +++ b/src/components/Main/types.ts @@ -25,7 +25,7 @@ export interface ErrorData { } export interface LoginResult { - errors?: ErrorData[]; + error: string; } export interface RegisterPayload { diff --git a/src/components/Navigation/KebabMenu/index.tsx b/src/components/Navigation/KebabMenu/index.tsx index d1dd1ae28..a286f9ee7 100644 --- a/src/components/Navigation/KebabMenu/index.tsx +++ b/src/components/Navigation/KebabMenu/index.tsx @@ -11,7 +11,7 @@ import { MenuList } from "../common/MenuList"; import { Popup } from "../common/Popup"; import { trackingEvents } from "../tracking"; import { OpenDocumentationPayload } from "../types"; -import { KebabMenuProps } from "./types"; +import { KebabMenuProps, MenuItem } from "./types"; export const KebabMenu = (props: KebabMenuProps) => { const config = useContext(ConfigContext); @@ -48,37 +48,47 @@ export const KebabMenu = (props: KebabMenuProps) => { props.onClose(); }; + const handleLogoutClick = () => { + window.sendMessageToDigma({ + action: globalActions.LOGOUT + }); + props.onClose(); + }; + + const items: Array = [ + { + id: "onboarding", + label: "Digma Onboarding", + icon: , + onClick: handleOnboardingClick + }, + { + id: "localEngine", + label: "Local Engine", + icon: ( + + ), + onClick: handleLocalEngineClick + }, + { + id: "insightsOverview", + label: "Insights Overview", + icon: , + onClick: handleInsightsOverviewClick + } + ]; + + if (config.backendInfo?.centralize) { + items.push({ + id: "logout", + label: "Logout", + onClick: handleLogoutClick + }); + } + return ( - , - onClick: handleOnboardingClick - }, - { - id: "localEngine", - label: "Local Engine", - icon: ( - - ), - onClick: handleLocalEngineClick - }, - { - id: "insightsOverview", - label: "Insights Overview", - icon: , - onClick: handleInsightsOverviewClick - } - ]} - /> + ); }; diff --git a/src/components/Navigation/KebabMenu/types.ts b/src/components/Navigation/KebabMenu/types.ts index 3f5bc761d..c7ee39284 100644 --- a/src/components/Navigation/KebabMenu/types.ts +++ b/src/components/Navigation/KebabMenu/types.ts @@ -1,3 +1,12 @@ +import { ReactNode } from "react"; + export interface KebabMenuProps { onClose: () => void; } + +export interface MenuItem { + id: string; + icon?: ReactNode; + label: string; + onClick: () => void; +} diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index aa3939889..821d3ab46 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -162,7 +162,7 @@ export const Navigation = () => { handleCodeContextData ); }; - }, []); + }, [config.userInfo?.id]); useEffect(() => { setSelectedEnvironment(config.environment); @@ -359,6 +359,10 @@ export const Navigation = () => { setIsEnvironmentMenuOpen(!isEnvironmentMenuOpen); }; + if (!config.userInfo?.id && config.backendInfo?.centralize) { + return ; + } + return ( diff --git a/src/components/Navigation/styles.ts b/src/components/Navigation/styles.ts index ad182aff2..fcd1f1163 100644 --- a/src/components/Navigation/styles.ts +++ b/src/components/Navigation/styles.ts @@ -46,3 +46,8 @@ export const EnvironmentMenuContainer = styled.div` bottom: 8px; width: 40%; `; + +export const Background = styled.div` + background: ${({ theme }) => theme.colors.v3.surface.secondary}; + height: 100%; +`; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx index 9ef8c8c99..0d69d32b1 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/index.tsx @@ -6,6 +6,7 @@ import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActi import { ConfigContext } from "../../common/App/ConfigContext"; import { Environment } from "../../common/App/types"; import { actions } from "../actions"; +import { RecentActivityContainerBackgroundGradient } from "../styles"; import { trackingEvents } from "../tracking"; import { CreateEnvironmentPayload, @@ -56,7 +57,8 @@ export const CreateEnvironmentWizard = ({ name: "Register", status: "not-completed", errors: {}, - isHidden: !!config.userRegistrationEmail + isHidden: + !!config.userRegistrationEmail && !config.backendInfo?.centralize }, { key: ENVIRONMENT_TYPE_STEP, @@ -217,7 +219,7 @@ export const CreateEnvironmentWizard = ({ /> - + {!completed ? ( <> = { + title: "Recent Activity/NoUser", + component: NoUser, + parameters: { + layout: "fullscreen" + } +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {} +}; diff --git a/src/components/RecentActivity/NoUser/index.tsx b/src/components/RecentActivity/NoUser/index.tsx new file mode 100644 index 000000000..590439ae5 --- /dev/null +++ b/src/components/RecentActivity/NoUser/index.tsx @@ -0,0 +1,17 @@ +import { DigmaLoginLogo } from "../../common/icons/DigmaLoginLogo"; +import { RecentActivityContainerBackgroundGradient } from "../styles"; +import * as s from "./styles"; + +export const NoUser = () => { + return ( + + + + + + Welcome to Digma + Please sign-in/sign-up first to use Digma + + + ); +}; diff --git a/src/components/RecentActivity/NoUser/styles.ts b/src/components/RecentActivity/NoUser/styles.ts new file mode 100644 index 000000000..2b201b99d --- /dev/null +++ b/src/components/RecentActivity/NoUser/styles.ts @@ -0,0 +1,42 @@ +import styled from "styled-components"; +import { + bodyMediumTypography, + subscriptRegularTypography +} from "../../common/App/typographies"; + +export const NoUserContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + padding: 12px 0 18px; + gap: 12px; + color: ${({ theme }) => theme.colors.v3.text.primary}; + height: 100%; +`; + +export const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const Title = styled.span` + ${bodyMediumTypography} + color: ${({ theme }) => theme.colors.v3.text.primary} +`; + +export const Text = styled.span` + ${subscriptRegularTypography} + color: ${({ theme }) => theme.colors.v3.text.secondary} +`; + +export const Background = styled.div` + z-index: -1; + position: absolute; + inset: 0; + height: 100%; + width: 100%; + background: ${({ theme }) => theme.colors.v3.surface.primary}; +`; diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index ec866e5fe..1e7f54505 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -15,6 +15,7 @@ import { EnvironmentPanel } from "./EnvironmentPanel"; import { ViewMode } from "./EnvironmentPanel/types"; import { LiveView } from "./LiveView"; import { NoData } from "./NoData"; +import { NoUser } from "./NoUser"; import { ObservabilityStatusBadge } from "./ObservabilityStatusBadge"; import { RecentActivityTable, isRecent } from "./RecentActivityTable"; import { Toggle } from "./Toggle"; @@ -96,7 +97,7 @@ export const RecentActivity = (props: RecentActivityProps) => { window.sendMessageToDigma({ action: actions.INITIALIZE }); - }, []); + }, [config.userInfo?.id]); const handleEnvironmentSelect = (environment: ExtendedEnvironment) => { setSelectedEnvironment(environment); @@ -215,6 +216,10 @@ export const RecentActivity = (props: RecentActivityProps) => { ); }; + if (!config.userInfo?.id && config.backendInfo?.centralize) { + return ; + } + return showCreationWizard ? ( { diff --git a/src/components/RecentActivity/styles.ts b/src/components/RecentActivity/styles.ts index 1cc424c3e..e7999f17f 100644 --- a/src/components/RecentActivity/styles.ts +++ b/src/components/RecentActivity/styles.ts @@ -79,3 +79,28 @@ export const LiveViewContainer = styled.div` export const NoDataContainer = styled.div` padding: 16px 12px 20px; `; + +export const RecentActivityContainerBackground = styled.div` + position: absolute; + inset: 0; + overflow: hidden; +`; + +export const RecentActivityContainerBackgroundGradient = styled.div` + z-index: -1; + position: absolute; + left: 0; + right: 0; + margin: auto; + top: 0; + height: 383.6%; + width: 82.1%; + border-radius: 100%; + opacity: 0.7; + background: radial-gradient( + 50% 50% at 50% 50%, + rgb(79 93 163 / 60%) 0%, + rgb(79 93 163 / 0%) 100% + ); + filter: blur(5px); +`; diff --git a/src/utils/isPasswordFormatValid.ts b/src/utils/isPasswordFormatValid.ts new file mode 100644 index 000000000..31aa739a6 --- /dev/null +++ b/src/utils/isPasswordFormatValid.ts @@ -0,0 +1,6 @@ +const PASSWORD_REGEX = + /^(?=.*[A-Za-z0-9])(?=.*[!@#$%^&*])[A-Za-z0-9!@#$%^&*]{6,}$/gm; + +export const isValidPasswordFormat = (email: string): boolean => { + return new RegExp(PASSWORD_REGEX).test(email); +}; From 7a5168bbd0c7c2a40e6840216530457acb772945 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 12 Apr 2024 18:15:23 +0300 Subject: [PATCH 39/66] fix validation --- src/components/Main/Authentication/Login/index.tsx | 2 +- src/components/Main/Authentication/Login/useLogin.ts | 4 ++-- .../Main/Authentication/Registration/useRegistration.ts | 1 + .../RecentActivity/EnvironmentInstructionsPanel/styles.ts | 1 - 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx index 2497be18e..a9131cc96 100644 --- a/src/components/Main/Authentication/Login/index.tsx +++ b/src/components/Main/Authentication/Login/index.tsx @@ -45,7 +45,7 @@ export const Login = () => { if (error) { setError("root", { type: "validate", - message: error + message: error.description }); } }, [setError, error]); diff --git a/src/components/Main/Authentication/Login/useLogin.ts b/src/components/Main/Authentication/Login/useLogin.ts index 20e7cb2c5..a423995a3 100644 --- a/src/components/Main/Authentication/Login/useLogin.ts +++ b/src/components/Main/Authentication/Login/useLogin.ts @@ -6,13 +6,13 @@ import { LoginPayload, LoginResult } from "../../types"; export const useLogin = () => { const [isLoading, setIsLoading] = useLoading(false); - const [error, setError] = useState(); + const [error, setError] = useState<{ description: string }>(); useEffect(() => { const handleLogin = (data: unknown) => { const result = data as LoginResult; if (result.error) { - setError(result.error); + setError({ description: result.error }); } setIsLoading(false); }; diff --git a/src/components/Main/Authentication/Registration/useRegistration.ts b/src/components/Main/Authentication/Registration/useRegistration.ts index fe791f812..0de96ffb6 100644 --- a/src/components/Main/Authentication/Registration/useRegistration.ts +++ b/src/components/Main/Authentication/Registration/useRegistration.ts @@ -16,6 +16,7 @@ export const useRegistration = () => { setErrors(result.errors); setIsSucceed(false); } else { + setErrors([]); setIsSucceed(true); } diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts index 445821121..3ec2c520f 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts @@ -84,7 +84,6 @@ export const SectionContentContainer = styled.div` export const Link = styled(CommonLink)` text-transform: capitalize; - max-width: fit-content; `; export const ActionContainer = styled.div` From 41a92d2cd97ae60b903f9add2d2cdb8c8048314b Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 12 Apr 2024 18:19:05 +0300 Subject: [PATCH 40/66] fix style --- src/components/RecentActivity/index.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index c89f38204..b6f67a7fb 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -288,19 +288,6 @@ export const RecentActivity = (props: RecentActivityProps) => { onEnvironmentDelete={handleEnvironmentDelete} onDigmathonModeButtonClick={handleDigmathonModeButtonClick} /> - - {!selectedEnvironment?.isPending && ( - - Recent Activity - - - )} - {!config.isObservabilityEnabled && } - {renderContent()} From b94a6d0d91a2c8a70dce62e092adbb0e028a137b Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 12 Apr 2024 17:52:58 +0200 Subject: [PATCH 41/66] Remove deprecated components, add comments --- package.json | 6 - .../InsightsCatalog/InsightsPage/index.tsx | 38 ----- .../EndpointChattyApiInsightCard.stories.tsx | 39 ----- .../EndpointChattyApiInsightCard/index.tsx | 105 -------------- .../EndpointChattyApiInsightCard/mockData.ts | 74 ---------- .../EndpointChattyApiInsightCard/styles.ts | 6 - .../EndpointChattyApiInsightCard/types.ts | 20 --- ...ntQueryOptimizationInsightCard.stories.tsx | 76 ---------- .../index.tsx | 132 ----------------- .../mockData.ts | 83 ----------- .../styles.ts | 9 -- .../types.ts | 20 --- .../InsightList/DurationChange/index.tsx | 1 + .../InsightList/InsightCard/index.tsx | 1 + .../InsightList/NoObservabilityCard/index.tsx | 5 +- .../Insights/deprecated/InsightList/index.tsx | 1 + .../insightCards/BottleneckInsight/index.tsx | 4 + .../DurationBreakdownInsight/index.tsx | 1 + .../ReferenceLineLabel/index.tsx | 4 + .../DurationInsight/XAxisTick/index.tsx | 4 + .../insightCards/DurationInsight/index.tsx | 1 + .../DurationSlowdownSourceInsight/index.tsx | 1 + .../EndpointNPlusOneInsight/index.tsx | 1 + .../index.tsx | 1 + .../insightCards/ErrorsInsight/index.tsx | 1 + .../ExcessiveAPICallsInsight/index.tsx | 1 + .../HighNumberOfQueriesInsight/index.tsx | 1 + .../insightCards/NPlusOneInsight/index.tsx | 1 + .../NoScalingIssueInsight/index.tsx | 1 + .../PerformanceAtScaleInsight/index.tsx | 1 + .../QueryOptimizationInsight/index.tsx | 1 + .../RequestBreakdownInsight/index.tsx | 1 + .../ScalingIssueInsight/index.tsx | 1 + .../SessionInViewInsight/index.tsx | 1 + .../SlowEndpointInsight/index.tsx | 1 + .../SpanBottleneckInsight/index.tsx | 1 + .../insightCards/SpanNexusInsight/index.tsx | 1 + .../insightCards/TopUsageInsight/index.tsx | 1 + .../insightCards/TrafficInsight/index.tsx | 1 + .../insightCards/common/Criticality/index.tsx | 4 + .../insightCards/common/JiraButton/index.tsx | 4 + .../Insights/deprecated/Preview/index.tsx | 4 + src/components/Insights/index.tsx | 18 --- ...ndpointQueryOptimizationTicket.stories.tsx | 28 ---- .../EndpointQueryOptimizationTicket/index.tsx | 136 ------------------ src/components/Insights/typeGuards.ts | 11 +- src/components/Insights/types.ts | 12 +- src/components/Notifications/index.tsx | 3 - src/containers/Assets/index.tsx | 27 ---- src/containers/Assets/styles.ts | 15 -- src/containers/Insights/index.tsx | 27 ---- src/containers/Insights/styles.ts | 7 - src/containers/Tests/index.tsx | 27 ---- src/containers/Tests/styles.ts | 7 - src/types.ts | 14 +- src/utils/getInsightTypeInfo.ts | 7 +- src/utils/getInsightTypeOrderPriority.ts | 2 - webpackEntries.ts | 34 +---- 58 files changed, 81 insertions(+), 954 deletions(-) delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/EndpointChattyApiInsightCard.stories.tsx delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/index.tsx delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/mockData.ts delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/styles.ts delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/types.ts delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/EndpointQueryOptimizationInsightCard.stories.tsx delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/index.tsx delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/mockData.ts delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/styles.ts delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/types.ts delete mode 100644 src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/EndpointQueryOptimizationTicket.stories.tsx delete mode 100644 src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/index.tsx delete mode 100644 src/containers/Assets/index.tsx delete mode 100644 src/containers/Assets/styles.ts delete mode 100644 src/containers/Insights/index.tsx delete mode 100644 src/containers/Insights/styles.ts delete mode 100644 src/containers/Tests/index.tsx delete mode 100644 src/containers/Tests/styles.ts diff --git a/package.json b/package.json index 2c41f8871..6c51901e2 100644 --- a/package.json +++ b/package.json @@ -11,29 +11,23 @@ "test": "echo \"Error: no test specified\" && exit 1", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "build:assets:dev": "webpack --config webpack.dev.ts --env app=assets", "build:dashboard:dev": "webpack --config webpack.dev.ts --env app=dashboard", "build:documentation:dev": "webpack --config webpack.dev.ts --env app=documentation", - "build:insights:dev": "webpack --config webpack.dev.ts --env app=insights", "build:installation-wizard:dev": "webpack --config webpack.dev.ts --env app=installationWizard", "build:main:dev": "webpack --config webpack.dev.ts --env app=main", "build:navigation:dev": "webpack --config webpack.dev.ts --env app=navigation", "build:notifications:dev": "webpack --config webpack.dev.ts --env app=notifications", "build:recentActivity:dev": "webpack --config webpack.dev.ts --env app=recentActivity", - "build:tests:dev": "webpack --config webpack.dev.ts --env app=tests", "build:troubleshooting:dev": "webpack --config webpack.dev.ts --env app=troubleshooting", "build:dev": "webpack --config webpack.dev.ts", "build:dev:web": "webpack --config webpack.dev.ts --env platform=Web", - "build:assets:prod": "webpack --config webpack.prod.ts --env app=assets", "build:dashboard:prod": "webpack --config webpack.prod.ts --env app=dashboard", "build:documentation:prod": "webpack --config webpack.prod.ts --env app=documentation", - "build:insights:prod": "webpack --config webpack.prod.ts --env app=insights", "build:installation-wizard:prod": "webpack --config webpack.prod.ts --env app=installationWizard", "build:main:prod": "webpack --config webpack.prod.ts --env app=main", "build:navigation:prod": "webpack --config webpack.prod.ts --env app=navigation", "build:notifications:prod": "webpack --config webpack.prod.ts --env app=notifications", "build:recentActivity:prod": "webpack --config webpack.prod.ts --env app=recentActivity", - "build:tests:prod": "webpack --config webpack.prod.ts --env app=tests", "build:troubleshooting:prod": "webpack --config webpack.prod.ts --env app=troubleshooting", "build:prod": "webpack --config webpack.prod.ts", "build:prod:web": "webpack --config webpack.prod.ts --env platform=Web", diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx index 4bb7036a3..f697b959b 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx @@ -17,7 +17,6 @@ import { CardsIcon } from "../../../common/icons/CardsIcon"; import { actions } from "../../actions"; import { trackingEvents } from "../../tracking"; import { - isChattyApiEndpointInsight, isEndpointBottleneckInsight, isEndpointBreakdownInsight, isEndpointChattyApiV2Insight, @@ -25,7 +24,6 @@ import { isEndpointHighUsageInsight, isEndpointLowUsageInsight, isEndpointNormalUsageInsight, - isEndpointQueryOptimizationInsight, isEndpointQueryOptimizationV2Insight, isEndpointSlowdownSourceInsight, isEndpointSpanNPlusOneInsight, @@ -48,10 +46,8 @@ import { import { ViewMode } from "../types"; import { EndpointBottleneckInsightCard } from "./insightCards/EndpointBottleneckInsightCard"; import { EndpointBreakdownInsightCard } from "./insightCards/EndpointBreakdownInsightCard"; -import { EndpointChattyApiInsightCard } from "./insightCards/EndpointChattyApiInsightCard"; import { EndpointChattyApiV2InsightCard } from "./insightCards/EndpointChattyApiV2InsightCard"; import { EndpointHighNumberOfQueriesInsightCard } from "./insightCards/EndpointHighNumberOfQueriesInsightCard"; -import { EndpointQueryOptimizationInsightCard } from "./insightCards/EndpointQueryOptimizationInsightCard"; import { EndpointQueryOptimizationV2InsightCard } from "./insightCards/EndpointQueryOptimizationV2InsightCard"; import { EndpointSessionInViewInsightCard } from "./insightCards/EndpointSessionInViewInsightCard"; import { EndpointSlowdownSourceInsightCard } from "./insightCards/EndpointSlowdownSourceInsightCard"; @@ -414,22 +410,6 @@ const renderInsightCard = ( ); } - // deprecated - if (isChattyApiEndpointInsight(insight)) { - return ( - - ); - } - if (isEndpointChattyApiV2Insight(insight)) { return ( - ); - } - if (isEndpointQueryOptimizationV2Insight(insight)) { return ( = { - title: - "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard", - component: EndpointChattyApiInsightCard, - 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; - -export const Default: Story = { - args: { - insight: mockedEndpointChattyApiInsight - } -}; - -export const WithMultipleSpans: Story = { - args: { - insight: { - ...mockedEndpointChattyApiInsight, - spans: new Array(4).fill(undefined).map((x, i) => ({ - ...mockedEndpointChattyApiInsight.spans[0], - clientSpan: { - ...mockedEndpointChattyApiInsight.spans[0].clientSpan, - spanCodeObjectId: `${mockedEndpointChattyApiInsight.spans[0].clientSpan.spanCodeObjectId} ${i}` - } - })) - } - } -}; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/index.tsx deleted file mode 100644 index ee6bd9aa0..000000000 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/index.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { useContext } from "react"; -import { usePagination } from "../../../../../../hooks/usePagination"; -import { ConfigContext } from "../../../../../common/App/ConfigContext"; -import { TargetIcon } from "../../../../../common/icons/12px/TargetIcon"; -import { Button } from "../../../../../common/v3/Button"; -import { Pagination } from "../../../../../common/v3/Pagination"; -import { Tooltip } from "../../../../../common/v3/Tooltip"; -import { InsightType, Trace } from "../../../../types"; -import { InsightCard } from "../common/InsightCard"; -import { ContentContainer, Description, ListContainer } from "../styles"; -import * as s from "./styles"; -import { EndpointChattyApiInsightCardProps } from "./types"; - -const PAGE_SIZE = 3; - -/** - * @deprecated - */ -export const EndpointChattyApiInsightCard = ({ - insight, - onAssetLinkClick, - onTraceButtonClick, - onRecalculate, - onRefresh, - onGoToSpan, - isMarkAsReadButtonEnabled -}: EndpointChattyApiInsightCardProps) => { - const config = useContext(ConfigContext); - - const [pageItems, page, setPage] = usePagination( - insight.spans, - PAGE_SIZE, - insight.id - ); - - const handleLinkClick = (spanCodeObjectId: string) => { - onAssetLinkClick(spanCodeObjectId, insight.type); - }; - - const handleTraceButtonClick = ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId: string - ) => { - onTraceButtonClick(trace, insightType, spanCodeObjectId); - }; - - return ( - - - Excessive API calls to specific endpoint found - - - {pageItems.map((span) => { - const spanName = span.clientSpan.displayName; - const traceId = span.traceId; - const spanCodeObjectId = span.clientSpan.spanCodeObjectId; - - return ( - handleLinkClick(spanCodeObjectId)} - buttons={[ - config.isJaegerEnabled && traceId && ( - -