feat: show the startup status of the plugin

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<Plugin[]>({
  },
  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;
  },
 });
 

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<Plugin>(
 const { startFields, endFields } = useEntityFieldItemExtensionPoint<Plugin>(
  "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"],
- },
- ])
+ ];
+ })
 );
 </script>
 <template>

ui/console-src/modules/system/plugins/composables/use-plugin.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from "vue";
 import { computed } from "vue";
-import { type Plugin } from "@halo-dev/api-client";
+import { PluginStatusPhaseEnum, type Plugin } from "@halo-dev/api-client";
 import { cloneDeep } from "lodash-es";
 import { apiClient } from "@/utils/api-client";
 import { Dialog, Toast } from "@halo-dev/components";
@@ -22,7 +22,8 @@ export function usePluginLifeCycle(
 
  const isStarted = computed(() => {
  return (
- plugin?.value?.status?.phase === "STARTED" && plugin.value?.spec.enabled
+ plugin?.value?.status?.phase === PluginStatusPhaseEnum.Started &&
+ plugin.value?.spec.enabled
  );
  });
 
@@ -33,7 +34,9 @@ export function usePluginLifeCycle(
  const lastCondition = plugin.value.status?.conditions?.[0];
 
  return (
- [lastCondition?.reason, lastCondition?.message].join(":") || "Unknown"
+ [lastCondition?.reason, lastCondition?.message]
+ .filter(Boolean)
+ .join(":") || "Unknown"
  );
  }
  };

ui/src/locales/en.yaml

@@ -1570,6 +1570,7 @@ core:
  not_activated: Not activated
  installed: Installed
  not_installed: Not installed
+ starting_up: Starting
  text:
  none: None
  tip: Tip

ui/src/locales/zh-CN.yaml

@@ -1514,6 +1514,7 @@ core:
  not_activated: 未启用
  installed: 已安装
  not_installed: 未安装
+ starting_up: 启动中
  text:
  none: 无
  tip: 提示

ui/src/locales/zh-TW.yaml

@@ -1480,6 +1480,7 @@ core:
  not_activated: 未啟用
  installed: 已安裝
  not_installed: 未安裝
+ starting_up: 启动中
  text:
  none: 無
  tip: 提示