@reopt-ai/opt-ui 1.6.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENT_CATALOG.md +95 -12
- package/dist/app.css +24 -0
- package/dist/core/index.cjs +3 -3
- package/dist/core/index.d.cts +1 -1
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +2 -2
- package/dist/docs/02-components/03-shells.md +104 -11
- package/dist/docs/02-components/index.md +3 -3
- package/dist/docs/05-migration/01-breaking-changes.md +18 -1
- package/dist/field-sidebar-BTZCBviA.d.cts +1031 -0
- package/dist/field-sidebar-BTZCBviA.d.cts.map +1 -0
- package/dist/field-sidebar-CB8vjvUM.d.ts +1031 -0
- package/dist/field-sidebar-CB8vjvUM.d.ts.map +1 -0
- package/dist/{workflow-canvas-BGBAcjf-.js → field-sidebar-Cs-J-5VE.js} +1882 -52
- package/dist/field-sidebar-Cs-J-5VE.js.map +1 -0
- package/dist/{workflow-canvas-3Jeevkgy.cjs → field-sidebar-CzIQX70-.cjs} +2010 -48
- package/dist/id-registry.cjs +41 -1
- package/dist/id-registry.d.cts +1 -1
- package/dist/id-registry.d.cts.map +1 -1
- package/dist/id-registry.d.ts +1 -1
- package/dist/id-registry.d.ts.map +1 -1
- package/dist/id-registry.js +41 -1
- package/dist/id-registry.js.map +1 -1
- package/dist/id-registry.json +85 -0
- package/dist/index.cjs +142 -56
- package/dist/index.d.cts +149 -80
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +149 -80
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +73 -11
- package/dist/index.js.map +1 -1
- package/dist/meta.cjs +292 -0
- package/dist/meta.d.cts.map +1 -1
- package/dist/meta.d.ts.map +1 -1
- package/dist/meta.js +292 -0
- package/dist/meta.js.map +1 -1
- package/dist/{pagination-By7Ozv3U.js → pagination-DWbvACuN.js} +93 -31
- package/dist/pagination-DWbvACuN.js.map +1 -0
- package/dist/{pagination-Uv3CnGJz.cjs → pagination-DjfxBcjX.cjs} +98 -36
- package/dist/query.cjs +386 -0
- package/dist/query.d.cts +141 -0
- package/dist/query.d.cts.map +1 -0
- package/dist/query.d.ts +141 -0
- package/dist/query.d.ts.map +1 -0
- package/dist/query.js +371 -0
- package/dist/query.js.map +1 -0
- package/dist/{shader-surface-BWhO2xkk.js → shader-surface-BUPZ0P-n.js} +22 -83
- package/dist/shader-surface-BUPZ0P-n.js.map +1 -0
- package/dist/{shader-surface-DIVWtpFl.d.ts → shader-surface-BfTP9c1Q.d.ts} +139 -139
- package/dist/shader-surface-BfTP9c1Q.d.ts.map +1 -0
- package/dist/{shader-surface-BK1GMt5_.d.cts → shader-surface-DRrcLrWf.d.cts} +139 -139
- package/dist/shader-surface-DRrcLrWf.d.cts.map +1 -0
- package/dist/{shader-surface-DxLLfrE6.cjs → shader-surface-Fav5K9UC.cjs} +20 -87
- package/dist/shells/index.cjs +31 -24
- package/dist/shells/index.d.cts +2 -2
- package/dist/shells/index.d.ts +2 -2
- package/dist/shells/index.js +3 -2
- package/dist/theme/presets/default.css +2 -2
- package/dist/theme/presets/minimal.css +2 -2
- package/dist/theme/presets/mono-dark.css +2 -2
- package/dist/theme/presets/natural.css +1 -1
- package/dist/theme/presets/pro.css +2 -2
- package/package.json +17 -6
- package/dist/pagination-By7Ozv3U.js.map +0 -1
- package/dist/shader-surface-BK1GMt5_.d.cts.map +0 -1
- package/dist/shader-surface-BWhO2xkk.js.map +0 -1
- package/dist/shader-surface-DIVWtpFl.d.ts.map +0 -1
- package/dist/workflow-canvas-BGBAcjf-.js.map +0 -1
- package/dist/workflow-canvas-Bar_O2SQ.d.ts +0 -494
- package/dist/workflow-canvas-Bar_O2SQ.d.ts.map +0 -1
- package/dist/workflow-canvas-DghDRtHn.d.cts +0 -494
- package/dist/workflow-canvas-DghDRtHn.d.cts.map +0 -1
|
@@ -0,0 +1,1031 @@
|
|
|
1
|
+
|
|
2
|
+
import { A as StatCard, C as MenuDef, D as ProjectDef, E as NavItemDef, L as ToolbarButtonDef, S as FormFieldDef, d as CommandDef, f as DeploymentStep, j as TabDef, k as SelectOption, m as EnvGroupDef, n as BranchDef, p as DomainDef, v as FailureItem, y as FaqItem } from "./types-D0FlcYnM.cjs";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { ReactNode, Ref } from "react";
|
|
5
|
+
import { TimeGranularity, TimeRange, TimeRange as TimeRange$1, TimeSeriesAnnotation, TimeSeriesChartProps, TimeSeriesDef, TimeSeriesPoint } from "@reopt-ai/opt-charts";
|
|
6
|
+
//#region src/shells/command-palette.d.ts
|
|
7
|
+
/** Localized labels for the command palette component. */
|
|
8
|
+
interface CommandPaletteLabels {
|
|
9
|
+
title?: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
input?: string;
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
list?: string;
|
|
14
|
+
empty?: ReactNode;
|
|
15
|
+
escape?: string;
|
|
16
|
+
}
|
|
17
|
+
/** Props for the command palette component. */
|
|
18
|
+
interface CommandPaletteProps {
|
|
19
|
+
commands: Omit<CommandDef, "action">[];
|
|
20
|
+
open: boolean;
|
|
21
|
+
onOpenChange: (open: boolean) => void;
|
|
22
|
+
onSelect?: (command: Omit<CommandDef, "action">) => void;
|
|
23
|
+
/** Render inline (no dialog overlay). */
|
|
24
|
+
inline?: boolean;
|
|
25
|
+
labels?: CommandPaletteLabels;
|
|
26
|
+
footer?: ReactNode;
|
|
27
|
+
empty?: ReactNode;
|
|
28
|
+
inputTrailing?: ReactNode;
|
|
29
|
+
className?: string;
|
|
30
|
+
}
|
|
31
|
+
/** Renders the command palette component. */
|
|
32
|
+
declare function CommandPalette({ commands, open, onOpenChange, onSelect, inline, labels, footer, empty, inputTrailing, className }: CommandPaletteProps): import("react").JSX.Element | null;
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/shells/command-palette-trigger.d.ts
|
|
35
|
+
/** Props for the command palette trigger component. */
|
|
36
|
+
interface CommandPaletteTriggerProps {
|
|
37
|
+
commands: Omit<CommandDef, "action">[];
|
|
38
|
+
onSelect?: (command: Omit<CommandDef, "action">) => void;
|
|
39
|
+
labels?: CommandPaletteTriggerLabels;
|
|
40
|
+
}
|
|
41
|
+
/** Localized labels for the command palette trigger component. */
|
|
42
|
+
type CommandPaletteTriggerLabels = CommandPaletteLabels;
|
|
43
|
+
/** Renders the command palette trigger component. */
|
|
44
|
+
declare function CommandPaletteTrigger({ commands, onSelect, labels }: CommandPaletteTriggerProps): import("react").JSX.Element | null;
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region src/shells/dashboard-grid.d.ts
|
|
47
|
+
/** Localized labels for the dashboard grid component. */
|
|
48
|
+
interface DashboardGridLabels {
|
|
49
|
+
ariaLabel?: string;
|
|
50
|
+
}
|
|
51
|
+
/** Props for the dashboard grid component. */
|
|
52
|
+
interface DashboardGridProps {
|
|
53
|
+
stats: StatCard[];
|
|
54
|
+
columns?: number;
|
|
55
|
+
labels?: DashboardGridLabels;
|
|
56
|
+
}
|
|
57
|
+
/** Renders the dashboard grid component. */
|
|
58
|
+
declare function DashboardGrid({ stats, columns, labels: customLabels }: DashboardGridProps): import("react").JSX.Element;
|
|
59
|
+
//#endregion
|
|
60
|
+
//#region src/shells/search-combobox.d.ts
|
|
61
|
+
/** Localized labels for the search combobox component. */
|
|
62
|
+
interface SearchComboboxLabels {
|
|
63
|
+
noResults?: string;
|
|
64
|
+
loading?: string;
|
|
65
|
+
}
|
|
66
|
+
/** Props for the search combobox component. */
|
|
67
|
+
interface SearchComboboxProps {
|
|
68
|
+
items: string[];
|
|
69
|
+
placeholder?: string;
|
|
70
|
+
label?: string;
|
|
71
|
+
onSelect?: (item: string) => void;
|
|
72
|
+
labels?: SearchComboboxLabels;
|
|
73
|
+
/** Enable async search mode */
|
|
74
|
+
async?: boolean;
|
|
75
|
+
/** Async search callback (used when async=true) */
|
|
76
|
+
onSearch?: (query: string) => Promise<string[]>;
|
|
77
|
+
/** Debounce ms for async search */
|
|
78
|
+
debounceMs?: number;
|
|
79
|
+
}
|
|
80
|
+
/** Renders the search combobox component. */
|
|
81
|
+
declare function SearchCombobox({ items, placeholder, label, onSelect, labels: customLabels, async: isAsync, onSearch, debounceMs }: SearchComboboxProps): import("react").JSX.Element;
|
|
82
|
+
//#endregion
|
|
83
|
+
//#region src/shells/status-select.d.ts
|
|
84
|
+
/** Props for the status select component. */
|
|
85
|
+
interface StatusSelectProps {
|
|
86
|
+
options: SelectOption[];
|
|
87
|
+
value?: string;
|
|
88
|
+
onChange?: (value: string) => void;
|
|
89
|
+
label?: string;
|
|
90
|
+
labels?: StatusSelectLabels;
|
|
91
|
+
}
|
|
92
|
+
/** Localized labels for the status select component. */
|
|
93
|
+
interface StatusSelectLabels {
|
|
94
|
+
selectLabel?: string;
|
|
95
|
+
emptyMessage?: string;
|
|
96
|
+
}
|
|
97
|
+
/** Renders the status select component. */
|
|
98
|
+
declare function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }: StatusSelectProps): import("react").JSX.Element;
|
|
99
|
+
//#endregion
|
|
100
|
+
//#region src/shells/app-menubar.d.ts
|
|
101
|
+
/** Props for the app menubar component. */
|
|
102
|
+
interface AppMenubarProps {
|
|
103
|
+
menus: MenuDef[];
|
|
104
|
+
labels?: AppMenubarLabels;
|
|
105
|
+
}
|
|
106
|
+
/** Localized labels for the app menubar component. */
|
|
107
|
+
interface AppMenubarLabels {
|
|
108
|
+
ariaLabel?: string;
|
|
109
|
+
}
|
|
110
|
+
/** Renders the app menubar component. */
|
|
111
|
+
declare function AppMenubar({ menus, labels: customLabels }: AppMenubarProps): import("react").JSX.Element | null;
|
|
112
|
+
declare namespace AppMenubar {
|
|
113
|
+
var displayName: string;
|
|
114
|
+
}
|
|
115
|
+
//#endregion
|
|
116
|
+
//#region src/shells/sidebar-nav.d.ts
|
|
117
|
+
/** Localized labels for the sidebar nav component. */
|
|
118
|
+
interface SidebarNavLabels {
|
|
119
|
+
ariaLabel?: string;
|
|
120
|
+
}
|
|
121
|
+
/** Props for the sidebar nav component. */
|
|
122
|
+
interface SidebarNavProps {
|
|
123
|
+
items: NavItemDef[];
|
|
124
|
+
labels?: SidebarNavLabels;
|
|
125
|
+
}
|
|
126
|
+
/** Renders the sidebar nav component. */
|
|
127
|
+
declare function SidebarNav({ items, labels: customLabels }: SidebarNavProps): import("react").JSX.Element | null;
|
|
128
|
+
//#endregion
|
|
129
|
+
//#region src/shells/editor-toolbar.d.ts
|
|
130
|
+
/** Localized labels for the editor toolbar component. */
|
|
131
|
+
interface EditorToolbarLabels {
|
|
132
|
+
ariaLabel?: string;
|
|
133
|
+
}
|
|
134
|
+
/** Props for the editor toolbar component. */
|
|
135
|
+
interface EditorToolbarProps {
|
|
136
|
+
buttons: ToolbarButtonDef[];
|
|
137
|
+
onAction?: (id: string) => void;
|
|
138
|
+
activeButtons?: string[];
|
|
139
|
+
labels?: EditorToolbarLabels;
|
|
140
|
+
}
|
|
141
|
+
/** Renders the editor toolbar component. */
|
|
142
|
+
declare function EditorToolbar({ buttons, onAction, activeButtons, labels: customLabels }: EditorToolbarProps): import("react").JSX.Element;
|
|
143
|
+
//#endregion
|
|
144
|
+
//#region src/shells/content-tabs.d.ts
|
|
145
|
+
/** Localized labels for the content tabs component. */
|
|
146
|
+
interface ContentTabsLabels {
|
|
147
|
+
ariaLabel?: string;
|
|
148
|
+
emptyMessage?: string;
|
|
149
|
+
}
|
|
150
|
+
/** Props for the content tabs component. */
|
|
151
|
+
interface ContentTabsProps {
|
|
152
|
+
tabs: TabDef[];
|
|
153
|
+
defaultTabId?: string;
|
|
154
|
+
labels?: ContentTabsLabels;
|
|
155
|
+
}
|
|
156
|
+
/** Renders the content tabs component. */
|
|
157
|
+
declare function ContentTabs({ tabs, defaultTabId, labels: customLabels }: ContentTabsProps): import("react").JSX.Element;
|
|
158
|
+
//#endregion
|
|
159
|
+
//#region src/shells/faq-accordion.d.ts
|
|
160
|
+
/** Localized labels for the faq accordion component. */
|
|
161
|
+
interface FaqAccordionLabels {
|
|
162
|
+
ariaLabel?: string;
|
|
163
|
+
emptyMessage?: string;
|
|
164
|
+
}
|
|
165
|
+
/** Props for the faq accordion component. */
|
|
166
|
+
interface FaqAccordionProps {
|
|
167
|
+
items: FaqItem[];
|
|
168
|
+
labels?: FaqAccordionLabels;
|
|
169
|
+
}
|
|
170
|
+
/** Renders the faq accordion component. */
|
|
171
|
+
declare function FaqAccordion({ items, labels: customLabels }: FaqAccordionProps): import("react").JSX.Element;
|
|
172
|
+
//#endregion
|
|
173
|
+
//#region src/shells/settings-form.d.ts
|
|
174
|
+
/** Localized labels for the settings form component. */
|
|
175
|
+
interface SettingsFormLabels {
|
|
176
|
+
formAriaLabel?: string;
|
|
177
|
+
submitButton?: string;
|
|
178
|
+
successMessage?: string;
|
|
179
|
+
}
|
|
180
|
+
/** Props for the settings form component. */
|
|
181
|
+
interface SettingsFormProps {
|
|
182
|
+
fields: FormFieldDef[];
|
|
183
|
+
onSubmit?: (values: Record<string, unknown>) => void;
|
|
184
|
+
labels?: SettingsFormLabels;
|
|
185
|
+
}
|
|
186
|
+
/** Renders the settings form component. */
|
|
187
|
+
declare function SettingsForm({ fields, onSubmit, labels: customLabels }: SettingsFormProps): import("react").JSX.Element;
|
|
188
|
+
//#endregion
|
|
189
|
+
//#region src/shells/deployment-timeline.d.ts
|
|
190
|
+
/** Props for the deployment timeline component. */
|
|
191
|
+
interface DeploymentTimelineProps {
|
|
192
|
+
steps: DeploymentStep[];
|
|
193
|
+
title?: string;
|
|
194
|
+
}
|
|
195
|
+
/** Renders the deployment timeline component. */
|
|
196
|
+
declare function DeploymentTimeline({ steps, title }: DeploymentTimelineProps): import("react").JSX.Element;
|
|
197
|
+
//#endregion
|
|
198
|
+
//#region src/shells/project-switcher.d.ts
|
|
199
|
+
/** Props for the project switcher component. */
|
|
200
|
+
interface ProjectSwitcherProps {
|
|
201
|
+
projects: ProjectDef[];
|
|
202
|
+
value?: string;
|
|
203
|
+
onChange?: (id: string) => void;
|
|
204
|
+
placeholder?: string;
|
|
205
|
+
}
|
|
206
|
+
/** Renders the project switcher component. */
|
|
207
|
+
declare function ProjectSwitcher({ projects, value, onChange, placeholder }: ProjectSwitcherProps): import("react").JSX.Element;
|
|
208
|
+
declare namespace ProjectSwitcher {
|
|
209
|
+
var displayName: string;
|
|
210
|
+
}
|
|
211
|
+
//#endregion
|
|
212
|
+
//#region src/shells/env-panel.d.ts
|
|
213
|
+
/** Localized labels for the env panel component. */
|
|
214
|
+
interface EnvPanelLabels {
|
|
215
|
+
varCount?: (count: number) => string;
|
|
216
|
+
envVarsLabel?: (env: string) => string;
|
|
217
|
+
secretBadge?: string;
|
|
218
|
+
}
|
|
219
|
+
/** Props for the env panel component. */
|
|
220
|
+
interface EnvPanelProps {
|
|
221
|
+
groups: EnvGroupDef[];
|
|
222
|
+
labels?: EnvPanelLabels;
|
|
223
|
+
}
|
|
224
|
+
/** Renders the env panel component. */
|
|
225
|
+
declare function EnvPanel({ groups, labels: customLabels }: EnvPanelProps): import("react").JSX.Element;
|
|
226
|
+
//#endregion
|
|
227
|
+
//#region src/shells/branch-select.d.ts
|
|
228
|
+
/** Localized labels for the branch select component. */
|
|
229
|
+
interface BranchSelectLabels {
|
|
230
|
+
selectLabel?: string;
|
|
231
|
+
emptySelectionLabel?: string;
|
|
232
|
+
emptyMessage?: string;
|
|
233
|
+
defaultBadge?: string;
|
|
234
|
+
}
|
|
235
|
+
/** Props for the branch select component. */
|
|
236
|
+
interface BranchSelectProps {
|
|
237
|
+
branches: BranchDef[];
|
|
238
|
+
value?: string;
|
|
239
|
+
onChange?: (name: string) => void;
|
|
240
|
+
label?: string;
|
|
241
|
+
labels?: BranchSelectLabels;
|
|
242
|
+
}
|
|
243
|
+
/** Renders the branch select component. */
|
|
244
|
+
declare function BranchSelect({ branches, value: controlledValue, onChange, label, labels: customLabels }: BranchSelectProps): import("react").JSX.Element;
|
|
245
|
+
declare namespace BranchSelect {
|
|
246
|
+
var displayName: string;
|
|
247
|
+
}
|
|
248
|
+
//#endregion
|
|
249
|
+
//#region src/shells/domain-table.d.ts
|
|
250
|
+
/** Localized labels for the domain table component. */
|
|
251
|
+
interface DomainTableLabels {
|
|
252
|
+
domain?: string;
|
|
253
|
+
status?: string;
|
|
254
|
+
ssl?: string;
|
|
255
|
+
redirect?: string;
|
|
256
|
+
added?: string;
|
|
257
|
+
emptyMessage?: string;
|
|
258
|
+
}
|
|
259
|
+
/** Props for the domain table component. */
|
|
260
|
+
interface DomainTableProps {
|
|
261
|
+
domains: DomainDef[];
|
|
262
|
+
title?: string;
|
|
263
|
+
labels?: DomainTableLabels;
|
|
264
|
+
}
|
|
265
|
+
/** Renders the domain table component. */
|
|
266
|
+
declare function DomainTable({ domains, title, labels: customLabels }: DomainTableProps): import("react").JSX.Element;
|
|
267
|
+
//#endregion
|
|
268
|
+
//#region src/shells/data-table.d.ts
|
|
269
|
+
/**
|
|
270
|
+
* Column definition for DataTable.
|
|
271
|
+
* `accessor` can be a property key for simple lookups or a render function
|
|
272
|
+
* for computed/complex cells.
|
|
273
|
+
*/
|
|
274
|
+
interface ColumnDef<T> {
|
|
275
|
+
id: string;
|
|
276
|
+
header: string;
|
|
277
|
+
accessor: keyof T | ((row: T) => ReactNode);
|
|
278
|
+
width?: string;
|
|
279
|
+
align?: "left" | "center" | "right";
|
|
280
|
+
sortable?: boolean;
|
|
281
|
+
/** Show an inline progress bar in the cell. Return a 0-1 ratio. */
|
|
282
|
+
bar?: (row: T) => number;
|
|
283
|
+
/** Bar color class (default: "bg-accent") */
|
|
284
|
+
barColor?: string;
|
|
285
|
+
}
|
|
286
|
+
/** Props for the data table component. */
|
|
287
|
+
interface DataTableProps<T> {
|
|
288
|
+
data: T[];
|
|
289
|
+
columns: ColumnDef<T>[];
|
|
290
|
+
keyExtractor: (row: T) => string;
|
|
291
|
+
title?: string;
|
|
292
|
+
onRowClick?: (row: T) => void;
|
|
293
|
+
emptyMessage?: string;
|
|
294
|
+
/** Highlight a single row by its key */
|
|
295
|
+
activeRowId?: string;
|
|
296
|
+
/** Enable column sorting */
|
|
297
|
+
sortable?: boolean;
|
|
298
|
+
/** Enable row selection with checkboxes */
|
|
299
|
+
selectable?: boolean;
|
|
300
|
+
selectedKeys?: string[];
|
|
301
|
+
onSelectionChange?: (keys: string[]) => void;
|
|
302
|
+
/** Enable expandable rows */
|
|
303
|
+
expandable?: boolean;
|
|
304
|
+
renderExpanded?: (row: T) => ReactNode;
|
|
305
|
+
/** Enable pagination */
|
|
306
|
+
pageSize?: number;
|
|
307
|
+
/** Sticky table header */
|
|
308
|
+
stickyHeader?: boolean;
|
|
309
|
+
/** Enable column resizing via drag handle */
|
|
310
|
+
resizableColumns?: boolean;
|
|
311
|
+
/** External (server-side) sort callback */
|
|
312
|
+
onSort?: (columnId: string, direction: "asc" | "desc" | null) => void;
|
|
313
|
+
className?: string;
|
|
314
|
+
}
|
|
315
|
+
/** Renders the data table component. */
|
|
316
|
+
declare function DataTable<T>({ data, columns, keyExtractor, title, onRowClick, emptyMessage, activeRowId, sortable, selectable, selectedKeys, onSelectionChange, expandable, renderExpanded, pageSize, stickyHeader, resizableColumns, onSort: onSortExternal, className }: DataTableProps<T>): import("react").JSX.Element;
|
|
317
|
+
//#endregion
|
|
318
|
+
//#region src/shells/notification-toast.d.ts
|
|
319
|
+
/** Defines the toast action shape. */
|
|
320
|
+
interface ToastAction {
|
|
321
|
+
label: string;
|
|
322
|
+
onClick: () => void;
|
|
323
|
+
}
|
|
324
|
+
/** Toast severity. */
|
|
325
|
+
type ToastVariant = "info" | "success" | "warning" | "error";
|
|
326
|
+
/** Defines the toast message shape. */
|
|
327
|
+
interface ToastMessage {
|
|
328
|
+
id: string;
|
|
329
|
+
variant: ToastVariant;
|
|
330
|
+
title?: string;
|
|
331
|
+
message: string;
|
|
332
|
+
duration?: number;
|
|
333
|
+
actions?: ToastAction[];
|
|
334
|
+
}
|
|
335
|
+
/** Options accepted by the imperative `toast()` API. */
|
|
336
|
+
interface ToastOptions {
|
|
337
|
+
variant?: ToastVariant;
|
|
338
|
+
title?: string;
|
|
339
|
+
message: string;
|
|
340
|
+
duration?: number;
|
|
341
|
+
actions?: ToastAction[];
|
|
342
|
+
}
|
|
343
|
+
/** Defines the toast context value shape. */
|
|
344
|
+
interface ToastContextValue {
|
|
345
|
+
toasts: ToastMessage[];
|
|
346
|
+
addToast: (toast: Omit<ToastMessage, "id">) => string;
|
|
347
|
+
removeToast: (id: string) => void;
|
|
348
|
+
}
|
|
349
|
+
/**
|
|
350
|
+
* Imperative toast API. Call from anywhere (no hook required):
|
|
351
|
+
* `toast.success("Saved")`, `toast.error("Failed", { title: "Oops" })`,
|
|
352
|
+
* `toast.dismiss(id)`, `toast.clear()`. Requires a mounted `ToastProvider`.
|
|
353
|
+
*/
|
|
354
|
+
declare const toast: ((options: ToastOptions) => string) & {
|
|
355
|
+
info: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
|
|
356
|
+
success: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
|
|
357
|
+
warning: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
|
|
358
|
+
error: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
|
|
359
|
+
dismiss: (id: string) => void;
|
|
360
|
+
clear: () => void;
|
|
361
|
+
};
|
|
362
|
+
/** Props for the toast provider component. */
|
|
363
|
+
interface ToastProviderProps {
|
|
364
|
+
children: ReactNode;
|
|
365
|
+
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
366
|
+
defaultDuration?: number;
|
|
367
|
+
stackLimit?: number;
|
|
368
|
+
}
|
|
369
|
+
/** Renders the toast provider component. */
|
|
370
|
+
declare function ToastProvider({ children, position, defaultDuration, stackLimit }: ToastProviderProps): import("react").JSX.Element;
|
|
371
|
+
/** Provides toast. */
|
|
372
|
+
declare function useToast(): ToastContextValue;
|
|
373
|
+
interface NotificationToastProps {
|
|
374
|
+
toast: ToastMessage;
|
|
375
|
+
onDismiss: () => void;
|
|
376
|
+
/** Falls back here when the toast itself sets no duration. */
|
|
377
|
+
defaultDuration?: number;
|
|
378
|
+
}
|
|
379
|
+
/** Renders the notification toast component. */
|
|
380
|
+
declare function NotificationToast({ toast, onDismiss, defaultDuration }: NotificationToastProps): import("react").JSX.Element;
|
|
381
|
+
//#endregion
|
|
382
|
+
//#region src/shells/failure-list.d.ts
|
|
383
|
+
interface TimeAgoLabels {
|
|
384
|
+
justNow: string;
|
|
385
|
+
minutesAgo: string;
|
|
386
|
+
hoursAgo: string;
|
|
387
|
+
daysAgo: string;
|
|
388
|
+
}
|
|
389
|
+
/** Localized labels for the failure list component. */
|
|
390
|
+
interface FailureListLabels {
|
|
391
|
+
title?: string;
|
|
392
|
+
emptyMessage?: string;
|
|
393
|
+
moreItems?: string;
|
|
394
|
+
severityLabels?: Partial<Record<"critical" | "error" | "warning", string>>;
|
|
395
|
+
timeAgo?: Partial<TimeAgoLabels>;
|
|
396
|
+
}
|
|
397
|
+
/** Props for the failure list component. */
|
|
398
|
+
interface FailureListProps {
|
|
399
|
+
failures: FailureItem[];
|
|
400
|
+
title?: string;
|
|
401
|
+
maxItems?: number;
|
|
402
|
+
/** Group failures by `group` field */
|
|
403
|
+
grouped?: boolean;
|
|
404
|
+
onFailureClick?: (failure: FailureItem) => void;
|
|
405
|
+
onShowMore?: () => void;
|
|
406
|
+
labels?: FailureListLabels;
|
|
407
|
+
locale?: string;
|
|
408
|
+
loading?: boolean;
|
|
409
|
+
renderActions?: (failure: FailureItem) => ReactNode;
|
|
410
|
+
className?: string;
|
|
411
|
+
}
|
|
412
|
+
/** Renders the failure list component. */
|
|
413
|
+
declare function FailureList({ failures, title, maxItems, grouped, onFailureClick, onShowMore, labels: customLabels, locale, loading, renderActions, className }: FailureListProps): import("react").JSX.Element;
|
|
414
|
+
//#endregion
|
|
415
|
+
//#region src/shells/key-value-editor.d.ts
|
|
416
|
+
/** Defines the key value entry shape. */
|
|
417
|
+
interface KeyValueEntry {
|
|
418
|
+
id: string;
|
|
419
|
+
key: string;
|
|
420
|
+
value: string;
|
|
421
|
+
isSecret?: boolean;
|
|
422
|
+
}
|
|
423
|
+
/** Localized labels for the key value editor component. */
|
|
424
|
+
interface KeyValueEditorLabels {
|
|
425
|
+
keyPlaceholder?: string;
|
|
426
|
+
valuePlaceholder?: string;
|
|
427
|
+
addButton?: string;
|
|
428
|
+
removeAriaLabel?: string;
|
|
429
|
+
toggleSecretAriaLabel?: string;
|
|
430
|
+
emptyMessage?: string;
|
|
431
|
+
}
|
|
432
|
+
/** Props for the key value editor component. */
|
|
433
|
+
interface KeyValueEditorProps {
|
|
434
|
+
/** Current entries (controlled) */
|
|
435
|
+
value?: KeyValueEntry[];
|
|
436
|
+
/** Initial entries (uncontrolled) */
|
|
437
|
+
defaultValue?: KeyValueEntry[];
|
|
438
|
+
/** Called when entries change */
|
|
439
|
+
onChange?: (entries: KeyValueEntry[]) => void;
|
|
440
|
+
/** Allow toggling secret/password visibility */
|
|
441
|
+
showSecretToggle?: boolean;
|
|
442
|
+
/** Maximum number of entries allowed */
|
|
443
|
+
maxEntries?: number;
|
|
444
|
+
/** Whether entries are read-only */
|
|
445
|
+
readOnly?: boolean;
|
|
446
|
+
/** Custom labels for i18n */
|
|
447
|
+
labels?: KeyValueEditorLabels;
|
|
448
|
+
/** Render custom actions per entry */
|
|
449
|
+
renderActions?: (entry: KeyValueEntry, index: number) => ReactNode;
|
|
450
|
+
/** Validate key on change. Return error message or undefined. */
|
|
451
|
+
validateKey?: (key: string, entries: KeyValueEntry[]) => string | undefined;
|
|
452
|
+
className?: string;
|
|
453
|
+
}
|
|
454
|
+
/** Renders the key value editor component. */
|
|
455
|
+
declare function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSecretToggle, maxEntries, readOnly, labels: customLabels, renderActions, validateKey, className }: KeyValueEditorProps): import("react").JSX.Element;
|
|
456
|
+
//#endregion
|
|
457
|
+
//#region src/shells/workflow-canvas.d.ts
|
|
458
|
+
/** Defines the workflow canvas step shape. */
|
|
459
|
+
interface WorkflowCanvasStep {
|
|
460
|
+
id: string;
|
|
461
|
+
title: string;
|
|
462
|
+
row: number;
|
|
463
|
+
col: number;
|
|
464
|
+
status?: "idle" | "running" | "success" | "error";
|
|
465
|
+
}
|
|
466
|
+
/** Defines the workflow canvas connection shape. */
|
|
467
|
+
interface WorkflowCanvasConnection {
|
|
468
|
+
from: string;
|
|
469
|
+
to: string;
|
|
470
|
+
label?: string;
|
|
471
|
+
}
|
|
472
|
+
/** Props for the workflow canvas component. */
|
|
473
|
+
interface WorkflowCanvasProps {
|
|
474
|
+
steps: WorkflowCanvasStep[];
|
|
475
|
+
connections?: WorkflowCanvasConnection[];
|
|
476
|
+
rows?: number;
|
|
477
|
+
cols?: number;
|
|
478
|
+
cellSize?: number;
|
|
479
|
+
gap?: number;
|
|
480
|
+
title?: string;
|
|
481
|
+
emptyMessage?: string;
|
|
482
|
+
selectedStepId?: string;
|
|
483
|
+
onSelectStep?: (step: WorkflowCanvasStep) => void;
|
|
484
|
+
onStepMove?: (stepId: string, row: number, col: number) => void;
|
|
485
|
+
renderStep?: (step: WorkflowCanvasStep, selected: boolean) => React.ReactNode;
|
|
486
|
+
className?: string;
|
|
487
|
+
}
|
|
488
|
+
/** Renders the workflow canvas component. */
|
|
489
|
+
declare function WorkflowCanvas({ steps, connections, rows, cols, cellSize, gap, title, emptyMessage, selectedStepId, onSelectStep, onStepMove, renderStep, className }: WorkflowCanvasProps): React.JSX.Element;
|
|
490
|
+
declare namespace WorkflowCanvas {
|
|
491
|
+
var displayName: string;
|
|
492
|
+
}
|
|
493
|
+
//#endregion
|
|
494
|
+
//#region src/shells/time-range-control.d.ts
|
|
495
|
+
/** A named window offered in the quick-select list. */
|
|
496
|
+
interface TimeRangePreset {
|
|
497
|
+
label: string;
|
|
498
|
+
range: TimeRange$1;
|
|
499
|
+
}
|
|
500
|
+
/** How often the control asks its owner to re-query. */
|
|
501
|
+
interface RefreshSetting {
|
|
502
|
+
/** Milliseconds. `0` means off. */
|
|
503
|
+
interval: number;
|
|
504
|
+
paused: boolean;
|
|
505
|
+
}
|
|
506
|
+
/** Localized strings for the time range control. */
|
|
507
|
+
interface TimeRangeControlLabels {
|
|
508
|
+
trigger?: string;
|
|
509
|
+
invalid?: string;
|
|
510
|
+
last?: (duration: string) => string;
|
|
511
|
+
next?: (duration: string) => string;
|
|
512
|
+
quickSelect?: string;
|
|
513
|
+
apply?: string;
|
|
514
|
+
update?: string;
|
|
515
|
+
refresh?: string;
|
|
516
|
+
commonlyUsed?: string;
|
|
517
|
+
recentlyUsed?: string;
|
|
518
|
+
start?: string;
|
|
519
|
+
end?: string;
|
|
520
|
+
startHint?: string;
|
|
521
|
+
autoRefresh?: string;
|
|
522
|
+
autoRefreshOff?: string;
|
|
523
|
+
every?: (duration: string) => string;
|
|
524
|
+
previous?: string;
|
|
525
|
+
nextWindow?: string;
|
|
526
|
+
zoomIn?: string;
|
|
527
|
+
zoomOut?: string;
|
|
528
|
+
/** e.g. "This day" for a window snapped to a calendar unit. */
|
|
529
|
+
thisUnit?: (unit: string) => string;
|
|
530
|
+
units?: Partial<Record<TimeUnitKey, string>>;
|
|
531
|
+
}
|
|
532
|
+
/** Units the control can name. `s` only shows up in a parsed expression. */
|
|
533
|
+
type TimeUnitKey = "s" | "m" | "h" | "d" | "w" | "M" | "y";
|
|
534
|
+
/** Props for the time range control. */
|
|
535
|
+
interface TimeRangeControlProps {
|
|
536
|
+
value: TimeRange$1;
|
|
537
|
+
onChange: (range: TimeRange$1) => void;
|
|
538
|
+
/** Named windows shown in the popover. */
|
|
539
|
+
presets?: TimeRangePreset[];
|
|
540
|
+
/** Windows the user picked before, newest first. Owned by the caller. */
|
|
541
|
+
recentRanges?: TimeRangePreset[];
|
|
542
|
+
/** IANA zone used for rounding and display. */
|
|
543
|
+
timeZone?: string;
|
|
544
|
+
locale?: string;
|
|
545
|
+
/**
|
|
546
|
+
* Hold edits until the user commits them. A queried window is expensive;
|
|
547
|
+
* typing "now-3" should not fire three requests.
|
|
548
|
+
*/
|
|
549
|
+
showUpdateButton?: boolean;
|
|
550
|
+
/** Step the window back and forth, and widen or narrow it. */
|
|
551
|
+
showWindowButtons?: boolean;
|
|
552
|
+
/** Zoom-out step, as a fraction of the current width. */
|
|
553
|
+
zoomFactor?: number;
|
|
554
|
+
refresh?: RefreshSetting;
|
|
555
|
+
onRefreshChange?: (setting: RefreshSetting) => void;
|
|
556
|
+
/** Called by the refresh button and by each auto-refresh tick. */
|
|
557
|
+
onRefresh?: () => void | Promise<unknown>;
|
|
558
|
+
isLoading?: boolean;
|
|
559
|
+
disabled?: boolean;
|
|
560
|
+
className?: string;
|
|
561
|
+
labels?: TimeRangeControlLabels;
|
|
562
|
+
"aria-label"?: string;
|
|
563
|
+
}
|
|
564
|
+
/**
|
|
565
|
+
* TimeRangeControl — the window as an expression, not two frozen instants.
|
|
566
|
+
*
|
|
567
|
+
* Holding `{ from: "now-7d", to: "now" }` instead of a resolved pair is what
|
|
568
|
+
* makes a saved board, a shared link and an auto-refresh timer all mean the
|
|
569
|
+
* same thing tomorrow that they mean today. Around that sit the moves people
|
|
570
|
+
* actually make on a chart: jump to a named window, step the same width back
|
|
571
|
+
* and forth to compare, widen when the interesting thing is just off screen,
|
|
572
|
+
* and let it re-query on a timer while they watch.
|
|
573
|
+
*
|
|
574
|
+
* @example
|
|
575
|
+
* ```tsx
|
|
576
|
+
* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
|
|
577
|
+
*
|
|
578
|
+
* <TimeRangeControl
|
|
579
|
+
* value={range}
|
|
580
|
+
* onChange={setRange}
|
|
581
|
+
* timeZone="Asia/Seoul"
|
|
582
|
+
* showWindowButtons
|
|
583
|
+
* onRefresh={() => refetch()}
|
|
584
|
+
* />
|
|
585
|
+
* ```
|
|
586
|
+
*/
|
|
587
|
+
declare function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, locale, showUpdateButton, showWindowButtons, zoomFactor, refresh, onRefreshChange, onRefresh, isLoading, disabled, className, labels: customLabels, "aria-label": ariaLabel }: TimeRangeControlProps): import("react").JSX.Element;
|
|
588
|
+
declare namespace TimeRangeControl {
|
|
589
|
+
var displayName: string;
|
|
590
|
+
}
|
|
591
|
+
/**
|
|
592
|
+
* The windows most analytics tools open with. Exported so a caller gets a
|
|
593
|
+
* sensible list without inventing date math of their own.
|
|
594
|
+
*/
|
|
595
|
+
declare const DEFAULT_TIME_PRESETS: TimeRangePreset[];
|
|
596
|
+
//#endregion
|
|
597
|
+
//#region src/shells/time-series-panel.d.ts
|
|
598
|
+
/** Localized strings for the time series panel. */
|
|
599
|
+
interface TimeSeriesPanelLabels {
|
|
600
|
+
back?: string;
|
|
601
|
+
legend?: string;
|
|
602
|
+
control?: TimeRangeControlLabels;
|
|
603
|
+
}
|
|
604
|
+
/** Props for the time series panel. */
|
|
605
|
+
interface TimeSeriesPanelProps {
|
|
606
|
+
title?: ReactNode;
|
|
607
|
+
description?: ReactNode;
|
|
608
|
+
/** Extra controls for the header's right side. */
|
|
609
|
+
actions?: ReactNode;
|
|
610
|
+
data: TimeSeriesPoint[];
|
|
611
|
+
series: TimeSeriesDef[];
|
|
612
|
+
/** The queried window. Also pins the chart's axis. */
|
|
613
|
+
range: TimeRange;
|
|
614
|
+
onRangeChange: (range: TimeRange) => void;
|
|
615
|
+
granularity?: TimeGranularity | "auto";
|
|
616
|
+
timeZone?: string;
|
|
617
|
+
locale?: string;
|
|
618
|
+
/** Render the built-in time range control in the header. */
|
|
619
|
+
showRangeControl?: boolean;
|
|
620
|
+
presets?: TimeRangePreset[];
|
|
621
|
+
recentRanges?: TimeRangePreset[];
|
|
622
|
+
refresh?: RefreshSetting;
|
|
623
|
+
onRefreshChange?: (setting: RefreshSetting) => void;
|
|
624
|
+
onRefresh?: () => void | Promise<unknown>;
|
|
625
|
+
/** Legend entries can be clicked to hide a series. */
|
|
626
|
+
toggleableLegend?: boolean;
|
|
627
|
+
annotations?: TimeSeriesAnnotation[];
|
|
628
|
+
isLoading?: boolean;
|
|
629
|
+
height?: number;
|
|
630
|
+
className?: string;
|
|
631
|
+
/** Anything the chart itself accepts, for the cases this shell does not name. */
|
|
632
|
+
chartProps?: Omit<TimeSeriesChartProps, "data" | "series" | "from" | "to" | "granularity" | "timeZone" | "locale">;
|
|
633
|
+
labels?: TimeSeriesPanelLabels;
|
|
634
|
+
"aria-label"?: string;
|
|
635
|
+
}
|
|
636
|
+
/**
|
|
637
|
+
* TimeSeriesPanel — a chart you can steer.
|
|
638
|
+
*
|
|
639
|
+
* The point of putting the control and the chart in one component is the
|
|
640
|
+
* loop between them: drag across the plot and the window narrows to what you
|
|
641
|
+
* dragged, which re-queries, which redraws the axis you just picked. That
|
|
642
|
+
* only works if someone owns the step back out again — so zoom keeps a
|
|
643
|
+
* history, and the header offers the way back rather than leaving the reader
|
|
644
|
+
* to retype the range they came from.
|
|
645
|
+
*
|
|
646
|
+
* @example
|
|
647
|
+
* ```tsx
|
|
648
|
+
* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
|
|
649
|
+
*
|
|
650
|
+
* <TimeSeriesPanel
|
|
651
|
+
* title="Sessions"
|
|
652
|
+
* data={points}
|
|
653
|
+
* series={[{ dataKey: "sessions", name: "Sessions" }]}
|
|
654
|
+
* range={range}
|
|
655
|
+
* onRangeChange={setRange}
|
|
656
|
+
* onRefresh={() => refetch()}
|
|
657
|
+
* toggleableLegend
|
|
658
|
+
* />
|
|
659
|
+
* ```
|
|
660
|
+
*/
|
|
661
|
+
declare function TimeSeriesPanel({ title, description, actions, data, series, range, onRangeChange, granularity, timeZone, locale, showRangeControl, presets, recentRanges, refresh, onRefreshChange, onRefresh, toggleableLegend, annotations, isLoading, height, className, chartProps, labels: customLabels, "aria-label": ariaLabel }: TimeSeriesPanelProps): import("react").JSX.Element;
|
|
662
|
+
declare namespace TimeSeriesPanel {
|
|
663
|
+
var displayName: string;
|
|
664
|
+
}
|
|
665
|
+
//#endregion
|
|
666
|
+
//#region src/shells/log-table.d.ts
|
|
667
|
+
/**
|
|
668
|
+
* When a column gives up its space.
|
|
669
|
+
*
|
|
670
|
+
* Named steps rather than arbitrary widths because the breakpoints are
|
|
671
|
+
* container queries compiled by Tailwind, which cannot see a value computed at
|
|
672
|
+
* runtime. They are also the honest unit here: what matters is the order
|
|
673
|
+
* columns drop in, not the pixel each one leaves at.
|
|
674
|
+
*/
|
|
675
|
+
type LogColumnPriority = "always" | "sm" | "md" | "lg" | "xl";
|
|
676
|
+
/** One column of the log. */
|
|
677
|
+
interface LogColumn<Row> {
|
|
678
|
+
id: string;
|
|
679
|
+
header: ReactNode;
|
|
680
|
+
/**
|
|
681
|
+
* The field this column reads, as the query language names it. Set it and the
|
|
682
|
+
* cell offers "filter for / filter out"; leave it off for a derived column
|
|
683
|
+
* that no filter could express.
|
|
684
|
+
*/
|
|
685
|
+
field?: string;
|
|
686
|
+
/** CSS width. Omit on exactly one column to let it take the slack. */
|
|
687
|
+
width?: string;
|
|
688
|
+
priority?: LogColumnPriority;
|
|
689
|
+
align?: "left" | "right";
|
|
690
|
+
mono?: boolean;
|
|
691
|
+
sortable?: boolean;
|
|
692
|
+
/** The cell's text — also what a cell action filters on. */
|
|
693
|
+
value: (row: Row) => string | number | null | undefined;
|
|
694
|
+
/** Richer cell content. Falls back to `value`. */
|
|
695
|
+
render?: (row: Row) => ReactNode;
|
|
696
|
+
/**
|
|
697
|
+
* Draw a colour marker before the value, hashed from the value itself so the
|
|
698
|
+
* same one lands on the same hue in every session.
|
|
699
|
+
*/
|
|
700
|
+
marker?: boolean;
|
|
701
|
+
}
|
|
702
|
+
/** Which column the rows are ordered by. */
|
|
703
|
+
interface LogSort {
|
|
704
|
+
columnId: string;
|
|
705
|
+
direction: "asc" | "desc";
|
|
706
|
+
}
|
|
707
|
+
/** What a cell action asks the caller to do. */
|
|
708
|
+
interface LogCellAction {
|
|
709
|
+
field: string;
|
|
710
|
+
value: string;
|
|
711
|
+
intent: "include" | "exclude";
|
|
712
|
+
}
|
|
713
|
+
type LogDensity = "compact" | "normal" | "comfortable";
|
|
714
|
+
/** Localized strings for the log table. */
|
|
715
|
+
interface LogTableLabels {
|
|
716
|
+
listLabel?: string;
|
|
717
|
+
loadingMore?: string;
|
|
718
|
+
endOfResults?: string;
|
|
719
|
+
filterFor?: (value: string) => string;
|
|
720
|
+
filterOut?: (value: string) => string;
|
|
721
|
+
sortAscending?: string;
|
|
722
|
+
sortDescending?: string;
|
|
723
|
+
}
|
|
724
|
+
interface LogTableProps<Row> {
|
|
725
|
+
rows: Row[];
|
|
726
|
+
columns: LogColumn<Row>[];
|
|
727
|
+
getRowId: (row: Row) => string;
|
|
728
|
+
selectedId?: string | null;
|
|
729
|
+
onSelect?: (id: string) => void;
|
|
730
|
+
/** Fetch the next page. Called once when the viewport nears the end. */
|
|
731
|
+
onLoadMore?: () => void;
|
|
732
|
+
hasMore?: boolean;
|
|
733
|
+
loadingMore?: boolean;
|
|
734
|
+
/**
|
|
735
|
+
* Rows arrive at the top while the reader is scrolled down — a live tail.
|
|
736
|
+
* Turning this on holds their place when that happens and reports whether
|
|
737
|
+
* they are pinned to the newest row.
|
|
738
|
+
*/
|
|
739
|
+
prepending?: boolean;
|
|
740
|
+
onFollowChange?: (following: boolean) => void;
|
|
741
|
+
/** Highlight a row once, for entries that just arrived. */
|
|
742
|
+
isNew?: (row: Row) => boolean;
|
|
743
|
+
sort?: LogSort | null;
|
|
744
|
+
onSortChange?: (sort: LogSort) => void;
|
|
745
|
+
/** Offer "filter for / filter out" on cells whose column names a field. */
|
|
746
|
+
onCellAction?: (action: LogCellAction) => void;
|
|
747
|
+
density?: LogDensity;
|
|
748
|
+
showHeader?: boolean;
|
|
749
|
+
emptyState?: ReactNode;
|
|
750
|
+
labels?: LogTableLabels;
|
|
751
|
+
className?: string;
|
|
752
|
+
}
|
|
753
|
+
interface LogTableHandle {
|
|
754
|
+
/** Jump to the newest row. */
|
|
755
|
+
scrollToTop: () => void;
|
|
756
|
+
/** Bring a row into view, leaving the scroll alone if it already is. */
|
|
757
|
+
revealRow: (id: string) => void;
|
|
758
|
+
}
|
|
759
|
+
/**
|
|
760
|
+
* LogTable — a windowed table for entries that keep arriving.
|
|
761
|
+
*
|
|
762
|
+
* Written by hand rather than delegated to a data grid for the two things a log
|
|
763
|
+
* needs that a grid does not: rows are inserted at the *top* while the reader
|
|
764
|
+
* is partway down, which needs a scroll correction applied before paint, and
|
|
765
|
+
* "am I at the newest row?" has to be answerable from the scroll container to
|
|
766
|
+
* decide whether to follow the tail or hold position.
|
|
767
|
+
*
|
|
768
|
+
* What it takes from a data grid is the part readers actually reach for:
|
|
769
|
+
* columns are data, so a caller can let people add, drop and reorder them; a
|
|
770
|
+
* cell offers to filter for or against its own value; and density is a setting
|
|
771
|
+
* rather than a constant.
|
|
772
|
+
*
|
|
773
|
+
* @example
|
|
774
|
+
* ```tsx
|
|
775
|
+
* <LogTable
|
|
776
|
+
* rows={rows}
|
|
777
|
+
* getRowId={(row) => row.id}
|
|
778
|
+
* columns={[
|
|
779
|
+
* { id: "time", header: "Time", width: "9rem", mono: true, value: (r) => r.time },
|
|
780
|
+
* { id: "name", header: "Event", width: "14rem", field: "name", marker: true, value: (r) => r.name },
|
|
781
|
+
* { id: "path", header: "Path", field: "path", value: (r) => r.path },
|
|
782
|
+
* ]}
|
|
783
|
+
* onCellAction={(action) => setQuery(applyCellAction(query, action))}
|
|
784
|
+
* />
|
|
785
|
+
* ```
|
|
786
|
+
*/
|
|
787
|
+
declare function LogTableInner<Row>({ rows, columns, getRowId, selectedId, onSelect, onLoadMore, hasMore, loadingMore, prepending, onFollowChange, isNew, sort, onSortChange, onCellAction, density, showHeader, emptyState, labels: customLabels, className }: LogTableProps<Row>, ref: Ref<LogTableHandle>): import("react").JSX.Element;
|
|
788
|
+
/**
|
|
789
|
+
* LogTable — see {@link LogTableInner}.
|
|
790
|
+
*
|
|
791
|
+
* The cast preserves the row generic through `forwardRef`, which otherwise
|
|
792
|
+
* widens it to its constraint and takes the column callbacks' types with it.
|
|
793
|
+
*/
|
|
794
|
+
declare const LogTable: <Row>(props: LogTableProps<Row> & {
|
|
795
|
+
ref?: Ref<LogTableHandle>;
|
|
796
|
+
}) => ReturnType<typeof LogTableInner>;
|
|
797
|
+
//#endregion
|
|
798
|
+
//#region src/lib/query/query-ast.d.ts
|
|
799
|
+
/**
|
|
800
|
+
* A search query, as a value.
|
|
801
|
+
*
|
|
802
|
+
* Free-text search and a row of filter pickers answer different halves of the
|
|
803
|
+
* same question, and neither can express the other: a picker cannot say "not
|
|
804
|
+
* this", and a text box cannot say "this field, exactly". A parsed query is one
|
|
805
|
+
* thing that does both, and — because it is a value rather than a widget's
|
|
806
|
+
* internal state — it survives a URL, a saved view, and the trip to a server
|
|
807
|
+
* that has to turn it into a database filter.
|
|
808
|
+
*
|
|
809
|
+
* The grammar follows the one analytics tools have converged on (Elastic's
|
|
810
|
+
* `EuiSearchBar`, Kibana, GitHub's issue search), minus the parts that only
|
|
811
|
+
* make sense against a Lucene index:
|
|
812
|
+
*
|
|
813
|
+
* error a term anywhere in the row
|
|
814
|
+
* "connection reset" a phrase, kept together
|
|
815
|
+
* -health a term that must not appear
|
|
816
|
+
* path:/checkout a field equal to a value
|
|
817
|
+
* path:(/a or /b) a field equal to any of several values
|
|
818
|
+
* -status:200 a field that must not equal a value
|
|
819
|
+
* status>=500 a comparison
|
|
820
|
+
* path:*checkout* the field contains this somewhere
|
|
821
|
+
* utm_source:* the field is present at all
|
|
822
|
+
*
|
|
823
|
+
* Clauses combine with AND; `or` only groups values inside one field. That is
|
|
824
|
+
* a deliberate ceiling: arbitrary boolean nesting reads worse than it queries,
|
|
825
|
+
* and every backend this targets can express the restricted form directly.
|
|
826
|
+
*/
|
|
827
|
+
/** How a field clause compares. */
|
|
828
|
+
type QueryOperator = "eq" | "contains" | "gt" | "gte" | "lt" | "lte" | "exists";
|
|
829
|
+
/** A bare or quoted word matched against the whole row. */
|
|
830
|
+
interface QueryTermClause {
|
|
831
|
+
type: "term";
|
|
832
|
+
value: string;
|
|
833
|
+
negated: boolean;
|
|
834
|
+
}
|
|
835
|
+
/** A constraint on one named field. Several values read as "any of". */
|
|
836
|
+
interface QueryFieldClause {
|
|
837
|
+
type: "field";
|
|
838
|
+
field: string;
|
|
839
|
+
operator: QueryOperator;
|
|
840
|
+
values: string[];
|
|
841
|
+
negated: boolean;
|
|
842
|
+
}
|
|
843
|
+
type QueryClause = QueryTermClause | QueryFieldClause;
|
|
844
|
+
/** A parsed query: clauses combined with AND. */
|
|
845
|
+
interface Query {
|
|
846
|
+
clauses: QueryClause[];
|
|
847
|
+
}
|
|
848
|
+
declare const EMPTY_QUERY: Query;
|
|
849
|
+
/** Whether a query constrains anything at all. */
|
|
850
|
+
declare function isEmptyQuery(query: Query | null | undefined): boolean;
|
|
851
|
+
/** Add a clause unless an identical one is already there. */
|
|
852
|
+
declare function addClause(query: Query, clause: QueryClause): Query;
|
|
853
|
+
/**
|
|
854
|
+
* Constrain a field to a value — what a cell's "filter for this" action does.
|
|
855
|
+
*
|
|
856
|
+
* Applying the opposite of a constraint already present replaces it rather than
|
|
857
|
+
* adding it: `status:200` then "filter out 200" should read as one changed
|
|
858
|
+
* mind, not as a query that can never match.
|
|
859
|
+
*/
|
|
860
|
+
declare function withFieldValue(query: Query, field: string, value: string, options?: {
|
|
861
|
+
negated?: boolean;
|
|
862
|
+
operator?: QueryOperator;
|
|
863
|
+
}): Query;
|
|
864
|
+
/** Drop every clause naming `field`. */
|
|
865
|
+
declare function withoutField(query: Query, field: string): Query;
|
|
866
|
+
/** Drop the clause at `index`, for a removable chip. */
|
|
867
|
+
declare function removeClause(query: Query, index: number): Query;
|
|
868
|
+
/** Every field the query names, in the order they first appear. */
|
|
869
|
+
declare function queryFields(query: Query): string[];
|
|
870
|
+
/** The values a field is constrained to, if any — for showing a filter as active. */
|
|
871
|
+
declare function fieldValues(query: Query, field: string): string[];
|
|
872
|
+
/** What a "filter for / filter out" control on a value asks for. */
|
|
873
|
+
interface QueryCellAction {
|
|
874
|
+
field: string;
|
|
875
|
+
value: string;
|
|
876
|
+
intent: "include" | "exclude";
|
|
877
|
+
}
|
|
878
|
+
/**
|
|
879
|
+
* Fold a cell action into the query.
|
|
880
|
+
*
|
|
881
|
+
* The pair of buttons on a log cell is the fastest path from "I noticed this
|
|
882
|
+
* value" to a filtered view, and the reason it works is that the result is a
|
|
883
|
+
* query the reader can then see, edit and share — not a hidden filter stack
|
|
884
|
+
* with its own rules.
|
|
885
|
+
*/
|
|
886
|
+
declare function applyCellAction(query: Query, action: QueryCellAction): Query;
|
|
887
|
+
//#endregion
|
|
888
|
+
//#region src/shells/query-bar.d.ts
|
|
889
|
+
/** A field the query can constrain, offered as a completion. */
|
|
890
|
+
interface QueryField {
|
|
891
|
+
name: string;
|
|
892
|
+
/** Shown beside the name — a type, a count, whatever tells them apart. */
|
|
893
|
+
hint?: string;
|
|
894
|
+
/** Known values, offered once the reader has typed `field:`. */
|
|
895
|
+
values?: string[];
|
|
896
|
+
}
|
|
897
|
+
/** Localized strings for the query bar. */
|
|
898
|
+
interface QueryBarLabels {
|
|
899
|
+
placeholder?: string;
|
|
900
|
+
ariaLabel?: string;
|
|
901
|
+
clear?: string;
|
|
902
|
+
removeClause?: (clause: string) => string;
|
|
903
|
+
fieldsHeading?: string;
|
|
904
|
+
valuesHeading?: string;
|
|
905
|
+
syntaxHint?: ReactNode;
|
|
906
|
+
}
|
|
907
|
+
interface QueryBarProps {
|
|
908
|
+
value: Query;
|
|
909
|
+
onChange: (query: Query) => void;
|
|
910
|
+
/** Fields offered as completions, with their known values. */
|
|
911
|
+
fields?: QueryField[];
|
|
912
|
+
/** Show each clause as a removable chip below the input. */
|
|
913
|
+
showClauses?: boolean;
|
|
914
|
+
/** Commit on every keystroke instead of on Enter and blur. */
|
|
915
|
+
live?: boolean;
|
|
916
|
+
disabled?: boolean;
|
|
917
|
+
className?: string;
|
|
918
|
+
labels?: QueryBarLabels;
|
|
919
|
+
}
|
|
920
|
+
/**
|
|
921
|
+
* QueryBar — one control for "find this" and "only these".
|
|
922
|
+
*
|
|
923
|
+
* A search box and a row of filter pickers answer halves of the same question
|
|
924
|
+
* and neither can express the other, so people end up using both and holding
|
|
925
|
+
* the combination in their head. Typing the filter is what closes that: the
|
|
926
|
+
* whole question is one string, which means it can be read back, corrected in
|
|
927
|
+
* place, pasted to a colleague, and stored in a URL.
|
|
928
|
+
*
|
|
929
|
+
* The text is the source of truth while the reader is typing; the parsed query
|
|
930
|
+
* is committed on Enter or blur. Anything half-written parses to a plain term
|
|
931
|
+
* rather than an error, so the bar never argues with someone mid-word.
|
|
932
|
+
*
|
|
933
|
+
* @example
|
|
934
|
+
* ```tsx
|
|
935
|
+
* <QueryBar
|
|
936
|
+
* value={query}
|
|
937
|
+
* onChange={setQuery}
|
|
938
|
+
* fields={[{ name: "path", values: ["/checkout", "/cart"] }]}
|
|
939
|
+
* showClauses
|
|
940
|
+
* />
|
|
941
|
+
* ```
|
|
942
|
+
*/
|
|
943
|
+
declare function QueryBar({ value, onChange, fields, showClauses, live, disabled, className, labels: customLabels }: QueryBarProps): import("react").JSX.Element;
|
|
944
|
+
declare namespace QueryBar {
|
|
945
|
+
var displayName: string;
|
|
946
|
+
}
|
|
947
|
+
//#endregion
|
|
948
|
+
//#region src/shells/field-sidebar.d.ts
|
|
949
|
+
/** One value a field takes, with how often. */
|
|
950
|
+
interface FieldValueCount {
|
|
951
|
+
value: string;
|
|
952
|
+
count: number;
|
|
953
|
+
/** Share of the sampled rows, 0–1. Derived from counts when omitted. */
|
|
954
|
+
share?: number;
|
|
955
|
+
}
|
|
956
|
+
/** A field the reader can inspect, filter on, or put in the table. */
|
|
957
|
+
interface FieldSummary {
|
|
958
|
+
name: string;
|
|
959
|
+
/** Shown beside the name — "string", "number", a source, whatever separates them. */
|
|
960
|
+
type?: string;
|
|
961
|
+
/** Grouping header. Fields with the same group are listed together. */
|
|
962
|
+
group?: string;
|
|
963
|
+
/** True when the field is currently a column. */
|
|
964
|
+
inTable?: boolean;
|
|
965
|
+
/** False for fields that exist but cannot be a column (a nested object, say). */
|
|
966
|
+
columnable?: boolean;
|
|
967
|
+
}
|
|
968
|
+
/** Localized strings for the field sidebar. */
|
|
969
|
+
interface FieldSidebarLabels {
|
|
970
|
+
heading?: string;
|
|
971
|
+
searchPlaceholder?: string;
|
|
972
|
+
searchLabel?: string;
|
|
973
|
+
empty?: string;
|
|
974
|
+
addColumn?: (field: string) => string;
|
|
975
|
+
removeColumn?: (field: string) => string;
|
|
976
|
+
filterFor?: (value: string) => string;
|
|
977
|
+
filterOut?: (value: string) => string;
|
|
978
|
+
topValues?: (count: number) => string;
|
|
979
|
+
noValues?: string;
|
|
980
|
+
loadingValues?: string;
|
|
981
|
+
otherGroup?: string;
|
|
982
|
+
}
|
|
983
|
+
interface FieldSidebarProps {
|
|
984
|
+
fields: FieldSummary[];
|
|
985
|
+
/** The field whose values are open. Controlled so the caller can fetch them. */
|
|
986
|
+
expandedField?: string | null;
|
|
987
|
+
onExpandedFieldChange?: (field: string | null) => void;
|
|
988
|
+
/** Values for the expanded field. The caller fetches them on expansion. */
|
|
989
|
+
values?: FieldValueCount[];
|
|
990
|
+
valuesLoading?: boolean;
|
|
991
|
+
/** Rows the counts were taken over, for the reader to judge the sample by. */
|
|
992
|
+
sampledRows?: number;
|
|
993
|
+
onToggleColumn?: (field: string, next: boolean) => void;
|
|
994
|
+
onFilter?: (field: string, value: string, intent: "include" | "exclude") => void;
|
|
995
|
+
header?: ReactNode;
|
|
996
|
+
className?: string;
|
|
997
|
+
labels?: FieldSidebarLabels;
|
|
998
|
+
}
|
|
999
|
+
/**
|
|
1000
|
+
* FieldSidebar — what is in this data, and what does it contain.
|
|
1001
|
+
*
|
|
1002
|
+
* Without it, a log answers only the questions you already knew to ask: you can
|
|
1003
|
+
* filter on `utm_source` if you remember it exists, and you can read a value if
|
|
1004
|
+
* you open a row and scroll to it. Listing the fields turns that around — the
|
|
1005
|
+
* data tells the reader what is available — and the value counts answer the
|
|
1006
|
+
* question that actually follows ("mostly which?") before they have to run a
|
|
1007
|
+
* query to find out.
|
|
1008
|
+
*
|
|
1009
|
+
* Three actions live here because they are the three things people do next:
|
|
1010
|
+
* put the field in the table, keep only rows with a value, drop rows with it.
|
|
1011
|
+
*
|
|
1012
|
+
* @example
|
|
1013
|
+
* ```tsx
|
|
1014
|
+
* <FieldSidebar
|
|
1015
|
+
* fields={fields}
|
|
1016
|
+
* expandedField={openField}
|
|
1017
|
+
* onExpandedFieldChange={setOpenField}
|
|
1018
|
+
* values={valuesQuery.data}
|
|
1019
|
+
* valuesLoading={valuesQuery.isLoading}
|
|
1020
|
+
* onToggleColumn={(field, next) => setColumns(...)}
|
|
1021
|
+
* onFilter={(field, value, intent) => setQuery(applyCellAction(query, { field, value, intent }))}
|
|
1022
|
+
* />
|
|
1023
|
+
* ```
|
|
1024
|
+
*/
|
|
1025
|
+
declare function FieldSidebar({ fields, expandedField, onExpandedFieldChange, values, valuesLoading, sampledRows, onToggleColumn, onFilter, header, className, labels: customLabels }: FieldSidebarProps): import("react").JSX.Element;
|
|
1026
|
+
declare namespace FieldSidebar {
|
|
1027
|
+
var displayName: string;
|
|
1028
|
+
}
|
|
1029
|
+
//#endregion
|
|
1030
|
+
export { FailureListProps as $, LogTable as A, SidebarNav as At, TimeRangeControlLabels as B, CommandPaletteTrigger as Bt, withFieldValue as C, SettingsFormProps as Ct, LogColumnPriority as D, ContentTabsProps as Dt, LogColumn as E, ContentTabs as Et, TimeSeriesPanelLabels as F, StatusSelectProps as Ft, WorkflowCanvasProps as G, TimeRangePreset as H, CommandPalette as Ht, TimeSeriesPanelProps as I, SearchCombobox as It, KeyValueEditorLabels as J, WorkflowCanvasStep as K, DEFAULT_TIME_PRESETS as L, SearchComboboxProps as Lt, LogTableLabels as M, AppMenubar as Mt, LogTableProps as N, AppMenubarProps as Nt, LogDensity as O, EditorToolbar as Ot, TimeSeriesPanel as P, StatusSelect as Pt, FailureListLabels as Q, RefreshSetting as R, DashboardGrid as Rt, removeClause as S, SettingsForm as St, LogCellAction as T, FaqAccordionProps as Tt, WorkflowCanvas as U, CommandPaletteProps as Ut, TimeRangeControlProps as V, CommandPaletteTriggerProps as Vt, WorkflowCanvasConnection as W, KeyValueEntry as X, KeyValueEditorProps as Y, FailureList as Z, addClause as _, EnvPanelProps as _t, FieldValueCount as a, ToastProviderProps as at, isEmptyQuery as b, DeploymentTimeline as bt, QueryBarProps as c, useToast as ct, Query as d, DataTableProps as dt, NotificationToast as et, QueryCellAction as f, DomainTable as ft, QueryTermClause as g, EnvPanel as gt, QueryOperator as h, BranchSelectProps as ht, FieldSummary as i, ToastProvider as it, LogTableHandle as j, SidebarNavProps as jt, LogSort as k, EditorToolbarProps as kt, QueryField as l, ColumnDef as lt, QueryFieldClause as m, BranchSelect as mt, FieldSidebarLabels as n, ToastContextValue as nt, QueryBar as o, ToastVariant as ot, QueryClause as p, DomainTableProps as pt, KeyValueEditor as q, FieldSidebarProps as r, ToastMessage as rt, QueryBarLabels as s, toast as st, FieldSidebar as t, ToastAction as tt, EMPTY_QUERY as u, DataTable as ut, applyCellAction as v, ProjectSwitcher as vt, withoutField as w, FaqAccordion as wt, queryFields as x, DeploymentTimelineProps as xt, fieldValues as y, ProjectSwitcherProps as yt, TimeRangeControl as z, DashboardGridProps as zt };
|
|
1031
|
+
//# sourceMappingURL=field-sidebar-BTZCBviA.d.cts.map
|