SSDM-13579: Added file info panel.

ui-admin/src/js/components/database/data-browser/DataBrowser.jsx

@@ -12,6 +12,7 @@ import Grid from '@src/js/components/common/grid/Grid.jsx'
 import GridFilterOptions from '@src/js/components/common/grid/GridFilterOptions.js'
 import AppController from '@src/js/components/AppController.js'
 import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx'
+import { InfoPanel } from "@src/js/components/database/data-browser/InfoPanel.jsx";
 
 const styles = theme => ({
   boundary: {
@@ -24,6 +25,10 @@ const styles = theme => ({
   icon: {
     fontSize: '4rem',
   },
+  flex: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  }
 })
 
 const configuration =
@@ -116,8 +121,8 @@ class DataBrowser extends React.Component {
     // TODO: implement
   }
 
-  handleSelect(file) {
-    this.setState({selectedFile: file});
+  handleSelect(selectedRow) {
+    this.setState({selectedFile: selectedRow.data});
   }
 
   handleMultiselect(file) {
@@ -142,60 +147,64 @@ class DataBrowser extends React.Component {
           viewType={viewType}
           onViewTypeChange={this.handleViewTypeChange}
         />
-        {viewType === 'list' && (
-          <Grid
-            // id={id}
-            // settingsId={id}
-            filterModes={[GridFilterOptions.COLUMN_FILTERS]}
-            header='Files'
-            columns={[
-              {
-                name: 'name',
-                label: 'Name',
-                sortable: true,
-                getValue: ({ row }) => row,
-                renderValue: ({ value }) => <><ItemIcon file={value} classes={classes} configuration={configuration} /> {value.name}</>,
-                renderFilter: null
-              },
-              {
-                name: 'size',
-                label: 'Size',
-                sortable: true,
-                getValue: ({ row }) => row.size
-              },
-              {
-                name: 'modified',
-                label: 'Modified',
-                sortable: false,
-                getValue: ({ row }) => row.lastModifiedTime.toLocaleString()
-              },
-            ]}
-            loadRows={this.load}
-            sort='registrationDate'
-            sortDirection='desc'
-            exportable={false}
-            selectable={true}
-            multiselectable={true}
-            loadSettings={null}
-            onSettingsChange={null}
-            onError={this.onError}
-            exportXLS={null}
-          />
-        )}
-        {viewType === 'grid' && (
-          <GridView
-            clickable={true}
-            selectable={true}
-            multiselectable={true}
-            onClick={this.handleClick}
-            onSelect={this.handleSelect}
-            onMultiselect={this.handleMultiselect}
-            configuration={configuration}
-            files={files}
-            selectedFile = {selectedFile}
-            multiselectedFiles = {multiselectedFiles}
-          />
-        )}
+        <div className={classes.flex}>
+          {viewType === 'list' && (
+            <Grid
+              // id={id}
+              // settingsId={id}
+              filterModes={[GridFilterOptions.COLUMN_FILTERS]}
+              header='Files'
+              columns={[
+                {
+                  name: 'name',
+                  label: 'Name',
+                  sortable: true,
+                  getValue: ({ row }) => row,
+                  renderValue: ({ value }) => <><ItemIcon file={value} classes={classes} configuration={configuration} /> {value.name}</>,
+                  renderFilter: null
+                },
+                {
+                  name: 'size',
+                  label: 'Size',
+                  sortable: true,
+                  getValue: ({ row }) => row.size
+                },
+                {
+                  name: 'modified',
+                  label: 'Modified',
+                  sortable: false,
+                  getValue: ({ row }) => row.lastModifiedTime.toLocaleString()
+                },
+              ]}
+              loadRows={this.load}
+              sort='registrationDate'
+              sortDirection='desc'
+              exportable={false}
+              selectable={true}
+              multiselectable={true}
+              loadSettings={null}
+              onSettingsChange={null}
+              onError={this.onError}
+              onSelectedRowChange={this.handleSelect}
+              exportXLS={null}
+            />
+          )}
+          {viewType === 'grid' && (
+            <GridView
+              clickable={true}
+              selectable={true}
+              multiselectable={true}
+              onClick={this.handleClick}
+              onSelect={this.handleSelect}
+              onMultiselect={this.handleMultiselect}
+              configuration={configuration}
+              files={files}
+              selectedFile = {selectedFile}
+              multiselectedFiles = {multiselectedFiles}
+            />
+          )}
+          <InfoPanel file={selectedFile} />
+        </div>
       </Paper>
     )
   }

ui-admin/src/js/components/database/data-browser/InfoPanel.jsx

+/*
+ *  Copyright ETH 2023 Zürich, Scientific IT Services
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import React from 'react'
+
+import autoBind from 'auto-bind'
+import Container from '@src/js/components/common/form/Container.jsx'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableRow from '@material-ui/core/TableRow'
+
+export class InfoPanel extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    autoBind(this)
+  }
+
+  render() {
+    const { classes, file } = this.props
+
+    // return <div>Test</div>
+
+    return (file &&
+      <Container>
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell variant='head'>Name</TableCell>
+              <TableCell>{file.name}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell variant='head'>Size</TableCell>
+              <TableCell>{file.size}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell variant='head'>Created</TableCell>
+              <TableCell>{file.creationTime.toLocaleString()}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell variant='head'>Modified</TableCell>
+              <TableCell>{file.lastModifiedTime.toLocaleString()}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell variant='head'>Accessed</TableCell>
+              <TableCell>{file.lastAccessTime.toLocaleString()}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Container>
+    )
+  }
+}

ui-admin/src/js/components/database/data-browser/Toolbar.jsx

@@ -18,7 +18,6 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import messages from '@src/js/common/messages.js'
-import Container from '@src/js/components/common/form/Container.jsx'
 import Button from '@src/js/components/common/form/Button.jsx'
 import ViewComfyIcon from '@material-ui/icons/ViewComfy'
 import ViewListIcon from '@material-ui/icons/ViewList'