phughk/ottyl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Resolve ui stuff

Browse Source
This commit is contained in:
Hugh Kaznowski
2026-09-05 18:00:56 +01:00
parent 00c21c8032
commit 070e835fa4
11 changed files with 350 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/Dashboards.tsx
+33 -14
View File
@@ -14,7 +14,13 @@ import {
type Panel,
type PromqlSeries,
} from '../lib/api'
import { CollapseToggle, PopOutButton, useSectionCollapsed } from './CollapsibleSection'
import {
CollapseToggle,
PopOutButton,
sectionHeaderClassName,
sectionHeaderLeftClassName,
useSectionCollapsed,
} from './CollapsibleSection'
import { HelpIcon } from './HelpIcon'
const CHART_TYPES: ChartType[] = ['line', 'bar', 'pie']
@@ -210,27 +216,40 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
if (!activeProfile) {
return (
<div className="flex items-center gap-1.5 border-b border-border p-3 text-xs text-text-faint">
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
<CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
<PopOutButton section="dashboards" range={range} />
Dashboards — activate a profile (see the settings menu) to create and save dashboards.
<div className="border-b border-border text-sm">
<div className={sectionHeaderClassName}>
<div className={sectionHeaderLeftClassName}>
Dashboards
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
</div>
<div className="flex items-center gap-1.5">
<CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
<PopOutButton section="dashboards" range={range} />
</div>
</div>
<div className="p-3 text-xs text-text-faint">
Activate a profile (see the settings menu) to create and save dashboards.
</div>
</div>
)
}
return (
<div className="border-b border-border p-3 text-sm">
<div className="mb-2 flex items-center gap-1.5 text-xs text-text-subtle">
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
<CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
<PopOutButton section="dashboards" range={range} />
Dashboards — profile "{activeProfile}"
<div className="border-b border-border text-sm">
<div className={sectionHeaderClassName}>
<div className={sectionHeaderLeftClassName}>
Dashboards — profile "{activeProfile}"
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
</div>
<div className="flex items-center gap-1.5">
<CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
<PopOutButton section="dashboards" range={range} />
</div>
</div>
{error && !collapsed && (
<div className="mb-2 rounded border border-danger-border bg-danger-bg/50 px-2 py-1 text-xs text-danger-text">{error}</div>
<div className="mx-3 mt-3 rounded border border-danger-border bg-danger-bg/50 px-2 py-1 text-xs text-danger-text">{error}</div>
)}
<div className="flex gap-4" hidden={collapsed}>
<div className="flex gap-4 p-3" hidden={collapsed}>
<div className="w-56 shrink-0 space-y-3">
<form onSubmit={handleCreateDashboard} className="flex gap-1">
<input