diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx index 13e2278ba5d..18cc44d8c2e 100644 --- a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx +++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx @@ -35,21 +35,19 @@ import { WorkerSnippetTabs } from '../WorkerSnippetTabs' import { WorkerStatePill } from '../WorkerStatePill' import { WorkerLogsTab } from './WorkerLogsTab' import { WorkerOverviewTab } from './WorkerOverviewTab' -import { WorkerSettingsTab } from './WorkerSettingsTab' import { AlertError } from '@/components/ui/AlertError' import type { WorkerLogStream } from '@/data/workers/worker-logs-query' import { workerQueryOptions } from '@/data/workers/worker-query' import { PRODUCT_NAME } from '@/lib/constants/workers' -type WorkerTab = 'overview' | 'invocations' | 'logs' | 'activity' | 'settings' -const WORKER_TABS: WorkerTab[] = ['overview', 'invocations', 'logs', 'activity', 'settings'] +type WorkerTab = 'overview' | 'invocations' | 'logs' | 'activity' +const WORKER_TABS: WorkerTab[] = ['overview', 'invocations', 'logs', 'activity'] const TAB_LABEL: Record = { overview: 'Overview', invocations: 'Invocations', logs: 'Logs', activity: 'Activity', - settings: 'Settings', } const TAB_STREAM: Partial> = { @@ -171,7 +169,6 @@ export const WorkerDetail = () => { )} - {tab === 'settings' && } ) } diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx index e5f8b98ff55..9c455b66645 100644 --- a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx +++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react' +import { Badge } from 'ui' import { Admonition } from 'ui-patterns/Admonition' import { InfoTooltip } from 'ui-patterns/info-tooltip' import { PageContainer } from 'ui-patterns/PageContainer' @@ -11,8 +12,12 @@ import { PageSectionTitle, } from 'ui-patterns/PageSection' +import { RuntimeBadge } from '../RuntimeBadge' import { WorkerCommandLine } from '../WorkerCommandLine' +import { LISTENING_PORT, WORKERS_REGION_LABEL } from '../Workers.constants' import type { Worker } from '../Workers.types' +import { formatSize, getRuntimeMeta } from '../Workers.utils' +import { buildWorkerCliCommands } from '../workerSnippets' import { WorkerSnippetTabs } from '../WorkerSnippetTabs' import { CLI_NAME } from '@/lib/constants/workers' @@ -40,100 +45,216 @@ const InstanceCount = ({ ) -export const WorkerOverviewTab = ({ worker }: WorkerOverviewTabProps) => ( - - {worker.buildState === 'failed' && ( - - - -
-

{worker.stateReason ?? 'The build did not complete.'}

- -
-
-
-
- )} - - {worker.instancesError !== undefined && ( - - - - {worker.instancesError} - - - - )} - - - - - Instances - - - - {worker.instances === undefined ? ( -

- No instances are running for this worker yet. -

- ) : ( -
-

- {worker.instances.ready} of{' '} - {worker.instances.declared}{' '} - instances ready -

-
- - - - -
-
- )} -
-
- - - - - How to call - - Call the worker over its gateway URL. Pass your project API key as a bearer token. - - - - - - - -
+const SettingsRow = ({ + label, + children, + isFirst, +}: { + label: string + children: ReactNode + isFirst?: boolean +}) => ( +
+ {label} + {children} +
) + +export const WorkerOverviewTab = ({ worker }: WorkerOverviewTabProps) => { + const runtime = getRuntimeMeta(worker.runtime) + const commands = buildWorkerCliCommands(worker.name) + + return ( + + {worker.buildState === 'failed' && ( + + + +
+

{worker.stateReason ?? 'The build did not complete.'}

+ +
+
+
+
+ )} + + {worker.instancesError !== undefined && ( + + + + {worker.instancesError} + + + + )} + + + + + Instances + + + + {worker.instances === undefined ? ( +

+ No instances are running for this worker yet. +

+ ) : ( +
+

+ {worker.instances.ready} of{' '} + {worker.instances.declared}{' '} + instances ready +

+
+ + + + +
+
+ )} +
+
+ + + + + Container + + The runtime image and entrypoint resolved for this worker. + + + + +
+ + + + {worker.imageVersion !== undefined && ( + + + {worker.imageVersion} + + + )} + {runtime !== undefined && ( + + {runtime.baseImage} + + )} + {runtime !== undefined && ( + + + {runtime.entrypoint} + + + )} + + + $PORT → {LISTENING_PORT} + + +
+
+
+ + + + + Resources + + + +
+ + {formatSize(worker.size)} + + {worker.declaredInstances} + + {worker.access === 'public' ? ( + Public + ) : ( + Private + )} + + + + {WORKERS_REGION_LABEL} (locked) + + +
+
+
+ + + + + How to call + + Call the worker over its gateway URL. Pass your project API key as a bearer token. + + + + + + + + + + + + Develop locally + + Manage this worker from the Supabase CLI. + + + + +
+ {commands.map((command) => ( + + ))} +
+
+
+
+ ) +} diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerSettingsTab.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerSettingsTab.tsx deleted file mode 100644 index 357707ff152..00000000000 --- a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerSettingsTab.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { ReactNode } from 'react' -import { Badge } from 'ui' -import { PageContainer } from 'ui-patterns/PageContainer' -import { - PageSection, - PageSectionContent, - PageSectionDescription, - PageSectionMeta, - PageSectionSummary, - PageSectionTitle, -} from 'ui-patterns/PageSection' - -import { RuntimeBadge } from '../RuntimeBadge' -import { WorkerCommandLine } from '../WorkerCommandLine' -import { LISTENING_PORT, WORKERS_REGION_LABEL } from '../Workers.constants' -import type { Worker } from '../Workers.types' -import { formatSize, getRuntimeMeta } from '../Workers.utils' -import { buildWorkerCliCommands } from '../workerSnippets' -import { WorkerSnippetTabs } from '../WorkerSnippetTabs' - -interface WorkerSettingsTabProps { - worker: Worker -} - -const SettingsRow = ({ - label, - children, - isFirst, -}: { - label: string - children: ReactNode - isFirst?: boolean -}) => ( -
- {label} - {children} -
-) - -export const WorkerSettingsTab = ({ worker }: WorkerSettingsTabProps) => { - const runtime = getRuntimeMeta(worker.runtime) - const commands = buildWorkerCliCommands(worker.name) - - const snippetInput = { - name: worker.name, - runtime: worker.runtime, - size: worker.size, - access: worker.access, - instances: worker.declaredInstances, - } - - return ( - <> - - - - - Container - - The runtime image and entrypoint resolved for this worker. - - - - -
- - - - {worker.imageVersion !== undefined && ( - - - {worker.imageVersion} - - - )} - {runtime !== undefined && ( - - - {runtime.baseImage} - - - )} - {runtime !== undefined && ( - - - {runtime.entrypoint} - - - )} - - - $PORT → {LISTENING_PORT} - - -
-
-
- - - - - Resources - - - -
- - {formatSize(worker.size)} - - {worker.declaredInstances} - - {worker.access === 'public' ? ( - Public - ) : ( - Private - )} - - - - {WORKERS_REGION_LABEL} (locked) - - -
-
-
- - - - - Invoke worker - - Call the worker over its gateway URL. Pass your project API key as a bearer token. - - - - - - - - - - - - Develop locally - - Manage this worker from the Supabase CLI. - - - - -
- {commands.map((command) => ( - - ))} -
-
-
-
- - ) -}