various filemanager and logs improvements

2023-07-13 15:36:57 +02:00
parent 25328d884f
commit d75c8e2858
4 changed files with 54 additions and 24 deletions
--- a/frontend/filemanager.html
+++ b/frontend/filemanager.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/logo.png" />
+    <link rel="icon" href="/api/v1/cloudron/avatar" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FileManager</title>
+    <title>File Manager</title>
  </head>
  <body>
    <div id="app"></div>
--- a/frontend/src/components/LogsViewer.vue
+++ b/frontend/src/components/LogsViewer.vue
@@ -8,10 +8,11 @@
          <span class="title">{{ name }}</span>
        </template>
        <template #right>
-          <a class="p-button p-button-primary" style="margin-right: 5px;" :href="'/terminal.html?id=' + id" target="_blank" v-show="type === 'app'"><span class="p-button-icon p-button-icon-left pi pi-desktop"></span> {{ $t('terminal.title') }}</a>
-          <a class="p-button p-button-primary" style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank" v-show="type === 'app'"><span class="p-button-icon p-button-icon-left pi pi-folder"></span> {{ $t('filemanager.title') }}</a>
          <Button type="button" :label="$t('logs.clear')" icon="pi pi-eraser" @click="onClear()" style="margin-right: 5px" />
-          <a class="p-button p-button-primary" :href="downloadUrl" target="_blank"><span class="p-button-icon p-button-icon-left pi pi-download"></span> {{ $t('logs.download') }}</a>
+          <a style="margin-right: 25px;" :href="downloadUrl" target="_blank"><Button :label="$t('logs.download')" icon="pi pi-download" /></a>
+          <a style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank" v-show="type === 'app'"><Button type="button" severity="secondary" icon="pi pi-folder" :label="$t('filemanager.title')" /></a>
+          <a style="margin-right: 5px;" :href="'/terminal.html?id=' + id" target="_blank" v-show="type === 'app'"><Button severity="secondary" icon="pi pi-desktop" :label="$t('terminal.title')" /></a>
+          <Button type="button" :label="$t('filemanager.toolbar.restartApp')" severity="secondary" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart" v-show="type === 'app'"/>
        </template>
      </TopBar>
    </template>
@@ -54,6 +55,7 @@ export default {
      accessToken: localStorage.token,
      apiOrigin: API_ORIGIN || '',
      logsModel: null,
+      busyRestart: false,
      id: '',
      name: '',
      type: '',
@@ -67,6 +69,15 @@ export default {
    },
    onDownload() {
      this.logsModel.download();
+    },
+    async onRestartApp() {
+      if (this.type !== 'app') return;
+
+      this.busyRestart = true;
+
+      await this.logsModel.restartApp();
+
+      this.busyRestart = false;
    }
  },
  async mounted() {
@@ -113,12 +124,14 @@ export default {
    if (this.type === 'app') {
      try {
        const app = await this.logsModel.getApp();
-        this.name = app.fqdn + ' (' + app.manifest.title + ')';
+        this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
      } catch (e) {
        console.error(`Failed to get app info for ${this.id}:`, e);
      }
    }

+    window.document.title = `Logs Viewer - ${this.name}`;
+
    this.downloadUrl = this.logsModel.getDownloadUrl();

    this.logsModel.stream((id, time, html) => {
@@ -155,6 +168,7 @@ body {
  background-color: black;
  color: white;
  margin-bottom: 0 !important;
+  padding: 5px 10px;
 }

 .log-line {
@@ -186,12 +200,5 @@ body {
  height: 5px;
 }

-a.p-button:hover, a.p-button:focus {
-  color: white;
-  text-decoration: none;
-  background: #0d89ec;
-  border-color: #0d89ec;
-}
-
 </style>

--- a/frontend/src/models/LogsModel.js
+++ b/frontend/src/models/LogsModel.js
@@ -2,6 +2,8 @@
 import moment from 'moment';
 import superagent from 'superagent';
 import { ansiToHtml } from 'anser';
+import { ISTATES } from '../constants.js';
+import { sleep } from 'pankow/utils';

 // https://github.com/janl/mustache.js/blob/master/mustache.js#L60
 const entityMap = {
@@ -93,6 +95,34 @@ export function create(origin, accessToken, type, id) {
      }

      return result.body;
+    },
+    async restartApp() {
+      if (type !== 'app') return;
+
+      let error, result;
+      try {
+        result = await superagent.post(`${origin}/api/v1/apps/${id}/restart`).query({ access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.statusCode !== 202) {
+        console.error(`Failed to restart app ${this.id}`, error || result.statusCode);
+        return;
+      }
+
+      while(true) {
+        let result;
+        try {
+          result = await superagent.get(`${origin}/api/v1/apps/${id}`).query({ access_token: accessToken });
+        } catch (e) {
+          console.error(e);
+        }
+
+        if (result && result.statusCode === 200 && result.body.installationState === ISTATES.INSTALLED) break;
+
+        await sleep(2000);
+      }
    }
  };
 }
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -58,8 +58,8 @@
          <Menu ref="createMenu" id="create_menu" :model="createMenuModel" :popup="true" />
          <Button type="button" :label="$t('filemanager.toolbar.upload')" icon="pi pi-upload" @click="onUploadMenu" aria-haspopup="true" aria-controls="upload_menu" style="margin-right: 5px" />
          <Menu ref="uploadMenu" id="upload_menu" :model="uploadMenuModel" :popup="true" />
-          <a class="p-button p-button-secondary" style="margin-left: 20px; margin-right: 5px;" :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'"><span class="p-button-icon p-button-icon-left pi pi-align-left"></span> {{ $t('filemanager.toolbar.openLogs') }}</a>
-          <a class="p-button p-button-secondary" style="margin-right: 5px;" :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'"><span class="p-button-icon p-button-icon-left pi pi-desktop"></span> {{ $t('filemanager.toolbar.openTerminal') }}</a>
+          <a style="margin-left: 20px; margin-right: 5px;" :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'"><Button severity="secondary" icon="pi pi-align-left" :label="$t('logs.title')" /></a>
+          <a style="margin-right: 5px;" :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'"><Button severity="secondary" icon="pi pi-desktop" :label="$t('terminal.title')" /></a>
          <Button type="button" :label="$t('filemanager.toolbar.restartApp')" severity="secondary" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart" v-show="resourceType === 'app'"/>
        </template>
      </TopBar>
@@ -472,7 +472,7 @@ export default {
        return;
      }

-      this.title = result.body.label || result.body.fqdn;
+      this.title = `${result.body.label || result.body.fqdn} (${result.body.manifest.title})`;
    } else if (type === 'volume') {
      let error, result;
      try {
@@ -493,7 +493,7 @@ export default {
      return;
    }

-    window.document.title = this.title + ' - File Manager';
+    window.document.title = `File Manager - ${this.title}`;

    this.cwd = sanitize('/' + (cwd ? cwd.join('/') : '/'));
    this.resourceType = type;
@@ -553,11 +553,4 @@ export default {
  margin-top: 5px;
 }

-a.p-button:hover {
-  text-decoration: none;
-  background: #0d89ec;
-  color: #ffffff;
-  border-color: #0d89ec;
-}
-
 </style>