From 891421d23f01dd39879c931c8aeb2d00bd4ad84e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 25 Dec 2023 17:52:04 +0100
Subject: [PATCH 1/7] refactor: refactor history page and list panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 72 ++++++++++------------
 src/pages/History.vue                      |  6 +-
 2 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 4b41adfa1..c4dd07ddf 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -15,7 +15,7 @@
                             outlined
                             clearable
                             hide-details
-                            dense></v-text-field>
+                            dense />
                     </v-col>
                     <v-col class="offset-4 col-4 d-flex align-center justify-end">
                         <template v-if="selectedJobs.length">
@@ -60,9 +60,9 @@
                                             hide-details
                                             :input-value="status.showInTable"
                                             :label="`${status.displayName} (${status.value})`"
-                                            @change="changeStatusVisible(status)"></v-checkbox>
+                                            @change="changeStatusVisible(status)" />
                                     </v-list-item>
-                                    <v-divider></v-divider>
+                                    <v-divider />
                                 </template>
                                 <v-list-item v-for="header of configHeaders" :key="header.key" class="minHeight36">
                                     <v-checkbox
@@ -70,14 +70,14 @@
                                         class="mt-0"
                                         hide-details
                                         :label="header.text"
-                                        @change="changeColumnVisible(header.value)"></v-checkbox>
+                                        @change="changeColumnVisible(header.value)" />
                                 </v-list-item>
                             </v-list>
                         </v-menu>
                     </v-col>
                 </v-row>
             </v-card-text>
-            <v-divider class="mb-3"></v-divider>
+            <v-divider class="mb-3" />
             <v-data-table
                 v-model="selectedJobs"
                 :items="jobs"
@@ -114,7 +114,7 @@
                                 v-ripple
                                 :value="isSelected"
                                 class="pa-0 mr-0"
-                                @click.stop="select(!isSelected)"></v-simple-checkbox>
+                                @click.stop="select(!isSelected)" />
                         </td>
                         <td class="px-0 text-center" style="width: 32px">
                             <template v-if="!item.exists">
@@ -131,10 +131,7 @@
                                                 height="32"
                                                 v-bind="attrs"
                                                 v-on="on" />
-                                            <v-progress-circular
-                                                slot="preloader"
-                                                indeterminate
-                                                color="primary"></v-progress-circular>
+                                            <v-progress-circular slot="preloader" indeterminate color="primary" />
                                             <v-icon slot="error">{{ mdiFile }}</v-icon>
                                         </vue-load-image>
                                     </template>
@@ -144,10 +141,7 @@
                             <template v-else-if="getSmallThumbnail(item)">
                                 <vue-load-image>
                                     <img slot="image" :src="getSmallThumbnail(item)" width="32" height="32" />
-                                    <v-progress-circular
-                                        slot="preloader"
-                                        indeterminate
-                                        color="primary"></v-progress-circular>
+                                    <v-progress-circular slot="preloader" indeterminate color="primary" />
                                     <v-icon slot="error">{{ mdiFile }}</v-icon>
                                 </vue-load-image>
                             </template>
@@ -164,7 +158,7 @@
                                             {{ mdiNotebook }}
                                         </v-icon>
                                     </template>
-                                    <span v-html="item.note.replaceAll('\n', '<br />')"></span>
+                                    <span v-html="item.note.replaceAll('\n', '<br />')" />
                                 </v-tooltip>
                             </template>
                             <v-tooltip top>
@@ -252,14 +246,14 @@
                             <v-col class="text-right">{{ detailsDialog.item.filename }}</v-col>
                         </v-row>
                         <template v-if="'metadata' in detailsDialog.item && 'size' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.Filesize') }}</v-col>
                                 <v-col class="text-right">{{ formatFilesize(detailsDialog.item.metadata.size) }}</v-col>
                             </v-row>
                         </template>
                         <template v-if="'metadata' in detailsDialog.item && 'modified' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.LastModified') }}</v-col>
                                 <v-col class="text-right">
@@ -267,7 +261,7 @@
                                 </v-col>
                             </v-row>
                         </template>
-                        <v-divider class="my-3"></v-divider>
+                        <v-divider class="my-3" />
                         <v-row>
                             <v-col>{{ $t('History.Status') }}</v-col>
                             <v-col class="text-right">
@@ -278,13 +272,13 @@
                                 }}
                             </v-col>
                         </v-row>
