From 922a83a9480f6d6d657a5663c8532c943bdbdc00 Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Mon, 17 Jul 2023 12:24:40 +0200
Subject: [PATCH] SSDM-13579: Made the browser show real files.
---
.../database/data-browser/DataBrowser.jsx | 154 +++++++-----------
1 file changed, 58 insertions(+), 96 deletions(-)
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index 7190b2fb82e..3ec8633b7b1 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -12,9 +12,9 @@ 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";
+import InfoPanel from '@src/js/components/database/data-browser/InfoPanel.jsx'
-const HTTP_SERVER_URI = "/data-store-server";
+const HTTP_SERVER_URI = '/data-store-server'
const styles = theme => ({
boundary: {
@@ -64,102 +64,22 @@ const configuration =
]
class DataBrowser extends React.Component {
-
constructor(props, context) {
super(props, context)
autoBind(this)
- this.datastoreServer = new DataStoreServer('http://localhost:8085', HTTP_SERVER_URI);
-
- const owner = "demo-sample"
- const source = ""
- this.datastoreServer.login("admin", "changeit", this.login);
-
+ this.datastoreServer = new DataStoreServer(
+ 'http://localhost:8085',
+ HTTP_SERVER_URI
+ )
this.state = {
viewType: props.viewType,
- files: [
- {
- name: 'Processed',
- folder: true,
- size: 0,
- creationTime: new Date('2020-08-13 14:45:54.034563'),
- lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
- lastAccessTime: new Date('2023-05-25 14:55:31.902857')
- },
- {
- name: 'Text.txt',
- folder: false,
- size: 21432,
- creationTime: new Date('2020-08-13 14:45:54.034563'),
- lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
- lastAccessTime: new Date('2023-05-25 14:55:31.902857')
- },
- {
- name: 'Movie.mp4',
- folder: false,
- size: 2143243443537,
- creationTime: new Date('2020-08-13 14:45:54.034563'),
- lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
- lastAccessTime: new Date('2023-05-25 14:55:31.902857')
- },
- {
- name: 'Music.mp3',
- folder: false,
- size: 21432443,
- creationTime: new Date('2020-08-13 14:45:54.034563'),
- lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
- lastAccessTime: new Date('2023-05-25 14:55:31.902857')
- },
- {
- name: 'Image.png',
- folder: false,
- size: 214323234,
- creationTime: new Date('2020-08-13 14:45:54.034563'),
- lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
- lastAccessTime: new Date('2023-05-25 14:55:31.902857')
- },
- {
- name: 'lock',
- folder: false,
- size: 0,
- creationTime: new Date('2020-08-13 14:45:54.034563'),
- lastModifiedTime: new Date('2023-05-30 15:33:14.048038'),
- lastAccessTime: new Date('2023-05-30 15:33:14.048038')
- }
- ],
+ files: [],
selectedFile: null,
multiselectedFiles: new Set([]),
showInfo: false
}
}
-
- login(token) {
- if (!token) {
- alert("Could not perform login.");
- return;
- }
-
- console.log("Token: " + token)
- this.datastoreServer.list("demo-sample", "", "true", this.displayReturnedFiles)
- }
-
- displayReturnedFiles(data) {
- if (data.error) {
- console.error(data.error);
- alert("Could not list files.");
- return;
- }
-
- const results = data.result[1];
-
- // Restrict the display to 50 samples
- // results = results.splice(0, 50);
-
- // generateTable(results);
-
- console.log("Received data: " + results)
- }
-
handleViewTypeChange(viewType) {
this.setState({ viewType })
}
@@ -169,15 +89,45 @@ class DataBrowser extends React.Component {
}
handleSelect(selectedRow) {
- this.setState({selectedFile: selectedRow && selectedRow.data});
+ this.setState({ selectedFile: selectedRow && selectedRow.data })
}
handleMultiselect(file) {
// TODO: implement
}
+ async login() {
+ return new Promise((resolve, reject) => {
+ this.datastoreServer.login('admin', 'changeit', token => {
+ if (token) {
+ resolve(token)
+ } else {
+ reject('Could not perform login.')
+ }
+ })
+ })
+ }
+
+ async listFiles() {
+ return new Promise((resolve, reject) => {
+ this.datastoreServer.list('demo-sample', '', 'true', (data) => {
+ if (!data.error) {
+ const results = data.result[1]
+ const files = results.map(result => result[1])
+ resolve(files)
+ } else {
+ reject(data.error)
+ }
+ })
+ })
+ }
+
async load(params) {
- return await this.state.files.map((file) => ({id: file.name, ...file}));
+ await this.login()
+ const files = await this.listFiles()
+ this.setState({ files: files })
+ console.log('Received data: ' + files)
+ return await files.map(file => ({ id: file.name, ...file }))
}
async onError(error) {
@@ -185,12 +135,13 @@ class DataBrowser extends React.Component {
}
handleShowInfoChange() {
- this.setState({showInfo: !this.state.showInfo})
+ this.setState({ showInfo: !this.state.showInfo })
}
render() {
const { classes } = this.props
- const { viewType, files, selectedFile, multiselectedFiles, showInfo } = this.state
+ const { viewType, files, selectedFile, multiselectedFiles, showInfo } =
+ this.state
return (
<Paper className={classes.boundary}>
@@ -214,7 +165,16 @@ class DataBrowser extends React.Component {
label: 'Name',
sortable: true,
getValue: ({ row }) => row.name,
- renderValue: ({ row }) => <><ItemIcon file={row} classes={{ icon: classes.icon }} configuration={configuration} /> {row.name}</>,
+ renderValue: ({ row }) => (
+ <>
+ <ItemIcon
+ file={row}
+ classes={{ icon: classes.icon }}
+ configuration={configuration}
+ />{' '}
+ {row.name}
+ </>
+ ),
renderFilter: null
},
{
@@ -228,7 +188,7 @@ class DataBrowser extends React.Component {
label: 'Modified',
sortable: false,
getValue: ({ row }) => row.lastModifiedTime.toLocaleString()
- },
+ }
]}
loadRows={this.load}
sort='registrationDate'
@@ -253,11 +213,13 @@ class DataBrowser extends React.Component {
onMultiselect={this.handleMultiselect}
configuration={configuration}
files={files}
- selectedFile = {selectedFile}
- multiselectedFiles = {multiselectedFiles}
+ selectedFile={selectedFile}
+ multiselectedFiles={multiselectedFiles}
/>
)}
- {showInfo && selectedFile && <InfoPanel file={selectedFile} configuration={configuration} />}
+ {showInfo && selectedFile && (
+ <InfoPanel file={selectedFile} configuration={configuration} />
+ )}
</div>
</Paper>
)
--
GitLab