Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: file upload rate displays NaN instead of an actual value #1777

Merged
merged 4 commits into from
Feb 15, 2024
Merged

fix: file upload rate displays NaN instead of an actual value #1777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1572fc7
fix: Fix upload rate counter in Files explorer
mdziekon Feb 14, 2024
b639d5f
fix: Fix upload rate counter in Topbar (Upload & Print feature)
mdziekon Feb 14, 2024
b8597a8
fix: Fix download rate counter in GCode viewer
mdziekon Feb 14, 2024
7c45f12
fix: Remove unused properties
mdziekon Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 5 additions & 23 deletions src/components/TheTopbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ import { Mixins } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import { validGcodeExtensions } from '@/store/variables'
import Component from 'vue-class-component'
import axios from 'axios'
import axios, { AxiosProgressEvent } from 'axios'
import { formatFilesize } from '@/plugins/helpers'
import TheTopCornerMenu from '@/components/TheTopCornerMenu.vue'
import TheSettingsMenu from '@/components/TheSettingsMenu.vue'
Expand All @@ -128,10 +128,6 @@ type uploadSnackbar = {
speed: number
total: number
cancelTokenSource: any
lastProgress: {
time: number
loaded: number
}
}

@Component({
Expand Down Expand Up @@ -162,10 +158,6 @@ export default class TheTopbar extends Mixins(BaseMixin) {
speed: 0,
total: 0,
cancelTokenSource: null,
lastProgress: {
time: 0,
loaded: 0,
},
}

formatFilesize = formatFilesize
Expand Down Expand Up @@ -317,8 +309,6 @@ export default class TheTopbar extends Mixins(BaseMixin) {
this.uploadSnackbar.status = true
this.uploadSnackbar.percent = 0
this.uploadSnackbar.speed = 0
this.uploadSnackbar.lastProgress.loaded = 0
this.uploadSnackbar.lastProgress.time = 0

formData.append('file', file, filename)
formData.append('print', 'true')
Expand All @@ -329,18 +319,10 @@ export default class TheTopbar extends Mixins(BaseMixin) {
.post(this.apiUrl + '/server/files/upload', formData, {
cancelToken: this.uploadSnackbar.cancelTokenSource.token,
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent: ProgressEvent) => {
this.uploadSnackbar.percent = (progressEvent.loaded * 100) / progressEvent.total
if (this.uploadSnackbar.lastProgress.time) {
const time = progressEvent.timeStamp - this.uploadSnackbar.lastProgress.time
const data = progressEvent.loaded - this.uploadSnackbar.lastProgress.loaded

if (time) this.uploadSnackbar.speed = data / (time / 1000)
}

this.uploadSnackbar.lastProgress.time = progressEvent.timeStamp
this.uploadSnackbar.lastProgress.loaded = progressEvent.loaded
this.uploadSnackbar.total = progressEvent.total
onUploadProgress: (progressEvent: AxiosProgressEvent) => {
this.uploadSnackbar.percent = (progressEvent.progress ?? 0) * 100
this.uploadSnackbar.speed = progressEvent.rate ?? 0
this.uploadSnackbar.total = progressEvent.total ?? 0
},
})
.then((result) => {
Expand Down
29 changes: 5 additions & 24 deletions src/components/gcodeviewer/Viewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@
import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
import BaseMixin from '../mixins/base'
import GCodeViewer from '@sindarius/gcodeviewer'
import axios from 'axios'
import axios, { AxiosProgressEvent } from 'axios'
import { formatFilesize } from '@/plugins/helpers'
import Panel from '@/components/ui/Panel.vue'
import CodeStream from '@/components/gcodeviewer/CodeStream.vue'
Expand All @@ -304,10 +304,6 @@ interface downloadSnackbar {
speed: number
total: number
cancelTokenSource: any
lastProgress: {
time: number
loaded: number
}
}

let viewer: any = null
Expand Down Expand Up @@ -357,10 +353,6 @@ export default class Viewer extends Mixins(BaseMixin) {
speed: 0,
total: 0,
cancelTokenSource: {},
lastProgress: {
time: 0,
loaded: 0,
},
}

private excludeObject = {
Expand Down Expand Up @@ -634,28 +626,17 @@ export default class Viewer extends Mixins(BaseMixin) {
async loadFile(filename: string) {
this.downloadSnackbar.status = true
this.downloadSnackbar.speed = 0
this.downloadSnackbar.lastProgress.time = 0
this.downloadSnackbar.filename = filename.startsWith('gcodes/') ? filename.slice(7) : filename
const CancelToken = axios.CancelToken
this.downloadSnackbar.cancelTokenSource = CancelToken.source()
const text = await axios
.get(this.apiUrl + '/server/files/' + encodeURI(filename), {
cancelToken: this.downloadSnackbar.cancelTokenSource.token,
responseType: 'blob',
onDownloadProgress: (progressEvent) => {
this.downloadSnackbar.percent = (progressEvent.loaded * 100) / progressEvent.total
if (this.downloadSnackbar.lastProgress.time) {
const time = progressEvent.timeStamp - this.downloadSnackbar.lastProgress.time
const data = progressEvent.loaded - this.downloadSnackbar.lastProgress.loaded

if (time > 1000 || this.downloadSnackbar.speed === 0) {
this.downloadSnackbar.speed = data / (time / 1000)
this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp
this.downloadSnackbar.lastProgress.loaded = progressEvent.loaded
}
} else this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp

this.downloadSnackbar.total = progressEvent.total
onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
this.downloadSnackbar.percent = (progressEvent.progress ?? 0) * 100
this.downloadSnackbar.speed = progressEvent.rate ?? 0
this.downloadSnackbar.total = progressEvent.total ?? 0
},
})
.then((res) => res.data.text())
Expand Down
8 changes: 0 additions & 8 deletions src/components/panels/Machine/ConfigFilesPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,10 +601,6 @@ interface uploadSnackbar {
number: number
max: number
cancelTokenSource: any
lastProgress: {
time: number
loaded: number
}
}

interface draggingFile {
Expand Down Expand Up @@ -719,10 +715,6 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin, ThemeMixin) {
number: 0,
max: 0,
cancelTokenSource: {},
lastProgress: {
time: 0,
loaded: 0,
},
}
private draggingFile: draggingFile = {
item: {
Expand Down
27 changes: 5 additions & 22 deletions src/store/files/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { RootState } from '@/store/types'
import i18n from '@/plugins/i18n'
import { hiddenDirectories, validGcodeExtensions } from '@/store/variables'
import axios from 'axios'
import axios, { AxiosProgressEvent } from 'axios'
import { BatchMessage } from '@/plugins/webSocketClient'

export const actions: ActionTree<FileState, RootState> = {
Expand Down Expand Up @@ -316,34 +316,17 @@ export const actions: ActionTree<FileState, RootState> = {
await commit('uploadSetFilename', payload.file.name)
await commit('uploadSetShow', true)

let lastTime = 0
let lastLoaded = 0

return new Promise((resolve) => {
axios
.post(apiUrl + '/server/files/upload', formData, {
cancelToken: cancelTokenSource.token,
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent: any) => {
const percent = (progressEvent.loaded * 100) / progressEvent.total
onUploadProgress: (progressEvent: AxiosProgressEvent) => {
const percent = (progressEvent.progress ?? 0) * 100
commit('uploadSetPercent', percent)

if (lastTime === 0) {
lastTime = progressEvent.timeStamp
lastLoaded = progressEvent.loaded

return
}

const time = progressEvent.timeStamp - lastTime
if (time < 1000) return

const data = progressEvent.loaded - lastLoaded
const speed = data / (time / 1000)
commit('uploadSetSpeed', speed)

lastTime = progressEvent.timeStamp
lastLoaded = progressEvent.loaded
const rate = progressEvent.rate ?? 0
commit('uploadSetSpeed', rate)
},
})
.then((result: any) => {
Expand Down
Loading