1

src/components/ServiceConfiguration.vue

@@ -58,17 +58,7 @@
         </div>
       </a-col>
       <a-col :span="8" class="h-full flex flex-col">
-        <a-row class="bg-white border-b p-5">
-          <a-col :span="8" v-for="(status,index) in statuses" :key="index" class="p-1">
-            <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>
-          </a-col>
-        </a-row>
+        <service-configuration-status-viewer :service-key="props.serviceKey" />
         <div class="h-0 grow p-5">
           <service-configuration-action-log :log="actionLog"/>
         </div>
@@ -77,12 +67,12 @@
   </div>
 </template>
 <script setup>
-import { BulbOutlined } from '@ant-design/icons-vue'
-import { onUnmounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import ApiClient from '@/utils/ApiClient';
 import ServiceConfigurationParamValueEdit from './ServiceConfigurationParamValueEdit.vue'
 import ServiceConfigurationActionLog from './ServiceConfigurationActionLog.vue'
 import ServiceConfigurationActionParamFile from './ServiceConfigurationActionParamFile.vue'
+import ServiceConfigurationStatusViewer from './ServiceConfigurationStatusViewer.vue'
 /** @var {Object} */
 const props = defineProps({
     serviceKey : String,
@@ -91,52 +81,20 @@ const props = defineProps({
 const params = ref([]);
 /** @var {Array} */
 const actions = ref([]);
-/** @var {Array} */
-const statuses = ref([]);
 /** @var {Object} */
 const actionLog = ref(null);
-/** @var {Integer} */
-let statusRefreshTimer = null;
 // watch service key
 watch(() => props.serviceKey, handleServiceKeyChange);
-// on unmounted
-onUnmounted(() => {
-    if ( null !== statusRefreshTimer ) {
-        clearTimeout(statusRefreshTimer);
-        statusRefreshTimer = false;
-    }
-});
-
-// is boolean
-function isBoolean( value ) {
-    return 'boolean' === typeof(value);
-}
 
 // on mounted
 async function handleServiceKeyChange() {
     actionLog.value = null;
-    if ( null !== statusRefreshTimer ) {
-        clearTimeout(statusRefreshTimer);
-        statusRefreshTimer = null;
-    }
     if ( null === props.serviceKey ) {
         return ;
     }
 
     await actionServiceParamReload();
     await serviceActionReload();
-    await refreshServiceStatusList();
-}
-
-// refresh service status list
-async function refreshServiceStatusList() {
-    try {
-        let client = ApiClient.getClient();
-        statuses.value = await client.call('service-config/service-status-list', {serviceKey:props.serviceKey});
-        if ( false !== statusRefreshTimer ) {
-            statusRefreshTimer = setTimeout(refreshServiceStatusList, 1000);
-        }
-    } catch ( e ) {/** nothing to do here */}
 }
 
 // service param reload

src/components/ServiceConfigurationStatusViewer.vue

@@ -0,0 +1,63 @@
+<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>
+</template>
+<script setup>
+import ApiClient from '@/utils/ApiClient';
+import { BulbOutlined } from '@ant-design/icons-vue'
+import { onUnmounted, watch, ref } from 'vue';
+/** @var {Object} */
+const props = defineProps({
+    serviceKey : String,
+});
+/** @var {Array} */
+const statuses = ref([]);
+/** @var {Integer} */
+let statusRefreshTimer = null;
+// watch service key
+watch(() => props.serviceKey, handleServiceKeyChange);
+// on unmounted
+onUnmounted(() => {
+    if ( null !== statusRefreshTimer ) {
+        clearTimeout(statusRefreshTimer);
+        statusRefreshTimer = false;
+    }
+});
+
+// handle 
+async function handleServiceKeyChange() {
+    if ( null !== statusRefreshTimer ) {
+        clearTimeout(statusRefreshTimer);
+        statusRefreshTimer = null;
+    }
+    if ( null === props.serviceKey ) {
+        return ;
+    }
+    await refreshServiceStatusList();
+}
+
+// refresh service status list
+async function refreshServiceStatusList() {
+    try {
+        let client = ApiClient.getClient();
+        statuses.value = await client.call('service-config/service-status-list', {serviceKey:props.serviceKey});
+        if ( false !== statusRefreshTimer ) {
+            statusRefreshTimer = setTimeout(refreshServiceStatusList, 1000);
+        }
+    } catch ( e ) {/** nothing to do here */}
+}
+
+// is boolean
+function isBoolean( value ) {
+    return 'boolean' === typeof(value);
+}
+</script>