Commit d436ca0f authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Upgraded materials-UI. Dialog based repo, archive, log views for uploads.

parent 2280e95c
......@@ -3,13 +3,13 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^1.5.1",
"@material-ui/docs": "^1.0.0-alpha.5",
"@material-ui/icons": "^2.0.3",
"@material-ui/core": "^3.9.0",
"@material-ui/icons": "^3.0.2",
"@navjobs/upload": "^3.1.3",
"base-64": "^0.1.0",
"fetch": "^1.1.0",
"html-to-react": "^1.3.3",
"marked": "^0.6.0",
"react": "^16.4.2",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.4.2",
......
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles, LinearProgress, Typography } from '@material-ui/core'
import ReactJson from 'react-json-view'
import api from '../api'
import { compose } from 'recompose'
import { withErrors } from './errors'
import Markdown from './Markdown'
class ArchiveCalcView extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
raiseError: PropTypes.func.isRequired,
uploadId: PropTypes.string.isRequired,
calcId: PropTypes.string.isRequired
}
static styles = theme => ({
root: {},
data: {
overflow: 'scroll'
}
});
constructor(props) {
super(props)
this.state = {
data: null,
metaInfo: null,
showMetaInfo: false
}
}
componentDidMount() {
const {uploadId, calcId} = this.props
api.archive(uploadId, calcId).then(data => {
this.setState({data: data})
}).catch(error => {
this.setState({data: null})
this.props.raiseError(error)
})
api.getMetaInfo().then(metaInfo => {
this.setState({metaInfo: metaInfo})
}).catch(error => {
this.props.raiseError(error)
})
}
handleShowMetaInfo(selection, more) {
if (selection.name === '_name') {
this.setState({showMetaInfo: selection.value})
} else {
this.setState({showMetaInfo: selection.name})
}
}
render() {
const { classes } = this.props
const { data, showMetaInfo, metaInfo } = this.state
const metaInfoData = metaInfo ? metaInfo[showMetaInfo] : null
return (
<div className={classes.root}>
<div>{
showMetaInfo && metaInfo
? metaInfoData
? <Markdown>{metaInfoData.description}</Markdown>
: <Markdown>This value has **no** *meta-info* attached to it.</Markdown>
: <Markdown>Click a value to show its *meta-info*!</Markdown>
}
</div>
<div className={classes.data}>{
data
? <ReactJson
src={this.state.data}
enableClipboard={false}
collapsed={4}
displayObjectSize={false}
onSelect={this.handleShowMetaInfo.bind(this)} />
: <LinearProgress variant="query" />
}</div>
</div>
)
}
}
export default compose(withErrors, withStyles(ArchiveCalcView.styles))(ArchiveCalcView)
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles, LinearProgress } from '@material-ui/core'
import ReactJson from 'react-json-view'
import api from '../api'
import { compose } from 'recompose'
import { withErrors } from './errors'
class ArchiveLogView extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
raiseError: PropTypes.func.isRequired,
uploadId: PropTypes.string.isRequired,
calcId: PropTypes.string.isRequired
}
static styles = theme => ({
root: {}
});
constructor(props) {
super(props)
this.state = {
data: null
}
}
componentDidMount() {
const {uploadId, calcId} = this.props
api.calcProcLog(uploadId, calcId).then(data => {
this.setState({data: data})
}).catch(error => {
this.setState({data: null})
this.props.raiseError(error)
})
}
render() {
const { classes } = this.props
const { data } = this.state
return (
<div className={classes.root}>{
data
? <pre>{data}</pre>
: <LinearProgress variant="query" />
}
</div>
)
}
}
export default compose(withErrors, withStyles(ArchiveLogView.styles))(ArchiveLogView)
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles, Dialog, DialogContent, DialogTitle, DialogActions, Button, IconButton, Typography } from '@material-ui/core'
class CalcDialog extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
raiseError: PropTypes.func.isRequired,
uploadId: PropTypes.string.isRequired,
calcId: PropTypes.string.isRequired,
disabled: PropTypes.bool,
icon: PropTypes.element,
component: PropTypes.func.isRequired,
title: PropTypes.string
}
state = {
open: false
}
render() {
const {title, icon, component, disabled, uploadId, calcId, raiseError} = this.props
return (
<span>
<IconButton color="primary" onClick={() => this.setState({open: true})} disabled={disabled}>{icon}</IconButton>
<Dialog open={this.state.open} onClose={() => this.setState({open: false})} fullWidth={true} maxWidth={'md'}>
<DialogTitle>
<Typography variant="h6" gutterBottom>{title || 'Calculation data'}</Typography>
<Typography variant="caption" gutterBottom>{`${uploadId}/${calcId}`}</Typography>
</DialogTitle>
<DialogContent>
{component({uploadId: uploadId, calcId: calcId, raiseError: raiseError})}
</DialogContent>
<DialogActions>
<Button onClick={() => this.setState({open: false})} color="primary" autoFocus>
Close
</Button>
</DialogActions>
</Dialog>
</span>
)
}
}
export default withStyles(CalcDialog.styles)(CalcDialog)
import React from 'react'
import PropTypes from 'prop-types'
import { MuiThemeProvider, withStyles } from '@material-ui/core'
import RepoIcon from '@material-ui/icons/Cloud'
import ArchiveIcon from '@material-ui/icons/Storage'
import ArchiveLogIcon from '@material-ui/icons/BugReport'
import { repoTheme, archiveTheme } from '../config'
import CalcDialog from './CalcDialog'
import RepoCalcView from './RepoCalcView'
import ArchiveCalcView from './ArchiveCalcView'
import ArchiveLogView from './ArchiveLogView'
class CalcDialogButtons extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
uploadId: PropTypes.string,
calcId: PropTypes.string,
disabled: PropTypes.bool,
raiseError: PropTypes.func.isRequired
}
static styles = theme => ({
root: {
overflow: 'hidden',
whiteSpace: 'nowrap'
}
});
onClickOpen
render() {
const { classes, ...others } = this.props
return (
<div className={classes.root}>
<MuiThemeProvider theme={repoTheme}>
<CalcDialog icon={<RepoIcon/>} component={RepoCalcView} title={'Repository calculation data'} {...others} />
</MuiThemeProvider>
<MuiThemeProvider theme={archiveTheme}>
<CalcDialog icon={<ArchiveIcon/>} component={ArchiveCalcView} title={'Archive calculation data'} {...others} />
<CalcDialog icon={<ArchiveLogIcon/>} component={ArchiveLogView} title={'Calculation processing logs'} {...others} />
</MuiThemeProvider>
</div>
)
}
}
export default withStyles(CalcDialogButtons.styles)(CalcDialogButtons)
import React from 'react'
import PropTypes from 'prop-types'
import marked from 'marked'
import { withStyles } from '@material-ui/core'
import { withStyles, Typography } from '@material-ui/core'
import extend from '@babel/runtime/helpers/extends'
/**
......@@ -13,7 +13,7 @@ import extend from '@babel/runtime/helpers/extends'
var styles = theme => ({
root: {
fontFamily: theme.typography.fontFamily,
fontSize: 16,
fontSize: theme.typography.fontSize,
color: theme.palette.text.primary,
'& .anchor-link': {
marginTop: -96,
......@@ -62,7 +62,7 @@ var styles = theme => ({
margin: '24px 0 16px'
}),
'& p, & ul, & ol': {
lineHeight: 2
lineHeight: theme.typography.lineHeight
},
'& ul': {
paddingLeft: 0,
......@@ -76,7 +76,7 @@ var styles = theme => ({
marginLeft: -theme.spacing.unit * 4,
paddingRight: theme.spacing.unit * 4 - 14
}
},
}
},
'& h1, & h2, & h3, & h4': {
......@@ -206,12 +206,10 @@ function Markdown(props) {
}
return (
<div>
<div
className={classes.root}
dangerouslySetInnerHTML={{__html: marked(content)}}
/>
</div>
<Typography variant="body1"
className={classes.root}
dangerouslySetInnerHTML={{__html: marked(content)}}
/>
)
}
......
......@@ -10,8 +10,7 @@ import Paper from '@material-ui/core/Paper'
import api from '../api'
import CalcLinks from './CalcLinks'
import { TableHead, LinearProgress, FormControl, FormControlLabel, Checkbox, FormGroup,
FormLabel, IconButton, MuiThemeProvider } from '@material-ui/core'
import Markdown from './Markdown'
FormLabel, IconButton, MuiThemeProvider, Typography } from '@material-ui/core'
import { compose } from 'recompose'
import { withErrors } from './errors'
import AnalyticsIcon from '@material-ui/icons/Settings'
......@@ -29,9 +28,11 @@ class Repo extends React.Component {
root: {},
data: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'scroll'
},
title: {
marginBottom: theme.spacing.unit * 4
},
progressPlaceholder: {
height: 5
},
......@@ -116,9 +117,7 @@ class Repo extends React.Component {
}
return (
<div className={classes.root}>
<Markdown>{`
## The Repository – Raw Code Data
`}</Markdown>
<Typography variant="h4" className={classes.title}>The Repository Raw Code Data</Typography>
{/* <PeriodicTable/> */}
<FormControl>
<FormLabel>Filter calculations and only show: </FormLabel>
......
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles, Paper, LinearProgress } from '@material-ui/core'
import ReactJson from 'react-json-view'
import api from '../api'
import { withStyles, Paper } from '@material-ui/core'
import Markdown from './Markdown'
import { withErrors } from './errors'
import { compose } from 'recompose'
import RepoCalcView from './RepoCalcView'
class RepoCalc extends React.Component {
static propTypes = {
......@@ -19,28 +18,11 @@ class RepoCalc extends React.Component {
calcData: {
padding: theme.spacing.unit
}
});
constructor(props) {
super(props)
this.state = {
data: null
}
}
componentDidMount() {
const {uploadId, calcId} = this.props.match.params
api.repo(uploadId, calcId).then(data => {
this.setState({data: data})
}).catch(error => {
this.setState({data: null})
this.props.raiseError(error)
})
}
})
render() {
const { classes } = this.props
const { data } = this.state
const { classes, match, raiseError } = this.props
const {uploadId, calcId} = match.params
return (
<div className={classes.root}>
......@@ -48,11 +30,7 @@ class RepoCalc extends React.Component {
## The Repository – Raw Code Data
`}</Markdown>
<Paper className={classes.calcData}>
{
data
? <ReactJson src={this.state.data} enableClipboard={false} collapsed={4} />
: <LinearProgress variant="query" />
}
<RepoCalcView uploadId={uploadId} calcId={calcId} raiseError={raiseError} />
</Paper>
</div>
......
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles, LinearProgress } from '@material-ui/core'
import ReactJson from 'react-json-view'
import api from '../api'
import { withErrors } from './errors'
import { compose } from 'recompose'
class RepoCalcView extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
raiseError: PropTypes.func.isRequired,
uploadId: PropTypes.string.isRequired,
calcId: PropTypes.string.isRequired
}
static styles = theme => ({
root: {}
});
constructor(props) {
super(props)
this.state = {
data: null
}
}
componentDidMount() {
const {uploadId, calcId} = this.props
api.repo(uploadId, calcId).then(data => {
this.setState({data: data})
}).catch(error => {
this.setState({data: null})
this.props.raiseError(error)
})
}
render() {
const { classes } = this.props
const { data } = this.state
return (
<div className={classes.root}>{
data
? <ReactJson src={this.state.data} enableClipboard={false} collapsed={4} />
: <LinearProgress variant="query" />
}
</div>
)
}
}
export default compose(withErrors, withStyles(RepoCalcView.styles))(RepoCalcView)
......@@ -13,6 +13,7 @@ import { compose } from 'recompose'
import { withErrors } from './errors'
import { debug } from '../config'
import CalcProcLogPopper from './CalcProcLogPopper'
import CalcDialogButtons from './CalcDialogButtons'
class Upload extends React.Component {
static propTypes = {
......@@ -380,7 +381,7 @@ class Upload extends React.Component {
</Typography>
</TableCell>
<TableCell>
<CalcLinks uploadId={upload_id} calcId={calc_id} disabled={tasks_status !== 'SUCCESS'} />
<CalcDialogButtons uploadId={upload_id} calcId={calc_id} disabled={tasks_status !== 'SUCCESS'} />
</TableCell>
</TableRow>
)
......
......@@ -2,7 +2,8 @@ import React from 'react'
import PropTypes from 'prop-types'
import Markdown from './Markdown'
import { withStyles, Paper, IconButton, FormGroup, Checkbox, FormControlLabel, FormLabel,
LinearProgress } from '@material-ui/core'
LinearProgress,
Typography} from '@material-ui/core'
import UploadIcon from '@material-ui/icons/CloudUpload'
import Dropzone from 'react-dropzone'
import api from '../api'
......@@ -212,8 +213,8 @@ class Uploads extends React.Component {
return (
<div className={classes.root}>
<Typography variant="h4">Upload your own data</Typography>
<Markdown>{`
## Upload your own data
You can upload your own data. Have your code output ready in a popular archive
format (e.g. \`*.zip\` or \`*.tar.gz\`). Your upload can
comprise the output of multiple runs, even of different codes. Don't worry, nomad
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment