feat(sse): handle heartbeat event with special case current operation…

… has lock

app/src/components/modals/ModalWaiting.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import ModalOverlay from '@/components/modals/ModalOverlay.vue'
 import type { APIRequest } from '@/composables/useRequests'
@@ -8,6 +9,8 @@ const props = defineProps<{
   request: APIRequest
 }>()
 
+const { t } = useI18n()
+
 const messages = computed(() => {
   const messages = props.request.action?.messages
   return messages?.length ? messages : null
@@ -21,14 +24,17 @@ const progress = computed(() => {
     max: progress.reduce((sum, value) => sum + value, 0),
   }
 })
+
+const title = computed(() => {
+  if (messages.value || progress.value) return t('api.processing')
+  if (props.request.id.startsWith('lock')) return t('api.busy')
+  return t('api_waiting')
+})
 </script>
 
 <template>
   <ModalOverlay :request="request">
-    <h5
-      v-t="messages || progress ? 'api.processing' : 'api_waiting'"
-      class="text-center mt-4"
-    />
+    <h5 class="text-center mt-4">{{ title }}</h5>
 
     <BProgress v-if="progress" :max="progress.max" height=".5rem" class="my-4">
       <BProgressBar variant="success" :value="progress.values[0]" />

app/src/composables/useSSE.ts

@@ -56,6 +56,7 @@ type SSEEventDataHeartbeat = {
   type: 'heartbeat'
   timestamp: number
   current_operation: string | null
+  cmdline: string | null
 }
 
 type AnySSEEventDataAction =
@@ -76,6 +77,7 @@ export const useSSE = createGlobalState(() => {
   const sseSource = ref<EventSource | null>(null)
   const reconnectTimeout = ref<number | undefined>()
   const { startRequest, endRequest, historyList } = useRequests()
+  const nonOperationWithLock = ref<APIRequestAction | null>(null)
 
   function init() {
     const sse = new EventSource(`/yunohost/api/sse`, { withCredentials: true })
@@ -164,13 +166,32 @@ export const useSSE = createGlobalState(() => {
       // An action may have failed without properly exiting
       // Ensure that there's no pending external request blocking the view
       // if server says that there's no current action
-      const request = historyList.value.findLast(
-        (r: APIRequest) =>
-          r.action?.external === true && r.status === 'pending',
-      ) as APIRequestAction | undefined
+      const request =
+        nonOperationWithLock.value ||
+        historyList.value.findLast(
+          (r: APIRequest) =>
+            r.action?.external === true && r.status === 'pending',
+        )
 
       if (request) {
-        endRequest({ request, success: false, showError: false })
+        endRequest({
+          request,
+          success: !!nonOperationWithLock.value,
+          showError: false,
+        })
+        nonOperationWithLock.value = null
+      }
+    } else if (data.current_operation.startsWith('lock')) {
+      // SPECIAL CASE: an operation like `yunohost tools shell` has the lock
+      const timestamp = parseFloat(data.current_operation.split('-')[1])
+      if (!nonOperationWithLock.value) {
+        nonOperationWithLock.value = startRequest({
+          id: data.current_operation,
+          title: data.cmdline!,
+          date: timestamp * 1000,
+          caller: 'cli',
+          external: true,
+        }) as APIRequestAction
       }
     }
   }

app/src/i18n/locales/en.json

@@ -15,6 +15,7 @@
     "all": "All",
     "all_apps": "All apps",
     "api": {
+        "busy": "The server is busy…",
         "partial_logs": "[…] (check in history for full logs)",
         "processing": "The server is processing the action…",
         "query_status": {