Disable table row hovering

dashboard/src/views/ServicesView.vue

@@ -6,8 +6,8 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { computed, reactive, onMounted } from 'vue';
-import { Button, TableView, ProgressBar, ButtonGroup } from 'pankow';
+import { computed, reactive, onMounted, ref, useTemplateRef } from 'vue';
+import { Button, TableView, ProgressBar, ButtonGroup, Dialog } from 'pankow';
 import { prettyBinarySize } from 'pankow/utils';
 import { each } from 'async';
 import Section from '../components/Section.vue';
@@ -65,7 +65,9 @@ async function refresh(id) {
   if (result.status !== 'active') setTimeout(refresh.bind(null, id), 3000);
 }
 
+const refreshBusy = ref(false);
 async function refreshAll() {
+  refreshBusy.value = true;
   const [error, serviceList] = await servicesModel.list();
   if (error) return console.error(error);
 
@@ -74,6 +76,7 @@ async function refreshAll() {
     if (!services[s]) services[s] = { id: s, name: s, config: {} };
   }
 
+  refreshBusy.value = false;
   await each(serviceList, refresh);
 }
 
@@ -87,8 +90,20 @@ async function onRestart(id) {
   await refresh(id);
 }
 
-async function onConfigure(service) {
-  console.log('TODO configure service', service)
+const dialog = useTemplateRef('dialog');
+const editService = ref({});
+const editError = ref('');
+const editBusy = ref(false);
+
+async function onEdit(service) {
+  editService.value = service;
+  dialog.value.open();
+}
+
+async function onEditConfirm() {
+  editBusy.value = true;
+  editBusy.value = false;
+  dialog.value.close();
 }
 
 onMounted(async () => {
@@ -99,14 +114,25 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Dialog ref="dialog"
+      :title="$t('services.configure.title', { name: editService.name })"
+      :confirm-busy="editBusy"
+      :confirm-label="$t('main.dialog.save')"
+      :reject-label="$t('main.dialog.cancel')"
+      reject-style="secondary"
+      @confirm="onEditConfirm()"
+    >
+      <p class="has-error text-center" v-show="editError">{{ editError }}</p>
+    </Dialog>
+
     <Section :title="$t('services.title')">
       <template #header-buttons>
-        <Button @click="refreshAll()">{{ $t('services.refresh') }}</Button>
+        <Button @click="refreshAll()" :loading="refreshBusy">{{ $t('services.refresh') }}</Button>
       </template>
 
       <p>{{ $t('services.description') }}</p>
 
-      <TableView :columns="columns" :model="servicesArray">
+      <TableView :columns="columns" :model="servicesArray" :hover="false">
         <template #status="slotProps">
           <span v-show="slotProps.status">
             <span v-if="slotProps.status === 'active'">
@@ -131,7 +157,7 @@ onMounted(async () => {
         <template #actions="slotProps">
           <div class="table-actions">
             <ButtonGroup>
-              <Button small tool secondary outline v-if="slotProps.status !== 'disabled' && slotProps.config.memoryLimit" @click="onConfigure(slotProps)" v-tooltip="$t('services.configureActionTooltip')" icon="fa-solid fa fa-pencil-alt"/>
+              <Button small tool secondary outline v-if="slotProps.status !== 'disabled' && slotProps.config.memoryLimit" @click="onEdit(slotProps)" v-tooltip="$t('services.configureActionTooltip')" icon="fa-solid fa fa-pencil-alt"/>
               <Button small tool secondary outline v-if="slotProps.id !== 'box'" @click="onRestart(slotProps.id)" :loading="slotProps.status === 'starting' && !slotProps.config.recoveryMode" v-tooltip="$t('services.restartActionTooltip')" icon="fa-solid fa-sync-alt"/>
               <Button tool small secondary outline :href="`/logs.html?id=${slotProps.id}`" target="_blank" v-tooltip="$t('logs.title')" icon="fa-solid fa-file-alt" />
             </ButtonGroup>