From 259d70c63eef9d6ebe2c099b84a607f03b5c9519 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 23 Nov 2020 16:47:09 +0100
Subject: [PATCH] Fixup translation if disk info is not yet available

---
 src/translation/en.json | 3 ++-
 src/views/system.html   | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/translation/en.json b/src/translation/en.json
index 794e3d077..1afc9160e 100644
--- a/src/translation/en.json
+++ b/src/translation/en.json
@@ -662,7 +662,8 @@
             "title": "Disk Usage",
             "mountedAt": "{{ filesystem }} <small>mounted at</small> {{ mountpoint }}",
             "usageInfo": "{{ available | prettyDiskSize }}</b> of <b>{{ size | prettyDiskSize }}</b> available",
-            "diskContent": "This {{ type }} disk contains"
+            "diskContent": "This {{ type }} disk contains",
+            "notAvailableYet": "Not available yet"
         },
         "systemMemory": {
             "title": "System Memory",
diff --git a/src/views/system.html b/src/views/system.html
index be9a9fdae..cc286ba1e 100644
--- a/src/views/system.html
+++ b/src/views/system.html
@@ -26,7 +26,11 @@
         <div ng-show="!disks.busy" class="ng-hide">
           <div class="row" ng-repeat="disk in disks.disks" style="margin-bottom: 20px;">
             <div class="col-md-12">
-              <h3><span ng-bind-html="'system.diskUsage.mountedAt' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint }"></span> <span class="pull-right small" ng-bind-html="'system.diskUsage.usageInfo' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint }"></span></h3>
+              <h3>
+                <span ng-bind-html="'system.diskUsage.mountedAt' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint }"></span>
+                <span class="pull-right small" ng-show="disk.available && disk.size" ng-bind-html="'system.diskUsage.usageInfo' | tr:{ available: disk.available, size: disk.size }"></span>
+                <span class="pull-right small" ng-hide="disk.available && disk.size">{{ 'system.diskUsage.notAvailableYet' | tr }}</span>
+              </h3>
               <div class="progress">
                 <div class="progress-bar" ng-repeat="content in disk.contains" style="width: {{ content.usage / disk.size * 100 }}%; background-color: {{ content.color }};" uib-tooltip="{{ content.label + ' ' + (content.usage | prettyDiskSize) }}"></div>
               </div>