BIS-753: Adding a bar with disk space.

ui-admin/src/js/components/common/progress/LinearProgressWithLabel.jsx

+/*
+ *  Copyright ETH 2024 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 PropTypes from 'prop-types'
+import { makeStyles, withStyles } from "@material-ui/core/styles"
+import LinearProgress from '@material-ui/core/LinearProgress'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+})
+
+class LinearProgressWithLabel extends React.Component {
+  render() {
+    return (
+      <Box display='flex' alignItems='center'>
+        <Box width='100%' mr={1}>
+          <LinearProgress variant='determinate' {...this.props} />
+        </Box>
+        <Box minWidth={35}>
+          <Typography variant='body2' color='textSecondary'>{`${Math.round(
+            this.props.value
+          )}%`}</Typography>
+        </Box>
+      </Box>
+    )
+  }
+}
+
+LinearProgressWithLabel.propTypes = {
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
+   */
+  value: PropTypes.number.isRequired
+}
+
+export default withStyles(styles)(LinearProgressWithLabel)
\ No newline at end of file

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

@@ -12,6 +12,7 @@ import InfoPanel from '@src/js/components/database/data-browser/InfoPanel.jsx'
 import DataBrowserController from '@src/js/components/database/data-browser/DataBrowserController.js'
 import NavigationBar from '@src/js/components/database/data-browser/NavigationBar.jsx'
 import messages from '@src/js/common/messages.js'
+import LinearProgressWithLabel from "@src/js/components/common/progress/LinearProgressWithLabel.jsx";
 
 const HTTP_SERVER_URI = '/data-store-server'
 
@@ -257,6 +258,7 @@ class DataBrowser extends React.Component {
           path={path}
           onPathChange={this.handlePathChange}
         />
+        <LinearProgressWithLabel value={90} />
         <div className={[classes.flexContainer, classes.boundary, classes.content].join(' ')}>
           {viewType === 'list' && (
             <Grid