Minor fixes and added title

Author: GilbertCherrie

app/controllers/vm_common.rb

@@ -299,11 +299,12 @@ def snap_pressed
     @center_toolbar = 'x_vm_snapshot'
     @explorer = true
     formatted_time = format_timezone(@snap_selected[:create_time].to_time, Time.zone, "view")
-    number_to_human_size(@snap_selected[:total_size], :precision => 2)
-    if @snap_selected[:total_size] == nil || @snap_selected[:total_size] == 0 
+    if @snap_selected[:total_size].to_i == 0
       formatted_size = ''
     else
-      formatted_size = _("%{number} bytes") % {:number => number_with_delimiter(@snap_selected[:total_size], :delimiter => ",", :separator => ".")} 
+      formatted_bytes = number_to_human_size(@snap_selected[:total_size], :precision => 2)
+      total_bytes = _("%{number} bytes") % {:number => number_with_delimiter(@snap_selected[:total_size], :delimiter => ",", :separator => ".")}
+      formatted_size = "%{formatted_number} (%{total})" % {:formatted_number => formatted_bytes, :total => total_bytes}
     end
     render :json => {:data => {:data => @snap_selected, :size => formatted_size, :time => formatted_time}}, :status => 200
   end

app/javascript/components/vm-snapshot-tree-select/index.jsx

@@ -4,9 +4,9 @@ import './styles.css';
 import SnapshotTree from './snapshot-tree';
 
 const VMSnapshotTreeSelect = ({
-  tree, selected, size, time,
+  tree, snapshot, size, time,
 }) => {
-  const [snapshot, setSnapshot] = useState({ ...selected, size, time });
+  const [currentSnapshot, setCurrentSnapshot] = useState({ ...snapshot, size, time });
 
   // eslint-disable-next-line react/prop-types
   return (
@@ -21,7 +21,7 @@ const VMSnapshotTreeSelect = ({
             </p>
           </div>
           <div className="snapshot-detail-value">
-            {snapshot.data ? snapshot.data.description : snapshot.description || ''}
+            {currentSnapshot.data ? currentSnapshot.data.description : currentSnapshot.description || ''}
           </div>
         </div>
         <div className="snapshot-details">
@@ -33,7 +33,7 @@ const VMSnapshotTreeSelect = ({
             </p>
           </div>
           <div className="snapshot-detail-value">
-            {snapshot.size || ''}
+            {currentSnapshot.size || ''}
           </div>
         </div>
         <div className="snapshot-details">
@@ -45,24 +45,27 @@ const VMSnapshotTreeSelect = ({
             </p>
           </div>
           <div className="snapshot-detail-value">
-            {snapshot.time || ''}
+            {currentSnapshot.time || ''}
           </div>
         </div>
       </div>
-      <SnapshotTree nodes={tree.tree_nodes} setSnapshot={setSnapshot} />
+      <div className="snapshot-tree-title">
+        {__('Available Snapshots')}
+      </div>
+      <SnapshotTree nodes={tree.tree_nodes} setCurrentSnapshot={setCurrentSnapshot} />
     </div>
   );
 };
 
 VMSnapshotTreeSelect.propTypes = {
   tree: PropTypes.objectOf(PropTypes.any).isRequired,
-  selected: PropTypes.objectOf(PropTypes.any),
+  snapshot: PropTypes.objectOf(PropTypes.any),
   size: PropTypes.string,
   time: PropTypes.string,
 };
 
 VMSnapshotTreeSelect.defaultProps = {
-  selected: {},
+  snapshot: {},
   size: '',
   time: '',
 };

app/javascript/components/vm-snapshot-tree-select/snapshot-tree.jsx

@@ -27,7 +27,7 @@ const convertData = (node) => {
   return treeData;
 };
 
-const SnapshotTree = ({ nodes, setSnapshot }) => {
+const SnapshotTree = ({ nodes, setCurrentSnapshot }) => {
   const [selectedNode, setSelectedNode] = useState('');
 
   const data = {
@@ -65,7 +65,7 @@ const SnapshotTree = ({ nodes, setSnapshot }) => {
         const tempData = response.data;
         tempData.size = response.data.size;
         tempData.time = response.data.time;
-        setSnapshot(tempData);
+        setCurrentSnapshot(tempData);
       }
       miqSparkleOff();
     });
@@ -168,7 +168,7 @@ const SnapshotTree = ({ nodes, setSnapshot }) => {
 
 SnapshotTree.propTypes = {
   nodes: PropTypes.arrayOf(PropTypes.any).isRequired,
-  setSnapshot: PropTypes.func.isRequired,
+  setCurrentSnapshot: PropTypes.func.isRequired,
 };
 
 export default SnapshotTree;

app/javascript/components/vm-snapshot-tree-select/styles.css

@@ -16,6 +16,12 @@
     }
   }
 
+  .snapshot-tree-title {
+    font-size: 20px;
+    padding-left: 20px;
+    padding-top: 40px;
+  }
+
   .checkbox {
     font-size: 16px;
     user-select: none;

app/views/vm_common/_snapshots_desc.html.haml

@@ -1,14 +1,15 @@
 - if session[:snap_selected].nil? && @record.snapshots.count > 0
-  - selected_id = @record.snapshots.first
+  - snapshot = @record.snapshots.first
 - else
   - unless session[:snap_selected].nil?
-    - selected_id = Snapshot.find(session[:snap_selected])
+    - snapshot = Snapshot.find(session[:snap_selected])
 
-- time = format_timezone(selected_id[:create_time].to_time, Time.zone, "view")
-- if selected_id[:total_size] == nil || selected_id[:total_size] == 0
+- time = format_timezone(snapshot[:create_time].to_time, Time.zone, "view")
+- if snapshot[:total_size].to_i == 0
   - size = ''
 - else
-  = number_to_human_size(selected_id[:total_size], :precision => 2)
-  - size = _("%{number} bytes") % {:number => number_with_delimiter(selected_id[:total_size], :delimiter => ",", :separator => ".")}
+  - formatted_bytes = number_to_human_size(snapshot[:total_size], :precision => 2)
+  - total_bytes = _("%{number} bytes") % {:number => number_with_delimiter(snapshot[:total_size], :delimiter => ",", :separator => ".")}
+  - size = "%{formatted_number} (%{total})" % {:formatted_number => formatted_bytes, :total => total_bytes}
 
-= react('VmSnapshotTreeSelect', {tree: @snapshot_tree, selected: selected_id, size: size, time: time})
+= react('VmSnapshotTreeSelect', {tree: @snapshot_tree, snapshot: snapshot, size: size, time: time})