Merge pull request #321 from fdm-monster/feat/313-create-diagnostics-…

…settings-page-for-controlling-diagnostics-and-log-dump feat: add diagnostics page with logs dump button
fdm-monster · Jul 4, 2023 · 293673c · 293673c
2 parents d9e1058 + 1da9a9f
commit 293673c
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "private": false,
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",

diff --git a/src/backend/server-private.service.ts b/src/backend/server-private.service.ts
@@ -29,4 +29,12 @@ export class ServerPrivateService extends BaseService {
     formData.append("file", file);
     return await this.postUploadApi("api/server/import-printers-floors-yaml", formData, {});
   }
+
+  public static async downloadLogDump() {
+    const response = await this.postApi("api/server/dump-fdm-monster-logs");
+    await downloadFileByBlob(
+      (response as any).data as any,
+      "logs-fdm-monster-" + Date.now() + ".zip"
+    );
+  }
 }
diff --git a/src/components/Settings/DiagnosticsSettings.vue b/src/components/Settings/DiagnosticsSettings.vue
@@ -0,0 +1,79 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary">
+      <v-avatar>
+        <v-icon>bug_report</v-icon>
+      </v-avatar>
+      <v-toolbar-title>Diagnostics</v-toolbar-title>
+    </v-toolbar>
+    <v-list subheader three-line>
+      <v-subheader
+        >Diagnostics to provide bug reports to the developers of this software
+      </v-subheader>
+
+      <v-list-item v-if="hasAnonymousDiagnosticsToggleFeature">
+        <v-list-item-content>
+          <v-list-item-title>Remote Sentry diagnostic reports:</v-list-item-title>
+          <v-list-item-subtitle>
+            <v-checkbox
+              v-model="sentryDiagnosticsEnabled"
+              label="Enable remote Sentry diagnostic reports"
+            />
+          </v-list-item-subtitle>
+          <v-list-item-subtitle>
+            <v-btn color="primary" @click="saveSentryDiagnosticsSettings()">
+              <v-icon class="pr-2">save</v-icon>
+              Save
+            </v-btn>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
+        <v-list-item-content>
+          <v-list-item-title>Logs Dump</v-list-item-title>
+          <v-list-item-subtitle>
+            Download a .zip file containing all logs from the server
+          </v-list-item-subtitle>
+          <v-list-item-subtitle>
+            <br />
+            <v-btn color="primary" @click="downloadLogDump()">
+              <v-icon>download</v-icon>
+              Download Log Files (.zip)
+            </v-btn>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { AppService } from "../../backend/app.service";
+import { useSettingsStore } from "../../store/settings.store";
+import { SettingsService } from "../../backend";
+import { setSentryEnabled } from "../../utils/sentry.util";
+import { ServerPrivateService } from "../../backend/server-private.service";
+
+const settingsStore = useSettingsStore();
+const hasAnonymousDiagnosticsToggleFeature = ref(false);
+const sentryDiagnosticsEnabled = ref(false);
+onMounted(async () => {
+  const features = await AppService.getFeatures();
+  hasAnonymousDiagnosticsToggleFeature.value =
+    features.anonymousDiagnosticsToggle?.available || false;
+
+  await settingsStore.loadSettings();
+  sentryDiagnosticsEnabled.value = settingsStore.serverSettings?.sentryDiagnosticsEnabled || false;
+});
+
+async function saveSentryDiagnosticsSettings() {
+  await SettingsService.setSentryDiagnosticsSettings(sentryDiagnosticsEnabled.value);
+  setSentryEnabled(sentryDiagnosticsEnabled.value);
+}
+
+async function downloadLogDump() {
+  await ServerPrivateService.downloadLogDump();
+}
+</script>
diff --git a/src/components/Settings/SettingsView.vue b/src/components/Settings/SettingsView.vue
@@ -68,6 +68,7 @@ export default defineComponent({
       { title: "OctoPrint Settings", icon: "image", path: "/settings/octoprint" },
       { title: "Emergency Commands", icon: "warning", path: "/settings/emergency-commands" },
       { title: "Software Upgrade", icon: "upgrade", path: "/settings/software-upgrade" },
+      { title: "Diagnostics", icon: "bug_report", path: "/settings/diagnostics" },
     ],
   }),
   computed: {},

