From 5fa0295ff5774cb3b95222e988be52ab4cd3c5f4 Mon Sep 17 00:00:00 2001 From: Christian Byrne Date: Tue, 25 Nov 2025 15:34:34 -0800 Subject: [PATCH] feat: update About panel (system stats and version info) to work on cloud (#6940) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Updates the About Panel in the settings to work with the cloud-specific `GET /system_stats` response schema. | Before | After | | ------ | ----- | | Selection_2392 | Selection_2391 | ## Screenshots (if applicable) OSS version stays the same: Selection_2393 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6940-feat-update-About-panel-system-stats-and-version-info-to-work-on-cloud-2b66d73d365081f69b6fedfe9507ba92) by [Unito](https://www.unito.io) --- .../shared-frontend-utils/src/formatUtil.ts | 11 ++ src/components/common/SystemStatsPanel.vue | 100 ++++++++++++------ src/schemas/apiSchema.ts | 6 +- src/stores/aboutPanelStore.ts | 8 +- 4 files changed, 89 insertions(+), 36 deletions(-) diff --git a/packages/shared-frontend-utils/src/formatUtil.ts b/packages/shared-frontend-utils/src/formatUtil.ts index cb1a0d1a3..032d1c9ed 100644 --- a/packages/shared-frontend-utils/src/formatUtil.ts +++ b/packages/shared-frontend-utils/src/formatUtil.ts @@ -75,6 +75,17 @@ export function formatSize(value?: number) { return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}` } +/** + * Formats a commit hash by truncating long (40-char) hashes to 7 chars. + * Returns the original string if not a valid full commit hash. + */ +export function formatCommitHash(value: string): string { + if (/^[a-f0-9]{40}$/i.test(value)) { + return value.slice(0, 7) + } + return value +} + /** * Returns various filename components. * Example: diff --git a/src/components/common/SystemStatsPanel.vue b/src/components/common/SystemStatsPanel.vue index 1d3612aa2..5d3cd8965 100644 --- a/src/components/common/SystemStatsPanel.vue +++ b/src/components/common/SystemStatsPanel.vue @@ -9,29 +9,31 @@
{{ col.header }}
-
{{ formatValue(systemInfo[col.field], col.field) }}
+
{{ getDisplayValue(col) }}
- + @@ -42,8 +44,9 @@ import TabView from 'primevue/tabview' import { computed } from 'vue' import DeviceInfo from '@/components/common/DeviceInfo.vue' +import { isCloud } from '@/platform/distribution/types' import type { SystemStats } from '@/schemas/apiSchema' -import { formatSize } from '@/utils/formatUtil' +import { formatCommitHash, formatSize } from '@/utils/formatUtil' const props = defineProps<{ stats: SystemStats @@ -54,20 +57,53 @@ const systemInfo = computed(() => ({ argv: props.stats.system.argv.join(' ') })) -const systemColumns: { field: keyof SystemStats['system']; header: string }[] = - [ - { field: 'os', header: 'OS' }, - { field: 'python_version', header: 'Python Version' }, - { field: 'embedded_python', header: 'Embedded Python' }, - { field: 'pytorch_version', header: 'Pytorch Version' }, - { field: 'argv', header: 'Arguments' }, - { field: 'ram_total', header: 'RAM Total' }, - { field: 'ram_free', header: 'RAM Free' } - ] +const hasDevices = computed(() => props.stats.devices.length > 0) -const formatValue = (value: any, field: string) => { - if (['ram_total', 'ram_free'].includes(field)) { - return formatSize(value) +type SystemInfoKey = keyof SystemStats['system'] + +type ColumnDef = { + field: SystemInfoKey + header: string + format?: (value: string) => string + formatNumber?: (value: number) => string +} + +/** Columns for local distribution */ +const localColumns: ColumnDef[] = [ + { field: 'os', header: 'OS' }, + { field: 'python_version', header: 'Python Version' }, + { field: 'embedded_python', header: 'Embedded Python' }, + { field: 'pytorch_version', header: 'Pytorch Version' }, + { field: 'argv', header: 'Arguments' }, + { field: 'ram_total', header: 'RAM Total', formatNumber: formatSize }, + { field: 'ram_free', header: 'RAM Free', formatNumber: formatSize } +] + +/** Columns for cloud distribution */ +const cloudColumns: ColumnDef[] = [ + { field: 'cloud_version', header: 'Cloud Version' }, + { + field: 'comfyui_version', + header: 'ComfyUI Version', + format: formatCommitHash + }, + { + field: 'comfyui_frontend_version', + header: 'Frontend Version', + format: formatCommitHash + }, + { field: 'workflow_templates_version', header: 'Templates Version' } +] + +const systemColumns = computed(() => (isCloud ? cloudColumns : localColumns)) + +const getDisplayValue = (column: ColumnDef) => { + const value = systemInfo.value[column.field] + if (column.formatNumber && typeof value === 'number') { + return column.formatNumber(value) + } + if (column.format && typeof value === 'string') { + return column.format(value) } return value } diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts index abf2a0b78..653dbcf5d 100644 --- a/src/schemas/apiSchema.ts +++ b/src/schemas/apiSchema.ts @@ -334,7 +334,11 @@ const zSystemStats = z.object({ required_frontend_version: z.string().optional(), argv: z.array(z.string()), ram_total: z.number(), - ram_free: z.number() + ram_free: z.number(), + // Cloud-specific fields + cloud_version: z.string().optional(), + comfyui_frontend_version: z.string().optional(), + workflow_templates_version: z.string().optional() }), devices: z.array(zDeviceStats) }) diff --git a/src/stores/aboutPanelStore.ts b/src/stores/aboutPanelStore.ts index 869550e60..f2f0829c3 100644 --- a/src/stores/aboutPanelStore.ts +++ b/src/stores/aboutPanelStore.ts @@ -2,8 +2,10 @@ import { defineStore } from 'pinia' import { computed } from 'vue' import { useExternalLink } from '@/composables/useExternalLink' +import { isCloud } from '@/platform/distribution/types' import type { AboutPageBadge } from '@/types/comfy' import { electronAPI, isElectron } from '@/utils/envUtil' +import { formatCommitHash } from '@/utils/formatUtil' import { useExtensionStore } from './extensionStore' import { useSystemStatsStore } from './systemStatsStore' @@ -24,10 +26,10 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => { label: `ComfyUI ${ isElectron() ? 'v' + electronAPI().getComfyUIVersion() - : coreVersion.value + : formatCommitHash(coreVersion.value) }`, - url: staticUrls.github, - icon: 'pi pi-github' + url: isCloud ? staticUrls.comfyOrg : staticUrls.github, + icon: isCloud ? 'pi pi-cloud' : 'pi pi-github' }, { label: `ComfyUI_frontend v${frontendVersion}`,