-                        <v-divider class="my-3"></v-divider>
+                        <v-divider class="my-3" />
                         <v-row>
                             <v-col>{{ $t('History.StartTime') }}</v-col>
                             <v-col class="text-right">{{ formatDateTime(detailsDialog.item.start_time * 1000) }}</v-col>
                         </v-row>
                         <template v-if="'end_time' in detailsDialog.item && detailsDialog.item.end_time > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EndTime') }}</v-col>
                                 <v-col class="text-right">
@@ -294,7 +288,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'estimated_time' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EstimatedTime') }}</v-col>
                                 <v-col class="text-right">
@@ -303,7 +297,7 @@
                             </v-row>
                         </template>
                         <template v-if="detailsDialog.item.print_duration > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.PrintDuration') }}</v-col>
                                 <v-col class="text-right">
@@ -312,7 +306,7 @@
                             </v-row>
                         </template>
                         <template v-if="detailsDialog.item.total_duration > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.TotalDuration') }}</v-col>
                                 <v-col class="text-right">
@@ -322,7 +316,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'filament_total' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EstimatedFilamentWeight') }}</v-col>
                                 <v-col class="text-right">
@@ -332,7 +326,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'filament_total' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EstimatedFilament') }}</v-col>
                                 <v-col class="text-right">
@@ -341,7 +335,7 @@
                             </v-row>
                         </template>
                         <template v-if="detailsDialog.item.filament_used > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FilamentUsed') }}</v-col>
                                 <v-col class="text-right">{{ Math.round(detailsDialog.item.filament_used) }} mm</v-col>
@@ -352,7 +346,7 @@
                                 'metadata' in detailsDialog.item &&
                                 'first_layer_extr_temp' in detailsDialog.item.metadata
                             ">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FirstLayerExtTemp') }}</v-col>
                                 <v-col class="text-right">
@@ -365,7 +359,7 @@
                                 'metadata' in detailsDialog.item &&
                                 'first_layer_bed_temp' in detailsDialog.item.metadata
                             ">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FirstLayerBedTemp') }}</v-col>
                                 <v-col class="text-right">
@@ -377,7 +371,7 @@
                             v-if="
                                 'metadata' in detailsDialog.item && 'first_layer_height' in detailsDialog.item.metadata
                             ">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FirstLayerHeight') }}</v-col>
                                 <v-col class="text-right">
@@ -387,7 +381,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'layer_height' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.LayerHeight') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.layer_height }} mm</v-col>
@@ -395,14 +389,14 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'object_height' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.ObjectHeight') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.object_height }} mm</v-col>
                             </v-row>
                         </template>
                         <template v-if="'metadata' in detailsDialog.item && 'slicer' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.Slicer') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.slicer }}</v-col>
@@ -410,7 +404,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'slicer_version' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.SlicerVersion') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.slicer_version }}</v-col>
@@ -435,7 +429,7 @@
                     </p>
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn color="" text @click="deleteDialog = false">
                         {{ $t('History.Cancel') }}
                     </v-btn>
@@ -463,7 +457,7 @@
                     </p>
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn color="" text @click="deleteSelectedDialog = false">{{ $t('History.Cancel') }}</v-btn>
                     <v-btn color="error" text @click="deleteSelectedJobs">{{ $t('History.Delete') }}</v-btn>
                 </v-card-actions>
@@ -483,16 +477,12 @@
                 <v-card-text class="pb-0">
                     <v-row>
                         <v-col>
-                            <v-textarea
-                                v-model="noteDialog.note"
-                                outlined
-                                hide-details
-                                :label="$t('History.Note')"></v-textarea>
+                            <v-textarea v-model="noteDialog.note" outlined hide-details :label="$t('History.Note')" />
                         </v-col>
                     </v-row>
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn color="" text @click="noteDialog.boolShow = false">{{ $t('History.Cancel') }}</v-btn>
                     <v-btn color="primary" text @click="saveNote">{{ $t('History.Save') }}</v-btn>
                 </v-card-actions>
diff --git a/src/pages/History.vue b/src/pages/History.vue
index 372b780d3..84ef0fd35 100644
--- 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>

From b69434b7e05a2c1c3b1090a7eee40f9e9c6fe93e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 25 Dec 2023 20:20:12 +0100
Subject: [PATCH 2/7] fix: fix long initial time with huge print history

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 35 ++++++++++++++++++----
 src/store/server/history/actions.ts        | 32 +++++++++++++++-----
 src/store/server/history/index.ts          |  1 +
 src/store/server/history/mutations.ts      |  4 +++
 src/store/server/history/types.ts          |  1 +
 5 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index c4dd07ddf..6138ac38a 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -27,18 +27,20 @@
                                 <v-icon>{{ mdiDelete }}</v-icon>
                             </v-btn>
                         </template>
