Feature #4400: Show icons for image persistency and state next to each disk on instantiate

src/image/Image.cc

@@ -551,6 +551,8 @@ void Image::disk_attribute( VectorAttribute *       disk,
         disk->replace("DRIVER",template_driver);
     }
 
+    disk->replace("IMAGE_STATE", state);
+
     //--------------------------------------------------------------------------
     //   READONLY attribute
     //--------------------------------------------------------------------------

src/sunstone/public/app/opennebula/image.js

@@ -28,7 +28,9 @@ define(function(require) {
     Locale.tr("ERROR"),
     Locale.tr("CLONE"),
     Locale.tr("DELETE"),
-    Locale.tr("USED_PERS")
+    Locale.tr("USED_PERS"),
+    Locale.tr("LOCKED_USED"),
+    Locale.tr("LOCKED_USED_PERS")
   ];
 
   var TYPES_STR = [
@@ -40,6 +42,20 @@ define(function(require) {
     Locale.tr("CONTEXT")
   ];
 
+  var STATES_COLOR = [
+    'off',        // INIT
+    'running',    // READY
+    'running',    // USED
+    'error',      // DISABLED
+    'deploying',  // LOCKED
+    'error',      // ERROR
+    'error',      // CLONE
+    'error',      // DELETE
+    'error',      // USED_PERS
+    'deploying',  // LOCKED_USED
+    'error'       // LOCKED_USED_PERS
+  ];
+
   var STATES = {
     INIT      : 0,
     READY     : 1,
@@ -49,7 +65,9 @@ define(function(require) {
     ERROR     : 5,
     CLONE     : 6,
     DELETE    : 7,
-    USED_PERS : 8
+    USED_PERS : 8,
+    LOCKED_USED : 9,
+    LOCKED_USED_PERS : 10
   };
 
   var TYPES = {
@@ -66,6 +84,13 @@ define(function(require) {
     "stateStr": function(stateId) {
       return STATES_STR[stateId];
     },
+    /**
+     * @return {String} css class for this state. Use:
+     *                  color + '-color' font color class
+     */
+    "stateColor": function(stateId) {
+      return STATES_COLOR[stateId];
+    },
     "STATES": STATES,
     "typeStr": function(typeId) {
       return TYPES_STR[typeId];

src/sunstone/public/app/utils/disks-resize.js

@@ -99,13 +99,32 @@ define(function(require){
         var label = disk.IMAGE ? disk.IMAGE : Locale.tr("Volatile Disk");
         $("label", diskContext).text(Locale.tr("DISK") + ' ' + disk_id + ': ' + label);
 
-        var disabled =
+        var persistent =
           ( opts.force_persistent ||
-            (disk.PERSISTENT && disk.PERSISTENT.toUpperCase() == "YES") ||
+            (disk.PERSISTENT && disk.PERSISTENT.toUpperCase() == "YES") );
+
+        var disabled =
+          ( persistent ||
             (disk.TYPE && OpenNebulaImage.TYPES[disk.TYPE] == OpenNebulaImage.TYPES.CDROM) );
 
-        var attr;
+        if (persistent){
+          $("label", diskContext).append('<i class="disk-resize-icon fa-border has-tip left fa fa-lg fa-floppy-o" title="' +
+              Locale.tr("Persistent image. The changes will be saved back to the datastore after the VM is shut down") + '"></i>')
 
+        }else{
+          $("label", diskContext).append('<i class="disk-resize-icon fa-border has-tip left fa fa-lg fa-recycle" title="' +
+              Locale.tr("Non-persistent disk. The changes will be lost once the VM is shut down") + '"></i>')
+
+        }
+
+        if (disk.IMAGE_STATE){
+          var color_class = OpenNebulaImage.stateColor(disk.IMAGE_STATE) + "-color";
+
+          $("label", diskContext).append('<i class="'+color_class+' fa-border has-tip left fa fa-square" title="' +
+              Locale.tr("Image state: ") + OpenNebulaImage.stateStr(disk.IMAGE_STATE) + '"></i>')
+        }
+
+        var attr;
 
         if (disk.SIZE) {
           if (disabled){
@@ -119,9 +138,11 @@ define(function(require){
               "SIZE",
               "O|range|"+label+"|"+min+".."+max+"|"+min);
           }
-
+        } else {
-          UserInputs.insertAttributeInputMB(attr, $(".diskSlider", diskContext));
+          attr = UserInputs.parse("SIZE","O|fixed|"+label+"||-");
         }
+
+        UserInputs.insertAttributeInputMB(attr, $(".diskSlider", diskContext));
       })
 
     } else {

src/sunstone/public/scss/app.scss

@@ -128,4 +128,10 @@ table{
 
 .nowrap {
   white-space: nowrap;
+}
+
+.disk-resize-icon {
+  color: $bold-black;
+  font-weight: $global-weight-normal;
+
 }