app-ui

Install react-use-websocket rss
created pr with 46.1 on 2025-02-06T15:20:57Z · by c8ef7d19
cmds
checkout latest patchset: 
ssh pr.pico.sh print 46 | git am -3
checkout any patchset in a patch request: 
ssh pr.pico.sh print 46.[rev] | git am -3
add changes to patch request: 
git format-patch main --stdout | ssh pr.pico.sh pr add 46

Patchset 46.1 on 2025-02-06T15:20:57Z · commit e610bf9

Install react-use-websocket
Eric Abruzzese 2025-01-15T14:28:15Z
 Update the diagnostics create form to navigate to the details page with query parameters instead of POSTing to the external service
Eric Abruzzese 2025-01-15T14:29:34Z
 Collect events on the diagnostic details page and construct a dashboard state
Eric Abruzzese 2025-01-15T14:30:03Z
 → Formatting and cleanup
Eric Abruzzese 2025-01-15T14:34:02Z
 Show dashboard messages, resources, operations, and plots
Michael Peterson 2025-01-28T20:23:45Z
 Support async plot annotations
Eric Abruzzese 2025-01-31T17:53:30Z
 Fix an issue that would cause a page crash if datasets weren't perfectly aligned
Eric Abruzzese 2025-02-03T20:19:05Z
 Add VITE_APTIBLE_AI_URL to .env.example
Eric Abruzzese 2025-02-04T16:30:13Z
 Update VITE_APTIBLE_AI_URL references to point to Hotshot
Eric Abruzzese 2025-02-05T17:50:02Z
 Update the analysis using PlotAnnotated events
Eric Abruzzese 2025-02-05T17:51:11Z
 Install react-use-websocket
Eric Abruzzese 2025-01-15T14:28:15Z
 Update the diagnostics create form to navigate to the details page with query parameters instead of POSTing to the external service
Eric Abruzzese 2025-01-15T14:29:34Z
 Collect events on the diagnostic details page and construct a dashboard state
Eric Abruzzese 2025-01-15T14:30:03Z
 Formatting and cleanup
Eric Abruzzese 2025-01-15T14:34:02Z
 Show dashboard messages, resources, operations, and plots
Michael Peterson 2025-01-28T20:23:45Z
 Support async plot annotations
Eric Abruzzese 2025-01-31T17:53:30Z
 Fix an issue that would cause a page crash if datasets weren't perfectly aligned
Eric Abruzzese 2025-02-03T20:19:05Z
 Add VITE_APTIBLE_AI_URL to .env.example
Eric Abruzzese 2025-02-04T16:30:13Z
 Update VITE_APTIBLE_AI_URL references to point to Hotshot
Eric Abruzzese 2025-02-05T17:50:02Z
 Update the analysis using PlotAnnotated events
Eric Abruzzese 2025-02-05T17:51:11Z
 Refactor charts
Michael Peterson 2025-02-05T18:25:59Z
 Refactor OperationsTimeline, chart hover state
Michael Peterson 2025-02-05T18:42:20Z
 Extract types into aptible-ai/index, useDashboard hook
Michael Peterson 2025-02-05T19:21:56Z
 Fix a linter error
Eric Abruzzese 2025-02-05T19:40:48Z
 Fix linter errors
