Line data Source code
1 : import * as React from 'react';
2 : import icons from '@ankoh/dashql-svg-symbols';
3 :
4 : import { AnchorAlignment, AnchorSide } from '../../ui/foundations/anchored_position.js';
5 : import { AnchoredOverlay } from '../../ui/foundations/anchored_overlay.js';
6 : import { AppSettings } from './app_settings_view.js';
7 : import { StorageWriterView } from '../../session/persistence/storage_writer_view.js';
8 : import { LogViewer } from '../../ui/logs/log_viewer.js';
9 : import { OverlaySize } from '../../ui/foundations/overlay.js';
10 : import { QueryViewer } from '../../connections/query_viewer.js';
11 : import { HttpRequestViewer } from '../../ui/http/http_request_viewer.js';
12 : import { QueryCacheView } from '../../session/persistence/query_cache_view.js';
13 : import { VerticalTabs, VerticalTabVariant } from '../../ui/foundations/vertical_tabs.js';
14 : import { StorageBrowserView } from './storage_browser_view.js';
15 :
16 : interface InternalsViewerProps {
17 : /// The active session UUID, used by session-scoped tabs (e.g. the query cache inspector).
18 : sessionId: string | null;
19 : onClose: () => void;
20 : }
21 :
22 1 : enum TabKey {
23 1 : LogViewer = 0,
24 1 : QueryViewer = 1,
25 1 : AppSettings = 2,
26 1 : StorageWriter = 3,
27 1 : QueryCache = 4,
28 1 : StorageBrowser = 6,
29 1 : HttpRequests = 8,
30 1 : }
31 :
32 : /// The groups of the tabs, separated by bars in the tab bar
33 1 : const TAB_GROUP_DIAGNOSTICS = 'Diagnostics';
34 1 : const TAB_GROUP_CONNECTIONS = 'Connections';
35 1 : const TAB_GROUP_STORAGE = 'Storage';
36 1 : const TAB_GROUP_SETTINGS = 'Settings';
37 :
38 1 : export const InternalsViewer: React.FC<InternalsViewerProps> = (props: InternalsViewerProps) => {
39 1 : const [selectedTab, selectTab] = React.useState<TabKey>(TabKey.LogViewer);
40 1 : const tabKeys = [TabKey.LogViewer, TabKey.HttpRequests, TabKey.QueryViewer, TabKey.QueryCache, TabKey.StorageBrowser, TabKey.StorageWriter, TabKey.AppSettings];
41 :
42 1 : return (
43 1 : <VerticalTabs
44 1 : variant={VerticalTabVariant.Stacked}
45 1 : selectedTab={selectedTab}
46 1 : selectTab={selectTab}
47 1 : tabProps={{
48 1 : [TabKey.LogViewer]: {
49 1 : tabId: TabKey.LogViewer,
50 1 : group: TAB_GROUP_DIAGNOSTICS,
51 1 : icon: `${icons}#log_24`,
52 1 : labelShort: 'Logs',
53 1 : ariaLabel: 'Application logs',
54 1 : description: 'View application logs',
55 1 : disabled: false,
56 1 : },
57 1 : [TabKey.HttpRequests]: {
58 1 : tabId: TabKey.HttpRequests,
59 1 : group: TAB_GROUP_CONNECTIONS,
60 1 : icon: `${icons}#globe_24`,
61 1 : labelShort: 'Requests',
62 1 : ariaLabel: 'HTTP requests',
63 1 : description: 'View the outgoing HTTP requests',
64 1 : disabled: false,
65 1 : },
66 1 : [TabKey.QueryViewer]: {
67 1 : tabId: TabKey.QueryViewer,
68 1 : group: TAB_GROUP_CONNECTIONS,
69 1 : icon: `${icons}#database`,
70 1 : labelShort: 'Queries',
71 1 : ariaLabel: 'Query execution history',
72 1 : description: 'View query execution history',
73 1 : disabled: false,
74 1 : },
75 1 : [TabKey.StorageWriter]: {
76 1 : tabId: TabKey.StorageWriter,
77 1 : group: TAB_GROUP_STORAGE,
78 1 : icon: `${icons}#versions_24`,
79 1 : labelShort: 'Storage Writer',
80 1 : ariaLabel: 'Storage writer',
81 1 : description: 'View storage writer statistics',
82 1 : disabled: false,
83 1 : },
84 1 : [TabKey.StorageBrowser]: {
85 1 : tabId: TabKey.StorageBrowser,
86 1 : group: TAB_GROUP_STORAGE,
87 1 : icon: `${icons}#folder`,
88 1 : labelShort: 'Storage',
89 1 : ariaLabel: 'Storage browser',
90 1 : description: 'Browse the app storage folders',
91 1 : disabled: false,
92 1 : },
93 1 : [TabKey.QueryCache]: {
94 1 : tabId: TabKey.QueryCache,
95 1 : group: TAB_GROUP_CONNECTIONS,
96 1 : icon: `${icons}#cache_24`,
97 1 : labelShort: 'Cache',
98 1 : ariaLabel: 'Query result cache',
99 1 : description: 'Inspect and evict cached query results',
100 1 : disabled: false,
101 1 : },
102 1 : [TabKey.AppSettings]: {
103 1 : tabId: TabKey.AppSettings,
104 1 : group: TAB_GROUP_SETTINGS,
105 1 : icon: `${icons}#settings_24`,
106 1 : labelShort: 'Settings',
107 1 : ariaLabel: 'Application settings',
108 1 : description: 'Configure application settings',
109 1 : disabled: false,
110 1 : },
111 1 : }}
112 1 : tabKeys={tabKeys}
113 1 : tabRenderers={{
114 1 : [TabKey.LogViewer]: _props => (
115 1 : <LogViewer onClose={props.onClose} />
116 : ),
117 1 : [TabKey.HttpRequests]: _props => (
118 1 : <HttpRequestViewer onClose={props.onClose} />
119 : ),
120 1 : [TabKey.QueryViewer]: _props => (
121 1 : <QueryViewer onClose={props.onClose} />
122 : ),
123 1 : [TabKey.StorageWriter]: _props => (
124 1 : <StorageWriterView sessionId={props.sessionId} onClose={props.onClose} />
125 : ),
126 1 : [TabKey.StorageBrowser]: _props => (
127 1 : <StorageBrowserView onClose={props.onClose} />
128 : ),
129 1 : [TabKey.QueryCache]: _props => (
130 1 : <QueryCacheView onClose={props.onClose} />
131 : ),
132 1 : [TabKey.AppSettings]: _props => (
133 1 : <AppSettings onClose={props.onClose} />
134 : ),
135 1 : }}
136 1 : />
137 : );
138 1 : }
139 :
140 : type InternalsViewerOverlayProps = {
141 : /// The active session UUID, forwarded to session-scoped tabs (e.g. the query cache inspector).
142 : /// Omitted on setup/loading pages that have no active session — the query cache tab then shows
143 : /// an empty "no active session" state.
144 : sessionId?: string | null;
145 : isOpen: boolean;
146 : onClose: () => void;
147 : renderAnchor: (p: object) => React.ReactElement;
148 : side?: AnchorSide;
149 : align?: AnchorAlignment;
150 : anchorOffset?: number;
151 : }
152 1 : export function InternalsViewerOverlay(props: InternalsViewerOverlayProps) {
153 1 : return (
154 1 : <AnchoredOverlay
155 1 : open={props.isOpen}
156 1 : onClose={props.onClose}
157 1 : renderAnchor={props.renderAnchor}
158 1 : side={props.side}
159 1 : align={props.align}
160 1 : anchorOffset={props.anchorOffset}
161 1 : overlayProps={{
162 1 : width: OverlaySize.XL,
163 1 : height: OverlaySize.L,
164 1 : }}
165 : >
166 1 : <InternalsViewer sessionId={props.sessionId ?? null} onClose={props.onClose} />
167 1 : </AnchoredOverlay>
168 : );
169 1 : }
|
