Feat: instance list filter

daemon/src/routers/Instance_router.ts

@@ -55,6 +55,7 @@ routerApp.on("instance/select", (ctx, data) => {
     if (InstanceSubsystem.isGlobalInstance(v)) return false;
     if (!v.config.nickname.toLowerCase().includes(condition.instanceName.toLowerCase()))
       return false;
+    if (condition.status && v.instanceStatus !== Number(condition.status)) return false;
     return true;
   });
   result = result.sort((a, b) => (a.config.nickname > b.config.nickname ? 1 : -1));

frontend/src/types/const.ts

@@ -14,11 +14,11 @@ export const TERMINAL_CODE = [
 ];
 
 export const INSTANCE_STATUS: Record<string, string> = {
-  "-1": t("TXT_CODE_6ffdeae8"),
+  "-1": t("TXT_CODE_342a04a9"),
   "0": t("TXT_CODE_4ef6b040"),
-  "1": t("TXT_CODE_6bb63f94"),
-  "2": t("TXT_CODE_ecfe33cb"),
-  "3": t("TXT_CODE_f912fadc")
+  "1": t("TXT_CODE_a409b8a9"),
+  "2": t("TXT_CODE_175b570d"),
+  "3": t("TXT_CODE_bdb620b9")
 };
 
 export enum INSTANCE_STATUS_CODE {

frontend/src/widgets/InstanceList.vue

@@ -32,6 +32,7 @@ import { throttle } from "lodash";
 import { useScreen } from "@/hooks/useScreen";
 import { parseTimestamp } from "../tools/time";
 import { reportError } from "@/tools/validator";
+import { INSTANCE_STATUS } from "@/types/const";
 
 defineProps<{
   card: LayoutCard;
@@ -86,6 +87,7 @@ const initInstancesData = async (resetPage?: boolean) => {
         daemonId: currentRemoteNode.value?.uuid ?? "",
         page: operationForm.value.currentPage,
         page_size: operationForm.value.pageSize,
+        status: currentStatus.value,
         instance_name: operationForm.value.instanceName.trim()
       }
     });
@@ -134,6 +136,7 @@ const toNodesPage = () => {
 
 const multipleMode = ref(false);
 const selectedInstance = ref<InstanceMoreDetail[]>([]);
+const currentStatus = ref("");
 
 const findInstance = (item: InstanceMoreDetail) => {
   return selectedInstance.value.find((i) => i.instanceUuid === item.instanceUuid);
@@ -314,7 +317,7 @@ onMounted(async () => {
               <a-button style="max-width: 200px; min-width: 180px; overflow: hidden">
                 <a-typography-text
                   style="max-width: 145px"
-                  :ellipsis="{ rows: 1, ellipsis: true, expandable: false }"
+                  :ellipsis="{ ellipsis: true }"
                   :content="
                     computeNodeName(
                       currentRemoteNode?.ip || '',
@@ -336,16 +339,31 @@ onMounted(async () => {
           </template>
           <template #center>
             <div class="search-input">
-              <a-input
-                v-model:value="operationForm.instanceName"
-                :placeholder="t('TXT_CODE_ce132192')"
-                @press-enter="handleQueryInstance"
-                @change="handleQueryInstance"
-              >
-                <template #prefix>
-                  <search-outlined />
-                </template>
-              </a-input>
+              <a-input-group compact>
+                <a-select
+                  v-model:value="currentStatus"
+                  style="width: 80px"
+                  @change="handleQueryInstance"
+                >
+                  <a-select-option value="">
+                    {{ t("TXT_CODE_c48f6f64") }}
+                  </a-select-option>
+                  <a-select-option v-for="(p, i) in INSTANCE_STATUS" :key="i" :value="i">
+                    {{ p }}
+                  </a-select-option>
+                </a-select>
+                <a-input
+                  v-model:value.trim="operationForm.instanceName"
+                  :placeholder="t('TXT_CODE_ce132192')"
+                  style="width: calc(100% - 100px)"
+                  @press-enter="handleQueryInstance"
+                  @change="handleQueryInstance"
+                >
+                  <template #suffix>
+                    <search-outlined />
+                  </template>
+                </a-input>
+              </a-input-group>
             </div>
           </template>
         </BetweenMenus>

panel/src/app/routers/private/service_router.ts

@@ -36,12 +36,14 @@ router.get(
     const page = Number(ctx.query.page);
     const pageSize = Number(ctx.query.page_size);
     const instanceName = ctx.query.instance_name;
+    const status = String(ctx.query.status);
     const remoteService = RemoteServiceSubsystem.getInstance(daemonId);
     const result = await new RemoteRequest(remoteService).request("instance/select", {
       page,
       pageSize,
       condition: {
-        instanceName
+        instanceName,
+        status
       }
     });
     ctx.body = result;