Fix click event of Volume detail page (#65)

Fixes: #64 Signed-off-by: Aravinda Vishwanathapura <[email protected]>
kadalu · Dec 21, 2022 · 1e53b7c · 1e53b7c
1 parent 6c6556b
commit 1e53b7c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 15 deletions.
diff --git a/gdash/version.py b/gdash/version.py
@@ -1,2 +1,2 @@
 """Version"""
-VERSION = "1.0.5"
+VERSION = "main"
diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -21,10 +21,12 @@ function App() {
                        element={<Login/>}/>
                 <Route path="/dashboard"
                        element={<Dashboard/>}/>
-                <Route path="/volumes/:volumeId"
-                       element={<VolumeDetail/>}/>
-                <Route path="/volumes"
-                       element={<Volumes/>}/>
+                <Route path="/volumes">
+                    <Route path=""
+                           element={<Volumes/>}/>
+                    <Route path=":volumeId"
+                           element={<VolumeDetail/>}/>
+                </Route>
                 <Route path="/peers"
                        element={<Peers/>}/>
                 <Route path="/bricks"

diff --git a/ui/src/pages/bricks.jsx b/ui/src/pages/bricks.jsx
@@ -25,7 +25,7 @@ function bricksUI(volumes) {
                         return volume.subvols.map((subvol, sdx) => {
                             return subvol.bricks.map((brick, bdx) => {
                                 return (
-                                    <tr key={vdx + '-' + sdx + '-' + bdx} className="border-b border-indigo-100 hover:bg-gray-100 cursor-pointer">
+                                    <tr key={vdx + '-' + sdx + '-' + bdx} className="border-b border-indigo-100 hover:bg-gray-100">
                                         <td className="px-5 py-2" style={{minWidth: "250px"}}>
                                             {volume.name}<div className="text-sm text-gray-700">{volume.uuid}</div>
                                         </td>

diff --git a/ui/src/pages/volumeDetail.jsx b/ui/src/pages/volumeDetail.jsx
@@ -33,7 +33,7 @@ function volumeDetailUI(volumeId, volumes) {
                     </tr>
                 </thead>
                 <tbody>
-                    <tr key={volume.uuid} className="border-b border-indigo-100 hover:bg-gray-100 cursor-pointer">
+                    <tr key={volume.uuid} className="border-b border-indigo-100 hover:bg-gray-100">
                         <td className="px-5 py-2" style={{minWidth: "250px"}}>
                             {volume.name}<div className="text-sm text-gray-700">{volume.uuid}</div>
                         </td>

diff --git a/ui/src/pages/volumes.jsx b/ui/src/pages/volumes.jsx
@@ -1,16 +1,12 @@
 import React, { useState, useEffect } from 'react';
+
 import axios from 'axios';
 import * as dayjs from 'dayjs';
 
 import { Content } from '../components/content.jsx'
 import { volumeStatus, capitalize, sizeUtilization, inodesUtilization } from '../components/helpers';
 
 function volumesUI(history, volumes) {
-
-    function handleClick(volume_id) {
-        history.push('/volumes/' + volume_id)
-    }
-
     return (
         <table className="border border-indigo-100 rounded-lg shadow-lg" style={{width: "90%"}}>
             <thead>
@@ -26,7 +22,7 @@ function volumesUI(history, volumes) {
                 {
                     volumes.map((volume, idx) => {
                         return (
-                            <tr key={idx} className="border-b border-indigo-100 hover:bg-gray-100 cursor-pointer" onClick={() => handleClick(volume.uuid)}>
+                            <tr key={idx} className="border-b border-indigo-100 hover:bg-gray-100 cursor-pointer" onClick={() => window.location = '/volumes/' + volume.uuid}>
                                 <td className="px-5 py-2" style={{minWidth: "250px"}}>
                                     {volume.name}<div className="text-sm text-gray-700">{volume.uuid}</div>
                                 </td>
@@ -37,12 +33,12 @@ function volumesUI(history, volumes) {
                                 <td className="px-5 py-2">{sizeUtilization(volume)}</td>
                                 <td className="px-5 py-2">{inodesUtilization(volume)}</td>
                             </tr>
-                        );
+                    );
                     })
                 }
             </tbody>
         </table>
-    )
+)
 }
 
 export function Volumes({ history }) {