Update pr

Author: GilbertCherrie

app/controllers/vm_common.rb

@@ -299,7 +299,13 @@ def snap_pressed
     @center_toolbar = 'x_vm_snapshot'
     @explorer = true
     formatted_time = format_timezone(@snap_selected[:create_time].to_time, Time.zone, "view")
-    render :json => {:data => {:data => @snap_selected, :time => formatted_time}}, :status => 200
+    number_to_human_size(@snap_selected[:total_size], :precision => 2)
+    if @snap_selected[:total_size] == nil || @snap_selected[:total_size] == 0 
+      formatted_size = ''
+    else
+      formatted_size = _("%{number} bytes") % {:number => number_with_delimiter(@snap_selected[:total_size], :delimiter => ",", :separator => ".")} 
+    end
+    render :json => {:data => {:data => @snap_selected, :size => formatted_size, :time => formatted_time}}, :status => 200
     # render :update do |page|
     #   page << javascript_prologue
     #   page << javascript_reload_toolbars

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

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import './styles.css';
 import SnapshotTree from './snapshot-tree';
 
-const VMSnapshotTreeSelect = ({ tree, selected, time }) => {
-  // const [{ initialValues, isLoading }, setState] = useState({});
-  const [snapshot, setSnapshot] = useState({ ...selected, time });
+const VMSnapshotTreeSelect = ({
+  tree, selected, size, time,
+}) => {
+  const [snapshot, setSnapshot] = useState({ ...selected, size, time });
 
   // eslint-disable-next-line react/prop-types
   return (
@@ -20,7 +21,7 @@ const VMSnapshotTreeSelect = ({ tree, selected, time }) => {
             </p>
           </div>
           <div className="snapshot-detail-value">
-            {snapshot.description || ''}
+            {snapshot.data ? snapshot.data.description : snapshot.description || ''}
           </div>
         </div>
         <div className="snapshot-details">
@@ -56,11 +57,13 @@ const VMSnapshotTreeSelect = ({ tree, selected, time }) => {
 VMSnapshotTreeSelect.propTypes = {
   tree: PropTypes.objectOf(PropTypes.any).isRequired,
   selected: PropTypes.objectOf(PropTypes.any),
+  size: PropTypes.string,
   time: PropTypes.string,
 };
 
 VMSnapshotTreeSelect.defaultProps = {
   selected: {},
+  size: '',
   time: '',
 };
 

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

@@ -73,7 +73,6 @@ const convertData = (node) => {
 };
 
 const SnapshotTree = ({ nodes, setSnapshot }) => {
-  console.log(nodes);
   const [selectedNode, setSelectedNode] = useState('');
 
   const data = {
@@ -109,6 +108,7 @@ const SnapshotTree = ({ nodes, setSnapshot }) => {
     http.post(`/${ManageIQ.controller}/snap_pressed/${encodeURIComponent(shortId)}`).then((response) => {
       if (response.data) {
         const tempData = response.data;
+        tempData.size = response.data.size;
         tempData.time = response.data.time;
         setSnapshot(tempData);
       }

app/views/vm_common/_snapshots_desc.html.haml

@@ -4,7 +4,14 @@
   - unless session[:snap_selected].nil?
     - selected_id = Snapshot.find(session[:snap_selected])
 
-= react('VmSnapshotTreeSelect', {tree: @snapshot_tree, selected: selected_id, time: format_timezone(selected_id[:create_time].to_time, Time.zone, "view")})
+- time = format_timezone(selected_id[:create_time].to_time, Time.zone, "view")
+- if selected_id[:total_size] == nil || selected_id[:total_size] == 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 => ".")}
+
+= react('VmSnapshotTreeSelect', {tree: @snapshot_tree, selected: selected_id, size: size, time: time})
 
 #desc_content.desc_content
   - if session[:snap_selected].present? || @record.snapshots.count > 0