1

src/components/ServiceConfiguration.vue

@@ -2,10 +2,12 @@
   <div class="h-full flex flex-col">
     <a-row class="h-0 grow">
       <a-col class="border-r h-full overflow-y-auto" :span="16">
+        <service-configuration-status-viewer :service-key="props.serviceKey" />
+
         <div class="p-5 border-t border-b" v-if="0 < params.length">
           <div class="flex flex-row flex-wrap">
             <div v-for="group in params" :key="group.name" class="p-1" style="min-width: 30%;">
-              <fieldset class="border">
+              <fieldset class="border h-full">
                 <legend class="px-3">{{ group.name }}</legend>
                 <table class="w-full">
                   <tr v-for="item in group.items" :key="item.key">
@@ -28,12 +30,12 @@
             <a-button @click="actionServiceParamSave">保存</a-button>
           </div>
         </div>
+
         <div class="p-3">
           <service-configuration-actions v-model:actionLog="actionLog" :service-key="props.serviceKey" />
         </div>
       </a-col>
       <a-col :span="8" class="h-full flex flex-col">
-        <service-configuration-status-viewer :service-key="props.serviceKey" />
         <div class="h-0 grow p-5">
           <service-configuration-action-log :log="actionLog"/>
         </div>

src/components/ServiceConfigurationActions.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="flex flex-row flex-wrap">
-    <div class="p-1 grow" v-for="(group,groupIndex) in actions" :key="groupIndex">
-      <fieldset  class="border my-1 p-1">
+    <div class="p-1" style="min-width:30%;" v-for="(group,groupIndex) in actions" :key="groupIndex">
+      <fieldset  class="border my-1 p-1 h-full">
         <legend>{{ group.name }}</legend>
         <table class="w-full">
           <tr v-for="action in group.items" :key="action.key" style="white-space: pre;">
             <td>
-              <a-button class="m-1 w-full text-left" :loading="action.isExecuting" @click="actionServiceExecute(action)"
+              <a-button class="m-1 w-full text-left" 
+                :loading="action.isExecuting" 
+                @click="actionServiceExecute(action)"
               >{{ action.name }}</a-button>
             </td>
             <td>

src/components/ServiceConfigurationStatusViewer.vue

@@ -1,15 +1,22 @@
 <template>
-  <div class="bg-white border-b p-5 flex flex-row flex-wrap">
-    <div class="p-1 grow" style="min-width:33.33%;" v-for="(status,index) in statuses" :key="index">
-      <div class="py-1 px-2 rounded border">
-        {{ status.name }} : 
-        <template v-if="isBoolean(status.value)">
-          <BulbOutlined class="align-text-bottom" :class="{'text-green-400':status.value}"/>
-        </template>
-        <span v-else>{{ status.value }}</span>
-      </div>
-    </div>
+<div class="flex flex-row flex-wrap p-5 bg-white">
+  <div v-for="group in statuses" :key="group.name" class="p-1" style="min-width: 25%;">
+    <fieldset class="border h-full">
+      <legend class="px-3">{{ group.name }}&nbsp;</legend>
+      <table class="w-full">
+        <tr v-for="item in group.items" :key="item.key">
+          <td class="py-1 px-2">{{ item.name }} : </td>
+          <td class="py-1 px-2">
+            <template v-if="isBoolean(item.value)">
+              <BulbOutlined class="align-text-bottom" :class="{'text-green-400':item.value}"/>
+            </template>
+            <span v-else>{{ item.value }}</span>
+          </td>
+        </tr>
+      </table>
+    </fieldset>
   </div>
+</div>
 </template>
 <script setup>
 import ApiClient from '@/utils/ApiClient';
@@ -49,11 +56,28 @@ async function handleServiceKeyChange() {
 async function refreshServiceStatusList() {
     try {
         let client = ApiClient.getClient();
-        statuses.value = await client.call('service-config/service-status-list', {serviceKey:props.serviceKey});
+        let list = await client.call('service-config/service-status-list', {serviceKey:props.serviceKey});
+        
+        statuses.value = [];
+        for ( var item of list ) {
+            let gname = item.group;
+            let group = statuses.value.find(g => g.name == item.group);
+            if ( undefined === group ) {
+                group = {name:gname, order:item.order, items:[]};
+                statuses.value.push(group);
+            }
+            group.order = Math.max(group.order, item.order);
+            group.items.push(item);
+            group.items.sort((a,b) => a.order - b.order);
+        }
+        statuses.value.sort((a,b) => a.order - b.order);
+        console.log(statuses.value);
         if ( false !== statusRefreshTimer ) {
             statusRefreshTimer = setTimeout(refreshServiceStatusList, 1000);
         }
-    } catch ( e ) {/** nothing to do here */}
+    } catch ( e ) {
+        console.error(e);
+    }
 }
 
 // is boolean