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);