apps: operators can now view backup logs and manage the backup task

we spun off the app backup as a separate task and this is not tracked
by app.taskId .

fixes #856

CHANGES

@@ -3179,4 +3179,5 @@
 * rsync: throttle log messages during download
 * backup logs: make them much terse and concise
 * oidc: implement Device Authorization Grant
+* operator: fix viewing of backup progress and logs
 

dashboard/src/components/EventlogList.vue

@@ -214,7 +214,7 @@ defineExpose({ refresh: onRefresh, setHighlight });
               <td style="white-space: nowrap;">{{ prettyLongDate(eventlog.raw.creationTime) }}</td>
               <td class="eventlog-source">{{ eventlog.source }}</td>
               <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-html="eventlog.details"></td>
-              <td><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="`/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></td>
+              <td><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="app ? `/logs.html?appId=${app.id}&taskId=${eventlog.raw.data.taskId}` : `/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></td>
             </tr>
             <tr v-show="eventlog.isOpen">
               <td colspan="4" class="eventlog-details" @click.stop>

dashboard/src/components/LogsViewer.vue

@@ -62,7 +62,11 @@ onMounted(async () => {
   const crashId = urlParams.get('crashId');
   const idParam = urlParams.get('id');
 
-  if (appId) {
+  if (appId && taskId) {
+    type.value = 'task';
+    id.value = taskId;
+    name.value = 'Task ' + taskId;
+  } else if (appId) {
     type.value = 'app';
     id.value = appId;
     name.value = 'App ' + appId;
@@ -89,7 +93,7 @@ onMounted(async () => {
     return;
   }
 
-  logsModel = LogsModel.create(type.value, id.value);
+  logsModel = LogsModel.create(type.value, id.value, { appId });
 
   if (type.value === 'app') {
     const [error, app] = await appsModel.get(id.value);

dashboard/src/components/app/Backups.vue

@@ -15,15 +15,12 @@ import SettingsItem from '../SettingsItem.vue';
 import AppsModel from '../../models/AppsModel.js';
 import BackupSitesModel from '../../models/BackupSitesModel.js';
 import BackupsModel from '../../models/BackupsModel.js';
-import TasksModel from '../../models/TasksModel.js';
-import { TASK_TYPES } from '../../constants.js';
 import BackupInfoDialog from '../BackupInfoDialog.vue';
 import ActionBar from '../../components/ActionBar.vue';
 
 const appsModel = AppsModel.create();
 const backupSitesModel = BackupSitesModel.create();
 const backupsModel = BackupsModel.create();
-const tasksModel = TasksModel.create();
 
 const props = defineProps([ 'app' ]);
 
@@ -141,7 +138,7 @@ async function onChangeAutoBackups(value) {
 async function waitForTask() {
   if (!lastTask.value.id) return;
 
-  const [error, result] = await tasksModel.get(lastTask.value.id);
+  const [error, result] = await appsModel.getAppTask(props.app.id, lastTask.value.id);
   if (error) return console.error(error);
 
   lastTask.value = result;
@@ -158,7 +155,7 @@ async function waitForTask() {
 }
 
 async function refreshTasks() {
-  const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_APP_BACKUP_PREFIX + props.app.id);
+  const [error, result] = await appsModel.listTasks(props.app.id);
   if (error) return console.error(error);
 
   lastTask.value = result[0] || {};
@@ -168,7 +165,7 @@ async function refreshTasks() {
     return {
       icon: 'fa-solid ' + ((!t.active && t.success) ? 'status-active fa-check-circle' : (t.active ? 'fa-circle-notch fa-spin' : 'status-error fa-times-circle')),
       label: prettyLongDate(t.ts),
-      action: () => { window.open(`/logs.html?taskId=${t.id}`); }
+      action: () => { window.open(`/logs.html?appId=${props.app.id}&taskId=${t.id}`); }
     };
   });
 
@@ -188,7 +185,7 @@ async function onStartBackup(backupSiteId) {
 async function onStopBackup() {
   stopBackupBusy.value = true;
 
-  const [error] = await tasksModel.stop(lastTask.value.id);
+  const [error] = await appsModel.stopAppTask(props.app.id, lastTask.value.id);
   if (error) return console.error(error);
 
   await refreshTasks();
@@ -413,7 +410,7 @@ onUnmounted(() => {
       <div style="margin-top: 10px; display: flex; align-items: center; gap: 10px; overflow: hidden;">
         <div style="flex-grow: 1; overflow: hidden;">
           <ProgressBar :value="lastTask.percent" :show-label="false" :busy="true" :mode="lastTask.percent <= 0 ? 'indeterminate' : ''"/>
-          <a :href="`/logs.html?taskId=${lastTask.id}`" target="_blank" style="display: block; margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ lastTask.percent }}% {{ lastTask.message }}</a>
+          <a :href="`/logs.html?appId=${props.app.id}&taskId=${lastTask.id}`" target="_blank" style="display: block; margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ lastTask.percent }}% {{ lastTask.message }}</a>
         </div>
         <Button danger plain tool icon="fa-solid fa-xmark" @click="onStopBackup()" :loading="stopBackupBusy" :disabled="stopBackupBusy"></Button>
       </div>

dashboard/src/components/app/Updates.vue

@@ -7,13 +7,11 @@ import { ISTATES } from '../../constants.js';
 import SettingsItem from '../SettingsItem.vue';
 import AppsModel from '../../models/AppsModel.js';
 import ProfileModel from '../../models/ProfileModel.js';
-import TasksModel from '../../models/TasksModel.js';
 
 const props = defineProps([ 'app', 'refresh-app' ]);
 
 const appsModel = AppsModel.create();
 const profileModel = ProfileModel.create();
-const tasksModel = TasksModel.create();
 
 const features = inject('features');
 
@@ -41,7 +39,7 @@ async function onAutoUpdatesEnabledChange(value) {
 async function waitForTask(id) {
   if (!id) return;
 
-  const [error, result] = await tasksModel.get(id);
+  const [error, result] = await appsModel.getAppTask(props.app.id, id);
   if (error) return console.error(error);
 
   // task done, refresh menu

dashboard/src/models/AppsModel.js

@@ -172,6 +172,39 @@ function create() {
   return {
     name: 'AppsModel',
     getTask,
+    async listTasks(appId) {
+      let error, result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/apps/${appId}/tasks`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.tasks];
+    },
+    async getAppTask(appId, taskId) {
+      let error, result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/apps/${appId}/tasks/${taskId}`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
+    async stopAppTask(appId, taskId) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${appId}/tasks/${taskId}/stop`, {}, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 204) return [error || result];
+      return [null];
+    },
     async install(appData, config) {
       const data = {
         subdomain: config.subdomain,

dashboard/src/models/LogsModel.js

@@ -25,7 +25,7 @@ function ab2str(buf) {
   return String.fromCharCode.apply(null, new Uint16Array(buf));
 }
 
-export function create(type, id) {
+export function create(type, id, options = {}) {
   const accessToken = localStorage.token;
   const INITIAL_STREAM_LINES = 100;
 
@@ -46,6 +46,9 @@ export function create(type, id) {
   } else if (type === 'service') {
     streamApi = `/api/v1/services/${id}/logstream`;
     downloadApi = `/api/v1/services/${id}/logs`;
+  } else if (type === 'task' && options.appId) {
+    streamApi = `/api/v1/apps/${options.appId}/tasks/${id}/logstream`;
+    downloadApi = `/api/v1/apps/${options.appId}/tasks/${id}/logs`;
   } else if (type === 'task') {
     streamApi = `/api/v1/tasks/${id}/logstream`;
     downloadApi = `/api/v1/tasks/${id}/logs`;

dashboard/src/views/AppConfigureView.vue

@@ -26,11 +26,9 @@ import Storage from '../components/app/Storage.vue';
 import Uninstall from '../components/app/Uninstall.vue';
 import Updates from '../components/app/Updates.vue';
 import AppsModel from '../models/AppsModel.js';
-import TasksModel from '../models/TasksModel.js';
 import { API_ORIGIN, APP_TYPES, ISTATES, RSTATES, HSTATES } from '../constants.js';
 
 const appsModel = AppsModel.create();
-const tasksModel = TasksModel.create();
 const installationStateLabel = AppsModel.installationStateLabel;
 
 const inputDialog = useTemplateRef('inputDialog');
@@ -168,7 +166,7 @@ async function onStopAppTask() {
 
   busyStopTask.value = true;
 
-  const [error] = await tasksModel.stop(app.value.taskId);
+  const [error] = await appsModel.stopAppTask(app.value.id, app.value.taskId);
   if (error) console.error(error);
 
   busyStopTask.value = false;

src/routes/apps.js

@@ -13,6 +13,7 @@ import { HttpError } from '@cloudron/connect-lastmile';
 import { HttpSuccess } from '@cloudron/connect-lastmile';
 import metrics from '../metrics.js';
 import safe from 'safetydance';
+import tasks from '../tasks.js';
 import updater from '../updater.js';
 import users from '../users.js';
 import { getImageContentType } from '../image-content-type.js';
@@ -1077,6 +1078,111 @@ async function getMetricStream(req, res, next) {
     metricStream.on('error', res.end.bind(res, null));
 }
 
+function isAppTask(task, appId) {
+    if (task.type === tasks.TASK_APP_BACKUP_PREFIX + appId) return true;
+    if (task.type === tasks.TASK_APP && task.args[0] === appId) return true;
+    return false;
+}
+
+async function loadTask(req, res, next) {
+    assert.strictEqual(typeof req.params.taskId, 'string');
+    assert.strictEqual(typeof req.resources.app, 'object');
+
+    const [error, result] = await safe(tasks.get(req.params.taskId));
+    if (error) return next(BoxError.toHttpError(error));
+    if (!result) return next(new HttpError(404, 'Task not found'));
+    if (!isAppTask(result, req.resources.app.id)) return next(new HttpError(404, 'Task not found'));
+
+    req.resources.task = result;
+
+    next();
+}
+
+async function listAppTasks(req, res, next) {
+    assert.strictEqual(typeof req.resources.app, 'object');
+
+    const [error, result] = await safe(tasks.list(1, 25, { prefix: tasks.TASK_APP_BACKUP_PREFIX + req.resources.app.id }));
+    if (error) return next(BoxError.toHttpError(error));
+
+    next(new HttpSuccess(200, { tasks: result.map(tasks.removePrivateFields) }));
+}
+
+async function getAppTask(req, res, next) {
+    assert.strictEqual(typeof req.resources.task, 'object');
+
+    next(new HttpSuccess(200, tasks.removePrivateFields(req.resources.task)));
+}
+
+async function getAppTaskLogs(req, res, next) {
+    assert.strictEqual(typeof req.resources.task, 'object');
+
+    const lines = typeof req.query.lines === 'string' ? parseInt(req.query.lines, 10) : 10;
+    if (isNaN(lines)) return next(new HttpError(400, 'lines must be a number'));
+
+    const options = {
+        lines: lines,
+        follow: false,
+        format: typeof req.query.format === 'string' ? req.query.format : 'json'
+    };
+
+    const [error, logStream] = await safe(tasks.getLogs(req.resources.task, options));
+    if (error) return next(BoxError.toHttpError(error));
+
+    res.writeHead(200, {
+        'Content-Type': 'application/x-logs',
+        'Content-Disposition': `attachment; filename="task-${req.resources.task.id}.log"`,
+        'Cache-Control': 'no-cache',
+        'X-Accel-Buffering': 'no'
+    });
+    res.on('close', () => logStream.destroy());
+    logStream.pipe(res);
+}
+
+async function getAppTaskLogStream(req, res, next) {
+    assert.strictEqual(typeof req.resources.task, 'object');
+
+    const lines = typeof req.query.lines === 'string' ? parseInt(req.query.lines, 10) : 10;
+    if (isNaN(lines)) return next(new HttpError(400, 'lines must be a valid number'));
+
+    function sse(id, data) { return 'id: ' + id + '\ndata: ' + data + '\n\n'; }
+
+    if (req.headers.accept !== 'text/event-stream') return next(new HttpError(400, 'This API call requires EventStream'));
+
+    const options = {
+        lines: lines,
+        follow: true,
+        format: 'json'
+    };
+
+    const [error, logStream] = await safe(tasks.getLogs(req.resources.task, options));
+    if (error) return next(BoxError.toHttpError(error));
+
+    res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+        'X-Accel-Buffering': 'no',
+        'Access-Control-Allow-Origin': '*'
+    });
+    res.write('retry: 3000\n');
+    res.on('close', () => logStream.destroy());
+    logStream.on('data', function (data) {
+        const obj = JSON.parse(data);
+        res.write(sse(obj.realtimeTimestamp, JSON.stringify(obj)));
+    });
+    logStream.on('end', res.end.bind(res));
+    logStream.on('error', res.end.bind(res, null));
+}
+
+async function stopAppTask(req, res, next) {
+    assert.strictEqual(typeof req.resources.task, 'object');
+
+    const [error] = await safe(tasks.stopTask(req.resources.task.id));
+    if (error) return next(BoxError.toHttpError(error));
+
+    next(new HttpSuccess(204, {}));
+}
+
 export default {
     getApp,
     listByUser,
@@ -1146,5 +1252,12 @@ export default {
     getMetrics,
     getMetricStream,
 
+    loadTask,
+    listAppTasks,
+    getAppTask,
+    getAppTaskLogs,
+    getAppTaskLogStream,
+    stopAppTask,
+
     load
 };

src/server.js

@@ -321,6 +321,11 @@ async function initializeExpressSync() {
     router.get ('/api/v1/apps/:id/logs',                               token, routes.apps.load, authorizeOperator, routes.apps.getLogs);
     router.get ('/api/v1/apps/:id/eventlog',                           token, routes.apps.load, authorizeOperator, routes.apps.listEventlog);
     router.get ('/api/v1/apps/:id/task',                               token, routes.apps.load, authorizeOperator, routes.apps.getTask);
+    router.get ('/api/v1/apps/:id/tasks',                              token, routes.apps.load, authorizeOperator, routes.apps.listAppTasks);
+    router.get ('/api/v1/apps/:id/tasks/:taskId',                      token, routes.apps.load, authorizeOperator, routes.apps.loadTask, routes.apps.getAppTask);
+    router.get ('/api/v1/apps/:id/tasks/:taskId/logs',                 token, routes.apps.load, authorizeOperator, routes.apps.loadTask, routes.apps.getAppTaskLogs);
+    router.get ('/api/v1/apps/:id/tasks/:taskId/logstream',            token, routes.apps.load, authorizeOperator, routes.apps.loadTask, routes.apps.getAppTaskLogStream);
+    router.post('/api/v1/apps/:id/tasks/:taskId/stop',           json, token, routes.apps.load, authorizeOperator, routes.apps.loadTask, routes.apps.stopAppTask);
     router.get ('/api/v1/apps/:id/metrics',                            token, routes.apps.load, authorizeOperator, routes.apps.getMetrics);
     router.get ('/api/v1/apps/:id/metricstream',                       token, routes.apps.load, authorizeOperator, routes.apps.getMetricStream);
     router.post('/api/v1/apps/:id/clone',                        json, token, routes.apps.load, authorizeAdmin,    routes.apps.clone);