Feature/8166 - Show current upload speed and upload details in tooltip (

#8187)

changelog/unreleased/enhancement-show-upload-speed

@@ -0,0 +1,8 @@
+Enhancement: Show upload speed
+
+We have added a tooltip that shows the current upload speed and 
+absolute vs processed filesize for the current upload.
+
+https://github.com/owncloud/web/issues/8166
+https://github.com/owncloud/web/pull/8187
+https://github.com/owncloud/ocis/issues/5511

packages/web-runtime/package.json

@@ -9,10 +9,10 @@
     "@ownclouders/design-system": "workspace:*",
     "@popperjs/core": "^2.11.5",
     "@sentry/vue": "7.31.1",
-    "@uppy/core": "^3.0.2",
+    "@uppy/core": "^3.0.5",
     "@uppy/drop-target": "^2.0.0",
     "@uppy/tus": "^3.0.1",
-    "@uppy/utils": "^5.0.2",
+    "@uppy/utils": "^5.1.2",
     "@uppy/xhr-upload": "^3.0.1",
     "@vueuse/head": "1.0.22",
     "axios": "^0.27.2",

packages/web-runtime/src/components/UploadInfo.vue

@@ -3,7 +3,7 @@
     <div
       class="upload-info-title oc-flex oc-flex-between oc-flex-middle oc-px-m oc-py-s oc-rounded-top"
     >
-      <p class="oc-my-xs" v-text="uploadInfoTitle" />
+      <p v-oc-tooltip="uploadDetails" class="oc-my-xs" v-text="uploadInfoTitle" />
       <oc-button
         v-if="!filesInProgressCount"
         id="close-upload-info-btn"
@@ -138,13 +138,16 @@
 </template>
 
 <script lang="ts">
-import { useCapabilityShareJailEnabled } from 'web-pkg/src/composables'
-import { mapGetters } from 'vuex'
 import { defineComponent } from 'vue'
-import { UppyResource } from '../composables/upload'
-import { urlJoin } from 'web-client/src/utils'
+import { mapGetters } from 'vuex'
 import { isUndefined } from 'lodash-es'
+import getSpeed from '@uppy/utils/lib/getSpeed'
+
+import { urlJoin } from 'web-client/src/utils'
 import { configurationManager } from 'web-pkg/src/configuration'
+import { useCapabilityShareJailEnabled } from 'web-pkg/src/composables'
+import { formatFileSize } from 'web-pkg/src/helpers'
+import { UppyResource } from '../composables/upload'
 
 export default defineComponent({
   setup() {
@@ -167,13 +170,28 @@ export default defineComponent({
     runningUploads: 0, // all uploads (not files!) that are in progress currently
     bytesTotal: 0,
     bytesUploaded: 0,
+    uploadSpeed: 0,
     filesInEstimation: {},
     timeStarted: null,
     remainingTime: undefined
   }),
   computed: {
     ...mapGetters(['configuration']),
 
+    uploadDetails() {
+      if (!this.uploadSpeed || !this.runningUploads) {
+        return ''
+      }
+      const uploadedBytes = formatFileSize(this.bytesUploaded, this.$language.current)
+      const totalBytes = formatFileSize(this.bytesTotal, this.$language.current)
+      const currentUploadSpeed = formatFileSize(this.uploadSpeed, this.$language.current)
+
+      return this.$gettext('%{uploadedBytes} of %{totalBytes} (%{currentUploadSpeed}/s)', {
+        uploadedBytes,
+        totalBytes,
+        currentUploadSpeed
+      })
+    },
     uploadInfoTitle() {
       if (this.inFinalization) {
         return this.$gettext('Finalizing upload...')
@@ -295,6 +313,12 @@ export default defineComponent({
       this.filesInEstimation[file.meta.uploadId] = progress.bytesUploaded
 
       const timeElapsed = +new Date() - this.timeStarted
+
+      this.uploadSpeed = getSpeed({
+        bytesUploaded: this.bytesUploaded,
+        uploadStarted: this.timeStarted
+      })
+
       const progressPercent = (100 * this.bytesUploaded) / this.bytesTotal
       if (progressPercent === 0) {
         return