app-ui

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 d7c4435

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

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

Semantic diff summary

0 added, 6 modified, 0 signature changed, 0 removed across 2 analyzed files

src/routes/index.ts

chunk lines 408-415 modified

src/ui/pages/diagnostics-create.tsx

chunk lines 6-11 modified
chunk lines 20-28 modified
chunk lines 38-44 modified
chunk lines 55-61 modified
chunk lines 95-120 modified

+2 -2 src/routes/index.ts #

......@@ -408,8 +408,8 @@ export const DIAGNOSTICS_URL = "/diagnostics";
export const diagnosticsUrl = () => DIAGNOSTICS_URL;
export const DIAGNOSTICS_CREATE_URL = "/diagnostics/create";
export const diagnosticsCreateUrl = () => DIAGNOSTICS_CREATE_URL;
export const DIAGNOSTICS_DETAIL_URL = "/diagnostics/:id";
export const diagnosticsDetailUrl = (id: string) => `/diagnostics/${id}`;
export const DIAGNOSTICS_DETAIL_URL = "/diagnostics/detail";
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()}`;

export const SOURCES_PATH = "/sources";
export const sourcesUrl = () => SOURCES_PATH;

+15 -27 src/ui/pages/diagnostics-create.tsx #

......@@ -6,7 +6,6 @@ import {
import { DateTime } from "luxon";
import { useEffect, useMemo, useState } from "react";
import DatePicker from "react-datepicker";
import { useDispatch, useLoader, useSelector } from "starfx/react";
import { AppSidebarLayout } from "../layouts";
import {
  Banner,

......@@ -21,13 +20,9 @@ import {
import { AppSelect } from "../shared/select-apps";

import "react-datepicker/dist/react-datepicker.css";
import { createDashboard } from "@app/aptible-ai";
import { type WebState, schema } from "@app/schema";
import { useNavigate } from "react-router-dom";

export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
  const dispatch = useDispatch();

  const symptomOptions = [
    { label: "App is slow", value: "App is slow" },
    { label: "App is unavailable", value: "App is unavailable" },

......@@ -43,7 +38,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
  // invalid.
  const now = useMemo(
    () => DateTime.now().minus({ minutes: DateTime.local().offset }),
    [],
    []
  );

  const timePresets = [

......@@ -60,7 +55,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
  const [timePreset, setTimePreset] = useState(timePresets[2].value);

  const [startDate, setStartDate] = useState<DateTime>(
    DateTime.fromISO(timePreset),
    DateTime.fromISO(timePreset)
  );
  const onSelectStartDate = (date: Date) => {
    const dateTime = DateTime.fromJSDate(date);

......@@ -100,33 +95,26 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
      startDate !== null &&
      endDate !== null &&
      startDate < endDate,
    [symptoms, appId, startDate, endDate],
    [symptoms, appId, startDate, endDate]
  );

  // Submit the form.
  const submitAction = createDashboard({
    symptoms: symptoms,
    appId,
    start: startDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
    end: endDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
  });
  const dashboardData = useSelector((s: WebState) =>
    schema.cache.selectById(s, { id: submitAction.payload.key }),
  );
  const { isLoading } = useLoader(submitAction);
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    dispatch(submitAction);
    setIsLoading(true);
    navigate(
      diagnosticsDetailUrl(
        appId,
        symptoms,
        startDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
        endDate.toUTC(0, { keepLocalTime: true }).toJSDate()
      )
    );
    setIsLoading(false);
  };

  // Navigate to the dashboard when it is created.
  const navigate = useNavigate();
  useEffect(() => {
    if (dashboardData?.id) {
      navigate(diagnosticsDetailUrl(dashboardData.id));
    }
  }, [dashboardData]);

  return (
    <>
      <form onSubmit={handleSubmit}>

...	...		@@ -100,33 +95,26 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
100	95		startDate !== null &&
101	96		endDate !== null &&
102	97		startDate < endDate,
103		-	[symptoms, appId, startDate, endDate],
	98	+	[symptoms, appId, startDate, endDate]
104	99		);
105	100
106	101		// Submit the form.
107		-	const submitAction = createDashboard({
108		-	symptoms: symptoms,
109		-	appId,
110		-	start: startDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
111		-	end: endDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
112		-	});
113		-	const dashboardData = useSelector((s: WebState) =>
114		-	schema.cache.selectById(s, { id: submitAction.payload.key }),
115		-	);
116		-	const { isLoading } = useLoader(submitAction);
	102	+	const [isLoading, setIsLoading] = useState(false);
	103	+	const navigate = useNavigate();
117	104		const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
118	105		e.preventDefault();
119		-	dispatch(submitAction);
	106	+	setIsLoading(true);
	107	+	navigate(
	108	+	diagnosticsDetailUrl(
	109	+	appId,
	110	+	symptoms,
	111	+	startDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
	112	+	endDate.toUTC(0, { keepLocalTime: true }).toJSDate()
	113	+	)
	114	+	);
	115	+	setIsLoading(false);
120	116		};
121	117
122		-	// Navigate to the dashboard when it is created.
123		-	const navigate = useNavigate();
124		-	useEffect(() => {
125		-	if (dashboardData?.id) {
126		-	navigate(diagnosticsDetailUrl(dashboardData.id));
127		-	}
128		-	}, [dashboardData]);
129		-
130	118		return (
131	119		<>
132	120		<form onSubmit={handleSubmit}>

...	...		@@ -408,8 +408,8 @@ export const DIAGNOSTICS_URL = "/diagnostics";
408	408		export const diagnosticsUrl = () => DIAGNOSTICS_URL;
409	409		export const DIAGNOSTICS_CREATE_URL = "/diagnostics/create";
410	410		export const diagnosticsCreateUrl = () => DIAGNOSTICS_CREATE_URL;
411		-	export const DIAGNOSTICS_DETAIL_URL = "/diagnostics/:id";
412		-	export const diagnosticsDetailUrl = (id: string) => `/diagnostics/${id}`;
	411	+	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()}`;
