diff --git a/.vscode/extensions.json b/.vscode/extensions.json index ee30228db..3cdaf55b0 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -4,6 +4,7 @@ "davidanson.vscode-markdownlint", "esbenp.prettier-vscode", "stylelint.vscode-stylelint", - "styled-components.vscode-styled-components" + "styled-components.vscode-styled-components", + "streetsidesoftware.code-spell-checker" ] } diff --git a/src/components/RecentActivity/RecentActivityTable/index.tsx b/src/components/RecentActivity/RecentActivityTable/index.tsx index 08c40d9ec..83e07b39f 100644 --- a/src/components/RecentActivity/RecentActivityTable/index.tsx +++ b/src/components/RecentActivity/RecentActivityTable/index.tsx @@ -4,7 +4,6 @@ import { getCoreRowModel, useReactTable } from "@tanstack/react-table"; -import { useEffect, useState } from "react"; import { DefaultTheme, useTheme } from "styled-components"; import { timeAgo } from "../../../utils/timeAgo"; import { Badge } from "../../common/Badge"; @@ -15,26 +14,13 @@ import { MeterHighIcon } from "../../common/icons/MeterHighIcon"; import { ScalesIcon } from "../../common/icons/ScalesIcon"; import { SnailIcon } from "../../common/icons/SnailIcon"; import { SpotIcon } from "../../common/icons/SpotIcon"; +import { SQLDatabaseIcon } from "../../common/icons/SQLDatabaseIcon"; import { ViewMode } from "../EnvironmentPanel/types"; import { ActivityEntry, Duration, EntrySpan, SlimInsight } from "../types"; import { SpanLink } from "./SpanLink"; import * as s from "./styles"; import { INSIGHT_TYPES, RecentActivityTableProps } from "./types"; -const insightTypesWithoutIcons = ["EndpointSpaNPlusOne", "SpaNPlusOne"]; - -const filterData = (data: ActivityEntry[]): ActivityEntry[] => - data.map((entry) => { - const filteredInsights = entry.slimAggregatedInsights.filter( - (x) => !insightTypesWithoutIcons.includes(x.type) - ); - - return { - ...entry, - slimAggregatedInsights: filteredInsights - }; - }); - const getInsightInfo = ( type: string, theme: DefaultTheme @@ -62,11 +48,11 @@ const getInsightInfo = ( label: "Span Bottleneck" }, [INSIGHT_TYPES.EndpointSpaNPlusOne]: { - icon: <>N/A, + icon: , label: "Suspected N-Plus-1" }, [INSIGHT_TYPES.SpaNPlusOne]: { - icon: <>N/A, + icon: , label: "Suspected N-Plus-1" }, [INSIGHT_TYPES.SpanEndpointBottleneck]: { @@ -103,12 +89,6 @@ export const isRecent = (entry: ActivityEntry): boolean => { export const RecentActivityTable = (props: RecentActivityTableProps) => { const theme = useTheme(); - const [data, setData] = useState(filterData(props.data)); - - useEffect(() => { - setData(filterData(props.data)); - }, [props.data]); - const handleSpanLinkClick = (span: EntrySpan) => { props.onSpanLinkClick(span); }; @@ -226,7 +206,7 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => { ]; const table = useReactTable({ - data, + data: props.data, columns, getCoreRowModel: getCoreRowModel() }); @@ -265,7 +245,7 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => { Recent Activity - {data.map((entry, i) => ( + {props.data.map((entry, i) => ( {isRecent(entry) && ( diff --git a/src/components/common/icons/ChevronIcon.tsx b/src/components/common/icons/ChevronIcon.tsx index 8ac580f75..d837fb844 100644 --- a/src/components/common/icons/ChevronIcon.tsx +++ b/src/components/common/icons/ChevronIcon.tsx @@ -4,9 +4,9 @@ import { DIRECTION, RotatableIconProps } from "./types"; const directionRotateMap: { [key in DIRECTION]: string } = { [DIRECTION.DOWN]: "0", - [DIRECTION.RIGHT]: "90", + [DIRECTION.LEFT]: "90", [DIRECTION.UP]: "180", - [DIRECTION.LEFT]: "270" + [DIRECTION.RIGHT]: "270" }; const ChevronIconComponent = (props: RotatableIconProps) => { diff --git a/src/components/common/icons/DigmaLogoFlatIcon.tsx b/src/components/common/icons/DigmaLogoFlatIcon.tsx index 1ca4b5e77..d77513c96 100644 --- a/src/components/common/icons/DigmaLogoFlatIcon.tsx +++ b/src/components/common/icons/DigmaLogoFlatIcon.tsx @@ -11,7 +11,7 @@ const DigmaLogoFlatIconComponent = (props: IconProps) => { width={size} height={size} fill="none" - viewBox="0 0 22 23" + viewBox="0 0 22 25" > @@ -19,7 +19,7 @@ const DigmaLogoFlatIconComponent = (props: IconProps) => { ); diff --git a/src/components/common/icons/SQLDatabaseIcon.tsx b/src/components/common/icons/SQLDatabaseIcon.tsx new file mode 100644 index 000000000..16e10dd6b --- /dev/null +++ b/src/components/common/icons/SQLDatabaseIcon.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { useIconProps } from "./hooks"; +import { IconProps } from "./types"; + +const SQLDatabaseIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + ); +}; + +export const SQLDatabaseIcon = React.memo(SQLDatabaseIconComponent);