Test

Author: GilbertCherrie

app/controllers/vm_common.rb

@@ -298,15 +298,17 @@ def snap_pressed
     @active = @snap_selected.current? if @snap_selected
     @center_toolbar = 'x_vm_snapshot'
     @explorer = true
-    render :update do |page|
-      page << javascript_prologue
-      page << javascript_reload_toolbars
-
-      page.replace("flash_msg_div", :partial => "layouts/flash_msg")
-      page << "miqScrollTop();" if @flash_array.present?
-      page.replace("desc_content", :partial => "/vm_common/snapshots_desc",
-                                   :locals  => {:selected => params[:id]})
-    end
+    formatted_time = format_timezone(@snap_selected[:create_time].to_time, Time.zone, "view")
+    render :json => {:data => {:data => @snap_selected, :time => formatted_time}}, :status => 200
+    # render :update do |page|
+    #   page << javascript_prologue
+    #   page << javascript_reload_toolbars
+
+    #   page.replace("flash_msg_div", :partial => "layouts/flash_msg")
+    #   page << "miqScrollTop();" if @flash_array.present?
+    #   page.replace("desc_content", :partial => "/vm_common/snapshots_desc",
+    #                                :locals  => {:selected => params[:id]})
+    # end
   end
 
   def disks

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

@@ -1,29 +1,67 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { API } from '../../http_api';
 import './styles.css';
 import SnapshotTree from './snapshot-tree';
 
-const VMSnapshotTreeSelect = ({ recordId, tree }) => {
-  const [{ initialValues, isLoading }, setState] = useState({
-    isLoading: !!recordId,
-  });
-
-  useEffect(() => {
-    console.log(recordId);
-    console.log(tree);
-  }, []);
+const VMSnapshotTreeSelect = ({ tree, selected, time }) => {
+  // const [{ initialValues, isLoading }, setState] = useState({});
+  const [snapshot, setSnapshot] = useState({ ...selected, time });
 
   // eslint-disable-next-line react/prop-types
-  return (<SnapshotTree nodes={tree.tree_nodes} />);
+  return (
+    <div>
+      <div className="snapshot-details-div">
+        <div className="snapshot-details">
+          <div className="snapshot-detail-title">
+            <p>
+              <b>
+                Description
+              </b>
+            </p>
+          </div>
+          <div className="snapshot-detail-value">
+            {snapshot.description || ''}
+          </div>
+        </div>
+        <div className="snapshot-details">
+          <div className="snapshot-detail-title" id="size-title">
+            <p>
+              <b>
+                Size
+              </b>
+            </p>
+          </div>
+          <div className="snapshot-detail-value">
+            {snapshot.size || ''}
+          </div>
+        </div>
+        <div className="snapshot-details">
+          <div className="snapshot-detail-title" id="created-title">
+            <p>
+              <b>
+                Created
+              </b>
+            </p>
+          </div>
+          <div className="snapshot-detail-value">
+            {snapshot.time || ''}
+          </div>
+        </div>
+      </div>
+      <SnapshotTree nodes={tree.tree_nodes} setSnapshot={setSnapshot} />
+    </div>
+  );
 };
 
 VMSnapshotTreeSelect.propTypes = {
-  recordId: PropTypes.any,
+  tree: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.objectOf(PropTypes.any),
+  time: PropTypes.string,
 };
 
 VMSnapshotTreeSelect.defaultProps = {
-  recordId: undefined,
+  selected: {},
+  time: '',
 };
 
 export default VMSnapshotTreeSelect;

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

@@ -72,8 +72,9 @@ const convertData = (node) => {
   return treeData;
 };
 
-const SnapshotTree = ({ nodes }) => {
+const SnapshotTree = ({ nodes, setSnapshot }) => {
   const [selectedNode, setSelectedNode] = useState('');
+
   const data = {
     name: '',
     children: nodes.map(convertData),
@@ -101,21 +102,35 @@ const SnapshotTree = ({ nodes }) => {
       return;
     }
 
-    // Remove 'selected' class from all elements
-    const selectedElements = document.querySelectorAll('.selected-snapshot');
-    selectedElements.forEach((el) => {
-      el.classList.remove('selected-snapshot');
+    const ids = node.id.split('-');
+    const shortId = ids[ids.length - 1];
+    miqSparkleOn();
+    http.post(`/${ManageIQ.controller}/snap_pressed/${encodeURIComponent(shortId)}`).then((response) => {
+      if (response.data) {
+        const tempData = response.data;
+        tempData.time = response.data.time;
+        setSnapshot(tempData);
+      }
+      miqSparkleOff();
     });
 
+    // Remove 'selected' class from all elements
+    // const selectedElements = document.querySelectorAll('.selected-snapshot');
+    // selectedElements.forEach((el) => {
+    //   el.classList.remove('selected-snapshot');
+    // });
+
     e.stopPropagation();
-    if (node.id === selectedNode) {
-      setSelectedNode('');
-    } else {
-      setSelectedNode(e.target.id);
-    }
+    setSelectedNode(e.target.id);
   };
 
   const addSelectedClassName = () => {
+    // Remove 'selected' class from all elements
+    const selectedElements = document.querySelectorAll('.selected-snapshot');
+    selectedElements.forEach((el) => {
+      el.classList.remove('selected-snapshot');
+    });
+
     const selectedElement = document.getElementById(selectedNode);
     if (selectedElement) {
       selectedElement.parentNode.classList.add('selected-snapshot');
@@ -203,6 +218,7 @@ const SnapshotTree = ({ nodes }) => {
 
 SnapshotTree.propTypes = {
   nodes: PropTypes.arrayOf(PropTypes.any).isRequired,
+  setSnapshot: PropTypes.func.isRequired,
 };
 
 SnapshotTree.defaultProps = {

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

@@ -1,4 +1,28 @@
-.checkbox {
+  .snapshot-details-div {
+    .snapshot-details {
+      margin-left: 30px;
+      margin-bottom: 20px;
+    }
+    
+    .snapshot-detail-title {
+      width: 80px;
+      justify-content: right;
+      display: inline-flex;
+      margin-right: 30px;
+    }
+
+    #size-title {
+    }
+
+    #created-title {
+    }
+
+    .snapshot-detail-value {
+      display: inline-flex;
+    }
+  }
+
+  .checkbox {
     font-size: 16px;
     user-select: none;
     min-height: 320px;

app/views/vm_common/_snapshots_desc.html.haml

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