Feature #3748: Files info panel

src/sunstone/public/app/tabs/files-tab.js

@@ -12,7 +12,7 @@ define(function(require) {
   ];
 
   var _panels = [
-    //require('./files-tab/panels/info')
+    require('./files-tab/panels/info')
   ];
 
   var Tab = {

src/sunstone/public/app/tabs/files-tab/datatable.js

@@ -14,7 +14,7 @@ define(function(require) {
     CONSTANTS
    */
   
-  var RESOURCE = "Image";
+  var RESOURCE = "File";
   var XML_ROOT = "IMAGE";
   var TAB_NAME = require('./tabId');
   var COLUMN_IDS = {
@@ -124,7 +124,9 @@ define(function(require) {
     }
 
     return [
-      '<input class="check_item" type="checkbox" id="image_' + element.ID + '" name="selected_items" value="' + element.ID + '"/>',
+      '<input class="check_item" type="checkbox" id="'+RESOURCE.toLowerCase()+'_' +
+                           element.ID + '" name="selected_items" value="' +
+                           element.ID + '"/>',
       element.ID,
       element.UNAME,
       element.GNAME,

src/sunstone/public/app/tabs/files-tab/panels/info.js

@@ -0,0 +1,103 @@
+define(function(require) {
+  /*
+    DEPENDENCIES
+   */
+  
+  var Locale = require('utils/locale');
+  var Humanize = require('utils/humanize');
+  var RenameTr = require('utils/panel/rename-tr');
+  var TemplateTable = require('utils/panel/template-table');
+  var PermissionsTable = require('utils/panel/permissions-table');
+  var OpenNebulaImage = require('opennebula/image');
+  var Config = require('sunstone-config');
+  var Sunstone = require('sunstone');
+
+  /*
+    TEMPLATES
+   */
+  
+  var TemplateInfo = require('hbs!./info/html');
+
+  /*
+    CONSTANTS
+   */
+  
+  var TAB_ID = require('../tabId');
+  var PANEL_ID = require('./info/panelId');
+  var RESOURCE = "File";
+  var XML_ROOT = "IMAGE";
+
+  /*
+    CONSTRUCTOR
+   */
+
+  function Panel(info) {
+    this.title = Locale.tr("Info");
+    this.icon = "fa-info-circle";
+
+    this.element = info[XML_ROOT];
+
+    return this;
+  }
+
+  Panel.PANEL_ID = PANEL_ID;
+  Panel.prototype.html = _html;
+  Panel.prototype.setup = _setup;
+
+  return Panel;
+
+  /*
+    FUNCTION DEFINITIONS
+   */
+
+  function _html() {
+    var renameTrHTML = RenameTr.html(RESOURCE, this.element.NAME);
+    var templateTableHTML = TemplateTable.html(this.element.TEMPLATE, RESOURCE, Locale.tr("Attributes"));
+    var permissionsTableHTML = PermissionsTable.html(TAB_ID, RESOURCE, this.element);
+    var stateStr = Locale.tr(OpenNebulaImage.stateStr(this.element.STATE));
+    var prettyRegTime = Humanize.prettyTime(this.element.REGTIME);
+    var fsTypeStr = this.element.FS_TYPE != undefined ? this.element.FS_TYPE : '-';
+    var sizeStr = Humanize.sizeFromMB(this.element.SIZE);
+    var typeStr = Locale.tr(OpenNebulaImage.typeStr(this.element.TYPE));
+
+    return TemplateInfo({
+      'element': this.element,
+      'renameTrHTML': renameTrHTML,
+      'templateTableHTML': templateTableHTML,
+      'permissionsTableHTML': permissionsTableHTML,
+      'stateStr': stateStr,
+      'prettyRegTime': prettyRegTime,
+      'fsTypeStr': fsTypeStr,
+      'typeStr': typeStr,
+      'sizeStr': sizeStr
+    });
+  }
+
+  function _setup(context) {
+    RenameTr.setup(RESOURCE, this.element.ID, context);
+    TemplateTable.setup(this.element.TEMPLATE, RESOURCE, this.element.ID, context);
+    PermissionsTable.setup(TAB_ID, RESOURCE, this.element, context);
+
+    // Listener for edit link for type change
+    var that = this;
+    context.off("click", "#div_edit_chg_type_link")
+    context.on("click", "#div_edit_chg_type_link", function() {
+      $(".value_td_type", context).html(
+                '<select id="chg_type_select">\
+                      <option value="KERNEL">KERNEL</option>\
+                      <option value="RAMDISK">RAMDISK</option>\
+                      <option value="CONTEXT">CONTEXT</option>\
+                  </select>');
+
+      $('#chg_type_select', context).val(OpenNebulaImage.typeStr(that.element.TYPE));
+    });
+
+    context.off("change", "#chg_type_select");
+    context.on("change", "#chg_type_select", function() {
+      var new_value = $(this).val();
+      Sunstone.runAction("File.chtype", that.element.ID, new_value);
+    });
+
+    return false;
+  }
+});

src/sunstone/public/app/tabs/files-tab/panels/info/html.hbs

@@ -0,0 +1,61 @@
+<div class="row">
+  <div class="large-6 columns">
+    <table class="dataTable extended_table">
+      <thead>
+        <tr>
+          <th colspan="3">{{tr "Information"}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="key_td">{{tr "ID"}}</td>
+          <td class="value_td" colspan="2">{{element.ID}}</td>
+        </tr>
+        {{{renameTrHTML}}}
+        <tr>
+          <td class="key_td">{{tr "Datastore"}}</td>
+          <td class="value_td">{{element.DATASTORE}}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td class="key_td">{{tr "Register time"}}</td>
+          <td class="value_td">{{prettyRegTime}}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td class="key_td">{{tr "Type"}}</td>
+          <td class="value_td_type">{{typeStr}}</td>
+          <td>
+            <div id="div_edit_chg_type">
+              <a id="div_edit_chg_type_link" class="edit_e" href="#"> <i class="fa fa-pencil-square-o right"/></a>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td class="key_td">{{tr "Filesystem type"}}</td>
+          <td class="value_td">{{fsTypeStr}}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td class="key_td">{{tr "Size"}}</td>
+          <td class="value_td">{{sizeStr}}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td class="key_td">{{tr "State"}}</td>
+          <td class="value_td">{{stateStr}}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td class="key_td">{{tr "Running VMS"}}</td>
+          <td class="value_td">{{element.RUNNING_VMS}}</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="large-6 columns">{{{permissionsTableHTML}}}</div>
+</div>
+<div class="row">
+  <div class="large-9 columns">{{{templateTableHTML}}}</div>
+</div>

src/sunstone/public/app/tabs/files-tab/panels/info/panelId.js

@@ -0,0 +1,3 @@
+define(function(require){
+  return 'file_info_tab';
+});