alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(services): apply formatter to App and ServicesPage

Browse Source
This commit is contained in:
Developer
2026-06-23 11:07:19 +00:00
parent c9c72be0b6
commit 9a6cbfae68
2 changed files with 50 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+8 -2
View File
@@ -454,7 +454,10 @@ function AppInner() {
<Route path="/observability" element={<ObservabilityPage />} />
<Route path="/settings" element={<Settings />} />
<Route path="/services" element={<ServicesPage />} />
<Route path="/services/:serviceType/:serviceId" element={<ServicePage />} />
<Route
path="/services/:serviceType/:serviceId"
element={<ServicePage />}
/>
</Route>
</Routes>
</BrowserRouter>
@@ -487,7 +490,10 @@ function AppInner() {
<Route path="/observability" element={<ObservabilityPage />} />
<Route path="/settings" element={<Settings />} />
<Route path="/services" element={<ServicesPage />} />
<Route path="/services/:serviceType/:serviceId" element={<ServicePage />} />
<Route
path="/services/:serviceType/:serviceId"
element={<ServicePage />}
/>
</Route>
</Routes>
</BrowserRouter>
frontend/src/pages/ServicesPage.tsx
+42 -12
View File
@@ -57,7 +57,9 @@ function Field({
<div className="flex flex-col gap-1.5">
<Label htmlFor={htmlFor}>{label}</Label>
{children}
{helper ? <p className="text-xs text-muted-foreground">{helper}</p> : null}
{helper ? (
<p className="text-xs text-muted-foreground">{helper}</p>
) : null}
</div>
);
}
@@ -71,13 +73,23 @@ function ServiceConfigFields({
config: Record<string, unknown>;
onChange: (config: Record<string, unknown>) => void;
}) {
const properties = (type.config_schema as { properties?: Record<string, { type?: string; description?: string }> }).properties ?? {};
const properties =
(
type.config_schema as {
properties?: Record<string, { type?: string; description?: string }>;
}
).properties ?? {};
return (
<div className="flex flex-col gap-3">
{Object.entries(properties).map(([key, schema]) => {
const isNumber = schema.type === "integer" || schema.type === "number";
return (
<Field key={key} label={key} htmlFor={`cfg-${key}`} helper={schema.description}>
<Field
key={key}
label={key}
htmlFor={`cfg-${key}`}
helper={schema.description}
>
<Input
id={`cfg-${key}`}
type={isNumber ? "number" : "text"}
@@ -123,7 +135,9 @@ function ServiceSecretFields({
id={`secret-${field.key}`}
type="password"
value={secrets[field.key] ?? ""}
onChange={(e) => onChange({ ...secrets, [field.key]: e.target.value })}
onChange={(e) =>
onChange({ ...secrets, [field.key]: e.target.value })
}
/>
</Field>
))}
@@ -193,7 +207,9 @@ function CreateServiceDialog({
</div>
) : (
<>
<p className="text-sm text-muted-foreground">{selectedType?.description}</p>
<p className="text-sm text-muted-foreground">
{selectedType?.description}
</p>
<Field label="Name" htmlFor="service-name">
<Input
id="service-name"
@@ -219,7 +235,9 @@ function CreateServiceDialog({
<Switch
id="service-enabled"
checked={draft.enabled}
onCheckedChange={(checked) => setDraft({ ...draft, enabled: checked })}
onCheckedChange={(checked) =>
setDraft({ ...draft, enabled: checked })
}
/>
<Label htmlFor="service-enabled">Enabled</Label>
</div>
@@ -258,7 +276,9 @@ export function ServicesPage() {
}, [services]);
const typeName = (t: string) =>
types.find((x) => x.service_type === t)?.name ?? getServiceBinding(t)?.name ?? t;
types.find((x) => x.service_type === t)?.name ??
getServiceBinding(t)?.name ??
t;
return (
<div className="flex flex-col gap-4">
@@ -275,14 +295,17 @@ export function ServicesPage() {
{services.length === 0 ? (
<Alert>
<AlertDescription>
No services yet. Add a Grafana, Prometheus, Jellyfin, Nextcloud, or SSH task runner.
No services yet. Add a Grafana, Prometheus, Jellyfin, Nextcloud,
or SSH task runner.
</AlertDescription>
</Alert>
) : (
<div className="flex flex-col gap-4">
{grouped.map(([serviceType, instances]) => (
<div key={serviceType} className="flex flex-col gap-2">
<div className="text-sm font-medium">{typeName(serviceType)}</div>
<div className="text-sm font-medium">
{typeName(serviceType)}
</div>
<div className="flex flex-col gap-2">
{instances.map((s) => (
<div
@@ -293,7 +316,9 @@ export function ServicesPage() {
<div className="flex items-center gap-2">
<span className="font-medium">{s.name}</span>
<Badge variant="outline">{s.service_type}</Badge>
{!s.enabled ? <Badge variant="secondary">disabled</Badge> : null}
{!s.enabled ? (
<Badge variant="secondary">disabled</Badge>
) : null}
{Object.entries(s.secrets_set).some(([, v]) => v) ? (
<Badge variant="outline">secrets set</Badge>
) : null}
@@ -303,7 +328,9 @@ export function ServicesPage() {
<Button
variant="ghost"
size="sm"
onClick={() => navigate(`/services/${s.service_type}/${s.id}`)}
onClick={() =>
navigate(`/services/${s.service_type}/${s.id}`)
}
>
Open <ExternalLink className="ml-1 h-3 w-3" />
</Button>
@@ -325,7 +352,10 @@ export function ServicesPage() {
)}
</SectionCard>
<CreateServiceDialog open={createOpen} onClose={() => setCreateOpen(false)} />
<CreateServiceDialog
open={createOpen}
onClose={() => setCreateOpen(false)}
/>
<ConfirmDialog
open={Boolean(deleteId)}
title="Delete service?"