From d8b1ccdc9904f23d970b181017d76f175b4b9471 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Mon, 18 Mar 2024 14:12:50 +0800 Subject: [PATCH 1/2] feat: show the startup status of the plugin Signed-off-by: Ryan Wang --- .../modules/system/plugins/PluginList.vue | 21 ++- .../plugins/components/PluginListItem.vue | 170 ++++++++++-------- .../system/plugins/composables/use-plugin.ts | 9 +- ui/src/locales/en.yaml | 1 + ui/src/locales/zh-CN.yaml | 1 + ui/src/locales/zh-TW.yaml | 1 + 6 files changed, 125 insertions(+), 78 deletions(-) diff --git a/ui/console-src/modules/system/plugins/PluginList.vue b/ui/console-src/modules/system/plugins/PluginList.vue index 87241bc52d..7aeef5ee65 100644 --- a/ui/console-src/modules/system/plugins/PluginList.vue +++ b/ui/console-src/modules/system/plugins/PluginList.vue @@ -19,7 +19,7 @@ import { computed, ref, onMounted } from "vue"; import { apiClient } from "@/utils/api-client"; import { usePermission } from "@/utils/permission"; import { useQuery } from "@tanstack/vue-query"; -import type { Plugin } from "@halo-dev/api-client"; +import { PluginStatusPhaseEnum, type Plugin } from "@halo-dev/api-client"; import { useI18n } from "vue-i18n"; import { useRouteQuery } from "@vueuse/router"; import { watch } from "vue"; @@ -71,11 +71,26 @@ const { data, isLoading, isFetching, refetch } = useQuery({ }, keepPreviousData: true, refetchInterval: (data) => { - const deletingPlugins = data?.filter( + const hasDeletingData = data?.some( (plugin) => !!plugin.metadata.deletionTimestamp ); - return deletingPlugins?.length ? 2000 : false; + if (hasDeletingData) { + return 1000; + } + + const hasStartingData = data?.some( + (plugin) => + plugin.spec.enabled && + plugin.status?.phase !== + (PluginStatusPhaseEnum.Started || PluginStatusPhaseEnum.Failed) + ); + + if (hasStartingData) { + return 3000; + } + + return false; }, }); diff --git a/ui/console-src/modules/system/plugins/components/PluginListItem.vue b/ui/console-src/modules/system/plugins/components/PluginListItem.vue index a5916c70e3..53340a9d5e 100644 --- a/ui/console-src/modules/system/plugins/components/PluginListItem.vue +++ b/ui/console-src/modules/system/plugins/components/PluginListItem.vue @@ -9,7 +9,7 @@ import { } from "@halo-dev/components"; import { inject, toRefs, markRaw } from "vue"; import { usePluginLifeCycle } from "../composables/use-plugin"; -import type { Plugin } from "@halo-dev/api-client"; +import { PluginStatusPhaseEnum, type Plugin } from "@halo-dev/api-client"; import { formatDatetime } from "@/utils/date"; import { usePermission } from "@/utils/permission"; import { apiClient } from "@/utils/api-client"; @@ -149,86 +149,112 @@ const { operationItems } = useOperationItemExtensionPoint( const { startFields, endFields } = useEntityFieldItemExtensionPoint( "plugin:list-item:field:create", plugin, - computed((): EntityFieldItem[] => [ - { - position: "start", - priority: 10, - component: markRaw(LogoField), - props: { - plugin: props.plugin, + computed((): EntityFieldItem[] => { + const { enabled } = props.plugin.spec || {}; + const { phase } = props.plugin.status || {}; + + const shouldHideStatusDot = + !enabled || (enabled && phase === PluginStatusPhaseEnum.Started); + + const statusDotText = + enabled && + phase !== (PluginStatusPhaseEnum.Started || PluginStatusPhaseEnum.Failed) + ? t("core.common.status.starting_up") + : undefined; + + const getStatusDotState = () => { + if ( + enabled && + phase !== + (PluginStatusPhaseEnum.Started || PluginStatusPhaseEnum.Failed) + ) { + return "default"; + } + return "error"; + }; + + return [ + { + position: "start", + priority: 10, + component: markRaw(LogoField), + props: { + plugin: props.plugin, + }, }, - }, - { - position: "start", - priority: 20, - component: markRaw(VEntityField), - props: { - title: props.plugin.spec.displayName, - description: props.plugin.spec.description, - route: { - name: "PluginDetail", - params: { name: props.plugin.metadata.name }, + { + position: "start", + priority: 20, + component: markRaw(VEntityField), + props: { + title: props.plugin.spec.displayName, + description: props.plugin.spec.description, + route: { + name: "PluginDetail", + params: { name: props.plugin.metadata.name }, + }, }, }, - }, - { - position: "end", - priority: 10, - component: markRaw(StatusDotField), - props: { - tooltip: getFailedMessage(), - state: "error", - animate: true, + { + position: "end", + priority: 10, + component: markRaw(StatusDotField), + props: { + tooltip: getFailedMessage(), + state: getStatusDotState(), + animate: true, + text: statusDotText, + }, + hidden: shouldHideStatusDot, }, - hidden: props.plugin.status?.phase !== "FAILED", - }, - { - position: "end", - priority: 20, - component: markRaw(StatusDotField), - props: { - tooltip: t("core.common.status.deleting"), - state: "warning", - animate: true, + { + position: "end", + priority: 20, + component: markRaw(StatusDotField), + props: { + tooltip: t("core.common.status.deleting"), + state: "warning", + animate: true, + }, + hidden: !props.plugin.metadata.deletionTimestamp, }, - hidden: !props.plugin.metadata.deletionTimestamp, - }, - { - position: "end", - priority: 30, - component: markRaw(AuthorField), - props: { - plugin: props.plugin, + { + position: "end", + priority: 30, + component: markRaw(AuthorField), + props: { + plugin: props.plugin, + }, + hidden: !props.plugin.spec.author, }, - hidden: !props.plugin.spec.author, - }, - { - position: "end", - priority: 40, - component: markRaw(VEntityField), - props: { - description: props.plugin.spec.version, + { + position: "end", + priority: 40, + component: markRaw(VEntityField), + props: { + description: props.plugin.spec.version, + }, }, - }, - { - position: "end", - priority: 50, - component: markRaw(VEntityField), - props: { - description: formatDatetime(props.plugin.metadata.creationTimestamp), + { + position: "end", + priority: 50, + component: markRaw(VEntityField), + props: { + description: formatDatetime(props.plugin.metadata.creationTimestamp), + }, + hidden: !props.plugin.metadata.creationTimestamp, }, - hidden: !props.plugin.metadata.creationTimestamp, - }, - { - position: "end", - priority: 60, - component: markRaw(SwitchField), - props: { - plugin: props.plugin, + { + position: "end", + priority: 60, + component: markRaw(SwitchField), + props: { + plugin: props.plugin, + }, + permissions: ["system:plugins:manage"], }, - permissions: ["system:plugins:manage"], - }, - ]) + ]; + }) );