From c680428b3c6127fe985bc82c1b0a36d3f1d73815 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Thu, 13 May 2021 17:50:18 -0700
Subject: [PATCH] volume: show status message in edit dialog

---
 src/translation/en.json |  3 ++-
 src/views/volumes.html  | 11 ++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/translation/en.json b/src/translation/en.json
index 69d5a94dc..b8a3c24ba 100644
--- a/src/translation/en.json
+++ b/src/translation/en.json
@@ -1515,7 +1515,8 @@
         "updateVolumeDialog": {
             "title": "Update Volume {{ volume }}"
         },
-        "tooltipEdit": "Edit Volume"
+        "tooltipEdit": "Edit Volume",
+        "mountStatus": "Mount Status"
     },
     "storage": {
         "mounts": {
diff --git a/src/views/volumes.html b/src/views/volumes.html
index d7130d6a5..fa2a8a91a 100644
--- a/src/views/volumes.html
+++ b/src/views/volumes.html
@@ -10,7 +10,6 @@
         <form name="volumeConfigureForm" role="form" novalidate ng-submit="volumeConfigure.submit()" autocomplete="off">
           <fieldset>
             <p class="has-error text-center" ng-show="volumeConfigure.error">{{ volumeConfigure.error }}</p>
-            <p class="has-error text-center" ng-show="!volumeConfigure.adding && volumeConfigure.volume.status">{{ volumeConfigure.volume.status.message }}</p>
 
             <div class="form-group" ng-show="volumeConfigure.adding">
               <label class="control-label">{{ 'volumes.name' | tr }}</label>
@@ -18,9 +17,15 @@
               <input type="text" class="form-control" ng-model="volumeConfigure.name" name="name" ng-disabled="volumeConfigure.busy" autofocus>
             </div>
 
-            <div class="form-group" ng-show="volumeConfigure.adding">
+            <div class="form-group">
               <label class="control-label">{{ 'volumes.hostPath' | tr }}</label>
-              <input type="text" class="form-control" ng-model="volumeConfigure.hostPath" name="hostPath" ng-disabled="volumeConfigure.busy" autofocus>
+              <input type="text" class="form-control" ng-model="volumeConfigure.hostPath" name="hostPath"  ng-show="volumeConfigure.adding" ng-disabled="volumeConfigure.busy" autofocus>
+              <p ng-hide="volumeConfigure.adding">{{ volumeConfigure.volume.hostPath }}</p>
+            </div>
+
+            <div class="form-group" ng-hide="volumeConfigure.adding">
+              <label class="control-label">{{ 'volumes.mountStatus' | tr }}</label>
+              <p  ng-class="{ 'has-error': volumeConfigure.volume.status !== 'active' }">{{ volumeConfigure.volume.status.message }} ({{ volumeConfigure.volume.status.state }})</p>
             </div>
 
             <div class="form-group">