From af5a3e108e11b78de236786693e55d17d4d63470 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 16 Dec 2023 17:21:09 +0100
Subject: [PATCH] feat: add mmu.log to logfiles panel (#1685)

---
 .../panels/Machine/LogfilesPanel.vue          | 159 ++----------------
 .../LogfilesPanel/LogfilesPanelGenericLog.vue |  67 ++++++++
 .../LogfilesPanelRolloverDialog.vue           |  94 +++++++++++
 src/store/variables.ts                        |   5 +
 4 files changed, 178 insertions(+), 147 deletions(-)
 create mode 100644 src/components/panels/Machine/LogfilesPanel/LogfilesPanelGenericLog.vue
 create mode 100644 src/components/panels/Machine/LogfilesPanel/LogfilesPanelRolloverDialog.vue

diff --git a/src/components/panels/Machine/LogfilesPanel.vue b/src/components/panels/Machine/LogfilesPanel.vue
index c4889c984..06f93b9c6 100644
--- a/src/components/panels/Machine/LogfilesPanel.vue
+++ b/src/components/panels/Machine/LogfilesPanel.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <panel
-            :title="$t('Machine.LogfilesPanel.Logfiles').toString()"
+            :title="$t('Machine.LogfilesPanel.Logfiles')"
             :icon="mdiFileDocumentEdit"
             card-class="machine-logfiles-panel"
             :collapsible="true">
@@ -25,166 +25,31 @@
                 </v-tooltip>
             </template>
             <v-card-text :class="'text-center text-lg-left'">
-                <v-row>
-                    <v-col :class="'col-12' + (klipperState !== 'ready' ? 'col-md-6' : 'col-md-12') + ''">
-                        <v-btn
-                            :href="apiUrl + '/server/files/klippy.log'"
-                            block
-                            class="primary--text"
-                            @click="downloadLog">
-                            <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
-                            Klipper
-                        </v-btn>
-                    </v-col>
-                    <v-col
-                        :class="'col-12 pt-0 ' + (klipperState !== 'ready' ? 'col-md-6 mt-md-3 ' : 'col-md-12') + ''">
-                        <v-btn
-                            :href="apiUrl + '/server/files/moonraker.log'"
-                            block
-                            class="primary--text"
-                            @click="downloadLog">
-                            <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
-                            Moonraker
-                        </v-btn>
-                    </v-col>
-                    <v-col
-                        v-if="existsCrowsnestLog"
-                        :class="'col-12 pt-0 ' + (klipperState !== 'ready' ? 'col-md-6 mt-md-3 ' : 'col-md-12') + ''">
-                        <v-btn
-                            :href="apiUrl + '/server/files/logs/crowsnest.log'"
-                            block
-                            class="primary--text"
-                            @click="downloadLog">
-                            <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
-                            Crowsnest
-                        </v-btn>
-                    </v-col>
-                    <v-col
-                        v-if="existsSonarLog"
-                        :class="'col-12 pt-0 ' + (klipperState !== 'ready' ? 'col-md-6 mt-md-3 ' : 'col-md-12') + ''">
-                        <v-btn
-                            :href="apiUrl + '/server/files/logs/sonar.log'"
-                            block
-                            class="primary--text"
-                            @click="downloadLog">
-                            <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
-                            Sonar
-                        </v-btn>
-                    </v-col>
+                <v-row class="pt-3">
+                    <logfiles-panel-generic-log v-for="logfile in genericLogfiles" :key="logfile" :name="logfile" />
                 </v-row>
             </v-card-text>
         </panel>
-        <v-dialog :value="showRolloverDialog" persistent width="400" :fullscreen="isMobile">
-            <panel
-                :title="$t('Machine.LogfilesPanel.Rollover').toString()"
-                card-class="machine_rollover_logfiles-dialog"
-                :icon="mdiFileSyncOutline"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="showRolloverDialog = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text>
-                    <v-row>
-                        <v-col>
-                            <p class="mb-0">{{ $t('Machine.LogfilesPanel.RolloverDescription') }}</p>
-                        </v-col>
-                    </v-row>
-                    <v-row class="mt-0">
-                        <v-col>
-                            <v-checkbox
-                                v-for="log in rolloverLogfiles"
-                                :key="log"
-                                v-model="selectedRolloverLogs"
-                                :label="capitalize(log)"
-                                :value="log"
-                                hide-details
-                                class="mt-0" />
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn text @click="showRolloverDialog = false">
-                        {{ $t('Machine.LogfilesPanel.Cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" text @click="btnRolloverLogs">
-                        {{ $t('Machine.LogfilesPanel.Accept') }}
-                    </v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
+        <logfiles-panel-rollover-dialog :show="showRolloverDialog" @close-dialog="showRolloverDialog = false" />
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
-import BaseMixin from '../../mixins/base'
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import { FileStateFile } from '@/store/files/types'
-import { mdiDownload, mdiFileDocumentEdit, mdiCloseThick, mdiFileSyncOutline } from '@mdi/js'
-import { rolloverLogfiles } from '@/store/variables'
-import { capitalize } from '@/plugins/helpers'
+import { mdiFileDocumentEdit, mdiFileSyncOutline } from '@mdi/js'
+import { genericLogfiles } from '@/store/variables'
+import LogfilesPanelGenericLog from '@/components/panels/Machine/LogfilesPanel/LogfilesPanelGenericLog.vue'
 @Component({
-    components: { Panel },
+    components: { LogfilesPanelGenericLog, Panel },
 })
 export default class LogfilesPanel extends Mixins(BaseMixin) {
     mdiFileDocumentEdit = mdiFileDocumentEdit
-    mdiDownload = mdiDownload
-    mdiCloseThick = mdiCloseThick
     mdiFileSyncOutline = mdiFileSyncOutline
 
-    rolloverLogfiles = rolloverLogfiles
-    capitalize = capitalize
-
-    private showRolloverDialog = false
-    private selectedRolloverLogs: string[] = []
-
-    get logfiles() {
-        return this.$store.getters['files/getDirectory']('logs')?.childrens ?? []
-    }
-
-    get existsCrowsnestLog(): boolean {
-        return this.logfiles.findIndex((log: FileStateFile) => log.filename === 'crowsnest.log') !== -1
-    }
-
-    get existsSonarLog(): boolean {
-        const sonarLog = this.logfiles.find((log: FileStateFile) => log.filename === 'sonar.log')
-
-        return sonarLog?.size > 0
-    }
-
-    get loadingRolloverLogs() {
-        return this.loadings.filter((log) => log.startsWith('rolloverLog_')).length > 0
-    }
-
-    downloadLog(event: any) {
-        event.preventDefault()
-        let href = ''
-        if ('href' in event.target.attributes) href = event.target.attributes.href.value
-        if ('href' in event.target.parentElement.attributes) href = event.target.parentElement.attributes.href.value
-
-        window.open(href)
-    }
-
-    btnRolloverLogs() {
-        if (this.selectedRolloverLogs.length === 0) return
-
-        this.selectedRolloverLogs.forEach((name) => {
-            this.$socket.emit(
-                'server.logs.rollover',
-                { application: name },
-                { loading: 'rolloverLog_' + name, action: 'files/rolloverLog' }
-            )
-        })
-
-        this.selectedRolloverLogs = []
-    }
+    genericLogfiles = genericLogfiles
 
-    @Watch('loadingRolloverLogs')
-    loadingRolloverLogsChanged(newVal: boolean) {
-        if (newVal) this.showRolloverDialog = false
-    }
+    showRolloverDialog = false
 }
 </script>
diff --git a/src/components/panels/Machine/LogfilesPanel/LogfilesPanelGenericLog.vue b/src/components/panels/Machine/LogfilesPanel/LogfilesPanelGenericLog.vue
new file mode 100644
index 000000000..489703359
--- /dev/null
+++ b/src/components/panels/Machine/LogfilesPanel/LogfilesPanelGenericLog.vue
@@ -0,0 +1,67 @@
+<template>
+    <v-col v-if="exists" :class="classes">
+        <v-btn :href="href" block class="primary--text" @click="downloadLog">
+            <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
+            {{ name }}
+        </v-btn>
+    </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { FileStateFile } from '@/store/files/types'
+import { mdiDownload } from '@mdi/js'
+@Component({
+    components: { Panel },
+})
+export default class LogfilesPanel extends Mixins(BaseMixin) {
+    mdiDownload = mdiDownload
+
+    @Prop({ type: String, required: true }) name!: string
+
+    get logfiles() {
+        return this.$store.getters['files/getDirectory']('logs')?.childrens ?? []
+    }
+
+    get filename() {
+        return this.name + '.log'
+    }
+
+    get exists(): boolean {
+        if (['klippy', 'moonraker'].includes(this.name)) return true
+
+        return this.logfiles.findIndex((log: FileStateFile) => log.filename === this.filename) !== -1
+    }
+
+    get href() {
+        let path = '/server/files/logs/'
+        if (['klippy', 'moonraker'].includes(this.name)) path = '/server/files/'
+
+        return this.apiUrl + path + this.filename
+    }
+
+    get classes() {
+        const output = ['col-12', 'pt-0']
+
+        if (this.klipperState !== 'ready') {
+            output.push('col-md-6')
+            output.push('mt-md-3')
+        } else {
+            output.push('col-md-12')
+        }
+
+        return output
+    }
+
+    downloadLog(event: any) {
+        event.preventDefault()
+        let href = ''
+        if ('href' in event.target.attributes) href = event.target.attributes.href.value
+        if ('href' in event.target.parentElement.attributes) href = event.target.parentElement.attributes.href.value
+
+        window.open(href)
+    }
+}
+</script>
diff --git a/src/components/panels/Machine/LogfilesPanel/LogfilesPanelRolloverDialog.vue b/src/components/panels/Machine/LogfilesPanel/LogfilesPanelRolloverDialog.vue
new file mode 100644
index 000000000..2cbb1edab
--- /dev/null
+++ b/src/components/panels/Machine/LogfilesPanel/LogfilesPanelRolloverDialog.vue
@@ -0,0 +1,94 @@
+<template>
+    <v-dialog :value="show" persistent width="400" :fullscreen="isMobile">
+        <panel
+            :title="$t('Machine.LogfilesPanel.Rollover')"
+            card-class="machine_rollover_logfiles-dialog"
+            :icon="mdiFileSyncOutline"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-row>
+                    <v-col>
+                        <p class="mb-0">{{ $t('Machine.LogfilesPanel.RolloverDescription') }}</p>
+                    </v-col>
+                </v-row>
+                <v-row class="mt-0">
+                    <v-col>
+                        <v-checkbox
+                            v-for="log in rolloverLogfiles"
+                            :key="log"
+                            v-model="selectedRolloverLogs"
+                            :label="capitalize(log)"
+                            :value="log"
+                            hide-details
+                            class="mt-0" />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closeDialog">
+                    {{ $t('Machine.LogfilesPanel.Cancel') }}
+                </v-btn>
+                <v-btn color="primary" text @click="btnRolloverLogs">
+                    {{ $t('Machine.LogfilesPanel.Accept') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiFileSyncOutline } from '@mdi/js'
+import { rolloverLogfiles } from '@/store/variables'
+import { capitalize } from '@/plugins/helpers'
+import LogfilesPanelGenericLog from '@/components/panels/Machine/LogfilesPanel/LogfilesPanelGenericLog.vue'
+@Component({
+    components: { LogfilesPanelGenericLog, Panel },
+})
+export default class LogfilesPanelRolloverDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiFileSyncOutline = mdiFileSyncOutline
+
+    rolloverLogfiles = rolloverLogfiles
+    capitalize = capitalize
+
+    @Prop({ type: Boolean, default: false }) show!: boolean
+
+    selectedRolloverLogs: string[] = []
+
+    get loadingRolloverLogs() {
+        return this.loadings.filter((log) => log.startsWith('rolloverLog_')).length > 0
+    }
+
+    @Watch('loadingRolloverLogs')
+    loadingRolloverLogsChanged(newVal: boolean) {
+        if (newVal) this.closeDialog()
+    }
+
+    btnRolloverLogs() {
+        if (this.selectedRolloverLogs.length === 0) return
+
+        this.selectedRolloverLogs.forEach((name) => {
+            this.$socket.emit(
+                'server.logs.rollover',
+                { application: name },
+                { loading: 'rolloverLog_' + name, action: 'files/rolloverLog' }
+            )
+        })
+
+        this.selectedRolloverLogs = []
+    }
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+}
+</script>
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 9e4a57473..8afa67f6f 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -130,6 +130,11 @@ export const hiddenDirectories = ['.git']
  */
 export const availableKlipperConfigReferenceTranslations = ['it', 'hu', 'zh']
 
+/*
+ * List of all downloadable logfiles
+ */
+export const genericLogfiles = ['klippy', 'moonraker', 'crowsnest', 'mmu', 'sonar']
+
 /*
  * List of all rollover logfiles
  */