feat: add the context menu for copying the machine id

Machine UUID is used in many CLI commands, but there's no way to copy it from the UI quickly. Fixes: #28 Signed-off-by: Artem Chernyshev <[email protected]>
siderolabs · Mar 18, 2024 · 4db7630 · 4db7630
1 parent 5a8abf5
commit 4db7630
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/frontend/src/components/common/ActionsBox/TActionsBox.vue b/frontend/src/components/common/ActionsBox/TActionsBox.vue
@@ -11,7 +11,7 @@ included in the LICENSE file.
   >
     <Popper offsetDistance="10" :placement="placement" :show="open" offsetSkid="30">
       <template #content>
-        <div class="actions-list" @click="open = false">
+        <div class="actions-list" @click.stop="open = false">
           <slot/>
         </div>
       </template>

diff --git a/frontend/src/views/common/NodeContextMenu.vue b/frontend/src/views/common/NodeContextMenu.vue
@@ -8,10 +8,11 @@ included in the LICENSE file.
   <t-actions-box style="height: 24px">
     <t-actions-box-item
       icon="log"
-      @click.stop="$router.push({ name: 'MachineLogs', params: { machine: clusterMachineStatus.metadata.id! } })"
+      @click="$router.push({ name: 'MachineLogs', params: { machine: clusterMachineStatus.metadata.id! } })"
     >
       Logs
     </t-actions-box-item>
+    <t-actions-box-item icon="copy" @click="copyMachineID">Copy Machine ID</t-actions-box-item>
     <t-actions-box-item
       icon="power"
       @click="shutdownNode"
@@ -23,15 +24,15 @@ included in the LICENSE file.
     <t-actions-box-item
       v-if="clusterMachineStatus.spec.stage === ClusterMachineStatusSpecStage.BEFORE_DESTROY"
       icon="rollback"
-      @click.stop="restoreNode"
+      @click="restoreNode"
     >
       Cancel Destroy
     </t-actions-box-item>
     <t-actions-box-item
       v-else-if="!deleteDisabled"
       icon="delete"
       danger
-      @click.stop="deleteNode"
+      @click="deleteNode"
     >
       Destroy
     </t-actions-box-item>
@@ -42,6 +43,7 @@ included in the LICENSE file.
 import { useRouter } from 'vue-router';
 import { Resource } from "@/api/grpc";
 import { ClusterMachineStatusSpec, ClusterMachineStatusSpecStage } from "@/api/omni/specs/omni.pb";
+import { copyText } from "vue3-clipboard";
 
 import TActionsBox from "@/components/common/ActionsBox/TActionsBox.vue";
 import TActionsBoxItem from "@/components/common/ActionsBox/TActionsBoxItem.vue";
@@ -96,4 +98,8 @@ const restoreNode = () => {
     },
   });
 };
-</script>
+
+const copyMachineID = () => {
+  copyText(props.clusterMachineStatus.metadata.id!, undefined, () => {});
+};
+</script>
diff --git a/frontend/src/views/omni/Machines/MachineItem.vue b/frontend/src/views/omni/Machines/MachineItem.vue
@@ -21,10 +21,11 @@ included in the LICENSE file.
         <div class="flex-initial w-8">
           <div class="flex justify-end">
             <t-actions-box style="height: 24px">
-              <t-actions-box-item icon="settings" @click.stop="openConfigPatches">Config Patches</t-actions-box-item>
-              <t-actions-box-item icon="log" @click.stop="machineLogs" v-if="canReadMachineLogs">Logs</t-actions-box-item>
-              <t-actions-box-item icon="overview" @click.stop="showCluster" v-if="clusterName && canReadClusters">Show Cluster</t-actions-box-item>
-              <t-actions-box-item icon="delete" danger @click.stop="removeMachine" v-if="canRemoveMachines">Remove Machine</t-actions-box-item>
+              <t-actions-box-item icon="settings" @click="openConfigPatches">Config Patches</t-actions-box-item>
+              <t-actions-box-item icon="log" @click="machineLogs" v-if="canReadMachineLogs">Logs</t-actions-box-item>
+              <t-actions-box-item icon="copy" @click="copyMachineID">Copy Machine ID</t-actions-box-item>
+              <t-actions-box-item icon="overview" @click="showCluster" v-if="clusterName && canReadClusters">Show Cluster</t-actions-box-item>
+              <t-actions-box-item icon="delete" danger @click="removeMachine" v-if="canRemoveMachines">Remove Machine</t-actions-box-item>
             </t-actions-box>
           </div>
         </div>
@@ -113,6 +114,7 @@ included in the LICENSE file.
 import { computed, toRefs } from "vue";
 import { formatBytes } from "@/methods";
 import pluralize from 'pluralize';
+import { copyText } from "vue3-clipboard";
 
 import { useRouter } from "vue-router";
 import { ResourceTyped } from "@/api/grpc";
@@ -208,4 +210,8 @@ const timeGetter = (fn :() => string|undefined) => {
 
 const machineLastAlive = timeGetter(() => machine.value?.spec?.siderolink_counter?.last_alive);
 const machineCreatedAt = timeGetter(() => machine.value?.spec?.machine_created_at);
+
+const copyMachineID = () => {
+  copyText(machine.value.metadata.id!, undefined, () => {});
+};
 </script>