Add confirmation dialogs for "interrupt", "terminate" and "kill"

src/components/main/run-frame/top-bar/ActionRunning.vue

@@ -4,7 +4,7 @@
     variant="outlined"
     color="error"
     prepend-icon="mdi-close"
-    @click="executeInterrupt"
+    @click="dialogInterrupt = true"
   >
     interrupt
   </VBtn>
@@ -14,31 +14,53 @@
       </VBtn>
     </template>
     <VList>
-      <VListItem @click="executeTerminate({})" class="text-error">
+      <VListItem @click="dialogTerminate = true" class="text-error">
         <template #prepend>
           <VIcon> mdi-close-octagon-outline </VIcon>
         </template>
         Terminate
       </VListItem>
-      <VListItem @click="executeKill({})" class="text-error">
+      <VListItem @click="dialogKill = true" class="text-error">
         <template #prepend>
           <VIcon> mdi-close-octagon </VIcon>
         </template>
         Kill
       </VListItem>
     </VList>
   </Component>
+  <VDialog v-model="dialogInterrupt" max-width="400">
+    <InterruptConfirmationDialog
+      @confirm="onInterruptConfirmed"
+      @cancel="dialogInterrupt = false"
+    >
+    </InterruptConfirmationDialog>
+  </VDialog>
+  <VDialog v-model="dialogTerminate" max-width="400">
+    <TerminateConfirmationDialog
+      @confirm="onTerminateConfirmed"
+      @cancel="dialogTerminate = false"
+    >
+    </TerminateConfirmationDialog>
+  </VDialog>
+  <VDialog v-model="dialogKill" max-width="400">
+    <KillConfirmationDialog @confirm="onKillConfirmed" @cancel="dialogKill = false">
+    </KillConfirmationDialog>
+  </VDialog>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref, computed } from "vue";
 import { useDisplay } from "vuetify";
 import {
   useCtrlInterruptMutation,
   useCtrlTerminateMutation,
   useCtrlKillMutation,
 } from "@/graphql/codegen/generated";
 
+import InterruptConfirmationDialog from "./InterruptConfirmationDialog.vue";
+import TerminateConfirmationDialog from "./TerminateConfirmationDialog.vue";
+import KillConfirmationDialog from "./KillConfirmationDialog.vue";
+
 const { executeMutation: executeInterrupt } = useCtrlInterruptMutation();
 const { executeMutation: executeTerminate } = useCtrlTerminateMutation();
 const { executeMutation: executeKill } = useCtrlKillMutation();
@@ -49,4 +71,23 @@ const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
 const menuAttributes = computed(() =>
   mobile.value ? {} : { location: "top", offset: 8 }
 );
+
+const dialogInterrupt = ref(false);
+const dialogTerminate = ref(false);
+const dialogKill = ref(false);
+
+async function onInterruptConfirmed() {
+  dialogInterrupt.value = false;
+  await executeInterrupt({});
+}
+
+async function onTerminateConfirmed() {
+  dialogTerminate.value = false;
+  await executeTerminate({});
+}
+
+async function onKillConfirmed() {
+  dialogKill.value = false;
+  await executeKill({});
+}
 </script>

src/components/main/run-frame/top-bar/InterruptConfirmationDialog.vue

@@ -0,0 +1,29 @@
+<template>
+  <VCard class="pa-2">
+    <VCardTitle class="text-error"> Interrupt the run?</VCardTitle>
+    <VCardText>
+      Press <span class="font-weight-medium font-italic">Yes</span> to send the signal
+      <span class="font-weight-medium font-italic"> SIGINT </span>
+      to the process running the script on the server. This is equivalent to pressing
+      <span class="font-weight-medium font-italic">Ctrl+C</span> in the terminal. It
+      rases the <span class="font-weight-medium font-italic">KeyboardInterrupt</span>.
+    </VCardText>
+    <VCardText>
+      Press <span class="font-weight-medium font-italic">No</span> to close this dialog
+      without sending the signal.
+    </VCardText>
+    <VCardActions>
+      <VBtn variant="text" color="grey-darken-2" @click="$emit('cancel')"> no </VBtn>
+      <VSpacer></VSpacer>
+      <VBtn variant="outlined" color="error" @click="$emit('confirm')"> yes </VBtn>
+    </VCardActions>
+  </VCard>
+</template>
+
+<script setup lang="ts">
+interface Emits {
+  (event: "confirm"): void;
+  (event: "cancel"): void;
+}
+defineEmits<Emits>();
+</script>

src/components/main/run-frame/top-bar/KillConfirmationDialog.vue

@@ -0,0 +1,34 @@
+<template>
+  <VCard class="pa-2">
+    <VCardTitle class="text-error"> Kill the run?</VCardTitle>
+    <VCardText>
+      Press <span class="font-weight-medium font-italic">Yes</span> to send the signal
+      <span class="font-weight-medium font-italic"> SIGKILL </span>
+      to the process running the script on the server. This is equivalent to executing
+      <span class="font-weight-medium font-italic">kill -9 &lt;pid&gt;</span> in the
+      terminal. No exception will be raised. No <span class="font-italic">finally</span>
+      block will be executed. No signal handler will be executed.
+    </VCardText>
+    <VCardText>
+      Use this option as a last resort after trying to <span class="font-italic"> interrupt </span>
+      and <span class="font-italic"> terminate </span> the run.
+    </VCardText>
+    <VCardText>
+      Press <span class="font-weight-medium font-italic">No</span> to close this dialog
+      without sending the signal.
+    </VCardText>
+    <VCardActions>
+      <VBtn variant="text" color="grey-darken-2" @click="$emit('cancel')"> no </VBtn>
+      <VSpacer></VSpacer>
+      <VBtn variant="outlined" color="error" @click="$emit('confirm')"> yes </VBtn>
+    </VCardActions>
+  </VCard>
+</template>
+
+<script setup lang="ts">
+interface Emits {
+  (event: "confirm"): void;
+  (event: "cancel"): void;
+}
+defineEmits<Emits>();
+</script>

src/components/main/run-frame/top-bar/TerminateConfirmationDialog.vue

@@ -0,0 +1,34 @@
+<template>
+  <VCard class="pa-2">
+    <VCardTitle class="text-error"> Terminate the run?</VCardTitle>
+    <VCardText>
+      Press <span class="font-weight-medium font-italic">Yes</span> to send the signal
+      <span class="font-weight-medium font-italic"> SIGTERM </span>
+      to the process running the script on the server. This is equivalent to executing
+      <span class="font-weight-medium font-italic">kill &lt;pid&gt;</span> in the
+      terminal. No exception will be raised. No <span class="font-italic">finally</span>
+      block will be executed. A signal handler (if registered) will be executed.
+    </VCardText>
+    <VCardText>
+      Use this option after trying to <span class="font-italic"> interrupt </span> the
+      run.
+    </VCardText>
+    <VCardText>
+      Press <span class="font-weight-medium font-italic">No</span> to close this dialog
+      without sending the signal.
+    </VCardText>
+    <VCardActions>
+      <VBtn variant="text" color="grey-darken-2" @click="$emit('cancel')"> no </VBtn>
+      <VSpacer></VSpacer>
+      <VBtn variant="outlined" color="error" @click="$emit('confirm')"> yes </VBtn>
+    </VCardActions>
+  </VCard>
+</template>
+
+<script setup lang="ts">
+interface Emits {
+  (event: "confirm"): void;
+  (event: "cancel"): void;
+}
+defineEmits<Emits>();
+</script>