fix: fix long initial time with huge print history (#1714)

* refactor: refactor history page and list panel Signed-off-by: Stefan Dej <[email protected]> * fix: fix long initial time with huge print history Signed-off-by: Stefan Dej <[email protected]> * refactor: add "All" to locale Signed-off-by: Stefan Dej <[email protected]> * feat: add button to statistic chart Signed-off-by: Stefan Dej <[email protected]> * locale(de): update german locale Signed-off-by: Stefan Dej <[email protected]> * refactor: remove unused icon import Signed-off-by: Stefan Dej <[email protected]> * locale: apply suggestions from code review Co-authored-by: rackrick <[email protected]> --------- Signed-off-by: Stefan Dej <[email protected]> Co-authored-by: rackrick <[email protected]>
mainsail-crew · Dec 31, 2023 · 74ff01b · 74ff01b
1 parent e86d918
commit 74ff01b
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 74 deletions.
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
@@ -69,6 +69,22 @@
                                 {{ $t('History.Table') }}
                             </v-btn>
                         </v-btn-toggle>
+                        <v-tooltip v-if="!allLoaded" top>
+                            <template #activator="{ on, attrs }">
+                                <v-btn
+                                    outlined
+                                    small
+                                    :loading="loadings.includes('historyLoadAll')"
+                                    class="ml-3 minwidth-0 px-2"
+                                    color="primary"
+                                    v-bind="attrs"
+                                    v-on="on"
+                                    @click="refreshHistory">
+                                    <v-icon small>{{ mdiDatabaseArrowDownOutline }}</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>{{ $t('History.LoadCompleteHistory') }}</span>
+                        </v-tooltip>
                     </div>
                 </v-col>
                 <v-col class="col-12 col-sm-12 col-md-4">
@@ -98,12 +114,13 @@ import HistoryFilamentUsage from '@/components/charts/HistoryFilamentUsage.vue'
 import HistoryPrinttimeAvg from '@/components/charts/HistoryPrinttimeAvg.vue'
 import HistoryAllPrintStatusChart from '@/components/charts/HistoryAllPrintStatusChart.vue'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
-import { mdiChartAreaspline } from '@mdi/js'
+import { mdiChartAreaspline, mdiDatabaseArrowDownOutline } from '@mdi/js'
 @Component({
     components: { Panel, HistoryFilamentUsage, HistoryPrinttimeAvg, HistoryAllPrintStatusChart },
 })
 export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     mdiChartAreaspline = mdiChartAreaspline
+    mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
 
     get selectedJobs() {
         return this.$store.state.gui.view.history.selectedJobs ?? []
@@ -197,6 +214,16 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.history.toggleChartCol2', value: newVal })
     }
 
+    get allLoaded() {
+        return this.$store.state.server.history.all_loaded ?? false
+    }
+
+    refreshHistory() {
+        this.$store.dispatch('socket/addLoading', { name: 'historyLoadAll' })
+
+        this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
+    }
+
     formatPrintTime(totalSeconds: number) {
         if (totalSeconds) {
             let output = ''

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -351,6 +351,7 @@
         "Jobs": "Drucke",
         "LastModified": "Zuletzt geändert",
         "LayerHeight": "Schichthöhe",
+        "LoadCompleteHistory": "Lade vollständige Historie",
         "LongestPrinttime": "Druckzeit - längste",
         "Note": "Notiz",
         "ObjectHeight": "Objekthöhe",
@@ -381,8 +382,6 @@
         },
         "Table": "Tabelle",
         "TitleExportHistory": "Historie exportieren",
-        "TitleRefreshHistory": "Historie aktualisieren",
-        "TitleSettings": "Einstellungen",
         "TotalDuration": "Gesamtdauer",
         "TotalFilamentUsed": "Filament verwendet - gesamt",
         "TotalJobs": "Druckvorgänge - gesamt",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -351,6 +351,7 @@
         "Jobs": "Jobs",
         "LastModified": "Last Modified",
         "LayerHeight": "Layer Height",
+        "LoadCompleteHistory": "Load complete history",
         "LongestPrinttime": "Longest Print Time",
         "Note": "Note",
         "ObjectHeight": "Object Height",
@@ -381,8 +382,6 @@
         },
         "Table": "Table",
         "TitleExportHistory": "Export History",
-        "TitleRefreshHistory": "Refresh History",
-        "TitleSettings": "Settings",
         "TotalDuration": "Total Time",
         "TotalFilamentUsed": "Total Filament Used",
         "TotalJobs": "Total Jobs",

diff --git a/src/pages/History.vue b/src/pages/History.vue
@@ -1,15 +1,13 @@
-<style scoped></style>
-
 <template>
     <div>
         <v-row>
             <v-col>
-                <history-statistics-panel></history-statistics-panel>
+                <history-statistics-panel />
             </v-col>
         </v-row>
         <v-row class="mt-0">
             <v-col>
-                <history-list-panel></history-list-panel>
+                <history-list-panel />
             </v-col>
         </v-row>
     </div>

diff --git a/src/store/server/history/actions.ts b/src/store/server/history/actions.ts
@@ -9,7 +9,11 @@ export const actions: ActionTree<ServerHistoryState, RootState> = {
     },
 
     init() {
-        Vue.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
+        Vue.$socket.emit(
+            'server.history.list',
+            { start: 0, limit: 50, max: 100 },
+            { action: 'server/history/getHistory' }
+        )
         Vue.$socket.emit('server.history.totals', {}, { action: 'server/history/getTotals' })
     },
 
@@ -18,23 +22,37 @@ export const actions: ActionTree<ServerHistoryState, RootState> = {
     },
 
     async getHistory({ commit, dispatch, state }, payload) {
-        if ('requestParams' in payload && 'start' in payload.requestParams && payload.requestParams.start === 0)
-            await commit('resetJobs')
+        if ('requestParams' in payload && (payload.requestParams?.start ?? 0) === 0) commit('resetJobs')
 
         payload.jobs?.forEach((job: ServerHistoryStateJob) => {
             if (state.jobs.findIndex((stateJob) => stateJob.job_id === job.job_id) === -1) commit('addJob', job)
         })
 
-        if (payload.requestParams?.limit > 0 && payload.jobs?.length === payload.requestParams.limit)
+        const start = payload.requestParams?.start ?? 0
+        const limit = payload.requestParams?.limit ?? 50
+        const max = payload.requestParams?.max ?? null
+
+        if (limit > 0 && (max === null || max > start + limit) && payload.jobs?.length === limit) {
             Vue.$socket.emit(
                 'server.history.list',
                 {
-                    start: payload.requestParams.start + payload.requestParams.limit,
-                    limit: payload.requestParams.limit,
+                    start: start + limit,
+                    limit: limit,
+                    max: max,
                 },
                 { action: 'server/history/getHistory' }
             )
-        else await dispatch('loadHistoryNotes')
+
+            // stop here until all pulls are done
+            return
+        }
+
+        if (payload.jobs?.length < limit) {
+            dispatch('socket/removeLoading', { name: 'historyLoadAll' }, { root: true })
+            commit('setAllLoaded')
+        }
+
+        dispatch('loadHistoryNotes')
     },
 
     loadHistoryNotes({ dispatch, rootState }) {

diff --git a/src/store/server/history/index.ts b/src/store/server/history/index.ts
@@ -15,6 +15,7 @@ export const getDefaultState = (): ServerHistoryState => {
             longest_job: 0,
             longest_print: 0,
         },
+        all_loaded: false,
     }
 }
 

diff --git a/src/store/server/history/mutations.ts b/src/store/server/history/mutations.ts
@@ -37,4 +37,8 @@ export const mutations: MutationTree<ServerHistoryState> = {
         const index = state.jobs.findIndex((job) => job.job_id === payload)
         if (index !== -1) state.jobs.splice(index, 1)
     },
+
+    setAllLoaded(state) {
+        Vue.set(state, 'all_loaded', true)
+    },
 }
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
@@ -8,6 +8,7 @@ export interface ServerHistoryState {
         longest_job: number
         longest_print: number
     }
+    all_loaded: boolean
 }
 
 export interface ServerHistoryStateJob {
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ export const getDefaultState = (): ServerHistoryState => { @@
                 longest_job: 0,
                 longest_print: 0,
             },
+            all_loaded: false,
         }
     }
@@ Expand Down @@