[MS] Display global upload progress

Author: Max-7

client/src/common/transferRate.ts

@@ -0,0 +1,61 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+interface Sample {
+  bytes: number;
+  timestamp: number;
+}
+
+const MAX_SAMPLES = 5;
+
+class TransferRateCalculator {
+  private samples: Sample[] = [];
+
+  constructor() {}
+
+  update(bytes: number): void {
+    this.samples.push({ bytes: bytes, timestamp: Date.now() });
+    if (this.samples.length > MAX_SAMPLES) {
+      this.samples.shift();
+    }
+  }
+
+  getRate(): number {
+    if (this.samples.length < 2) {
+      return 0;
+    }
+
+    const now = Date.now();
+    let weightedRate = 0;
+    let totalWeight = 0;
+
+    for (let i = 1; i < this.samples.length; i++) {
+      const prev = this.samples[i - 1];
+      const curr = this.samples[i];
+      const dtMs = curr.timestamp - prev.timestamp;
+      if (dtMs <= 0) {
+        continue;
+      }
+      const rate = Math.abs(curr.bytes - prev.bytes) / (dtMs / 1000);
+      // Weight decays by half every 5000 so recent intervals dominate
+      const weight = Math.pow(0.5, (now - curr.timestamp) / 5000);
+      weightedRate += rate * weight;
+      totalWeight += weight;
+    }
+
+    return totalWeight > 0 ? weightedRate / totalWeight : 0;
+  }
+
+  getEta(remainingBytes: number): number {
+    const rate = this.getRate();
+    if (rate <= 0) {
+      return Infinity;
+    }
+    return remainingBytes / rate;
+  }
+
+  clear(): void {
+    this.samples = [];
+  }
+}
+
+export { TransferRateCalculator };

client/src/components/files/operations/FileOperationDownloadArchive.vue

@@ -76,6 +76,10 @@
           class="progress-info"
           v-if="props.status === FileOperationEvents.Progress && props.eventData"
         >
+          <ion-text class="progress-percentage button-small default-state">
+            {{ (props.eventData as OperationProgressEventData).global.progress }}%
+          </ion-text>
+
           <ms-spinner class="progress-spinner default-state" />
           <ion-button
             fill="clear"

client/src/components/files/operations/UploadStatus.vue

@@ -0,0 +1,40 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <div v-if="!status">ALL FILES ARE SYNCED</div>
+  <div v-else>
+    SYNCING FILES... {{ $msTranslate(formatFileSize(status.totalBytes)) }} {{ status.totalFiles }} files<br />
+    <span v-if="rate > 0">{{ $msTranslate(formatFileSize(rate)) }}/s</span>
+    <span v-if="eta !== Infinity">{{ $msTranslate(formatETA(eta)) }} left</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatFileSize } from '@/common/file';
+import { TransferRateCalculator } from '@/common/transferRate';
+import { UploadProgress } from '@/parsec';
+import { formatETA } from '@/services/translation';
+import { ref, watch } from 'vue';
+
+const rate = ref<number>(0);
+const eta = ref<number>(Infinity);
+
+const props = defineProps<{
+  status?: UploadProgress;
+  rateCalculator: TransferRateCalculator;
+}>();
+
+watch(
+  () => props.status,
+  (newValue) => {
+    if (newValue) {
+      eta.value = props.rateCalculator.getEta(newValue.totalBytes);
+    } else {
+      eta.value = Infinity;
+    }
+    rate.value = props.rateCalculator.getRate();
+  },
+);
+</script>
+
+<style scoped lang="scss"></style>

client/src/components/notifications/AllImportedElementsNotification.vue

@@ -52,7 +52,6 @@ async function openImportedMenu(): Promise<void> {
   if (!currentRouteIsFileRoute()) {
     await navigateTo(Routes.Workspaces);
   }
-  menu.show();
   menu.expand();
 }
 </script>

client/src/parsec/index.ts

@@ -17,6 +17,7 @@ export * from '@/parsec/path';
 export * from '@/parsec/search';
 export * from '@/parsec/server';
 export * from '@/parsec/shamir';
+export * from '@/parsec/sync';
 export * from '@/parsec/terms_of_service';
 export * from '@/parsec/totp';
 export * from '@/parsec/types';

client/src/parsec/sync.ts

