Move most all table views to new action menu pattern

dashboard/src/views/ServicesView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { computed, reactive, onMounted, ref, useTemplateRef } from 'vue';
-import { Button, TableView, ProgressBar, ButtonGroup, FormGroup, Checkbox, Dialog } from '@cloudron/pankow';
+import { Button, Menu, TableView, ProgressBar, FormGroup, Checkbox, Dialog } from '@cloudron/pankow';
 import { prettyBinarySize } from '@cloudron/pankow/utils';
 import { each } from 'async';
 import Section from '../components/Section.vue';
@@ -37,6 +37,30 @@ const columns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(service, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('main.action.edit'),
+    visible: service.status !== 'disabled' && service.memoryLimit,
+    action: onEdit.bind(null, service),
+  }, {
+    icon: 'fa-solid fa-sync-alt',
+    label: t('services.restartActionTooltip'),
+    visible: service.id !== 'box',
+    disabled: (service.status === 'starting' && !service.config.recoveryMode),
+    action: onRestart.bind(null, service.id),
+  }, {
+    icon: 'fa-solid fa-fw fa-file-alt',
+    label: t('logs.title'),
+    target: '_blank',
+    href: `/logs.html?id=${service.id}`,
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const services = reactive({
   box: {
     name: 'cloudron',
@@ -178,6 +202,7 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <Dialog ref="dialog"
       :title="$t('services.configure.title', { name: editService.name })"
       :confirm-busy="editBusy"
@@ -220,12 +245,8 @@ onMounted(async () => {
           <span v-show="service.memoryLimit">{{ prettyBinarySize(service.memoryLimit) }}</span>
         </template>
         <template #actions="service">
-          <div class="table-actions">
-            <ButtonGroup>
-              <Button small tool secondary v-if="service.status !== 'disabled' && service.config.memoryLimit" @click="onEdit(service)" v-tooltip="$t('services.configureActionTooltip')" icon="fa-solid fa fa-pencil-alt"/>
-              <Button small tool secondary v-if="service.id !== 'box'" @click="onRestart(service.id)" :loading="service.status === 'starting' && !service.config.recoveryMode" v-tooltip="$t('services.restartActionTooltip')" icon="fa-solid fa-sync-alt"/>
-              <Button tool small secondary :href="`/logs.html?id=${service.id}`" target="_blank" v-tooltip="$t('logs.title')" icon="fa-solid fa-file-alt" />
-            </ButtonGroup>
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(service, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>