+                        <v-btn
+                            :title="$t('History.TitleRefreshHistory')"
+                            :loading="loadings.includes('historyLoadAll')"
+                            :class="classButtonRefresh"
+                            @click="refreshHistory">
+                            <v-icon :left="!allLoaded">{{ iconButtonRefresh }}</v-icon>
+                            <span v-if="!allLoaded">All</span>
+                        </v-btn>
                         <v-btn
                             :title="$t('History.TitleExportHistory')"
                             class="px-2 minwidth-0 ml-3"
                             @click="exportHistory">
                             <v-icon>{{ mdiDatabaseExportOutline }}</v-icon>
                         </v-btn>
-                        <v-btn
-                            :title="$t('History.TitleRefreshHistory')"
-                            class="px-2 minwidth-0 ml-3"
-                            @click="refreshHistory">
-                            <v-icon>{{ mdiRefresh }}</v-icon>
-                        </v-btn>
                         <v-menu :offset-y="true" :close-on-content-click="false" title="Setup current list">
                             <template #activator="{ on, attrs }">
                                 <v-btn
@@ -513,6 +515,7 @@ import {
     mdiNotebookEdit,
     mdiNotebookPlus,
     mdiNotebook,
+    mdiDownload,
 } from '@mdi/js'
 @Component({
     components: { Panel },
@@ -567,6 +570,10 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     private deleteDialog = false
     private deleteSelectedDialog = false
 
+    get allLoaded() {
+        return this.$store.state.server.history.all_loaded ?? false
+    }
+
     get jobs() {
         return this.$store.getters['server/history/getFilterdJobList'] ?? []
     }
@@ -774,7 +781,23 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         return this.$store.state.gui.general?.language ?? 'en'
     }
 
+    get classButtonRefresh() {
+        const classes = ['minwidth-0', 'ml-3']
+
+        if (this.allLoaded || this.loadings.includes('historyLoadAll')) classes.push('px-2')
+
+        return classes
+    }
+
+    get iconButtonRefresh() {
+        if (this.allLoaded) return mdiRefresh
+
+        return mdiDownload
+    }
+
     refreshHistory() {
+        this.$store.dispatch('socket/addLoading', { name: 'historyLoadAll' })
+
         this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
     }
 
diff --git a/src/store/server/history/actions.ts b/src/store/server/history/actions.ts
index 6f23255de..455fc8c4c 100644
--- 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
index ca245f4f2..8e1acead3 100644
--- 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
index 188c2fab0..9ee7a3129 100644
--- 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
index 2c36f048c..90b5ce7e8 100644
--- 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 {

From 520ecdd61a813f1cde205b7ff4a219d6f64446d8 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 25 Dec 2023 21:23:00 +0100
Subject: [PATCH 3/7] refactor: add "All" to locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 6138ac38a..b5c91c7d0 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -33,7 +33,7 @@
                             :class="classButtonRefresh"
                             @click="refreshHistory">
                             <v-icon :left="!allLoaded">{{ iconButtonRefresh }}</v-icon>
-                            <span v-if="!allLoaded">All</span>
+                            <span v-if="!allLoaded">{{ $t('History.AllJobs') }}</span>
                         </v-btn>
                         <v-btn
                             :title="$t('History.TitleExportHistory')"

From 60d44216e1ee404ac62fb9d3b18ceb050cac5562 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 25 Dec 2023 22:19:29 +0100
Subject: [PATCH 4/7] feat: add button to statistic chart

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue    | 55 ++++++++-----------
 .../panels/HistoryStatisticsPanel.vue         | 29 +++++++++-
 src/locales/en.json                           |  3 +-
 3 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index b5c91c7d0..b5b375cdf 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -27,27 +27,30 @@
                                 <v-icon>{{ mdiDelete }}</v-icon>
                             </v-btn>
                         </template>
-                        <v-btn
-                            :title="$t('History.TitleRefreshHistory')"
-                            :loading="loadings.includes('historyLoadAll')"
-                            :class="classButtonRefresh"
-                            @click="refreshHistory">
-                            <v-icon :left="!allLoaded">{{ iconButtonRefresh }}</v-icon>
-                            <span v-if="!allLoaded">{{ $t('History.AllJobs') }}</span>
-                        </v-btn>
-                        <v-btn
-                            :title="$t('History.TitleExportHistory')"
-                            class="px-2 minwidth-0 ml-3"
-                            @click="exportHistory">
-                            <v-icon>{{ mdiDatabaseExportOutline }}</v-icon>
-                        </v-btn>
-                        <v-menu :offset-y="true" :close-on-content-click="false" title="Setup current list">
+                        <v-tooltip v-if="!allLoaded" top>
                             <template #activator="{ on, attrs }">
                                 <v-btn
+                                    :loading="loadings.includes('historyLoadAll')"
                                     class="px-2 minwidth-0 ml-3"
-                                    :title="$t('History.TitleSettings')"
                                     v-bind="attrs"
-                                    v-on="on">
+                                    v-on="on"
+                                    @click="refreshHistory">
+                                    <v-icon>{{ mdiDatabaseArrowDownOutline }}</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>{{ $t('History.LoadCompleteHistory') }}</span>
+                        </v-tooltip>
+                        <v-tooltip top>
+                            <template #activator="{ on, attrs }">
+                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on" @click="exportHistory">
+                                    <v-icon>{{ mdiDatabaseExportOutline }}</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>{{ $t('History.TitleExportHistory') }}</span>
+                        </v-tooltip>
+                        <v-menu :offset-y="true" :close-on-content-click="false">
+                            <template #activator="{ on, attrs }">
+                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on">
                                     <v-icon>{{ mdiCog }}</v-icon>
                                 </v-btn>
                             </template>
@@ -503,7 +506,7 @@ import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/v
 import {
     mdiDatabaseExportOutline,
     mdiDelete,
-    mdiRefresh,
+    mdiDatabaseArrowDownOutline,
     mdiCog,
     mdiPrinter,
     mdiTextBoxSearch,
@@ -523,7 +526,7 @@ import {
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDatabaseExportOutline = mdiDatabaseExportOutline
     mdiDelete = mdiDelete
-    mdiRefresh = mdiRefresh
+    mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
     mdiCog = mdiCog
     mdiPrinter = mdiPrinter
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
@@ -781,20 +784,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         return this.$store.state.gui.general?.language ?? 'en'
     }
 
-    get classButtonRefresh() {
-        const classes = ['minwidth-0', 'ml-3']
-
-        if (this.allLoaded || this.loadings.includes('historyLoadAll')) classes.push('px-2')
-
-        return classes
-    }
-
-    get iconButtonRefresh() {
-        if (this.allLoaded) return mdiRefresh
-
-        return mdiDownload
-    }
-
     refreshHistory() {
         this.$store.dispatch('socket/addLoading', { name: 'historyLoadAll' })
 
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index 8e9261c6a..a282fe979 100644
--- 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/en.json b/src/locales/en.json
index 643ccf94a..600156150 100644
--- 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 jobs",
         "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",

From 93c2865a45fb18dce726a3a044921d4cc0b2f065 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 25 Dec 2023 22:21:03 +0100
Subject: [PATCH 5/7] locale(de): update german locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/de.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/locales/de.json b/src/locales/de.json
index 56a3df8d8..4d147139a 100644
--- 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 komplette Verlaufsliste",
         "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",

From 8c5cd633a5597ee2aaa47447582efa84f59b5b13 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 30 Dec 2023 23:39:22 +0100
Subject: [PATCH 6/7] refactor: remove unused icon import

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index b5b375cdf..566a97200 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -518,7 +518,6 @@ import {
     mdiNotebookEdit,
     mdiNotebookPlus,
     mdiNotebook,
-    mdiDownload,
 } from '@mdi/js'
 @Component({
     components: { Panel },

From 34612355399651dcd8b4df227cc395a632293559 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 30 Dec 2023 23:39:56 +0100
Subject: [PATCH 7/7] locale: apply suggestions from code review

Co-authored-by: rackrick <45207681+rackrick@users.noreply.github.com>
---
 src/locales/de.json | 2 +-
 src/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locales/de.json b/src/locales/de.json
index 4d147139a..5794525fe 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -351,7 +351,7 @@
         "Jobs": "Drucke",
         "LastModified": "Zuletzt geändert",
         "LayerHeight": "Schichthöhe",
-        "LoadCompleteHistory": "Lade komplette Verlaufsliste",
+        "LoadCompleteHistory": "Lade vollständige Historie",
         "LongestPrinttime": "Druckzeit - längste",
         "Note": "Notiz",
         "ObjectHeight": "Objekthöhe",
diff --git a/src/locales/en.json b/src/locales/en.json
index 600156150..8cb6bda38 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -351,7 +351,7 @@
         "Jobs": "Jobs",
         "LastModified": "Last Modified",
         "LayerHeight": "Layer Height",
-        "LoadCompleteHistory": "Load complete history jobs",
+        "LoadCompleteHistory": "Load complete history",
         "LongestPrinttime": "Longest Print Time",
         "Note": "Note",
         "ObjectHeight": "Object Height",