413	413
414	414		export const SOURCES_PATH = "/sources";
415	415		export const sourcesUrl = () => SOURCES_PATH;

...	...		@@ -6,7 +6,6 @@ import {
6	6		import { DateTime } from "luxon";
7	7		import { useEffect, useMemo, useState } from "react";
8	8		import DatePicker from "react-datepicker";
9		-	import { useDispatch, useLoader, useSelector } from "starfx/react";
10	9		import { AppSidebarLayout } from "../layouts";
11	10		import {
12	11		Banner,

...	...		@@ -21,13 +20,9 @@ import {
21	20		import { AppSelect } from "../shared/select-apps";
22	21
23	22		import "react-datepicker/dist/react-datepicker.css";
24		-	import { createDashboard } from "@app/aptible-ai";
25		-	import { type WebState, schema } from "@app/schema";
26	23		import { useNavigate } from "react-router-dom";
27	24
28	25		export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
29		-	const dispatch = useDispatch();
30		-
31	26		const symptomOptions = [
32	27		{ label: "App is slow", value: "App is slow" },
33	28		{ label: "App is unavailable", value: "App is unavailable" },

...	...		@@ -43,7 +38,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
43	38		// invalid.
44	39		const now = useMemo(
45	40		() => DateTime.now().minus({ minutes: DateTime.local().offset }),
46		-	[],
	41	+	[]
47	42		);
48	43
49	44		const timePresets = [

...	...		@@ -60,7 +55,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
60	55		const [timePreset, setTimePreset] = useState(timePresets[2].value);
61	56
62	57		const [startDate, setStartDate] = useState<DateTime>(
63		-	DateTime.fromISO(timePreset),
	58	+	DateTime.fromISO(timePreset)
64	59		);
65	60		const onSelectStartDate = (date: Date) => {
66	61		const dateTime = DateTime.fromJSDate(date);

app-ui

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

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