From 4cddc44e5b27c2f76d385c4fa33d5044e68a71d1 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 26 Oct 2023 19:38:37 +0200 Subject: [PATCH 1/6] Add environment type documentation page --- .../Documentation/Documentation.stories.tsx | 6 ++ src/components/Documentation/index.tsx | 22 ++--- .../EnvironmentTypeCard/InsightCard/index.tsx | 42 ++++++++ .../EnvironmentTypeCard/InsightCard/styles.ts | 95 +++++++++++++++++++ .../EnvironmentTypeCard/InsightCard/types.ts | 15 +++ .../EnvironmentTypeCard/StatusChip/index.tsx | 39 ++++++++ .../EnvironmentTypeCard/StatusChip/styles.ts | 30 ++++++ .../EnvironmentTypeCard/StatusChip/types.ts | 9 ++ .../EnvironmentTypeCard/index.tsx | 49 ++++++++++ .../EnvironmentTypeCard/styles.ts | 94 ++++++++++++++++++ .../EnvironmentTypeCard/types.ts | 11 +++ .../pages/EnvironmentTypes/data.tsx | 70 ++++++++++++++ .../pages/EnvironmentTypes/index.tsx | 34 +++++++ .../pages/EnvironmentTypes/styles.ts | 71 ++++++++++++++ .../pages/EnvironmentTypes/types.ts | 11 +++ .../RunDigma/Page/index.tsx} | 4 +- .../{ => pages/RunDigma/Page}/styles.ts | 0 .../pages/{ => RunDigma/Page}/types.ts | 2 + .../runDigmaWithCommandLine.tsx | 4 +- .../{ => RunDigma}/runDigmaWithDocker.tsx | 4 +- .../runDigmaWithGradleTasks.tsx | 2 +- src/components/Documentation/types.ts | 4 - src/components/common/Button/index.tsx | 2 +- 23 files changed, 597 insertions(+), 23 deletions(-) create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/index.tsx create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/styles.ts create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/types.ts create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts create mode 100644 src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts create mode 100644 src/components/Documentation/pages/EnvironmentTypes/data.tsx create mode 100644 src/components/Documentation/pages/EnvironmentTypes/index.tsx create mode 100644 src/components/Documentation/pages/EnvironmentTypes/styles.ts create mode 100644 src/components/Documentation/pages/EnvironmentTypes/types.ts rename src/components/Documentation/{Page.tsx => pages/RunDigma/Page/index.tsx} (95%) rename src/components/Documentation/{ => pages/RunDigma/Page}/styles.ts (100%) rename src/components/Documentation/pages/{ => RunDigma/Page}/types.ts (85%) rename src/components/Documentation/pages/{ => RunDigma}/runDigmaWithCommandLine.tsx (97%) rename src/components/Documentation/pages/{ => RunDigma}/runDigmaWithDocker.tsx (96%) rename src/components/Documentation/pages/{ => RunDigma}/runDigmaWithGradleTasks.tsx (95%) diff --git a/src/components/Documentation/Documentation.stories.tsx b/src/components/Documentation/Documentation.stories.tsx index 3a8051393..ae0ba2bbe 100644 --- a/src/components/Documentation/Documentation.stories.tsx +++ b/src/components/Documentation/Documentation.stories.tsx @@ -34,3 +34,9 @@ export const RunDigmaWithGradleTasks: Story = { page: "run-digma-with-gradle-tasks" } }; + +export const EnvironmentTypes: Story = { + args: { + page: "environment-types" + } +}; diff --git a/src/components/Documentation/index.tsx b/src/components/Documentation/index.tsx index d7983593e..8775c6eac 100644 --- a/src/components/Documentation/index.tsx +++ b/src/components/Documentation/index.tsx @@ -1,12 +1,11 @@ import { useEffect } from "react"; import { isString } from "../../typeGuards/isString"; import { addPrefix } from "../../utils/addPrefix"; -import { Page } from "./Page"; -import { runDigmaWithCommandLine } from "./pages/runDigmaWithCommandLine"; -import { runDigmaWithDocker } from "./pages/runDigmaWithDocker"; -import { runDigmaWithGradleTasks } from "./pages/runDigmaWithGradleTasks"; -import { PageContent } from "./pages/types"; -import * as s from "./styles"; +import { EnvironmentTypes } from "./pages/EnvironmentTypes"; +import { Page } from "./pages/RunDigma/Page"; +import { runDigmaWithCommandLine } from "./pages/RunDigma/runDigmaWithCommandLine"; +import { runDigmaWithDocker } from "./pages/RunDigma/runDigmaWithDocker"; +import { runDigmaWithGradleTasks } from "./pages/RunDigma/runDigmaWithGradleTasks"; import { DocumentationProps } from "./types"; const ACTION_PREFIX = "DOCUMENTATION"; @@ -15,10 +14,11 @@ const actions = addPrefix(ACTION_PREFIX, { INITIALIZE: "INITIALIZE" }); -const pages: Record = { - "run-digma-with-terminal": runDigmaWithCommandLine, - "run-digma-with-docker": runDigmaWithDocker, - "run-digma-with-gradle-tasks": runDigmaWithGradleTasks +const pages: Record = { + "run-digma-with-terminal": , + "run-digma-with-docker": , + "run-digma-with-gradle-tasks": , + "environment-types": }; const initialPage = isString(window.documentationPage) @@ -35,5 +35,5 @@ export const Documentation = (props: DocumentationProps) => { }); }, []); - return {pageContent && }; + return <>{pageContent}; }; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx new file mode 100644 index 000000000..a6358f512 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx @@ -0,0 +1,42 @@ +import { isNumber } from "../../../../../../typeGuards/isNumber"; +import { getInsightTypeInfo } from "../../../../../../utils/getInsightTypeInfo"; +import { InfoCircleIcon } from "../../../../../common/icons/InfoCircleIcon"; +import * as s from "./styles"; +import { InsightCardProps } from "./types"; + +export const InsightCard = (props: InsightCardProps) => { + const insightTypeInfo = getInsightTypeInfo(props.type); + + if (!insightTypeInfo) { + return <>; + } + + return ( + + + + {insightTypeInfo.label} + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit + ducimus architecto natus omnis aut, illum totam non maiores fuga, + accusantium vero dolorum. + + {!props.isDisabled && ( + + {isNumber(props.count) ? ( + {`${props.count} issue${ + props.count === 1 ? "" : "s" + } found`} + ) : ( + + No Data + + What is this? + + )} + + )} + + ); +}; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts new file mode 100644 index 000000000..897430738 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts @@ -0,0 +1,95 @@ +import styled from "styled-components"; +import { Link as CommonLink } from "../../../../../common/Link"; +import { ContainerProps, CountChipProps } from "./types"; + +export const Container = styled.div` + display: flex; + padding: 8px 12px 12px; + flex-direction: column; + align-items: flex-start; + gap: 4px; + font-size: 12px; + font-weight: 500; + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#788ca9"; + case "dark": + case "dark-jetbrains": + return "#9b9b9b"; + } + }}; + + ${({ $isDisabled }) => ($isDisabled ? "opacity: 0.4;" : "")} +`; + +export const Header = styled.div` + font-size: 14px; + font-weight: 600; + text-transform: capitalize; + display: flex; + gap: 8px; + align-items: center; + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#4d668a"; + case "dark": + case "dark-jetbrains": + return "#dadada"; + } + }}; +`; + +export const StatusContainer = styled.div` + margin-top: 8px; +`; + +export const Chip = styled.div` + border-radius: 21px; + display: flex; + padding: 2px 8px; + justify-content: center; + align-items: center; + font-size: 12px; +`; + +export const CountChip = styled(Chip)` + color: ${({ theme, $count }) => { + switch (theme.mode) { + case "light": + return $count > 0 ? "#1dc693" : "#e00036"; + case "dark": + case "dark-jetbrains": + return $count > 0 ? "#67d28b" : "#f93967"; + } + }}; + background: ${({ theme, $count }) => { + switch (theme.mode) { + case "light": + return `rgba(${$count > 0 ? "29 198 147" : "224 0 54"} / 30%)`; + case "dark": + case "dark-jetbrains": + return `rgba(${$count > 0 ? "103 210 139" : "249 57 103"} / 30%)`; + } + }}; +`; + +export const NoDataChip = styled(Chip)` + color: #e2e7ff; + background: #6b6dda; +`; + +export const NoDataContainer = styled.div` + display: flex; + align-items: center; + gap: 5px; + color: #9b9b9b; + font-weight: 500; + font-size: 12px; +`; + +export const Link = styled(CommonLink)` + color: inherit; + font-size: 12px; +`; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts new file mode 100644 index 000000000..59dfa61ff --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts @@ -0,0 +1,15 @@ +import { InsightType } from "../../../../../../types"; + +export interface InsightCardProps { + type: InsightType; + count?: number; + isDisabled?: boolean; +} + +export interface ContainerProps { + $isDisabled?: boolean; +} + +export interface CountChipProps { + $count: number; +} diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/index.tsx new file mode 100644 index 000000000..ee0634011 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/index.tsx @@ -0,0 +1,39 @@ +import { Badge } from "../../../../../common/Badge"; +import { EnvironmentStatus } from "../types"; +import * as s from "./styles"; +import { StatusChipProps } from "./types"; + +const getBadgeStyles = (status: EnvironmentStatus) => { + switch (status) { + case "waiting-for-data": + return { + main: { + background: "#fff" + }, + outline: { + background: "rgb(147 149 228 / 40%)" + } + }; + case "active": + default: + return undefined; + } +}; + +const getLabel = (status: EnvironmentStatus): string => { + switch (status) { + case "active": + return "Active"; + case "waiting-for-data": + return "Waiting for data"; + } +}; + +export const StatusChip = (props: StatusChipProps) => { + return ( + + + {getLabel(props.status)} + + ); +}; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/styles.ts new file mode 100644 index 000000000..d9e161686 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/styles.ts @@ -0,0 +1,30 @@ +import styled from "styled-components"; +import { ContainerProps } from "./types"; + +export const Container = styled.div` + display: flex; + min-width: 99px; + max-width: fit-content; + height: 22px; + padding: 2px 8px; + justify-content: center; + align-items: center; + gap: 6px; + border-radius: 21px; + font-size: 14px; + font-weight: 500; + box-sizing: border-box; + color: #fff; + background: ${({ theme, $status }) => { + if ($status === "waiting-for-data") { + return "#6b6dda"; + } + switch (theme.mode) { + case "light": + return "rgba(103 210 139 / 64%)"; + case "dark": + case "dark-jetbrains": + return "rgba(103 210 139 / 24%)"; + } + }}; +`; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/types.ts new file mode 100644 index 000000000..118765e54 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/types.ts @@ -0,0 +1,9 @@ +import { EnvironmentStatus } from "../types"; + +export interface StatusChipProps { + status: EnvironmentStatus; +} + +export interface ContainerProps { + $status: EnvironmentStatus; +} diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx new file mode 100644 index 000000000..aafb66a04 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx @@ -0,0 +1,49 @@ +import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon"; +import { PlusIcon } from "../../../../common/icons/PlusIcon"; +import { InsightCard } from "./InsightCard"; +import { StatusChip } from "./StatusChip"; +import * as s from "./styles"; +import { EnvironmentTypeCardProps } from "./types"; + +export const EnvironmentTypeCard = (props: EnvironmentTypeCardProps) => { + return ( + + + + {props.icon} + {props.name} + + {props.description} + + {props.status === "active" && } + {props.status === "waiting-for-data" && ( + <> + + + + What is this? + + + )} + {!props.status && ( + + Add Environment + + )} + + + + {props.insights.map((x) => ( + + ))} + + + ); +}; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts new file mode 100644 index 000000000..0b228215e --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts @@ -0,0 +1,94 @@ +import styled from "styled-components"; +import { Button } from "../../../../common/Button"; +import { Link as CommonLink } from "../../../../common/Link"; + +export const Container = styled.div` + display: flex; + flex-direction: column; + gap: 12px; + min-width: 280px; + flex-grow: 1; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + case "dark-jetbrains": + return "#1e1f22"; + } + }}; +`; + +export const Header = styled.div` + display: flex; + flex-direction: column; + padding: 8px 12px 12px; + gap: 4px; + font-size: 14px; + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#9b9b9b"; + } + }}; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#fff"; + case "dark": + case "dark-jetbrains": + return "#393b40"; + } + }}; +`; + +export const Title = styled.div` + display: flex; + gap: 8px; + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#4d668a"; + case "dark": + case "dark-jetbrains": + return "#fff"; + } + }}; + font-size: 16px; + font-weight: 500; + text-transform: capitalize; + align-items: center; +`; + +export const StatusContainer = styled.div` + margin-top: 8px; + display: flex; + align-items: center; + gap: 8px; +`; + +export const NoDataContainer = styled.div` + display: flex; + align-items: center; + gap: 4px; + color: #9b9b9b; + font-weight: 500; + font-size: 12px; +`; + +export const Link = styled(CommonLink)` + color: inherit; +`; + +export const InsightContainer = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`; + +export const AddEnvironmentButton = styled(Button)` + width: 100%; +`; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts new file mode 100644 index 000000000..ee683d24f --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts @@ -0,0 +1,11 @@ +import { InsightType } from "../../../../../types"; + +export type EnvironmentStatus = "active" | "waiting-for-data"; + +export interface EnvironmentTypeCardProps { + name: string; + icon: JSX.Element; + description?: string; + status?: EnvironmentStatus; + insights: { type: InsightType; count?: number; isDisabled?: boolean }[]; +} diff --git a/src/components/Documentation/pages/EnvironmentTypes/data.tsx b/src/components/Documentation/pages/EnvironmentTypes/data.tsx new file mode 100644 index 000000000..f72b3894e --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/data.tsx @@ -0,0 +1,70 @@ +import { InsightType } from "../../../../types"; +import { InfiniteLoopIcon } from "../../../common/icons/InfiniteLoopIcon"; +import { EnvironmentTypeData } from "./types"; + +export const environmentTypesData: EnvironmentTypeData[] = [ + { + id: "local-deployment", + icon: , + name: "Local Deployment", + description: + "Download them to a relative path to the Docker Compose file you are running", + status: "active", + insights: [ + { + type: InsightType.SpanEndpointBottleneck, + count: 0 + }, + { + type: InsightType.EndpointDurationSlowdown + }, + { + type: InsightType.SlowestSpans, + count: 34 + } + ] + }, + { + id: "testing-and-ci", + icon: , + name: "Testing & CI", + description: + "Download them to a relative path to the Docker Compose file you are running", + status: "waiting-for-data", + insights: [ + { + type: InsightType.SpanEndpointBottleneck, + count: 0 + }, + { + type: InsightType.EndpointDurationSlowdown, + count: 34 + }, + { + type: InsightType.SlowestSpans, + count: 34 + } + ] + }, + { + id: "production", + icon: , + name: "Production", + description: + "Download them to a relative path to the Docker Compose file you are running", + insights: [ + { + type: InsightType.SpanEndpointBottleneck, + isDisabled: true + }, + { + type: InsightType.EndpointDurationSlowdown, + isDisabled: true + }, + { + type: InsightType.SlowestSpans, + isDisabled: true + } + ] + } +]; diff --git a/src/components/Documentation/pages/EnvironmentTypes/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/index.tsx new file mode 100644 index 000000000..c9cebc3b5 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/index.tsx @@ -0,0 +1,34 @@ +import { DigmaLogoIcon } from "../../../common/icons/DigmaLogoIcon"; +import { EnvironmentTypeCard } from "./EnvironmentTypeCard"; +import { environmentTypesData } from "./data"; +import * as s from "./styles"; + +export const EnvironmentTypes = () => { + return ( + + + + + Feature rich Observability across the SDLC + + + These are simple steps to help you collect observability data from + your application running via Docker compose without changing the + original docker-compose.yml file. + + + + {environmentTypesData.map((x) => ( + + ))} + + + ); +}; diff --git a/src/components/Documentation/pages/EnvironmentTypes/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/styles.ts new file mode 100644 index 000000000..304e857f1 --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/styles.ts @@ -0,0 +1,71 @@ +import styled from "styled-components"; + +export const Container = styled.div` + height: 100vh; + min-width: 856px; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#ebecf0"; + case "dark": + case "dark-jetbrains": + return "#191919"; + } + }}; +`; + +export const Header = styled.div` + display: flex; + height: 151px; + padding: 12px; + flex-direction: column; + gap: 10px; + font-size: 14px; + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#b4b8bf"; + } + }}; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#e9eef4"; + case "dark": + case "dark-jetbrains": + return "#2b2d30"; + } + }}; +`; + +export const Title = styled.div` + display: flex; + gap: 8px; + align-items: center; + font-size: 16px; + font-weight: 500; + text-transform: capitalize; + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#4d668a"; + case "dark": + case "dark-jetbrains": + return "#fff"; + } + }}; +`; + +export const EnvironmentsContainer = styled.div` + position: absolute; + top: 100px; + display: flex; + width: 100%; + box-sizing: border-box; + gap: 8px; + padding: 0 8px; + flex-grow: 1; +`; diff --git a/src/components/Documentation/pages/EnvironmentTypes/types.ts b/src/components/Documentation/pages/EnvironmentTypes/types.ts new file mode 100644 index 000000000..572361a8a --- /dev/null +++ b/src/components/Documentation/pages/EnvironmentTypes/types.ts @@ -0,0 +1,11 @@ +import { InsightType } from "../../../../types"; +import { EnvironmentStatus } from "./EnvironmentTypeCard/types"; + +export interface EnvironmentTypeData { + id: string; + icon: JSX.Element; + name: string; + description?: string; + status?: EnvironmentStatus; + insights: { type: InsightType; count?: number; isDisabled?: boolean }[]; +} diff --git a/src/components/Documentation/Page.tsx b/src/components/Documentation/pages/RunDigma/Page/index.tsx similarity index 95% rename from src/components/Documentation/Page.tsx rename to src/components/Documentation/pages/RunDigma/Page/index.tsx index cbf29cb7c..b6eccaa07 100644 --- a/src/components/Documentation/Page.tsx +++ b/src/components/Documentation/pages/RunDigma/Page/index.tsx @@ -2,7 +2,7 @@ import * as s from "./styles"; import { PageProps } from "./types"; export const Page = (props: PageProps) => ( - <> + {props.title} {props.description} @@ -22,5 +22,5 @@ export const Page = (props: PageProps) => ( {section.content} ))} - + ); diff --git a/src/components/Documentation/styles.ts b/src/components/Documentation/pages/RunDigma/Page/styles.ts similarity index 100% rename from src/components/Documentation/styles.ts rename to src/components/Documentation/pages/RunDigma/Page/styles.ts diff --git a/src/components/Documentation/pages/types.ts b/src/components/Documentation/pages/RunDigma/Page/types.ts similarity index 85% rename from src/components/Documentation/pages/types.ts rename to src/components/Documentation/pages/RunDigma/Page/types.ts index 228392573..1b4fd9208 100644 --- a/src/components/Documentation/pages/types.ts +++ b/src/components/Documentation/pages/RunDigma/Page/types.ts @@ -10,3 +10,5 @@ export interface PageContent { content?: ReactNode; }[]; } + +export type PageProps = PageContent; diff --git a/src/components/Documentation/pages/runDigmaWithCommandLine.tsx b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx similarity index 97% rename from src/components/Documentation/pages/runDigmaWithCommandLine.tsx rename to src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx index 4fd7cd4de..dc1ac61cd 100644 --- a/src/components/Documentation/pages/runDigmaWithCommandLine.tsx +++ b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx @@ -1,5 +1,5 @@ -import { CodeSnippet } from "../../common/CodeSnippet"; -import { PageContent } from "./types"; +import { CodeSnippet } from "../../../common/CodeSnippet"; +import { PageContent } from "./Page/types"; export const runDigmaWithCommandLine: PageContent = { title: diff --git a/src/components/Documentation/pages/runDigmaWithDocker.tsx b/src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx similarity index 96% rename from src/components/Documentation/pages/runDigmaWithDocker.tsx rename to src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx index fda9f31f9..24dd71e02 100644 --- a/src/components/Documentation/pages/runDigmaWithDocker.tsx +++ b/src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx @@ -1,5 +1,5 @@ -import { CodeSnippet } from "../../common/CodeSnippet"; -import { PageContent } from "./types"; +import { CodeSnippet } from "../../../common/CodeSnippet"; +import { PageContent } from "./Page/types"; export const runDigmaWithDocker: PageContent = { title: "How to use Digma if your application is running via Docker Compose", diff --git a/src/components/Documentation/pages/runDigmaWithGradleTasks.tsx b/src/components/Documentation/pages/RunDigma/runDigmaWithGradleTasks.tsx similarity index 95% rename from src/components/Documentation/pages/runDigmaWithGradleTasks.tsx rename to src/components/Documentation/pages/RunDigma/runDigmaWithGradleTasks.tsx index 213226b30..783eb6291 100644 --- a/src/components/Documentation/pages/runDigmaWithGradleTasks.tsx +++ b/src/components/Documentation/pages/RunDigma/runDigmaWithGradleTasks.tsx @@ -1,4 +1,4 @@ -import { PageContent } from "./types"; +import { PageContent } from "./Page/types"; export const runDigmaWithGradleTasks: PageContent = { title: "How to use Digma if you're using custom native Gradle tasks", diff --git a/src/components/Documentation/types.ts b/src/components/Documentation/types.ts index 9aec40970..82c4621d8 100644 --- a/src/components/Documentation/types.ts +++ b/src/components/Documentation/types.ts @@ -1,7 +1,3 @@ -import { PageContent } from "./pages/types"; - export interface DocumentationProps { page?: string; } - -export type PageProps = PageContent; diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx index 7a88d8987..8d90ed8c5 100644 --- a/src/components/common/Button/index.tsx +++ b/src/components/common/Button/index.tsx @@ -22,7 +22,7 @@ export const Button = (props: ButtonProps) => { {props.icon && ( )} {props.children} From b1877755d3beecbeb028df9a0f06ed25073b9afb Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 26 Oct 2023 20:44:14 +0200 Subject: [PATCH 2/6] Fix styles --- .../EnvironmentTypeCard/InsightCard/index.tsx | 32 ++++++++++--------- .../EnvironmentTypeCard/InsightCard/styles.ts | 1 + 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx index a6358f512..caa4696e4 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx @@ -22,21 +22,23 @@ export const InsightCard = (props: InsightCardProps) => { ducimus architecto natus omnis aut, illum totam non maiores fuga, accusantium vero dolorum. - {!props.isDisabled && ( - - {isNumber(props.count) ? ( - {`${props.count} issue${ - props.count === 1 ? "" : "s" - } found`} - ) : ( - - No Data - - What is this? - - )} - - )} + + {!props.isDisabled && ( + <> + {isNumber(props.count) ? ( + {`${props.count} issue${ + props.count === 1 ? "" : "s" + } found`} + ) : ( + + No Data + + What is this? + + )} + + )} + ); }; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts index 897430738..9b2a93976 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts @@ -43,6 +43,7 @@ export const Header = styled.div` export const StatusContainer = styled.div` margin-top: 8px; + height: 18px; `; export const Chip = styled.div` From 0d995a107e656382f429f2d52219a2ecc91c1a41 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Mon, 30 Oct 2023 17:40:09 +0100 Subject: [PATCH 3/6] Update insight data and types --- .../EnvironmentTypeCard/InsightCard/index.tsx | 99 ++++++++++++++++--- .../EnvironmentTypeCard/InsightCard/styles.ts | 6 +- .../EnvironmentTypeCard/InsightCard/types.ts | 24 ++++- .../EnvironmentTypeCard/index.tsx | 2 +- .../EnvironmentTypeCard/styles.ts | 1 - .../EnvironmentTypeCard/types.ts | 4 +- .../pages/EnvironmentTypes/data.tsx | 65 +++++------- .../pages/EnvironmentTypes/index.tsx | 23 +++-- .../pages/EnvironmentTypes/styles.ts | 35 +++++-- .../pages/EnvironmentTypes/types.ts | 14 ++- .../RecentActivity/RecentActivity.stories.tsx | 2 +- 11 files changed, 195 insertions(+), 80 deletions(-) diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx index caa4696e4..6d20c3c54 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx @@ -1,27 +1,104 @@ import { isNumber } from "../../../../../../typeGuards/isNumber"; -import { getInsightTypeInfo } from "../../../../../../utils/getInsightTypeInfo"; +import { BottleneckIcon } from "../../../../../common/icons/BottleneckIcon"; import { InfoCircleIcon } from "../../../../../common/icons/InfoCircleIcon"; +import { SQLDatabaseIcon } from "../../../../../common/icons/SQLDatabaseIcon"; +import { ScalesIcon } from "../../../../../common/icons/ScalesIcon"; +import { SnailIcon } from "../../../../../common/icons/SnailIcon"; +import { SpotIcon } from "../../../../../common/icons/SpotIcon"; +import { WarningCircleIcon } from "../../../../../common/icons/WarningCircleIcon"; import * as s from "./styles"; -import { InsightCardProps } from "./types"; +import { + InsightCardProps, + InsightCardType, + InsightCardTypeData +} from "./types"; + +const getInsightTypeCardData = (type: InsightCardType): InsightCardTypeData => { + const data = { + [InsightCardType.TRACING_DATA]: { + name: "Tracing Data", + description: + "Tracing data allows you to see clear visualizations of handling requests, scheduled jobs, tasks, or other processes within your application. For each code Digma captures observability data for, you can see the flow of control, parameters, and even queries through trace visualization." + }, + [InsightCardType.QUERY_ISSUES]: { + icon: SQLDatabaseIcon, + name: "Query issues", + description: + "Digma analyzes database query traces to find common issues such as N+1 Selects queries (queries that have repeated select statements due to inefficient ORM modeling), bulk inserts optimizations, Open Session in view, and other issues and anti-patterns." + }, + [InsightCardType.BOTTLENECKS]: { + icon: BottleneckIcon, + name: "Bottlenecks", + description: + "Identifying bottlenecks allows seeing where most of the time is spent during specific processes or requests. This makes it easier to troubleshoot performance issues and also to identify bottlenecks that affect multiple flows within the application." + }, + [InsightCardType.ERRORS]: { + icon: WarningCircleIcon, + name: "Errors", + description: + 'Digma finds exceptions and stack traces even if you were not debugging the code or if the exception was "swallowed" by aggressive exception handling. You can fully navigate the stack traces to see where in the code it originated as well as track when the exception started appearing and when it had last occurred.' + }, + [InsightCardType.SCALING_ISSUES]: { + icon: ScalesIcon, + name: "Scaling Issues", + description: + "Scaling issues can reveal themselves even in CI, especially for tests that create load and multi-threading scenarios. Digma identifies areas that don’t scale well under concurrency and points at critical areas or root cause locations in the code that create performance degradation when scaling up." + }, + [InsightCardType.SLOWDOWN_PERF_IMPROVEMENTS]: { + icon: SnailIcon, + name: "Slowdowns/perf. improvements", + description: + "Digma can detect when code changes inadvertently cause a performance regression. Digma creates a baseline for different processes and spans and raises a flag or highlights any chance due to code changes or new features." + }, + [InsightCardType.SLOWDOWN_ROOT_CAUSE_DETECTION]: { + icon: SnailIcon, + name: "Slowdown Root Cause Detection", + description: + "Digma can detect when code changes inadvertently cause a performance regression. Digma creates a baseline for different processes and spans and raises a flag or highlights any chance due to code changes or new features." + }, + [InsightCardType.PERFORMANCE_IMPACT]: { + name: "Performance impact", + description: + "Digma analyzes the performance impact of different areas and code locations to be able to a ‘punch for the bucks’ view of where to focus optimization efforts. To improve performance it's not enough to examine the durations and statistics, usage and overall effect can make a lot of difference." + }, + [InsightCardType.USAGE_ANALYSIS]: { + name: "Usage Analysis", + description: + "See the real runtime usage of any observed code or query. Detect areas in code that are never reached or have a clear view of the impacted flows, consumers or endpoints by code changes in any given class or module." + }, + [InsightCardType.ERROR_HOTSPOTS]: { + icon: SpotIcon, + name: "Error Hotspots", + description: + "Be aware of any escalating, new, unhandled, and high-impact errors in the code and where they originate. See hotspot locations in the code to prioritize production environment issues and focus on code that affects users the most." + }, + [InsightCardType.TOO_MANY_HTTP_CALLS]: { + icon: SQLDatabaseIcon, + name: "Too many HTTP Calls", + description: + 'Find likely candidates for caching where too many calls are retrieving data using the same URL. Detect "Chatty" APIs that may be causing performance degradation and increased resource consumption.' + } + }; + + return data[type]; +}; export const InsightCard = (props: InsightCardProps) => { - const insightTypeInfo = getInsightTypeInfo(props.type); + const insightTypeCardInfo = getInsightTypeCardData(props.type); - if (!insightTypeInfo) { + if (!insightTypeCardInfo) { return <>; } return ( - - {insightTypeInfo.label} + {insightTypeCardInfo.icon && ( + + )} + {insightTypeCardInfo.name} - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit - ducimus architecto natus omnis aut, illum totam non maiores fuga, - accusantium vero dolorum. - + {insightTypeCardInfo.description} {!props.isDisabled && ( <> diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts index 9b2a93976..94a999d89 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts @@ -19,13 +19,13 @@ export const Container = styled.div` return "#9b9b9b"; } }}; - ${({ $isDisabled }) => ($isDisabled ? "opacity: 0.4;" : "")} `; export const Header = styled.div` font-size: 14px; font-weight: 600; + min-height: 22px; text-transform: capitalize; display: flex; gap: 8px; @@ -41,6 +41,10 @@ export const Header = styled.div` }}; `; +export const Description = styled.span` + min-height: 115px; +`; + export const StatusContainer = styled.div` margin-top: 8px; height: 18px; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts index 59dfa61ff..66a412ef5 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts @@ -1,7 +1,7 @@ -import { InsightType } from "../../../../../../types"; +import { IconProps } from "../../../../../common/icons/types"; export interface InsightCardProps { - type: InsightType; + type: InsightCardType; count?: number; isDisabled?: boolean; } @@ -13,3 +13,23 @@ export interface ContainerProps { export interface CountChipProps { $count: number; } + +export interface InsightCardTypeData { + icon?: React.MemoExoticComponent<(props: IconProps) => JSX.Element>; + name: string; + description: string; +} + +export enum InsightCardType { + TRACING_DATA, + QUERY_ISSUES, + BOTTLENECKS, + ERRORS, + SCALING_ISSUES, + SLOWDOWN_PERF_IMPROVEMENTS, + SLOWDOWN_ROOT_CAUSE_DETECTION, + PERFORMANCE_IMPACT, + USAGE_ANALYSIS, + ERROR_HOTSPOTS, + TOO_MANY_HTTP_CALLS +} diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx index aafb66a04..fe41585ca 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx @@ -40,7 +40,7 @@ export const EnvironmentTypeCard = (props: EnvironmentTypeCardProps) => { key={x.type} type={x.type} count={x.count} - isDisabled={x.isDisabled} + isDisabled={!props.status} /> ))} diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts index 0b228215e..a3eb8cffb 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts @@ -6,7 +6,6 @@ export const Container = styled.div` display: flex; flex-direction: column; gap: 12px; - min-width: 280px; flex-grow: 1; background: ${({ theme }) => { switch (theme.mode) { diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts index ee683d24f..c1d07ca56 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts @@ -1,4 +1,4 @@ -import { InsightType } from "../../../../../types"; +import { InsightCardType } from "./InsightCard/types"; export type EnvironmentStatus = "active" | "waiting-for-data"; @@ -7,5 +7,5 @@ export interface EnvironmentTypeCardProps { icon: JSX.Element; description?: string; status?: EnvironmentStatus; - insights: { type: InsightType; count?: number; isDisabled?: boolean }[]; + insights: { type: InsightCardType; count?: number; isDisabled?: boolean }[]; } diff --git a/src/components/Documentation/pages/EnvironmentTypes/data.tsx b/src/components/Documentation/pages/EnvironmentTypes/data.tsx index f72b3894e..87506b473 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/data.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/data.tsx @@ -1,49 +1,37 @@ -import { InsightType } from "../../../../types"; import { InfiniteLoopIcon } from "../../../common/icons/InfiniteLoopIcon"; +import { InsightCardType } from "./EnvironmentTypeCard/InsightCard/types"; import { EnvironmentTypeData } from "./types"; export const environmentTypesData: EnvironmentTypeData[] = [ { - id: "local-deployment", + id: "dev", icon: , - name: "Local Deployment", + name: "Dev Environment", description: "Download them to a relative path to the Docker Compose file you are running", status: "active", insights: [ - { - type: InsightType.SpanEndpointBottleneck, - count: 0 - }, - { - type: InsightType.EndpointDurationSlowdown - }, - { - type: InsightType.SlowestSpans, - count: 34 - } + { type: InsightCardType.TRACING_DATA }, + { type: InsightCardType.QUERY_ISSUES }, + { type: InsightCardType.BOTTLENECKS }, + { type: InsightCardType.ERRORS } ] }, { - id: "testing-and-ci", + id: "ci-testing", icon: , - name: "Testing & CI", + name: "CI/Testing Environment", description: "Download them to a relative path to the Docker Compose file you are running", status: "waiting-for-data", insights: [ - { - type: InsightType.SpanEndpointBottleneck, - count: 0 - }, - { - type: InsightType.EndpointDurationSlowdown, - count: 34 - }, - { - type: InsightType.SlowestSpans, - count: 34 - } + { type: InsightCardType.SCALING_ISSUES }, + { type: InsightCardType.SLOWDOWN_PERF_IMPROVEMENTS }, + { type: InsightCardType.SLOWDOWN_ROOT_CAUSE_DETECTION }, + { type: InsightCardType.TRACING_DATA }, + { type: InsightCardType.QUERY_ISSUES }, + { type: InsightCardType.BOTTLENECKS }, + { type: InsightCardType.ERRORS } ] }, { @@ -53,18 +41,15 @@ export const environmentTypesData: EnvironmentTypeData[] = [ description: "Download them to a relative path to the Docker Compose file you are running", insights: [ - { - type: InsightType.SpanEndpointBottleneck, - isDisabled: true - }, - { - type: InsightType.EndpointDurationSlowdown, - isDisabled: true - }, - { - type: InsightType.SlowestSpans, - isDisabled: true - } + { type: InsightCardType.PERFORMANCE_IMPACT }, + { type: InsightCardType.USAGE_ANALYSIS }, + { type: InsightCardType.SCALING_ISSUES }, + { type: InsightCardType.ERROR_HOTSPOTS }, + { type: InsightCardType.TOO_MANY_HTTP_CALLS }, + { type: InsightCardType.TRACING_DATA }, + { type: InsightCardType.QUERY_ISSUES }, + { type: InsightCardType.BOTTLENECKS }, + { type: InsightCardType.ERRORS } ] } ]; diff --git a/src/components/Documentation/pages/EnvironmentTypes/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/index.tsx index c9cebc3b5..0151a85b8 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/index.tsx @@ -4,9 +4,11 @@ import { environmentTypesData } from "./data"; import * as s from "./styles"; export const EnvironmentTypes = () => { + const columnCount = environmentTypesData.length; + return ( - - + + Feature rich Observability across the SDLC @@ -19,14 +21,15 @@ export const EnvironmentTypes = () => { {environmentTypesData.map((x) => ( - + + + ))} diff --git a/src/components/Documentation/pages/EnvironmentTypes/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/styles.ts index 304e857f1..ac43abe8d 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/styles.ts @@ -1,8 +1,18 @@ import styled from "styled-components"; +import { ContainerProps, HeaderProps } from "./types"; -export const Container = styled.div` - height: 100vh; - min-width: 856px; +// in pixels +const COLUMN_MIN_WIDTH = 280; +const COLUMN_PADDING = 8; +const ENVIRONMENT_TYPES_OFFSET = 93; + +const getContainerMinWidth = (columnCount: number) => { + return COLUMN_MIN_WIDTH * columnCount + (columnCount + 1) * COLUMN_PADDING; +}; + +export const Container = styled.div` + min-height: 100vh; + min-width: ${({ $columnCount }) => getContainerMinWidth($columnCount)}px; background: ${({ theme }) => { switch (theme.mode) { case "light": @@ -14,10 +24,15 @@ export const Container = styled.div` }}; `; -export const Header = styled.div` +export const Header = styled.div` + position: absolute; + min-width: ${({ $columnCount }) => getContainerMinWidth($columnCount)}px; + box-sizing: border-box; + left: 0; + right: 0; display: flex; height: 151px; - padding: 12px; + padding: 12px 12px ${ENVIRONMENT_TYPES_OFFSET}px; flex-direction: column; gap: 10px; font-size: 14px; @@ -60,12 +75,14 @@ export const Title = styled.div` `; export const EnvironmentsContainer = styled.div` - position: absolute; - top: 100px; + position: relative; + padding: ${ENVIRONMENT_TYPES_OFFSET}px ${COLUMN_PADDING}px ${COLUMN_PADDING}px; display: flex; width: 100%; box-sizing: border-box; gap: 8px; - padding: 0 8px; - flex-grow: 1; +`; + +export const EnvironmentTypeContainer = styled.div` + min-width: ${COLUMN_MIN_WIDTH}px; `; diff --git a/src/components/Documentation/pages/EnvironmentTypes/types.ts b/src/components/Documentation/pages/EnvironmentTypes/types.ts index 572361a8a..d48d5b728 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/types.ts @@ -1,4 +1,4 @@ -import { InsightType } from "../../../../types"; +import { InsightCardType } from "./EnvironmentTypeCard/InsightCard/types"; import { EnvironmentStatus } from "./EnvironmentTypeCard/types"; export interface EnvironmentTypeData { @@ -7,5 +7,15 @@ export interface EnvironmentTypeData { name: string; description?: string; status?: EnvironmentStatus; - insights: { type: InsightType; count?: number; isDisabled?: boolean }[]; + insights: { + type: InsightCardType; + count?: number; + isDisabled?: boolean; + }[]; } + +export interface ContainerProps { + $columnCount: number; +} + +export type HeaderProps = ContainerProps; diff --git a/src/components/RecentActivity/RecentActivity.stories.tsx b/src/components/RecentActivity/RecentActivity.stories.tsx index 1b45ac8dc..5f2e32fc9 100644 --- a/src/components/RecentActivity/RecentActivity.stories.tsx +++ b/src/components/RecentActivity/RecentActivity.stories.tsx @@ -128,7 +128,7 @@ const data: RecentActivityData = { }, lastEntrySpan: null, latestTraceId: "DB80F24773E2BBE574E97960F9CB0D64", - latestTraceTimestamp: "2023-01-07T12:59:21.794Z", + latestTraceTimestamp: "2023-10-27T13:47:21.794Z", latestTraceDuration: { value: 3.9, unit: "ms", From 07e43a82ece912a23a4616bfa2d22aedc305858e Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 31 Oct 2023 11:57:43 +0100 Subject: [PATCH 4/6] Update content, remove interactive elements --- .../EnvironmentTypeCard/InsightCard/index.tsx | 39 ++++++++++++------- .../EnvironmentTypeCard/InsightCard/styles.ts | 13 +++++-- .../EnvironmentTypeCard/InsightCard/types.ts | 6 ++- .../EnvironmentTypeCard/index.tsx | 7 +--- .../pages/EnvironmentTypes/data.tsx | 23 +++++------ 5 files changed, 49 insertions(+), 39 deletions(-) diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx index 6d20c3c54..648971400 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx @@ -1,6 +1,4 @@ -import { isNumber } from "../../../../../../typeGuards/isNumber"; import { BottleneckIcon } from "../../../../../common/icons/BottleneckIcon"; -import { InfoCircleIcon } from "../../../../../common/icons/InfoCircleIcon"; import { SQLDatabaseIcon } from "../../../../../common/icons/SQLDatabaseIcon"; import { ScalesIcon } from "../../../../../common/icons/ScalesIcon"; import { SnailIcon } from "../../../../../common/icons/SnailIcon"; @@ -38,12 +36,18 @@ const getInsightTypeCardData = (type: InsightCardType): InsightCardTypeData => { description: 'Digma finds exceptions and stack traces even if you were not debugging the code or if the exception was "swallowed" by aggressive exception handling. You can fully navigate the stack traces to see where in the code it originated as well as track when the exception started appearing and when it had last occurred.' }, - [InsightCardType.SCALING_ISSUES]: { + [InsightCardType.SCALING_ISSUES_CI]: { icon: ScalesIcon, name: "Scaling Issues", description: "Scaling issues can reveal themselves even in CI, especially for tests that create load and multi-threading scenarios. Digma identifies areas that don’t scale well under concurrency and points at critical areas or root cause locations in the code that create performance degradation when scaling up." }, + [InsightCardType.SCALING_ISSUES_PRODUCTION]: { + icon: ScalesIcon, + name: "Scaling Issues", + description: + "Digma identifies areas that don't scale well under concurrency and points at critical areas or root cause locations in the code that create performance degradation when scaling up. Critical sections, blocking queries, or other areas of the code that are blocking the application at scale." + }, [InsightCardType.SLOWDOWN_PERF_IMPROVEMENTS]: { icon: SnailIcon, name: "Slowdowns/perf. improvements", @@ -54,17 +58,17 @@ const getInsightTypeCardData = (type: InsightCardType): InsightCardTypeData => { icon: SnailIcon, name: "Slowdown Root Cause Detection", description: - "Digma can detect when code changes inadvertently cause a performance regression. Digma creates a baseline for different processes and spans and raises a flag or highlights any chance due to code changes or new features." - }, - [InsightCardType.PERFORMANCE_IMPACT]: { - name: "Performance impact", - description: - "Digma analyzes the performance impact of different areas and code locations to be able to a ‘punch for the bucks’ view of where to focus optimization efforts. To improve performance it's not enough to examine the durations and statistics, usage and overall effect can make a lot of difference." + "Sometimes a slowdown can be traced to a specific query, HTTP request, or code section that is experiencing a slowdown. Digma is able to pin point the culprit for the slowdown in order to better highlight a specific problem or issue." }, [InsightCardType.USAGE_ANALYSIS]: { name: "Usage Analysis", description: - "See the real runtime usage of any observed code or query. Detect areas in code that are never reached or have a clear view of the impacted flows, consumers or endpoints by code changes in any given class or module." + "See the real runtime usage of any observed code or query. Detect areas in code that are never reached or have a clear view of the impacted flows, consumers, or endpoints by code changes in any given class or module." + }, + [InsightCardType.PERFORMANCE_IMPACT]: { + name: "Performance impact", + description: + 'Digma analyzes the performance impact of different areas and code locations to be able to a "punch for the bucks" view of where to focus optimization efforts. To improve performance it\'s not enough to examine the durations and statistics, usage and overall effect can make a lot of difference.' }, [InsightCardType.ERROR_HOTSPOTS]: { icon: SpotIcon, @@ -72,11 +76,16 @@ const getInsightTypeCardData = (type: InsightCardType): InsightCardTypeData => { description: "Be aware of any escalating, new, unhandled, and high-impact errors in the code and where they originate. See hotspot locations in the code to prioritize production environment issues and focus on code that affects users the most." }, - [InsightCardType.TOO_MANY_HTTP_CALLS]: { + [InsightCardType.CONCURRENCY_AND_COST_OPTIMIZATION]: { + name: "Concurrency and Cost Optimization (Coming Soon)", + description: + "By analyzing how the code performs under different concurrency levels, Digma can suggest the recommended scale-out or scale-up concurrency to optimize for throughput, latency, or cost. This soon-to-be-released feature will provide clear scale recommendations for developers." + }, + [InsightCardType.CHATTY_MICROSERVICES]: { icon: SQLDatabaseIcon, - name: "Too many HTTP Calls", + name: "Chatty Microservices", description: - 'Find likely candidates for caching where too many calls are retrieving data using the same URL. Detect "Chatty" APIs that may be causing performance degradation and increased resource consumption.' + "Find likely candidates for caching where too many calls are retrieving data using the same URL. Detect ‘Chatty’ APIs that may be causing performance degradation and increased resource consumption." } }; @@ -99,7 +108,7 @@ export const InsightCard = (props: InsightCardProps) => { {insightTypeCardInfo.name} {insightTypeCardInfo.description} - + {/* {!props.isDisabled && ( <> {isNumber(props.count) ? ( @@ -115,7 +124,7 @@ export const InsightCard = (props: InsightCardProps) => { )} )} - + */} ); }; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts index 94a999d89..f910cea8b 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts @@ -19,6 +19,15 @@ export const Container = styled.div` return "#9b9b9b"; } }}; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + case "dark-jetbrains": + return "#1e1f22"; + } + }}; ${({ $isDisabled }) => ($isDisabled ? "opacity: 0.4;" : "")} `; @@ -41,9 +50,7 @@ export const Header = styled.div` }}; `; -export const Description = styled.span` - min-height: 115px; -`; +export const Description = styled.span``; export const StatusContainer = styled.div` margin-top: 8px; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts index 66a412ef5..2abdaf02c 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts @@ -25,11 +25,13 @@ export enum InsightCardType { QUERY_ISSUES, BOTTLENECKS, ERRORS, - SCALING_ISSUES, + SCALING_ISSUES_CI, + SCALING_ISSUES_PRODUCTION, SLOWDOWN_PERF_IMPROVEMENTS, SLOWDOWN_ROOT_CAUSE_DETECTION, PERFORMANCE_IMPACT, USAGE_ANALYSIS, ERROR_HOTSPOTS, - TOO_MANY_HTTP_CALLS + CONCURRENCY_AND_COST_OPTIMIZATION, + CHATTY_MICROSERVICES } diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx index fe41585ca..91b4515ea 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx @@ -1,7 +1,4 @@ -import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon"; -import { PlusIcon } from "../../../../common/icons/PlusIcon"; import { InsightCard } from "./InsightCard"; -import { StatusChip } from "./StatusChip"; import * as s from "./styles"; import { EnvironmentTypeCardProps } from "./types"; @@ -14,7 +11,7 @@ export const EnvironmentTypeCard = (props: EnvironmentTypeCardProps) => { {props.name} {props.description} - + {/* {props.status === "active" && } {props.status === "waiting-for-data" && ( <> @@ -32,7 +29,7 @@ export const EnvironmentTypeCard = (props: EnvironmentTypeCardProps) => { Add Environment )} - + */} {props.insights.map((x) => ( diff --git a/src/components/Documentation/pages/EnvironmentTypes/data.tsx b/src/components/Documentation/pages/EnvironmentTypes/data.tsx index 87506b473..fa3c31866 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/data.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/data.tsx @@ -6,7 +6,7 @@ export const environmentTypesData: EnvironmentTypeData[] = [ { id: "dev", icon: , - name: "Dev Environment", + name: "Local and All Environments", description: "Download them to a relative path to the Docker Compose file you are running", status: "active", @@ -23,15 +23,12 @@ export const environmentTypesData: EnvironmentTypeData[] = [ name: "CI/Testing Environment", description: "Download them to a relative path to the Docker Compose file you are running", - status: "waiting-for-data", + status: "active", insights: [ - { type: InsightCardType.SCALING_ISSUES }, + { type: InsightCardType.SCALING_ISSUES_CI }, { type: InsightCardType.SLOWDOWN_PERF_IMPROVEMENTS }, { type: InsightCardType.SLOWDOWN_ROOT_CAUSE_DETECTION }, - { type: InsightCardType.TRACING_DATA }, - { type: InsightCardType.QUERY_ISSUES }, - { type: InsightCardType.BOTTLENECKS }, - { type: InsightCardType.ERRORS } + { type: InsightCardType.USAGE_ANALYSIS } ] }, { @@ -40,16 +37,14 @@ export const environmentTypesData: EnvironmentTypeData[] = [ name: "Production", description: "Download them to a relative path to the Docker Compose file you are running", + status: "active", insights: [ { type: InsightCardType.PERFORMANCE_IMPACT }, - { type: InsightCardType.USAGE_ANALYSIS }, - { type: InsightCardType.SCALING_ISSUES }, { type: InsightCardType.ERROR_HOTSPOTS }, - { type: InsightCardType.TOO_MANY_HTTP_CALLS }, - { type: InsightCardType.TRACING_DATA }, - { type: InsightCardType.QUERY_ISSUES }, - { type: InsightCardType.BOTTLENECKS }, - { type: InsightCardType.ERRORS } + { type: InsightCardType.CONCURRENCY_AND_COST_OPTIMIZATION }, + { type: InsightCardType.SCALING_ISSUES_PRODUCTION }, + { type: InsightCardType.USAGE_ANALYSIS }, + { type: InsightCardType.CHATTY_MICROSERVICES } ] } ]; From 697a2ddbd55529b88dcc32b6cb11932db9d44e9f Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 31 Oct 2023 15:01:14 +0100 Subject: [PATCH 5/6] Update icons --- .../pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx | 7 ++++++- .../pages/EnvironmentTypes/EnvironmentTypeCard/types.ts | 5 ++++- .../Documentation/pages/EnvironmentTypes/data.tsx | 8 +++++--- .../Documentation/pages/EnvironmentTypes/types.ts | 5 ++++- src/components/common/icons/CodeDisplayIcon.tsx | 4 ++-- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx index 91b4515ea..e7da7a91e 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx @@ -1,13 +1,18 @@ +import { useTheme } from "styled-components"; +import { getThemeKind } from "../../../../common/App/styles"; import { InsightCard } from "./InsightCard"; import * as s from "./styles"; import { EnvironmentTypeCardProps } from "./types"; export const EnvironmentTypeCard = (props: EnvironmentTypeCardProps) => { + const theme = useTheme(); + const themeKind = getThemeKind(theme); + return ( - {props.icon} + {props.name} {props.description} diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts index c1d07ca56..c262bf32c 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts @@ -1,10 +1,13 @@ +import { ThemeableIconProps } from "../../../../common/icons/types"; import { InsightCardType } from "./InsightCard/types"; export type EnvironmentStatus = "active" | "waiting-for-data"; export interface EnvironmentTypeCardProps { name: string; - icon: JSX.Element; + icon: React.MemoExoticComponent< + (props: ThemeableIconProps & { height: number }) => JSX.Element + >; description?: string; status?: EnvironmentStatus; insights: { type: InsightCardType; count?: number; isDisabled?: boolean }[]; diff --git a/src/components/Documentation/pages/EnvironmentTypes/data.tsx b/src/components/Documentation/pages/EnvironmentTypes/data.tsx index fa3c31866..7ffac928f 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/data.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/data.tsx @@ -1,3 +1,5 @@ +import { CloudDownloadIcon } from "../../../common/icons/CloudDownloadIcon"; +import { CodeDisplayIcon } from "../../../common/icons/CodeDisplayIcon"; import { InfiniteLoopIcon } from "../../../common/icons/InfiniteLoopIcon"; import { InsightCardType } from "./EnvironmentTypeCard/InsightCard/types"; import { EnvironmentTypeData } from "./types"; @@ -5,7 +7,7 @@ import { EnvironmentTypeData } from "./types"; export const environmentTypesData: EnvironmentTypeData[] = [ { id: "dev", - icon: , + icon: CodeDisplayIcon, name: "Local and All Environments", description: "Download them to a relative path to the Docker Compose file you are running", @@ -19,7 +21,7 @@ export const environmentTypesData: EnvironmentTypeData[] = [ }, { id: "ci-testing", - icon: , + icon: InfiniteLoopIcon, name: "CI/Testing Environment", description: "Download them to a relative path to the Docker Compose file you are running", @@ -33,7 +35,7 @@ export const environmentTypesData: EnvironmentTypeData[] = [ }, { id: "production", - icon: , + icon: CloudDownloadIcon, name: "Production", description: "Download them to a relative path to the Docker Compose file you are running", diff --git a/src/components/Documentation/pages/EnvironmentTypes/types.ts b/src/components/Documentation/pages/EnvironmentTypes/types.ts index d48d5b728..431151873 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/types.ts @@ -1,9 +1,12 @@ +import { ThemeableIconProps } from "../../../common/icons/types"; import { InsightCardType } from "./EnvironmentTypeCard/InsightCard/types"; import { EnvironmentStatus } from "./EnvironmentTypeCard/types"; export interface EnvironmentTypeData { id: string; - icon: JSX.Element; + icon: React.MemoExoticComponent< + (props: ThemeableIconProps & { height: number }) => JSX.Element + >; name: string; description?: string; status?: EnvironmentStatus; diff --git a/src/components/common/icons/CodeDisplayIcon.tsx b/src/components/common/icons/CodeDisplayIcon.tsx index bb2916251..2934c15cc 100644 --- a/src/components/common/icons/CodeDisplayIcon.tsx +++ b/src/components/common/icons/CodeDisplayIcon.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { ThemeableIconProps } from "./types"; +import { IconProps } from "./types"; -interface CodeDisplayIconProps extends ThemeableIconProps { +interface CodeDisplayIconProps extends IconProps { height?: number; } From 87c6aafb58b0a9b4142ea6d694a2bb783924ed79 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 31 Oct 2023 23:44:48 +0100 Subject: [PATCH 6/6] Update content and styles --- .../EnvironmentTypeCard/index.tsx | 61 +++++++----------- .../EnvironmentTypeCard/styles.ts | 22 ++----- .../EnvironmentTypeCard/types.ts | 2 +- .../InsightCard/index.tsx | 19 ++++-- .../InsightCard/styles.ts | 27 +++----- .../InsightCard/types.ts | 2 +- .../pages/EnvironmentTypes/data.tsx | 12 ++-- .../pages/EnvironmentTypes/index.tsx | 64 ++++++++++++++----- .../pages/EnvironmentTypes/styles.ts | 27 ++++++-- .../pages/EnvironmentTypes/types.ts | 2 +- .../icons/OpenTelemetryLogoSmallIcon.tsx | 44 +++++++++++++ 11 files changed, 173 insertions(+), 109 deletions(-) rename src/components/Documentation/pages/EnvironmentTypes/{EnvironmentTypeCard => }/InsightCard/index.tsx (89%) rename src/components/Documentation/pages/EnvironmentTypes/{EnvironmentTypeCard => }/InsightCard/styles.ts (81%) rename src/components/Documentation/pages/EnvironmentTypes/{EnvironmentTypeCard => }/InsightCard/types.ts (91%) create mode 100644 src/components/common/icons/OpenTelemetryLogoSmallIcon.tsx diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx index e7da7a91e..37a3934d0 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx @@ -1,6 +1,5 @@ import { useTheme } from "styled-components"; import { getThemeKind } from "../../../../common/App/styles"; -import { InsightCard } from "./InsightCard"; import * as s from "./styles"; import { EnvironmentTypeCardProps } from "./types"; @@ -10,42 +9,30 @@ export const EnvironmentTypeCard = (props: EnvironmentTypeCardProps) => { return ( - - - - {props.name} - - {props.description} - {/* - {props.status === "active" && } - {props.status === "waiting-for-data" && ( - <> - - - - What is this? - - - )} - {!props.status && ( - - Add Environment - - )} - */} - - - {props.insights.map((x) => ( - - ))} - + + + {props.name} + + {props.description} + {/* + {props.status === "active" && } + {props.status === "waiting-for-data" && ( + <> + + + + What is this? + + + )} + {!props.status && ( + + Add Environment + + )} + */} ); }; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts index a3eb8cffb..fa9298653 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts @@ -5,22 +5,7 @@ import { Link as CommonLink } from "../../../../common/Link"; export const Container = styled.div` display: flex; flex-direction: column; - gap: 12px; flex-grow: 1; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f7f8fa"; - case "dark": - case "dark-jetbrains": - return "#1e1f22"; - } - }}; -`; - -export const Header = styled.div` - display: flex; - flex-direction: column; padding: 8px 12px 12px; gap: 4px; font-size: 14px; @@ -56,14 +41,15 @@ export const Title = styled.div` return "#fff"; } }}; - font-size: 16px; + font-size: 18px; font-weight: 500; text-transform: capitalize; align-items: center; `; export const StatusContainer = styled.div` - margin-top: 8px; + padding-top: 8px; + margin-top: auto; display: flex; align-items: center; gap: 8px; @@ -75,7 +61,7 @@ export const NoDataContainer = styled.div` gap: 4px; color: #9b9b9b; font-weight: 500; - font-size: 12px; + font-size: 14px; `; export const Link = styled(CommonLink)` diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts index c262bf32c..88cfa2e69 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts @@ -1,5 +1,5 @@ import { ThemeableIconProps } from "../../../../common/icons/types"; -import { InsightCardType } from "./InsightCard/types"; +import { InsightCardType } from "../InsightCard/types"; export type EnvironmentStatus = "active" | "waiting-for-data"; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/index.tsx similarity index 89% rename from src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx rename to src/components/Documentation/pages/EnvironmentTypes/InsightCard/index.tsx index 648971400..a33c52b82 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/index.tsx @@ -1,9 +1,11 @@ -import { BottleneckIcon } from "../../../../../common/icons/BottleneckIcon"; -import { SQLDatabaseIcon } from "../../../../../common/icons/SQLDatabaseIcon"; -import { ScalesIcon } from "../../../../../common/icons/ScalesIcon"; -import { SnailIcon } from "../../../../../common/icons/SnailIcon"; -import { SpotIcon } from "../../../../../common/icons/SpotIcon"; -import { WarningCircleIcon } from "../../../../../common/icons/WarningCircleIcon"; +import { BottleneckIcon } from "../../../../common/icons/BottleneckIcon"; +import { OpenTelemetryLogoSmallIcon } from "../../../../common/icons/OpenTelemetryLogoSmallIcon"; +import { SQLDatabaseIcon } from "../../../../common/icons/SQLDatabaseIcon"; +import { ScalesIcon } from "../../../../common/icons/ScalesIcon"; +import { SineIcon } from "../../../../common/icons/SineIcon"; +import { SnailIcon } from "../../../../common/icons/SnailIcon"; +import { SpotIcon } from "../../../../common/icons/SpotIcon"; +import { WarningCircleIcon } from "../../../../common/icons/WarningCircleIcon"; import * as s from "./styles"; import { InsightCardProps, @@ -14,6 +16,7 @@ import { const getInsightTypeCardData = (type: InsightCardType): InsightCardTypeData => { const data = { [InsightCardType.TRACING_DATA]: { + icon: OpenTelemetryLogoSmallIcon, name: "Tracing Data", description: "Tracing data allows you to see clear visualizations of handling requests, scheduled jobs, tasks, or other processes within your application. For each code Digma captures observability data for, you can see the flow of control, parameters, and even queries through trace visualization." @@ -61,11 +64,13 @@ const getInsightTypeCardData = (type: InsightCardType): InsightCardTypeData => { "Sometimes a slowdown can be traced to a specific query, HTTP request, or code section that is experiencing a slowdown. Digma is able to pin point the culprit for the slowdown in order to better highlight a specific problem or issue." }, [InsightCardType.USAGE_ANALYSIS]: { + icon: SineIcon, name: "Usage Analysis", description: "See the real runtime usage of any observed code or query. Detect areas in code that are never reached or have a clear view of the impacted flows, consumers, or endpoints by code changes in any given class or module." }, [InsightCardType.PERFORMANCE_IMPACT]: { + icon: SnailIcon, name: "Performance impact", description: 'Digma analyzes the performance impact of different areas and code locations to be able to a "punch for the bucks" view of where to focus optimization efforts. To improve performance it\'s not enough to examine the durations and statistics, usage and overall effect can make a lot of difference.' @@ -107,7 +112,7 @@ export const InsightCard = (props: InsightCardProps) => { )} {insightTypeCardInfo.name} - {insightTypeCardInfo.description} + {insightTypeCardInfo.description} {/* {!props.isDisabled && ( <> diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts similarity index 81% rename from src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts rename to src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts index f910cea8b..a9f24723f 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts @@ -1,14 +1,14 @@ import styled from "styled-components"; -import { Link as CommonLink } from "../../../../../common/Link"; +import { Link as CommonLink } from "../../../../common/Link"; import { ContainerProps, CountChipProps } from "./types"; export const Container = styled.div` display: flex; - padding: 8px 12px 12px; + padding: 8px 12px; flex-direction: column; align-items: flex-start; gap: 4px; - font-size: 12px; + font-size: 14px; font-weight: 500; color: ${({ theme }) => { switch (theme.mode) { @@ -19,15 +19,6 @@ export const Container = styled.div` return "#9b9b9b"; } }}; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f7f8fa"; - case "dark": - case "dark-jetbrains": - return "#1e1f22"; - } - }}; ${({ $isDisabled }) => ($isDisabled ? "opacity: 0.4;" : "")} `; @@ -50,11 +41,10 @@ export const Header = styled.div` }}; `; -export const Description = styled.span``; - export const StatusContainer = styled.div` - margin-top: 8px; - height: 18px; + padding-top: 4px; + margin-top: auto; + height: 21px; `; export const Chip = styled.div` @@ -63,7 +53,7 @@ export const Chip = styled.div` padding: 2px 8px; justify-content: center; align-items: center; - font-size: 12px; + font-size: 14px; `; export const CountChip = styled(Chip)` @@ -98,10 +88,9 @@ export const NoDataContainer = styled.div` gap: 5px; color: #9b9b9b; font-weight: 500; - font-size: 12px; + font-size: 14px; `; export const Link = styled(CommonLink)` color: inherit; - font-size: 12px; `; diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/types.ts similarity index 91% rename from src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts rename to src/components/Documentation/pages/EnvironmentTypes/InsightCard/types.ts index 2abdaf02c..a5ad9da6a 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/InsightCard/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/types.ts @@ -1,4 +1,4 @@ -import { IconProps } from "../../../../../common/icons/types"; +import { IconProps } from "../../../../common/icons/types"; export interface InsightCardProps { type: InsightCardType; diff --git a/src/components/Documentation/pages/EnvironmentTypes/data.tsx b/src/components/Documentation/pages/EnvironmentTypes/data.tsx index 7ffac928f..e2cc7a455 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/data.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/data.tsx @@ -1,16 +1,16 @@ import { CloudDownloadIcon } from "../../../common/icons/CloudDownloadIcon"; import { CodeDisplayIcon } from "../../../common/icons/CodeDisplayIcon"; import { InfiniteLoopIcon } from "../../../common/icons/InfiniteLoopIcon"; -import { InsightCardType } from "./EnvironmentTypeCard/InsightCard/types"; +import { InsightCardType } from "./InsightCard/types"; import { EnvironmentTypeData } from "./types"; export const environmentTypesData: EnvironmentTypeData[] = [ { id: "dev", icon: CodeDisplayIcon, - name: "Local and All Environments", + name: "Local Environments / Any", description: - "Download them to a relative path to the Docker Compose file you are running", + "Local environment uses observability collected from your local machine. This information can be automatically collected when your run or debug your code in the IDE or run tests.", status: "active", insights: [ { type: InsightCardType.TRACING_DATA }, @@ -24,7 +24,7 @@ export const environmentTypesData: EnvironmentTypeData[] = [ icon: InfiniteLoopIcon, name: "CI/Testing Environment", description: - "Download them to a relative path to the Docker Compose file you are running", + "Collect information from your CI build to monitor releases over time.", status: "active", insights: [ { type: InsightCardType.SCALING_ISSUES_CI }, @@ -36,9 +36,9 @@ export const environmentTypesData: EnvironmentTypeData[] = [ { id: "production", icon: CloudDownloadIcon, - name: "Production", + name: "Production Environment", description: - "Download them to a relative path to the Docker Compose file you are running", + "Digma can ingest data from your production to provide real world data about your code and issues currently in the wild.", status: "active", insights: [ { type: InsightCardType.PERFORMANCE_IMPACT }, diff --git a/src/components/Documentation/pages/EnvironmentTypes/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/index.tsx index 0151a85b8..1a3a54e4e 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/index.tsx +++ b/src/components/Documentation/pages/EnvironmentTypes/index.tsx @@ -1,8 +1,52 @@ import { DigmaLogoIcon } from "../../../common/icons/DigmaLogoIcon"; import { EnvironmentTypeCard } from "./EnvironmentTypeCard"; +import { InsightCard } from "./InsightCard"; import { environmentTypesData } from "./data"; import * as s from "./styles"; +const renderEnvironmentsTable = () => { + const rowsCount = Math.max( + ...environmentTypesData.map((x) => x.insights.length) + ); + const rowsArray = new Array(rowsCount).fill(0); + + return ( + + + {environmentTypesData.map((x) => ( + + + + ))} + + {rowsArray.map((_, i) => ( + + {environmentTypesData.map((x) => { + const insight = x.insights[i]; + return ( + + {insight && ( + + )} + + ); + })} + + ))} + + ); +}; + export const EnvironmentTypes = () => { const columnCount = environmentTypesData.length; @@ -11,26 +55,16 @@ export const EnvironmentTypes = () => { - Feature rich Observability across the SDLC + Digma Insight Overview - These are simple steps to help you collect observability data from - your application running via Docker compose without changing the - original docker-compose.yml file. + The following lists describes some Digma's capabilities in + analyzing observability for multiple environment types, from local dev + and test through CI to real world production environment. - {environmentTypesData.map((x) => ( - - - - ))} + {renderEnvironmentsTable()} ); diff --git a/src/components/Documentation/pages/EnvironmentTypes/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/styles.ts index ac43abe8d..8a03c87b6 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/styles.ts @@ -77,12 +77,31 @@ export const Title = styled.div` export const EnvironmentsContainer = styled.div` position: relative; padding: ${ENVIRONMENT_TYPES_OFFSET}px ${COLUMN_PADDING}px ${COLUMN_PADDING}px; +`; + +export const Table = styled.div` + display: flex; + flex-direction: column; + flex-grow: 1; +`; + +export const TableRow = styled.div` display: flex; - width: 100%; - box-sizing: border-box; gap: 8px; + flex-grow: 1; `; -export const EnvironmentTypeContainer = styled.div` - min-width: ${COLUMN_MIN_WIDTH}px; +export const TableCell = styled.div` + display: flex; + flex: 1 1 0; + padding-bottom: 12px; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + case "dark-jetbrains": + return "#1e1f22"; + } + }}; `; diff --git a/src/components/Documentation/pages/EnvironmentTypes/types.ts b/src/components/Documentation/pages/EnvironmentTypes/types.ts index 431151873..8d4d8d2ec 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/types.ts @@ -1,6 +1,6 @@ import { ThemeableIconProps } from "../../../common/icons/types"; -import { InsightCardType } from "./EnvironmentTypeCard/InsightCard/types"; import { EnvironmentStatus } from "./EnvironmentTypeCard/types"; +import { InsightCardType } from "./InsightCard/types"; export interface EnvironmentTypeData { id: string; diff --git a/src/components/common/icons/OpenTelemetryLogoSmallIcon.tsx b/src/components/common/icons/OpenTelemetryLogoSmallIcon.tsx new file mode 100644 index 000000000..8b81c401c --- /dev/null +++ b/src/components/common/icons/OpenTelemetryLogoSmallIcon.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { useIconProps } from "./hooks"; +import { IconProps } from "./types"; + +const OpenTelemetryLogoSmallIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + return ( + + + + + + + + + + + + + + ); +}; + +export const OpenTelemetryLogoSmallIcon = React.memo( + OpenTelemetryLogoSmallIconComponent +);