Eric Abruzzese 2025-02-05T19:50:07Z
+7 -1 src/routes/index.ts #
......@@ -409,7 +409,13 @@ export const diagnosticsUrl = () => DIAGNOSTICS_URL;
409409 export const DIAGNOSTICS_CREATE_URL = "/diagnostics/create";
410410 export const diagnosticsCreateUrl = () => DIAGNOSTICS_CREATE_URL;
411411 export const DIAGNOSTICS_DETAIL_URL = "/diagnostics/detail";
412-export const diagnosticsDetailUrl = (appId: string, symptoms: string, start: Date, end: Date) => `/diagnostics/detail?app_id=${appId}&symptom_description=${symptoms}&start_time=${start.toISOString()}&end_time=${end.toISOString()}`;
412+export const diagnosticsDetailUrl = (
413+ appId: string,
414+ symptoms: string,
415+ start: Date,
416+ end: Date,
417+) =>
418+ `/diagnostics/detail?appId=${appId}&symptomDescription=${symptoms}&startTime=${start.toISOString()}&endTime=${end.toISOString()}`;
413419
414420 export const SOURCES_PATH = "/sources";
415421 export const sourcesUrl = () => SOURCES_PATH;
+5 -5 src/ui/pages/diagnostics-create.tsx #
......@@ -38,7 +38,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
3838 // invalid.
3939 const now = useMemo(
4040 () => DateTime.now().minus({ minutes: DateTime.local().offset }),
41- []
41+ [],
4242 );
4343
4444 const timePresets = [
......@@ -55,7 +55,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
5555 const [timePreset, setTimePreset] = useState(timePresets[2].value);
5656
5757 const [startDate, setStartDate] = useState<DateTime>(
58- DateTime.fromISO(timePreset)
58+ DateTime.fromISO(timePreset),
5959 );
6060 const onSelectStartDate = (date: Date) => {
6161 const dateTime = DateTime.fromJSDate(date);
......@@ -95,7 +95,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
9595 startDate !== null &&
9696 endDate !== null &&
9797 startDate < endDate,
98- [symptoms, appId, startDate, endDate]
98+ [symptoms, appId, startDate, endDate],
9999 );
100100
101101 // Submit the form.
......@@ -109,8 +109,8 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
109109 appId,
110110 symptoms,
111111 startDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
112- endDate.toUTC(0, { keepLocalTime: true }).toJSDate()
113- )
112+ endDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
113+ ),
114114 );
115115 setIsLoading(false);
116116 };
+19 -19 src/ui/pages/diagnostics-detail.tsx #
......@@ -3,10 +3,10 @@ import { useSelector } from "@app/react";
33 import { diagnosticsCreateUrl } from "@app/routes";
44 import { selectAccessToken } from "@app/token";
55 import { useEffect, useState } from "react";
6-import { Link, useSearchParams } from "react-router-dom";
6+import { Link, useParams, useSearchParams } from "react-router-dom";
7+import useWebSocket, { ReadyState } from "react-use-websocket";
78 import { AppSidebarLayout } from "../layouts";
89 import { Breadcrumbs, PreText } from "../shared";
9-import useWebSocket, { ReadyState } from "react-use-websocket";
1010
1111 type Message = {
1212 id: string;
......@@ -17,13 +17,13 @@ type Message = {
1717 type Operation = {
1818 id: number;
1919 status: string;
20- created_at: Date;
20+ created_at: string;
2121 description: string;
2222 log_lines: string[];
2323 };
2424
2525 type Point = {
26- timestamp: Date;
26+ timestamp: string;
2727 value: number;
2828 };
2929
......@@ -72,31 +72,27 @@ type Dashboard = {
7272 messages: Message[];
7373 };
7474
75-
7675 export const DiagnosticsDetailPage = () => {
7776 // Parse the investigation parameters from the query string.
7877 const [searchParams, setSearchParams] = useSearchParams();
7978 const accessToken = useSelector(selectAccessToken);
80- const appId = searchParams.get("app_id");
81- const symptomDescription = searchParams.get("symptom_description");
82- const startTime = searchParams.get("start_time");
83- const endTime = searchParams.get("end_time");
79+ const appId = searchParams.get("appId");
80+ const symptomDescription = searchParams.get("symptomDescription");
81+ const startTime = searchParams.get("startTime");
82+ const endTime = searchParams.get("endTime");
8483
8584 // If any of the parameters are missing, display an error message with a link
8685 // to the diagnostics create page.
8786 if (!appId || !symptomDescription || !startTime || !endTime) {
88- return (
89- <div>
90- <p>Error: Missing parameters</p>
91- <Link to={diagnosticsCreateUrl()}>Go back to diagnostics page</Link>
92- </div>
93- );
87+ throw new Error("Missing parameters");
9488 }
9589
9690 // Connect to the Aptible AI WebSocket.
9791 const aptibleAiUrl = useSelector(selectAptibleAiUrl);
9892 const [socketConnected, setSocketConnected] = useState(true);
99- const { lastJsonMessage: event, readyState } = useWebSocket<Record<string, any>>(
93+ const { lastJsonMessage: event, readyState } = useWebSocket<
94+ Record<string, any>
95+ >(
10096 `${aptibleAiUrl}/troubleshoot`,
10197 {
10298 queryParams: {
......@@ -105,9 +101,9 @@ export const DiagnosticsDetailPage = () => {
105101 symptom_description: symptomDescription,
106102 start_time: startTime,
107103 end_time: endTime,
108- }
104+ },
109105 },
110- socketConnected
106+ socketConnected,
111107 );
112108
113109 // If the socket is closed, set the socketConnected state to false (this is
......@@ -204,7 +200,11 @@ export const DiagnosticsDetailPage = () => {
204200 />
205201
206202 <div className="flex flex-row items-center justify-center flex-1 min-h-[500px]">
207- <PreText className="max-w-7xl overflow-x-auto overflow-y-auto" text={JSON.stringify(dashboard, null, 2)} allowCopy />
203+ <PreText
204+ className="max-w-7xl overflow-x-auto overflow-y-auto"
205+ text={JSON.stringify(dashboard, null, 2)}
206+ allowCopy
207+ />
208208 </div>
209209 </AppSidebarLayout>
210210 );
Back to top