Skip to content

Commit be31981

Browse files
committed
limit the number of items displayed on one page
1 parent fb5820a commit be31981

File tree

5 files changed

+122
-69
lines changed

5 files changed

+122
-69
lines changed

package-lock.json

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
},
4646
"devDependencies": {
4747
"@eslint/js": "^9.15.0",
48+
"@faker-js/faker": "^9.4.0",
4849
"@hey-api/openapi-ts": "^0.61.2",
4950
"@tailwindcss/typography": "^0.5.16",
5051
"@testing-library/jest-dom": "^6.6.3",

src/components/AlertsTable.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ export function AlertsTable() {
7373
const [searchParams, setSearchParams] = useSearchParams();
7474
const { data: filteredAlerts = [] } = useFilteredAlerts();
7575

76+
console.log();
77+
7678
const handleToggleFilter = useCallback(
7779
(isChecked: boolean) => {
7880
if (isChecked) {

src/components/__tests__/Dashboard.test.tsx

Lines changed: 97 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import { render } from "@/lib/test-utils";
22
import { screen, waitFor, within } from "@testing-library/react";
33
import { describe, expect, it, vi } from "vitest";
44
import { Dashboard } from "../Dashboard";
5+
import { faker } from "@faker-js/faker";
56
import React from "react";
67
import { server } from "@/mocks/msw/node";
78
import { HttpResponse, http } from "msw";
9+
import mockedAlerts from "@/mocks/msw/fixtures/GET_ALERTS.json";
810
import userEvent from "@testing-library/user-event";
911

1012
vi.mock("recharts", async (importOriginal) => {
@@ -17,77 +19,93 @@ vi.mock("recharts", async (importOriginal) => {
1719
};
1820
});
1921

20-
function mockAlertsWithMaliciousPkg() {
21-
server.use(
22-
http.get("*/dashboard/alerts", () => {
23-
return HttpResponse.json([
24-
{
25-
conversation: {
26-
question_answers: [
27-
{
28-
question: {
29-
message:
30-
"\n\n```tsx src/App.tsx (23-29)\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = \"REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>\";\n const breadcrumb = useBreadcrumb();\n\n\n```\nPlease explain the cause of this error and how to solve it: 'test' is declared but its value is never read.",
31-
timestamp: "2025-01-02T13:42:48.617799Z",
32-
message_id: "c8a6afd1-98d7-43c4-97ff-7b183b8f6a5f",
33-
},
34-
answer: {
35-
message:
36-
'The error message "\'test\' is declared but its value is never read" indicates that the variable `test` is defined in your code, but it is never used anywhere. This can lead to confusion for other developers reading the code and might indicate that the intended functionality has not been implemented.\n\n### Cause of the Error\n\n1. **Unused Variable**: The variable `test` is declared but not used in the rest of the code within the `App` component. This can be a result of incomplete implementation or a placeholder that was meant to be used later but was forgotten.\n\n### How to Solve It\n\nYou have a few options to resolve this issue:\n\n1. **Remove the Unused Variable**:\n - If the variable is not needed, you can safely remove it to clean up the code and eliminate the warning.\n\n ```tsx\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n fetchPrompts();\n }, [fetchPrompts]);\n ```\n\n2. **Use the Variable**:\n - If the variable is intended to be used, ensure that it is utilized somewhere in the component. For example, you could log it for debugging purposes or use it in some part of the application logic.\n\n ```tsx\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = "REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>";\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n console.log(test); // Example usage\n fetchPrompts();\n }, [fetchPrompts]);\n ```\n\n3. **Suppress the Warning (Not Recommended)**:\n - If you are sure that the variable is intentionally unused and do not want to remove it, you can suppress the warning. However, this is generally not recommended as it can lead to oversight of real issues.\n\n ```tsx\n // @ts-ignore\n const test = "REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>";\n const breadcrumb = useBreadcrumb();\n ```\n\n### Best Practices\n\n- **Keep Code Clean**: Regularly clean up unused variables to maintain a clean and understandable codebase.\n- **Use Linters**: Utilize tools like ESLint to automatically detect and flag unused variables, helping you maintain code quality.\n\nBy addressing this issue, you can improve the maintainability and readability of your code.',
37-
timestamp: "2025-01-02T13:42:49.361714Z",
38-
message_id: "a542408b-d0bc-4f6f-8b71-64c93c1e388a",
39-
},
40-
},
41-
],
42-
provider: "vllm",
43-
type: "chat",
44-
chat_id: "chatcmpl-7d87679de7ed41639eb91d8ebbaa6f72",
45-
conversation_timestamp: "2025-01-02T13:42:48.617799Z",
46-
},
47-
alert_id: "c8a6afd1-98d7-43c4-97ff-7b183b8f6a5f",
48-
code_snippet: null,
49-
trigger_string:
50-
'GitHub - Access Token:\n useSse();\n\n const test = "ghp_token";\n const breadcrumb = useBreadcrumb();\n\n',
51-
trigger_type: "codegate-secrets",
52-
trigger_category: "critical",
22+
const fakeConversionation1 = {
23+
conversation: {
24+
question_answers: [
25+
{
26+
question: {
27+
message:
28+
"\n\n```tsx src/App.tsx (23-29)\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = \"REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>\";\n const breadcrumb = useBreadcrumb();\n\n\n```\nPlease explain the cause of this error and how to solve it: 'test' is declared but its value is never read.",
5329
timestamp: "2025-01-02T13:42:48.617799Z",
30+
message_id: "c8a6afd1-98d7-43c4-97ff-7b183b8f6a5f",
5431
},
55-
{
56-
conversation: {
57-
question_answers: [
58-
{
59-
question: {
60-
message:
61-
'\n\n```py testing_file.py (1-15)\nimport invokehttp\nimport fastapi\nfrom fastapi import FastAPI, Request, Response, HTTPException\nimport numpy\n\n\[email protected]("/providers", methods=["GET"])\ndef get_providers():\n return jsonify([provider.to_dict() for provider in registry.providers])\n\nGITHUB_TOKEN="ghp_token"\n\nif __name__ == "__main__":\n app.run()\n\n```\nare there malicious?',
62-
timestamp: "2024-12-09T17:50:04.418017Z",
63-
message_id: "fa53ba0d-4fb0-4770-a563-88e504af621f",
64-
},
65-
answer: {
66-
message:
67-
'Warning: CodeGate detected one or more potentially malicious or archived packages.\n- Pkg 1: [trustypkg.dev/pypi/invokehttp](https://www.trustypkg.dev/pypi/invokehttp)\n\nYes, there is a security concern in your code. The `invokehttp` package is known to be malicious and should not be used in your project. Here\'s how to make your code more secure:\n\n1. Remove the malicious package and replace it with safe alternatives:\n - Instead of `invokehttp`, you can use well-maintained packages like `requests` or `httpx` for HTTP requests\n \nHere\'s the corrected version:\n\n```python testing_file.py\nimport requests # or httpx\nimport fastapi\nfrom fastapi import FastAPI, Request, Response, HTTPException\nimport numpy\n\n\[email protected]("/providers", methods=["GET"])\ndef get_providers():\n return jsonify([provider.to_dict() for provider in registry.providers])\n\nGITHUB_TOKEN="REDACTED<$SoFD847FAe6yVl6NWtk/p5+X8sQW5eU2NO0gHwbcCH4JtuEeS3Mi1IZ0BTM3oU4028c7+Vn9kkCvHQQvp8YnevjxIbZftv0xtK1iH7BgRqrAFTyh1A==>"\n\nif __name__ == "__main__":\n app.run()\n```\n\nAdditional security recommendations:\n1. Make sure to manage your dependencies using a requirements.txt or Pipfile\n2. Regularly update your dependencies to get security patches\n3. Consider using a virtual environment for your project\n4. Use package security scanning tools like `safety` or `bandit` to check for known vulnerabilities in your dependencies',
68-
timestamp: "2024-12-09T17:50:20.846946Z",
69-
message_id: "91b84560-2d36-4aab-807a-c6f4612dd5fd",
70-
},
71-
},
72-
],
73-
provider: "anthropic",
74-
type: "chat",
75-
chat_id: "chatcmpl-0f3c7eb8-4306-452b-a415-b2de8867e734",
76-
conversation_timestamp: "2024-12-09T17:50:04.418017Z",
77-
},
78-
alert_id: "fa53ba0d-4fb0-4770-a563-88e504af621f",
79-
code_snippet: null,
80-
trigger_string: {
81-
name: "invokehttp",
82-
type: "pypi",
83-
status: "malicious",
84-
description: "Python HTTP for Humans.",
85-
},
86-
trigger_type: "codegate-context-retriever",
87-
trigger_category: "critical",
32+
answer: {
33+
message:
34+
'The error message "\'test\' is declared but its value is never read" indicates that the variable `test` is defined in your code, but it is never used anywhere. This can lead to confusion for other developers reading the code and might indicate that the intended functionality has not been implemented.\n\n### Cause of the Error\n\n1. **Unused Variable**: The variable `test` is declared but not used in the rest of the code within the `App` component. This can be a result of incomplete implementation or a placeholder that was meant to be used later but was forgotten.\n\n### How to Solve It\n\nYou have a few options to resolve this issue:\n\n1. **Remove the Unused Variable**:\n - If the variable is not needed, you can safely remove it to clean up the code and eliminate the warning.\n\n ```tsx\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n fetchPrompts();\n }, [fetchPrompts]);\n ```\n\n2. **Use the Variable**:\n - If the variable is intended to be used, ensure that it is utilized somewhere in the component. For example, you could log it for debugging purposes or use it in some part of the application logic.\n\n ```tsx\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = "REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>";\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n console.log(test); // Example usage\n fetchPrompts();\n }, [fetchPrompts]);\n ```\n\n3. **Suppress the Warning (Not Recommended)**:\n - If you are sure that the variable is intentionally unused and do not want to remove it, you can suppress the warning. However, this is generally not recommended as it can lead to oversight of real issues.\n\n ```tsx\n // @ts-ignore\n const test = "REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>";\n const breadcrumb = useBreadcrumb();\n ```\n\n### Best Practices\n\n- **Keep Code Clean**: Regularly clean up unused variables to maintain a clean and understandable codebase.\n- **Use Linters**: Utilize tools like ESLint to automatically detect and flag unused variables, helping you maintain code quality.\n\nBy addressing this issue, you can improve the maintainability and readability of your code.',
35+
timestamp: "2025-01-02T13:42:49.361714Z",
36+
message_id: "a542408b-d0bc-4f6f-8b71-64c93c1e388a",
37+
},
38+
},
39+
],
40+
provider: "vllm",
41+
type: "chat",
42+
chat_id: "chatcmpl-7d87679de7ed41639eb91d8ebbaa6f72",
43+
conversation_timestamp: "2025-01-02T13:42:48.617799Z",
44+
},
45+
alert_id: "c8a6afd1-98d7-43c4-97ff-7b183b8f6a5f",
46+
code_snippet: null,
47+
trigger_string:
48+
'GitHub - Access Token:\n useSse();\n\n const test = "ghp_token";\n const breadcrumb = useBreadcrumb();\n\n',
49+
trigger_type: "codegate-secrets",
50+
trigger_category: "critical",
51+
timestamp: "2025-01-02T13:42:48.617799Z",
52+
};
53+
54+
const fakeConversionation2 = {
55+
conversation: {
56+
question_answers: [
57+
{
58+
question: {
59+
message:
60+
'\n\n```py testing_file.py (1-15)\nimport invokehttp\nimport fastapi\nfrom fastapi import FastAPI, Request, Response, HTTPException\nimport numpy\n\n\[email protected]("/providers", methods=["GET"])\ndef get_providers():\n return jsonify([provider.to_dict() for provider in registry.providers])\n\nGITHUB_TOKEN="ghp_token"\n\nif __name__ == "__main__":\n app.run()\n\n```\nare there malicious?',
8861
timestamp: "2024-12-09T17:50:04.418017Z",
62+
message_id: "fa53ba0d-4fb0-4770-a563-88e504af621f",
63+
},
64+
answer: {
65+
message:
66+
'Warning: CodeGate detected one or more potentially malicious or archived packages.\n- Pkg 1: [trustypkg.dev/pypi/invokehttp](https://www.trustypkg.dev/pypi/invokehttp)\n\nYes, there is a security concern in your code. The `invokehttp` package is known to be malicious and should not be used in your project. Here\'s how to make your code more secure:\n\n1. Remove the malicious package and replace it with safe alternatives:\n - Instead of `invokehttp`, you can use well-maintained packages like `requests` or `httpx` for HTTP requests\n \nHere\'s the corrected version:\n\n```python testing_file.py\nimport requests # or httpx\nimport fastapi\nfrom fastapi import FastAPI, Request, Response, HTTPException\nimport numpy\n\n\[email protected]("/providers", methods=["GET"])\ndef get_providers():\n return jsonify([provider.to_dict() for provider in registry.providers])\n\nGITHUB_TOKEN="REDACTED<$SoFD847FAe6yVl6NWtk/p5+X8sQW5eU2NO0gHwbcCH4JtuEeS3Mi1IZ0BTM3oU4028c7+Vn9kkCvHQQvp8YnevjxIbZftv0xtK1iH7BgRqrAFTyh1A==>"\n\nif __name__ == "__main__":\n app.run()\n```\n\nAdditional security recommendations:\n1. Make sure to manage your dependencies using a requirements.txt or Pipfile\n2. Regularly update your dependencies to get security patches\n3. Consider using a virtual environment for your project\n4. Use package security scanning tools like `safety` or `bandit` to check for known vulnerabilities in your dependencies',
67+
timestamp: "2024-12-09T17:50:20.846946Z",
68+
message_id: "91b84560-2d36-4aab-807a-c6f4612dd5fd",
8969
},
90-
]);
70+
},
71+
],
72+
provider: "anthropic",
73+
type: "chat",
74+
chat_id: "chatcmpl-0f3c7eb8-4306-452b-a415-b2de8867e734",
75+
conversation_timestamp: "2024-12-09T17:50:04.418017Z",
76+
},
77+
alert_id: "fa53ba0d-4fb0-4770-a563-88e504af621f",
78+
code_snippet: null,
79+
trigger_string: {
80+
name: "invokehttp",
81+
type: "pypi",
82+
status: "malicious",
83+
description: "Python HTTP for Humans.",
84+
},
85+
trigger_type: "codegate-context-retriever",
86+
trigger_category: "critical",
87+
timestamp: "2024-12-09T17:50:04.418017Z",
88+
};
89+
90+
function mockAlertsWithMaliciousPkg() {
91+
server.use(
92+
http.get("*/dashboard/alerts", () => {
93+
return HttpResponse.json([fakeConversionation1, fakeConversionation2]);
94+
}),
95+
);
96+
}
97+
98+
function mockManyAlerts() {
99+
server.use(
100+
http.get("*/dashboard/alerts", () => {
101+
return HttpResponse.json(
102+
[
103+
...mockedAlerts,
104+
...mockedAlerts,
105+
...mockedAlerts,
106+
...mockedAlerts,
107+
].map((alert) => ({ ...alert, alert_id: faker.string.uuid() })),
108+
);
91109
}),
92110
);
93111
}
@@ -296,4 +314,16 @@ describe("Dashboard", () => {
296314
expect(within(firstRow).getByText(/2025\/01\/14/i)).toBeVisible();
297315
expect(within(secondRow).getByText(/2025\/01\/07/i)).toBeVisible();
298316
});
317+
318+
it("only displays a limited number of items in the table", async () => {
319+
mockManyAlerts();
320+
321+
render(<Dashboard />);
322+
323+
await waitFor(() => {
324+
expect(
325+
within(screen.getByTestId("alerts-table")).getAllByRole("row"),
326+
).toHaveLength(15);
327+
});
328+
});
299329
});

src/hooks/useAlertsData.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { getAlertsDashboardAlertsGetQueryKey } from "@/api/generated/@tanstack/r
1111
const fetchAlerts = async (): Promise<AlertConversation[]> => {
1212
const { data } = await getAlertsDashboardAlertsGet();
1313

14-
return (data ?? [])
14+
const results = (data ?? [])
1515
.filter((alert): alert is AlertConversation => alert !== null)
1616
.filter((alert) => alert.trigger_category === "critical")
1717
.filter((alert) =>
@@ -23,6 +23,8 @@ const fetchAlerts = async (): Promise<AlertConversation[]> => {
2323
(a, b) =>
2424
new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
2525
);
26+
27+
return results;
2628
};
2729

2830
export const useAlertsData = ({ ...args } = {}) => {
@@ -68,7 +70,8 @@ export const useFilteredAlerts = () => {
6870
typeof alert.trigger_string === "object" &&
6971
(alert.trigger_type as TriggerType) === "codegate-context-retriever"
7072
);
71-
}),
73+
})
74+
.slice(0, 14),
7275
});
7376
};
7477

0 commit comments

Comments
 (0)