From f086b72a7e1ab380070feb36567391a7d61ef93f Mon Sep 17 00:00:00 2001 From: alex-mcgovern Date: Wed, 29 Jan 2025 13:18:23 +0000 Subject: [PATCH 1/2] feat: initial work on alerts summary cards --- package.json | 3 +- src/App.test.tsx | 13 +- src/components/ui/chart.tsx | 372 ------ .../alerts-summary-malicious-pkg.tsx | 15 + .../components/alerts-summary-secrets.tsx | 15 + .../alerts-summary-workspace-token-usage.tsx | 28 + .../alerts/components/alerts-summary.tsx | 54 + ...uery-get-workspace-alerts-malicious-pkg.ts | 9 + .../use-query-get-workspace-alerts-secrets.ts | 9 + .../hooks/use-query-get-workspace-alerts.ts | 29 + .../use-query-get-workspace-token-usage.ts | 31 + .../lib/__tests__/is-alert-malicious.test.ts | 2 +- .../alerts/lib/filter-alerts-critical.ts | 22 + .../alerts/lib/get-alert-token-usage.ts | 7 - ...{is-malicious.ts => is-alert-malicious.ts} | 0 ...=> workspace-custom-instructions.test.tsx} | 0 .../workspace/constants/monaco-theme.ts | 1089 ----------------- src/hooks/useAlertsData.ts | 5 +- src/hooks/useHelpContent.ts | 33 - src/lib/utils.ts | 2 +- src/mocks/msw/handlers.ts | 23 + src/routes/__tests__/route-dashboard.test.tsx | 100 +- src/routes/route-dashboard.tsx | 23 +- src/viz/BarChart.tsx | 82 -- src/viz/LineChart.tsx | 141 --- src/viz/PieChart.tsx | 163 --- 26 files changed, 298 insertions(+), 1972 deletions(-) delete mode 100644 src/components/ui/chart.tsx create mode 100644 src/features/alerts/components/alerts-summary-malicious-pkg.tsx create mode 100644 src/features/alerts/components/alerts-summary-secrets.tsx create mode 100644 src/features/alerts/components/alerts-summary-workspace-token-usage.tsx create mode 100644 src/features/alerts/components/alerts-summary.tsx create mode 100644 src/features/alerts/hooks/use-query-get-workspace-alerts-malicious-pkg.ts create mode 100644 src/features/alerts/hooks/use-query-get-workspace-alerts-secrets.ts create mode 100644 src/features/alerts/hooks/use-query-get-workspace-alerts.ts create mode 100644 src/features/alerts/hooks/use-query-get-workspace-token-usage.ts create mode 100644 src/features/alerts/lib/filter-alerts-critical.ts delete mode 100644 src/features/alerts/lib/get-alert-token-usage.ts rename src/features/alerts/lib/{is-malicious.ts => is-alert-malicious.ts} (100%) rename src/features/workspace/components/__tests__/{workspace-custom-instructions.tsx => workspace-custom-instructions.test.tsx} (100%) delete mode 100644 src/features/workspace/constants/monaco-theme.ts delete mode 100644 src/hooks/useHelpContent.ts delete mode 100644 src/viz/BarChart.tsx delete mode 100644 src/viz/LineChart.tsx delete mode 100644 src/viz/PieChart.tsx diff --git a/package.json b/package.json index c8b531d8..6e432618 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "generate-client": "npm run fetch-openapi-schema && npm run openapi-ts", "fetch-openapi-schema": "curl https://raw.githubusercontent.com/stacklok/codegate/refs/heads/main/api/openapi.json > src/api/openapi.json", "openapi-ts": "openapi-ts", - "knip": "knip --production", + "knip": "knip", "lint": "eslint .", "lint:fix": "eslint --fix", "prepare": "husky", @@ -40,7 +40,6 @@ "react-markdown": "^9.0.1", "react-router-dom": "^7.1.1", "react-syntax-highlighter": "^15.6.1", - "recharts": "^2.15.0", "remark-gfm": "^4.0.0", "tailwind-merge": "^2.5.5", "tailwind-variants": "^0.3.0", diff --git a/src/App.test.tsx b/src/App.test.tsx index e37b6076..c1807695 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,20 +1,9 @@ import { render } from "@/lib/test-utils"; import { screen, waitFor } from "@testing-library/react"; -import { describe, expect, it, vi } from "vitest"; +import { describe, expect, it } from "vitest"; import App from "./App"; -import React from "react"; import userEvent from "@testing-library/user-event"; -vi.mock("recharts", async (importOriginal) => { - const originalModule = (await importOriginal()) as Record; - return { - ...originalModule, - ResponsiveContainer: ({ children }: { children: React.ReactNode }) => { - return
{children}
; - }, - }; -}); - describe("App", () => { it("should render header", async () => { render(); diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx deleted file mode 100644 index 9b7f9bcf..00000000 --- a/src/components/ui/chart.tsx +++ /dev/null @@ -1,372 +0,0 @@ -import { clsx } from "clsx"; -import * as React from "react"; -import * as RechartsPrimitive from "recharts"; - -import { twMerge } from "tailwind-merge"; - -// Format: { THEME_NAME: CSS_SELECTOR } -const THEMES = { light: "", dark: ".dark" } as const; - -export type ChartConfig = { - [k in string]: { - label?: React.ReactNode; - icon?: React.ComponentType; - } & ( - | { color?: string; theme?: never } - | { color?: never; theme: Record } - ); -}; - -type ChartContextProps = { - config: ChartConfig; -}; - -const ChartContext = React.createContext(null); - -function useChart() { - const context = React.useContext(ChartContext); - - if (!context) { - throw new Error("useChart must be used within a "); - } - - return context; -} - -const ChartContainer = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> & { - config: ChartConfig; - children: React.ComponentProps< - typeof RechartsPrimitive.ResponsiveContainer - >["children"]; - } ->(({ id, className, children, config, ...props }, ref) => { - const uniqueId = React.useId(); - const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`; - - return ( - -
- - - {children} - -
-
- ); -}); -ChartContainer.displayName = "Chart"; - -const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { - const colorConfig = Object.entries(config).filter( - ([, config]) => config.theme || config.color, - ); - - if (!colorConfig.length) { - return null; - } - - return ( -