@@ -0,0 +1,25 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+import { ClientGetOutboundSyncBacklogError, Result, UploadProgress } from '@/parsec/types';
+import { generateNoHandleError } from '@/parsec/utils';
+import { libparsec } from '@/plugins/libparsec';
+import { getConnectionHandle } from '@/router';
+
+export async function getGlobalUploadProgress(): Promise<Result<UploadProgress, ClientGetOutboundSyncBacklogError>> {
+  const handle = getConnectionHandle();
+
+  if (!handle) {
+    return generateNoHandleError<ClientGetOutboundSyncBacklogError>();
+  }
+  const result = await libparsec.clientGetOutboundSyncBacklog(handle);
+  if (result.ok) {
+    return {
+      ok: true,
+      value: {
+        totalBytes: Number(result.value.totalPendingBytesForStartedWorkspaces),
+        totalFiles: Number(result.value.totalPendingEntriesForStartedWorkspaces),
+      },
+    };
+  }
+  return result;
+}

client/src/parsec/types.ts

@@ -171,6 +171,8 @@ export type {
   ClientExportRecoveryDeviceError,
   ClientGetAsyncEnrollmentAddrError,
   ClientGetOrganizationBootstrapDateError,
+  ClientGetOutboundSyncBacklog,
+  ClientGetOutboundSyncBacklogError,
   ClientGetSelfShamirRecoveryError,
   ClientGetTosError,
   ClientGetUserDeviceError,
@@ -591,6 +593,11 @@ type OtherShamirRecoveryInfo =
   | OtherShamirRecoveryInfoSetupButUnusable
   | OtherShamirRecoveryInfoSetupWithRevokedRecipients;
 
+interface UploadProgress {
+  totalBytes: number;
+  totalFiles: number;
+}
+
 export {
   AccessToken,
   AccountHandle,
@@ -634,6 +641,7 @@ export {
   SelfShamirRecoveryInfoSetupWithRevokedRecipients,
   ServerConfig,
   SystemPath,
+  UploadProgress,
   UserID,
   UserInfo,
   UserTuple,

client/src/plugins/libparsec/index.ts

@@ -35,7 +35,7 @@ function logError(level: 'warn' | 'error', message: string): void {
 }
 
 interface SkipData {
-  tag: string;
+  tag?: string;
   function: string;
 }
 
@@ -52,6 +52,9 @@ const FUNCTIONS_TO_SKIP: Array<SkipData> = [
     tag: 'WorkspaceCreateFolderErrorEntryExists',
     function: 'workspaceCreateFolderAll',
   },
+  {
+    function: 'clientGetOutboundSyncBacklog',
+  },
 ];
 
 const FUNCTIONS_TO_SLOW_DOWN: Array<string> = [
@@ -93,7 +96,9 @@ class ParsecProxy {
         if (
           result &&
           (result as any).ok === false &&
-          !FUNCTIONS_TO_SKIP.find((sd) => sd.function === name && (result as any).error && (result as any).error.tag === sd.tag)
+          !FUNCTIONS_TO_SKIP.find(
+            (sd) => sd.function === name && (result as any).error && (!sd.tag || (result as any).error.tag === sd.tag),
+          )
         ) {
           const resultError = result as { ok: boolean; error: { tag: string; error: string } };
           logError('warn', `Error when calling ${name}: ${JSON.stringify(resultError.error)}`);

client/src/services/translation.ts

@@ -2,7 +2,8 @@
 
 import { InvitationStatus, UserProfile, WorkspaceRole } from '@/parsec';
 import { InvoiceStatus } from '@/services/bms';
-import { Locale, Translatable } from 'megashark-lib';
+import { Duration } from 'luxon';
+import { I18n, Locale, Translatable } from 'megashark-lib';
 
 export function getProfileTranslationKey(profile: UserProfile): Translatable {
   if (profile === UserProfile.Admin) {
@@ -83,3 +84,10 @@ export function getInvitationStatusTranslationKey(status: InvitationStatus): Tra
 export function longLocaleCodeToShort(longCode: Locale): string {
   return longCode.split('-')[0];
 }
+
+export function formatETA(seconds: number): Translatable {
+  const entries = Object.entries(Duration.fromObject({ seconds }).rescale().toObject())
+    .filter(([k, v]) => v > 0 && k !== 'milliseconds')
+    .slice(0, 2);
+  return I18n.valueAsTranslatable(Duration.fromObject(Object.fromEntries(entries)).reconfigure({ locale: I18n.getLocale() }).toHuman());
+}

client/src/views/files/FileOperationMenu.vue

@@ -2,26 +2,28 @@
 
 <template>
   <div
-    v-if="menu.isVisible() || isFileOperationManagerActive"
     class="upload-menu"
     :class="menu.isMinimized() ? 'minimize' : ''"
   >
     <div class="upload-menu-header">
       <ion-text class="title-h4">{{ $msTranslate('FoldersPage.ImportFile.title') }}</ion-text>
+      <div v-show="menu.isMinimized()">
+        <span v-if="uploadProgressStatus && uploadProgressStatus.totalBytes === 0">FILES SYNCED</span>
+        <span v-if="uploadProgressStatus && uploadProgressStatus.totalBytes > 0">SYNCING...</span>
+      </div>
       <div class="menu-header-icons">
         <ion-icon
           class="menu-header-icons__item"
           :icon="chevronDown"
           @click="toggleMenu()"
         />
-        <ion-icon
-          v-if="!isFileOperationManagerActive"
-          class="menu-header-icons__item"
-          :icon="close"
-          @click="menu.hide()"
-        />
       </div>
     </div>
+    <upload-status
+      :rate-calculator="rateCalculator as TransferRateCalculator"
+      :status="uploadProgressStatus"
+      class="upload-status"
+    />
     <ion-list class="upload-menu-tabs">
       <ion-item
         class="upload-menu-tabs__item button-medium"
@@ -84,8 +86,10 @@
 </template>
 
 <script setup lang="ts">
+import { TransferRateCalculator } from '@/common/transferRate';
 import { FileOperationBase, FileOperationDownloadArchive, FileOperationImport } from '@/components/files';
-import { Path } from '@/parsec';
+import UploadStatus from '@/components/files/operations/UploadStatus.vue';
+import { getGlobalUploadProgress, Path, UploadProgress } from '@/parsec';
 import { navigateTo, Routes } from '@/router';
 import {
   FileOperationCopyData,
@@ -99,7 +103,7 @@ import { FileEventRegistrationCanceller, FileOperationEventData, FileOperationEv
 import { FileOperationManager, FileOperationManagerKey } from '@/services/fileOperation/manager';
 import useUploadMenu from '@/services/fileUploadMenu';
 import { IonButton, IonIcon, IonItem, IonList, IonText } from '@ionic/vue';
-import { chevronDown, close } from 'ionicons/icons';
+import { chevronDown } from 'ionicons/icons';
 import { MsImage, NoImportInProgress } from 'megashark-lib';
 import type { Component } from 'vue';
 import { computed, inject, onMounted, onUnmounted, ref, Ref } from 'vue';
@@ -148,8 +152,11 @@ const currentItems = computed(() => {
 });
 
 let canceller!: FileEventRegistrationCanceller;
+let uploadProgressIntervalId: any = null;
 const isFileOperationManagerActive = ref(false);
 const uploadMenuList = ref();
+const uploadProgressStatus = ref<UploadProgress | undefined>(undefined);
+const rateCalculator = ref<TransferRateCalculator>(new TransferRateCalculator());
 
 function toggleMenu(): void {
   if (menu.isMinimized()) {
@@ -182,12 +189,27 @@ function getOperationComponent(item: OperationItem): Component {
   }
 }
 
+async function updateProgress(): Promise<void> {
+  const result = await getGlobalUploadProgress();
+  if (result.ok) {
+    uploadProgressStatus.value = result.value;
+    if (result.value.totalBytes > 0) {
+      rateCalculator.value.update(result.value.totalBytes);
+    }
+  } else {
+    uploadProgressStatus.value = undefined;
+    rateCalculator.value.clear();
+  }
+}
+
 onMounted(async () => {
   canceller = await fileOperationManager.value.registerCallback(onFileOperationEvent);
+  uploadProgressIntervalId = setInterval(updateProgress, 2000);
 });
 
 onUnmounted(async () => {
   canceller.cancel();
+  clearInterval(uploadProgressIntervalId);
 });
 
 async function onFileOperationEvent(
@@ -207,7 +229,6 @@ async function onFileOperationEvent(
   switch (event) {
     case FileOperationEvents.Added: {
       items.value.unshift({ operationData: operationData, status: event, eventData: eventData, refreshKey: 0 });
-      menu.show();
       menu.expand();
       scrollToTop();
       filter.value = undefined;
@@ -490,7 +511,8 @@ function scrollToTop(): void {
 
 .minimize {
   .upload-menu-list,
-  .upload-menu-tabs {
+  .upload-menu-tabs,
+  .upload-status {
     height: 0;
     padding: 0;
     margin: 0;