feat(www): add a circular progress indicator during upload

Signed-off-by: Cedric Hombourger <[email protected]>

Author: chombourger

mtda-www

@@ -158,13 +158,17 @@ class StorageOpenHandler(BaseHandler):
         if mtda is not None:
             compr = CONSTS.IMAGE.RAW.value
             file = self.get_argument('file')
+            try:
+                size = int(self.get_argument('size', 0))
+            except ValueError:
+                size = 0
             if file:
                 mtda.debug(2, f'file to be uploaded: {file}')
                 compr = Compression.from_extension(file)
             mtda.storage_compression(compr)
 
             sid = self.get_argument('session')
-            zmq_socket = mtda.storage_open(session=sid)
+            zmq_socket = mtda.storage_open(size, session=sid)
             self.application.settings['sockets'][sid] = zmq_socket
 
         self.result_as_json({"result": result})

mtda/client.py

@@ -123,14 +123,14 @@ def storage_network(self, remote):
         cmd = ['sudo', cmd_nbd, '-N', 'mtda-storage', remote]
         subprocess.check_call(cmd)
 
-    def storage_open(self, **kwargs):
+    def storage_open(self, size=0, **kwargs):
         session = kwargs.get('session', None)
         tries = 60
         while tries > 0:
             tries = tries - 1
             try:
                 host = self.remote()
-                port = self._impl.storage_open(session=session)
+                port = self._impl.storage_open(size, session=session)
                 context = zmq.Context()
                 socket = context.socket(zmq.PUSH)
                 hwm = int(
@@ -168,7 +168,7 @@ def storage_update(self, dest, src=None, callback=None):
         file = ImageFile.new(path, impl, session, blksz, callback)
 
         # Open the shared storage device so we own it
-        self.storage_open()
+        self.storage_open(image_size)
 
         try:
             # Prepare for download/copy
@@ -198,7 +198,7 @@ def storage_write_image(self, path, callback=None):
         # Open the shared storage device so we own it
         # It also prevents us from loading a new bmap file while
         # another transfer may be on-going
-        self.storage_open()
+        self.storage_open(file.size)
 
         # Automatically discover the bmap file
         bmap = None
@@ -356,7 +356,7 @@ def prepare(self, socket, output_size=None, compression=None):
         compr = None
         if compression is None:
             compr = Compression.from_extension(self._path)
-        self._inputsize = self.size()
+        self._inputsize = self.size
         self._outputsize = output_size
         self._socket = socket
         # if image is uncompressed, we compress on the fly
@@ -378,8 +378,9 @@ def progress(self):
             callback(imgname, totalread, inputsize, written, outputsize)
             self._lastreport = time.time()
 
+    @property
     def size(self):
-        return None
+        return 0
 
     def _write_to_storage(self, data):
         self._socket.send(data)
@@ -424,6 +425,7 @@ def copy(self):
             else:
                 image.close()
 
+    @property
     def size(self):
         st = os.stat(self._path)
         return st.st_size
@@ -476,6 +478,7 @@ def copy(self):
         config = TransferConfig(use_threads=False)
         self._object.download_fileobj(self, Config=config)
 
+    @property
     def size(self):
         if self._object is None:
             self._object = self._open()

mtda/main.py

@@ -848,7 +848,7 @@ def storage_network(self, **kwargs):
         return result
 
     @Pyro4.expose
-    def storage_open(self, stream=None, **kwargs):
+    def storage_open(self, size=0, stream=None, **kwargs):
         self.mtda.debug(3, 'main.storage_open()')
 
         result = None
@@ -876,7 +876,7 @@ def storage_open(self, stream=None, **kwargs):
             if stream is None:
                 from mtda.storage.datastream import NetworkDataStream
                 stream = NetworkDataStream(self.dataport)
-            result = self._writer.start(session, stream)
+            result = self._writer.start(session, size, stream)
 
         self.mtda.debug(3, f'main.storage_open(): {result}')
         return result

mtda/storage/writer.py

@@ -97,10 +97,11 @@ def flush(self, size):
         self.mtda.debug(3, f"storage.writer.flush(): {result}")
         return result
 
-    def start(self, session, stream):
+    def start(self, session, size, stream):
         self.mtda.debug(3, "mtda.storage.writer.start()")
 
         self._session = session
+        self._size = size
         self._stream = stream
 
         result = stream.prepare()
@@ -155,7 +156,7 @@ def worker(self):
                 if (now - last_notification) >= CONSTS.WRITER.NOTIFY_SECONDS:
                     speed = (received - last_read) / (now - last_notification)
                     mtda._storage_event(f'{CONSTS.STORAGE.WRITING} '
-                                        f'{received} {speed}')
+                                        f'{received} {self._size} {speed}')
                     last_notification = now
                     last_read = received
 

mtda/templates/index.html

@@ -113,10 +113,16 @@
             hidden: true
         });
         xferWindow = new WinBox("Transferring", {
-            html: "<canvas id='xferCanvas' width='320' height='200'></canvas>",
+            html: "<svg width='100' height='100' viewBox='0 0 100 100'>" +
+                  "<circle cx='50' cy='50' r='40' stroke='#eee' stroke-width='8' fill='none'/>" +
+                  "<circle id='xferProgress' cx='50' cy='50' r='40' stroke='#00aaff' stroke-width='8' fill='none'" +
+                  "stroke-dasharray='251.2' stroke-dashoffset='251.2' stroke-linecap='round'/>" +
+                  "<text id='xferPercent' x='50' y='55' font-size='16' text-anchor='middle' fill='#333'>0%</text>" +
+                  "</svg>" +
+                  "<canvas id='xferCanvas' width='220' height='100'></canvas>",
             class: ["no-full", "no-max", "modern"],
-            width: "320px",
-            height: "200px",
+            width: "360px",
+            height: "150px",
             hidden: true
         });
         var xferChart;
@@ -203,6 +209,7 @@
         $('#upload').bind('click', function() {
           $.getJSON('./storage-open', {
                   file: selectedFile.name,
+                  size: selectedFile.size,
                   session: localStorage.getItem('session')
           }, function(data) {
             // do nothing
@@ -328,7 +335,15 @@
             }
             break;
           case 'WRITING':
-            let speed = args[1] / 1024 / 1024;
+            var percent = 0;
+            let read = args[0];
+            let size = args[1];
+            let speed = args[2] / 1024 / 1024;
+            if (size) {
+              percent = Math.round((read * 100) / size);
+              $("#xferProgress").css("stroke-dashoffset", 251.2 - (percent / 100) * 251.2);
+              $("#xferPercent").text(percent + "%");
+            }
             if (xferWindow.hidden) {
               uploadWindow.hide();
               xferWindow.move('center', 'center');
@@ -339,7 +354,7 @@
                   millisPerPixel: 100,
                   maxValueScale: 1.2,
                   minValueScale: 1.2,
-                  grid: { strokeStyle: 'rgba(0, 0, 0, 0.2)', verticalSections: 4 },
+                  grid: { fillStyle: 'rgba(40, 40, 40, 0.2)', strokeStyle: 'rgba(90, 90, 90, 0.2)', verticalSections: 4 },
               });
               xferChart.streamTo(document.getElementById("xferCanvas"), 1000);
               xferChart.addTimeSeries(xferSeries, { strokeStyle: 'rgb(0, 255, 0)', lineWidth: 2 });