7

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>
+</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>