diff --git a/src/components/Settings/SoftwareUpgradeSettings.vue b/src/components/Settings/SoftwareUpgradeSettings.vue
@@ -30,7 +30,11 @@
       <v-list-item>
         <v-list-item-content>
           <v-list-item-title> Server upgrade</v-list-item-title>
-          <v-list-item-subtitle>Please contact MTB3D for a server upgrade.</v-list-item-subtitle>
+          <v-list-item-subtitle>
+            Please visit
+            <a href="https://docs.fdm-monster.net">docs.fdm-monster.net</a>
+            for instructions on how to upgrade the server.
+          </v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
     </v-list>
@@ -74,23 +78,6 @@
           </v-btn>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item v-if="hasAnonymousDiagnosticsToggleFeature">
-        <v-list-item-content>
-          <v-list-item-title>Remote Sentry diagnostic reports:</v-list-item-title>
-          <v-list-item-subtitle>
-            <v-checkbox
-              v-model="sentryDiagnosticsEnabled"
-              label="Enable remote Sentry diagnostic reports"
-            />
-
-            <br />
-            <v-btn color="primary" @click="saveSentryDiagnosticsSettings()">
-              <v-icon class="pr-2">save</v-icon>
-              Save
-            </v-btn>
-          </v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
     </v-list>
   </v-card>
 </template>
@@ -100,20 +87,14 @@ import { onMounted, ref } from "vue";
 import { version as packageJsonVersion } from "../../../package.json";
 import { IRelease } from "@/models/server/client-releases.model";
 import { compare, minor } from "semver";
-import { SettingsService } from "@/backend";
-import { useSettingsStore } from "@/store/settings.store";
-import { setSentryEnabled } from "@/utils/sentry.util";
 
-const settingsStore = useSettingsStore();
 const serverVersion = ref("");
 const monsterPiVersion = ref<string | null>("");
 const version = ref(packageJsonVersion);
 const releases = ref<IRelease[]>([]);
 const current = ref<IRelease>();
 const minimum = ref<IRelease>();
 const selectedRelease = ref<string>();
-const hasAnonymousDiagnosticsToggleFeature = ref(false);
-const sentryDiagnosticsEnabled = ref(false);
 
 onMounted(async () => {
   const clientReleases = await AppService.getClientReleases();
@@ -125,12 +106,6 @@ onMounted(async () => {
   const versionSpec = await AppService.getVersion();
   serverVersion.value = versionSpec.version;
   monsterPiVersion.value = versionSpec.monsterPi;
-  const features = await AppService.getFeatures();
-  hasAnonymousDiagnosticsToggleFeature.value =
-    features.anonymousDiagnosticsToggle?.available || false;
-
-  await settingsStore.loadSettings();
-  sentryDiagnosticsEnabled.value = settingsStore.serverSettings?.sentryDiagnosticsEnabled || false;
 });
 
 function isCurrentRelease(release: IRelease) {
@@ -153,9 +128,4 @@ async function clickUpdateClient(tagName: string) {
   await AppService.updateClientDistGithub(tagName);
   location.reload();
 }
-
-async function saveSentryDiagnosticsSettings() {
-  await SettingsService.setSentryDiagnosticsSettings(sentryDiagnosticsEnabled.value);
-  setSentryEnabled(sentryDiagnosticsEnabled.value);
-}
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -11,6 +11,7 @@ import UserManagementSettings from "@/components/Settings/UserManagementSettings
 import FloorSettings from "@/components/Settings/FloorSettings.vue";
 import GridSettings from "../components/Settings/GridSettings.vue";
 import SoftwareUpgradeSettings from "../components/Settings/SoftwareUpgradeSettings.vue";
+import DiagnosticsSettings from "../components/Settings/DiagnosticsSettings.vue";
 
 Vue.use(VueRouter);
 
@@ -57,6 +58,10 @@ const routes: Array<RouteConfig> = [
         path: "software-upgrade",
         component: SoftwareUpgradeSettings,
       },
+      {
+        path: "diagnostics",
+        component: DiagnosticsSettings,
+      },
     ],
   },
   {