feat: Show download progress (#608)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/build.yml

@@ -8,6 +8,10 @@ on:
     paths-ignore:
       - '**/*.md'
       - '**/*.yml'
+      - '**/*.js'
+      - '**/*.css'
+      - '**/*.html'
+      - 'web/**'
       - '.gitignore'
       - '.dockerignore'
       - '.github/**'

.github/workflows/hub.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v4
     - 
       name: Docker Hub Description
-      uses: peter-evans/dockerhub-description@v3
+      uses: peter-evans/dockerhub-description@v4
       with:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}

readme.md

@@ -17,7 +17,6 @@ Virtual DSM in a docker container.
 
  - Multiple disks
  - KVM acceleration
- - GPU pass-through
  - Upgrades supported
  
 ## Usage
@@ -52,190 +51,188 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
 ## FAQ
 
-  * ### How do I use it?
+* ### How do I use it?
 
-    Very simple! These are the steps:
-    
-    - Start the container and get some coffee.
+  Very simple! These are the steps:
+  
+  - Start the container and connect to [port 5000](http://localhost:5000) using your web browser.
 
-    - Connect to [port 5000](http://localhost:5000) of the container in your web browser.
+  - Wait until DSM is ready, choose an username and password, and you will be taken to the desktop.
+  
+  Enjoy your brand new machine, and don't forget to star this repo!
 
-    - Wait until DSM is ready, choose an username and password, and you will be taken to the desktop.
+* ### How do I change the size of the disk?
 
-    - Enjoy your brand new machine, and don't forget to star this repo!
+  To expand the default size of 16 GB, locate the `DISK_SIZE` setting in your compose file and modify it to your preferred capacity:
 
-  * ### How do I change the size of the disk?
+  ```yaml
+  environment:
+    DISK_SIZE: "128G"
+  ```
+  
+  This can also be used to resize the existing disk to a larger capacity without any data loss. 
 
-    To expand the default size of 16 GB, locate the `DISK_SIZE` setting in your compose file and modify it to your preferred capacity:
+* ### How do I change the storage location?
 
-    ```yaml
-    environment:
-      DISK_SIZE: "128G"
-    ```
-    
-    This can also be used to resize the existing disk to a larger capacity without any data loss. 
+  To change the storage location, include the following bind mount in your compose file:
 
-  * ### How do I change the storage location?
+  ```yaml
+  volumes:
+    - /var/dsm:/storage
+  ```
 
-    To change the storage location, include the following bind mount in your compose file:
+  Replace the example path `/var/dsm` with the desired storage folder.
 
-    ```yaml
-    volumes:
-      - /var/dsm:/storage
-    ```
+* ### How do I create a growable disk?
 
-    Replace the example path `/var/dsm` with the desired storage folder.
+  By default, the entire capacity of the disk is reserved in advance.
 
-  * ### How do I create a growable disk?
+  To create a growable disk that only allocates space that is actually used, add the following environment variable:
 
-    By default, the entire capacity of the disk is reserved in advance.
+  ```yaml
+  environment:
+    DISK_FMT: "qcow2"
+  ```
 
-    To create a growable disk that only allocates space that is actually used, add the following environment variable:
+  Please note that this may reduce the write performance of the disk.
 
-    ```yaml
-    environment:
-      DISK_FMT: "qcow2"
-    ```
+* ### How do I add multiple disks?
 
-    Please note that this may reduce the write performance of the disk.
+  To create additional disks, modify your compose file like this:
+  
+  ```yaml
+  environment:
+    DISK2_SIZE: "32G"
+    DISK3_SIZE: "64G"
+  volumes:
+    - /home/example:/storage2
+    - /mnt/data/example:/storage3
+  ```
 
-  * ### How do I add multiple disks?
+* ### How do I pass-through a disk?
 
-    To create additional disks, modify your compose file like this:
-    
-    ```yaml
-    environment:
-      DISK2_SIZE: "32G"
-      DISK3_SIZE: "64G"
-    volumes:
-      - /home/example:/storage2
-      - /mnt/data/example:/storage3
-    ```
+   It is possible to pass-through disk devices directly by adding them to your compose file in this way:
 
-  * ### How do I pass-through a disk?
+  ```yaml
+  environment:
+    DEVICE2: "/dev/sda"
+    DEVICE3: "/dev/sdb"
+  devices:
+    - /dev/sda
+    - /dev/sdb
+  ```
 
-     It is possible to pass-through disk devices directly by adding them to your compose file in this way:
+  Please note that the device needs to be totally empty (without any partition table) otherwise DSM does not always format it into a volume.
 
-    ```yaml
-    environment:
-      DEVICE2: "/dev/sda"
-      DEVICE3: "/dev/sdb"
-    devices:
-      - /dev/sda
-      - /dev/sdb
-    ```
+  Do NOT use this feature with the goal of sharing files from the host, they will all be lost without warning when DSM creates the volume.
 
-    Please note that the device needs to be totally empty (without any partition table) otherwise DSM does not always format it into a volume.
+* ### How do I increase the amount of CPU or RAM?
 
-    Do NOT use this feature with the goal of sharing files from the host, they will all be lost without warning when DSM creates the volume.
+  By default, a single CPU core and 1 GB of RAM are allocated to the container.
 
-  * ### How do I increase the amount of CPU or RAM?
+  To increase this, add the following environment variables:
 
-    By default, a single CPU core and 1 GB of RAM are allocated to the container.
+  ```yaml
+  environment:
+    RAM_SIZE: "4G"
+    CPU_CORES: "4"
+  ```
 
-    To increase this, add the following environment variables:
+* ### How do I verify if my system supports KVM?
 
-    ```yaml
-    environment:
-      RAM_SIZE: "4G"
-      CPU_CORES: "4"
-    ```
+  To verify if your system supports KVM, run the following commands:
 
-  * ### How do I verify if my system supports KVM?
+  ```bash
+  sudo apt install cpu-checker
+  sudo kvm-ok
+  ```
 
-    To verify if your system supports KVM, run the following commands:
+  If you receive an error from `kvm-ok` indicating that KVM acceleration can't be used, check the virtualization settings in the BIOS.
 
-    ```bash
-    sudo apt install cpu-checker
-    sudo kvm-ok
-    ```
+* ### How do I assign an individual IP address to the container?
 
-    If you receive an error from `kvm-ok` indicating that KVM acceleration can't be used, check the virtualization settings in the BIOS.
+  By default, the container uses bridge networking, which shares the IP address with the host. 
 
-  * ### How do I assign an individual IP address to the container?
+  If you want to assign an individual IP address to the container, you can create a macvlan network as follows:
 
-    By default, the container uses bridge networking, which shares the IP address with the host. 
+  ```bash
+  docker network create -d macvlan \
+      --subnet=192.168.0.0/24 \
+      --gateway=192.168.0.1 \
+      --ip-range=192.168.0.100/28 \
+      -o parent=eth0 vdsm
+  ```
+  
+  Be sure to modify these values to match your local subnet. 
 
-    If you want to assign an individual IP address to the container, you can create a macvlan network as follows:
+  Once you have created the network, change your compose file to look as follows:
 
-    ```bash
-    docker network create -d macvlan \
-        --subnet=192.168.0.0/24 \
-        --gateway=192.168.0.1 \
-        --ip-range=192.168.0.100/28 \
-        -o parent=eth0 vdsm
-    ```
-    
-    Be sure to modify these values to match your local subnet. 
+  ```yaml
+  services:
+    dsm:
+      container_name: dsm
+      ..<snip>..
+      networks:
+        vdsm:
+          ipv4_address: 192.168.0.100
 
-    Once you have created the network, change your compose file to look as follows:
+  networks:
+    vdsm:
+      external: true
+  ```
+ 
+  An added benefit of this approach is that you won't have to perform any port mapping anymore, since all ports will be exposed by default.
 
-    ```yaml
-    services:
-      dsm:
-        container_name: dsm
-        ..<snip>..
-        networks:
-          vdsm:
-            ipv4_address: 192.168.0.100
+  Please note that this IP address won't be accessible from the Docker host due to the design of macvlan, which doesn't permit communication between the two. If this is a concern, you need to create a [second macvlan](https://blog.oddbit.com/post/2018-03-12-using-docker-macvlan-networks/#host-access) as a workaround.
 
-    networks:
-      vdsm:
-        external: true
-    ```
-   
-    An added benefit of this approach is that you won't have to perform any port mapping anymore, since all ports will be exposed by default.
+* ### How can DSM acquire an IP address from my router?
 
-    Please note that this IP address won't be accessible from the Docker host due to the design of macvlan, which doesn't permit communication between the two. If this is a concern, you need to create a [second macvlan](https://blog.oddbit.com/post/2018-03-12-using-docker-macvlan-networks/#host-access) as a workaround.
+  After configuring the container for macvlan (see above), it is possible for DSM to become part of your home network by requesting an IP from your router, just like your other devices.
 
-  * ### How can DSM acquire an IP address from my router?
+  To enable this feature, add the following lines to your compose file:
 
-    After configuring the container for macvlan (see above), it is possible for DSM to become part of your home network by requesting an IP from your router, just like your other devices.
+  ```yaml
+  environment:
+    DHCP: "Y"
+  device_cgroup_rules:
+    - 'c *:* rwm'
+  ```
 
-    To enable this feature, add the following lines to your compose file:
+  Please note that even if you don't want DHCP, it's still recommended to enable this feature, as it prevents NAT issues and increases performance by using a `macvtap` interface. In that case, just set a static IP from the DSM control panel after you enabled this mode.
 
-    ```yaml
-    environment:
-      DHCP: "Y"
-    device_cgroup_rules:
-      - 'c *:* rwm'
-    ```
+* ### How do I pass-through the GPU?
 
-    Please note that even if you don't want DHCP, it's still recommended to enable this feature, as it prevents NAT issues and increases performance by using a `macvtap` interface. In that case, just set a static IP from the DSM control panel after you enabled this mode.
+  To pass-through your Intel GPU, add the following lines to your compose file:
 
-  * ### How do I pass-through the GPU?
+  ```yaml
+  environment:
+    GPU: "Y"
+  devices:
+    - /dev/dri
+  ```
 
-    To pass-through your Intel GPU, add the following lines to your compose file:
+  This can be used to enable the facial recognition function in Synology Photos for example.
 
-    ```yaml
-    environment:
-      GPU: "Y"
-    devices:
-      - /dev/dri
-    ```
+* ### How do I install a specific version of vDSM?
 
-    This can be used to enable the facial recognition function in Synology Photos for example.
+  By default, version 7.2 will be installed, but if you prefer an older version, you can add its download URL to your compose file as follows:
 
-  * ### How do I install a specific version of vDSM?
+  ```yaml
+  environment:
+    URL: "https://global.synologydownload.com/download/DSM/release/7.0.1/42218/DSM_VirtualDSM_42218.pat"
+  ```
 
-    By default, version 7.2 will be installed, but if you prefer an older version, you can add its download URL to your compose file as follows:
+  With this method, it is even possible to switch between different versions while keeping all your file data intact.
 
-    ```yaml
-    environment:
-      URL: "https://global.synologydownload.com/download/DSM/release/7.0.1/42218/DSM_VirtualDSM_42218.pat"
-    ```
+* ### What are the differences compared to the standard DSM?
 
-    With this method, it is even possible to switch between different versions while keeping all your file data intact.
+  There are only two minor differences: the Virtual Machine Manager package is not available, and Surveillance Station will not include any free licenses.
+  
+* ### Is this project legal?
 
-  * ### What are the differences compared to the standard DSM?
-
-    There are only two minor differences: the Virtual Machine Manager package is not available, and Surveillance Station will not include any free licenses.
-    
-  * ### Is this project legal?
-
-    Yes, this project contains only open-source code and does not distribute any copyrighted material. Neither does it try to circumvent any copyright protection measures. So under all applicable laws, this project would be considered legal. 
-    
-    However, by installing Synology's Virtual DSM, you must accept their end-user license agreement, which does not permit installation on non-Synology hardware. So only run this project on an official Synology NAS, as any other use will be a violation of their terms and conditions.
+  Yes, this project contains only open-source code and does not distribute any copyrighted material. Neither does it try to circumvent any copyright protection measures. So under all applicable laws, this project would be considered legal. 
+  
+  However, by installing Synology's Virtual DSM, you must accept their end-user license agreement, which does not permit installation on non-Synology hardware. So only run this project on an official Synology NAS, as any other use will be a violation of their terms and conditions.
 
 ## Disclaimer
 

src/disk.sh

@@ -113,7 +113,7 @@ createDisk() {
   fi
 
   html "Creating a $DISK_DESC image..."
-  info "Creating a $DISK_TYPE $DISK_DESC image in $DISK_FMT format with a size of $DISK_SPACE..."
+  info "Creating a $DISK_SPACE $DISK_TYPE $DISK_DESC image in $DISK_FMT format..."
 
   local FAIL="Could not create a $DISK_TYPE $DISK_FMT $DISK_DESC image of $DISK_SPACE ($DISK_FILE)"
 

src/install.sh

@@ -105,6 +105,7 @@ RDC="$STORAGE/dsm.rd"
 if [ ! -f "$RDC" ]; then
 
   MSG="Downloading installer..."
+  PRG="Downloading installer ([P])..."
   info "Install: $MSG" && html "$MSG"
 
   RD="$TMP/rd.gz"
@@ -112,7 +113,11 @@ if [ ! -f "$RDC" ]; then
   VERIFY="b4215a4b213ff5154db0488f92c87864"
   LOC="$DL/release/7.0.1/42218/DSM_VirtualDSM_42218.pat"
 
+  rm -f "$RD"
+  /run/progress.sh "$RD" "$PRG" &
   { curl -r "$POS" -sfk -S -o "$RD" "$LOC"; rc=$?; } || :
+
+  fKill "progress.sh"
   (( rc != 0 )) && error "Failed to download $LOC, reason: $rc" && exit 60
 
   SUM=$(md5sum "$RD" | cut -f 1 -d " ")
@@ -123,8 +128,12 @@ if [ ! -f "$RDC" ]; then
     rm "$RD"
     rm -f "$PAT"
 
+    html "$MSG"
+    /run/progress.sh "$PAT" "$PRG" &
     { wget "$LOC" -O "$PAT" -q --no-check-certificate --show-progress "$PROGRESS"; rc=$?; } || :
-    (( rc != 0 )) && error "Failed to download $LOC, reason: $rc" && exit 60
+
+    fKill "progress.sh"
+    (( rc != 0 )) && error "Failed to download $LOC , reason: $rc" && exit 60
 
     tar --extract --file="$PAT" --directory="$(dirname "$RD")"/. "$(basename "$RD")"
     rm "$PAT"
@@ -175,7 +184,10 @@ fi
 rm -rf "$TMP" && mkdir -p "$TMP"
 
 info "Install: Downloading $BASE.pat..."
-html "Install: Downloading DSM from Synology..."
+
+MSG="Downloading DSM..."
+PRG="Downloading DSM ([P])..."
+html "$MSG"
 
 PAT="/$BASE.pat"
 rm -f "$PAT"
@@ -186,8 +198,12 @@ if [[ "$URL" == "file://"* ]]; then
 
 else
 
+  /run/progress.sh "$PAT" "$PRG" &
+
   { wget "$URL" -O "$PAT" -q --no-check-certificate --show-progress "$PROGRESS"; rc=$?; } || :
-  (( rc != 0 )) && error "Failed to download $URL, reason: $rc" && exit 69
+
+  fKill "progress.sh"
+  (( rc != 0 )) && error "Failed to download $URL , reason: $rc" && exit 69
 
 fi
 

src/network.sh

@@ -83,7 +83,9 @@ configureDNS() {
   DNSMASQ_OPTS=$(echo "$DNSMASQ_OPTS" | sed 's/\t/ /g' | tr -s ' ' | sed 's/^ *//')
 
   [[ "$DEBUG" == [Yy1]* ]] && set -x
-  $DNSMASQ ${DNSMASQ_OPTS:+ $DNSMASQ_OPTS}
+  if ! $DNSMASQ ${DNSMASQ_OPTS:+ $DNSMASQ_OPTS}; then
+    error "Failed to start dnsmasq, reason: $?" && exit 29
+  fi
   { set +x; } 2>/dev/null
   [[ "$DEBUG" == [Yy1]* ]] && echo
 

src/progress.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+set -Eeuo pipefail
+
+escape () {
+    local s
+    s=${1//&/\&}
+    s=${s//</\&lt;}
+    s=${s//>/\&gt;}
+    s=${s//'"'/\&quot;}
+    printf -- %s "$s"
+    return 0
+}
+
+file="$1"
+body=$(escape "$2")
+info="/run/shm/msg.html"
+
+if [[ "$body" == *"..." ]]; then
+  body="<p class=\"loading\">${body/.../}</p>"
+fi
+
+while true
+do
+  if [ -f "$file" ]; then
+    bytes=$(du -sb "$file" | cut -f1)
+    if (( bytes > 1000 )); then
+      size=$(echo "$bytes" | numfmt --to=iec --suffix=B  | sed -r 's/([A-Z])/ \1/')
+      echo "${body//(\[P\])/($size)}"> "$info"
+    fi
+  fi
+  sleep 1
+done

web/css/style.css

@@ -1,7 +1,14 @@
 body {
 	color: white;
 	background-color: #125bdb;
-	font-family: Verdana, Arial, sans-serif;
+	font-smoothing: antialiased;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-family: Verdana, Geneva, sans-serif;
+}
+
+#info {
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
 }
 
 #content {
@@ -17,6 +24,7 @@ footer {
 	height: 40px;
 	text-align: center;
 	color: #0c8aeb;
+	text-shadow: 0 0 1px #0c8aeb;
 }
 
 #empty {
@@ -33,8 +41,13 @@ a:visited {
 
 footer a:link,
 footer a:visited,
-footer a:active { color: #0c8aeb; }
-footer a:hover { color: #73e6ff; }
+footer a:active {
+	color: #0c8aeb;
+}
+
+footer a:hover {
+	color: #73e6ff;
+}
 
 .loading:after {
 	content: " .";