diff --git a/web-client/src/components/dialog.tsx b/web-client/src/components/dialog.tsx deleted file mode 100644 index 6ca9896b..00000000 --- a/web-client/src/components/dialog.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { AlertDialog } from "@kobalte/core"; -import { A } from "@solidjs/router"; -import { JSXElement, Show, mergeProps } from "solid-js"; - -type Props = { - title?: JSXElement; - children: JSXElement; -}; - -export function Dialog(p: Props) { - const props = mergeProps({ title: "Alert" }, p); - - return ( - - {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion*/} - - -
- -
- {props.title} -
- - {props.children} - -
- { - window.location.reload(); - }} - > - Reload route - - - Dismiss - - - Reset App - -
- -
- - - ); -} diff --git a/web-client/src/components/error-dialog.tsx b/web-client/src/components/error-dialog.tsx index 6fab283a..e703a404 100644 --- a/web-client/src/components/error-dialog.tsx +++ b/web-client/src/components/error-dialog.tsx @@ -1,69 +1,50 @@ +import { AlertDialog } from "@kobalte/core"; import { A } from "@solidjs/router"; -import * as pkg from "~/../package.json"; +import { JSXElement, Show, mergeProps } from "solid-js"; type Props = { - error: unknown; + title?: JSXElement; + children: JSXElement; }; -export function ErrorDialog(props: Props) { +export function ErrorDialog(p: Props) { + const props = mergeProps({ title: "Alert" }, p); + return ( - <> -
- -
-
-
-

- Irrecoverable Error -

-
-

Something terrible happened.

-

The log is on the way and we'll work on it!

-
-
-
-
-

System log

- 
-              {props.error?.toString() || String(props.error)}
-
-
    -
  • App version: {pkg.version}
    • -
  • Browser: {window.navigator.userAgent}
    • -
-
-
- - Reset App - - -
-
- -
- + + {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion*/} + + +
+ +
+ {props.title} +
+ + {props.children} + +
+ { + window.location.reload(); + }} + > + Reload route + + + Dismiss + + + Reset App + +
+ +
+ + ); } diff --git a/web-client/src/components/error-root.tsx b/web-client/src/components/error-root.tsx new file mode 100644 index 00000000..ba49e9c1 --- /dev/null +++ b/web-client/src/components/error-root.tsx @@ -0,0 +1,69 @@ +import { A } from "@solidjs/router"; +import * as pkg from "~/../package.json"; + +type Props = { + error: unknown; +}; + +export function ErrorRoot(props: Props) { + return ( + <> +
+ +
+
+
+

+ Irrecoverable Error +

+
+

Something terrible happened.

+

The log is on the way and we'll work on it!

+
+
+
+
+

System log

+ 
+              {props.error?.toString() || String(props.error)}
+
+
    +
  • App version: {pkg.version}
    • +
  • Browser: {window.navigator.userAgent}
    • +
+
+
+ + Reset App + + +
+
+ +
+ + ); +} diff --git a/web-client/src/components/health-status.tsx b/web-client/src/components/health-status.tsx index b0a82926..f9a0eca7 100644 --- a/web-client/src/components/health-status.tsx +++ b/web-client/src/components/health-status.tsx @@ -1,6 +1,6 @@ import { HealthCheckResponse_ServingStatus } from "~/lib/proto/health"; import { Show, createEffect, createSignal, onMount } from "solid-js"; -import { Dialog } from "./dialog"; +import { ErrorDialog } from "./error-dialog"; import { addStreamListneners, connect } from "~/lib/connection/transport"; import { reconcile } from "solid-js/store"; import { useConnection } from "~/context/connection-provider"; @@ -77,12 +77,12 @@ export function HealthStatus() { return (
- +

Streaming has stopped.

Waiting on new signal from your Tauri app.

- + {variant(monitorData.health).tooltip} diff --git a/web-client/src/components/sources/code-view.tsx b/web-client/src/components/sources/code-view.tsx index 799c00a7..c443fcf1 100644 --- a/web-client/src/components/sources/code-view.tsx +++ b/web-client/src/components/sources/code-view.tsx @@ -1,3 +1,4 @@ +import { Highlighter } from "shiki"; import { Suspense, createResource } from "solid-js"; import { Loader } from "~/components/loader"; import { useConnection } from "~/context/connection-provider"; @@ -5,10 +6,9 @@ import { HighlighterLang, createHighlighter, getHighlightedCode, + getText, } from "~/lib/code-highlight"; -import { Highlighter } from "shiki"; - type CodeViewProps = { path: string; size: number; @@ -18,36 +18,36 @@ type CodeViewProps = { export default function CodeView(props: CodeViewProps) { const { connectionStore } = useConnection(); - const [html] = createResource( - () => - [ - connectionStore.client.sources, - props.path, - props.size, - props.lang, - ] as const, - (sourceSignals) => getHighlightedCode(sourceSignals) + + const [text] = createResource( + () => [connectionStore.client.sources, props.path, props.size] as const, + async (textProps) => getText(...textProps) ); // The used highlighter does not change at all atm so it does not need to be coupled - // const [highlighter] = createResource(() => createHighlighter()); + const [highlighter] = createResource(() => createHighlighter()); - // const html = ( - // text: string | undefined, - // highlighter: Highlighter | undefined, - // lang: HighlighterLang, - // highlightedLine?: number - // ) => { - // if (!text || !highlighter) return undefined; - // return getHighlightedCode([text, highlighter, lang, highlightedLine]); - // }; + const html = ( + text: string | undefined, + highlighter: Highlighter | undefined, + lang: HighlighterLang, + highlightedLine?: number + ) => { + if (!text || !highlighter) return undefined; + return getHighlightedCode([text, highlighter, lang, highlightedLine]); + }; return (
}>
diff --git a/web-client/src/components/span/span-detail.tsx b/web-client/src/components/span/span-detail.tsx index 61c1fd3d..f8f65462 100644 --- a/web-client/src/components/span/span-detail.tsx +++ b/web-client/src/components/span/span-detail.tsx @@ -1,5 +1,4 @@ import { For, createResource, Show } from "solid-js"; -import { useMonitor } from "~/lib/connection/monitor"; import { formatSpansForUi } from "~/lib/span/format-spans-for-ui"; import { getIpcRequestValues } from "~/lib/span/get-ipc-request-value"; import { createHighlighter, getHighlightedCode } from "~/lib/code-highlight"; @@ -9,6 +8,7 @@ import { getChildrenList } from "~/lib/span/get-children-list"; import { SpanDetailTrace } from "./span-detail-trace"; import { SpanDetailArgs } from "./span-detail-args"; import { isIpcSpanName } from "~/lib/span/isIpcSpanName"; +import { useMonitor } from "~/context/monitor-provider"; export function SpanDetail() { const [searchParams] = useSearchParams(); diff --git a/web-client/src/entry.tsx b/web-client/src/entry.tsx index 88da02d0..b4315bce 100644 --- a/web-client/src/entry.tsx +++ b/web-client/src/entry.tsx @@ -1,7 +1,7 @@ import { type RouteDefinition, useNavigate, useRoutes } from "@solidjs/router"; import { lazy, ErrorBoundary } from "solid-js"; import { setCDN } from "@crabnebula/file-icons"; -import { ErrorDialog } from "./components/error-dialog.tsx"; +import { ErrorRoot } from "./components/error-root.tsx"; const ROUTES: RouteDefinition[] = [ { @@ -46,7 +46,7 @@ export default function Entry() { setCDN("/icons"); return ( - }> + }> ); diff --git a/web-client/src/lib/tauri/tauri-conf-schema.ts b/web-client/src/lib/tauri/tauri-conf-schema.ts index 816a1a90..6030a0ed 100644 --- a/web-client/src/lib/tauri/tauri-conf-schema.ts +++ b/web-client/src/lib/tauri/tauri-conf-schema.ts @@ -3,12 +3,12 @@ import tauriConfigSchemaV2 from "./tauri-conf-schema-v2.json"; import { Draft07, JsonSchema, JsonPointer } from "json-schema-library"; import { createResource, Signal } from "solid-js"; import { useRouteData, useLocation, useParams } from "@solidjs/router"; -import { Connection } from "~/lib/connection/transport.ts"; import { awaitEntries, getEntryBytes } from "~/lib/sources/file-entries"; import { useConfiguration } from "~/components/tauri/configuration-context"; import { unwrap, reconcile } from "solid-js/store"; -import { useMonitor } from "../connection/monitor"; import { bytesToText } from "../code-highlight"; +import { useConnection } from "~/context/connection-provider"; +import { useMonitor } from "~/context/monitor-provider"; export type configurationStore = { configs?: configurationObject[]; @@ -74,8 +74,8 @@ export function retrieveConfigurations() { if (configurations.configs) return createResource(() => configurations.configs); - const { client } = useRouteData(); - const [entries] = awaitEntries(client.sources, ""); + const { connectionStore } = useConnection(); + const [entries] = awaitEntries(connectionStore.client.sources, ""); return createResource( entries, @@ -85,7 +85,7 @@ export function retrieveConfigurations() { return await Promise.all( filteredEntries.map(async (e): Promise => { const bytes = await getEntryBytes( - client.sources, + connectionStore.client.sources, e.path, Number(e.size) ); diff --git a/web-client/src/views/dashboard/layout.tsx b/web-client/src/views/dashboard/layout.tsx index ecf81517..b189fef4 100644 --- a/web-client/src/views/dashboard/layout.tsx +++ b/web-client/src/views/dashboard/layout.tsx @@ -1,11 +1,9 @@ -import { ErrorBoundary } from "solid-js"; import { Outlet, useParams } from "@solidjs/router"; import { Navigation } from "~/components/navigation"; import { BootTime } from "~/components/boot-time"; import { HealthStatus } from "~/components/health-status.tsx"; import { Logo } from "~/components/crabnebula-logo"; import { DisconnectButton } from "~/components/disconnect-button"; -import { ErrorDialog } from "~/components/error-dialog"; import { MonitorProvider } from "~/context/monitor-provider"; import { ConnectionProvider } from "~/context/connection-provider"; @@ -15,32 +13,30 @@ export default function Layout() { const { host, port } = useParams(); return ( - }> - - -
-
- - - -
- -
-
- -
-
- Built by CrabNebula -
-
- + + +
+
+ + +
- - - + +
+
+ +
+
+ Built by CrabNebula +
+
+ +
+ + ); }