From e867de6c80eb03f7668a0f8425447b3a8d864827 Mon Sep 17 00:00:00 2001
From: sige <sige@sige.com>
Date: Sat, 27 Jul 2024 15:25:21 +0800
Subject: [PATCH] 7

---
 src/components/ServiceConfiguration.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/ServiceConfiguration.vue b/src/components/ServiceConfiguration.vue
index 2668133..207a369 100644
--- a/src/components/ServiceConfiguration.vue
+++ b/src/components/ServiceConfiguration.vue
@@ -35,7 +35,8 @@
                       >{{ action.name }}</a-button>
                     </td>
                     <td>
-                      <div class="inline-block ml-2" v-for="actionParam in action.params" :key="actionParam.key">
+                      <div class="inline-block ml-2 relative" v-for="actionParam in action.params" :key="actionParam.key">
+                        <div class="action-param-label">{{ actionParam.name }}</div>
                         <a-select v-if="'java.lang.Boolean' === actionParam.type" v-model:value="actionParam.value" :dropdownMatchSelectWidth="false">
                           <a-select-option :value="true">TRUE</a-select-option>
                           <a-select-option :value="false">FALSE</a-select-option>
@@ -59,7 +60,13 @@
       <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 }} : {{ status.value }}</div>
+            <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>
         <div class="h-0 grow p-5">
@@ -70,6 +77,7 @@
   </div>
 </template>
 <script setup>
+import { BulbOutlined } from '@ant-design/icons-vue'
 import { onUnmounted, ref, watch } from 'vue';
 import ApiClient from '@/utils/ApiClient';
 import ServiceConfigurationParamValueEdit from './ServiceConfigurationParamValueEdit.vue'
@@ -99,6 +107,11 @@ onUnmounted(() => {
     }
 });
 
+// is boolean
+function isBoolean( value ) {
+    return 'boolean' === typeof(value);
+}
+
 // on mounted
 async function handleServiceKeyChange() {
     actionLog.value = null;
@@ -121,7 +134,7 @@ async function refreshServiceStatusList() {
         let client = ApiClient.getClient();
         statuses.value = await client.call('service-config/service-status-list', {serviceKey:props.serviceKey});
         if ( false !== statusRefreshTimer ) {
-            statusRefreshTimer = setTimeout(refreshServiceStatusList, 500);
+            statusRefreshTimer = setTimeout(refreshServiceStatusList, 1000);
         }
     } catch ( e ) {/** nothing to do here */}
 }
@@ -222,4 +235,15 @@ async function actionServiceExecute(action) {
         action.isExecuting = false;
     }
 }
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+.action-param-label {
+  font-size: 0.6rem;
+  top: -8px;
+  position: absolute;
+  z-index: 9;
+  left: 5px;
+  padding: 0 5px;
+  color: #7b7b7b;
+}
+</style>
\ No newline at end of file