@@ -17,8 +17,12 @@ import {
17
17
import { withStyles } from '@material-ui/core/styles' ;
18
18
import _ from 'lodash' ;
19
19
import moment from "moment" ;
20
+ import { Alert } from "@material-ui/lab" ;
20
21
21
22
const styles = theme => ( {
23
+ root : {
24
+ margin : theme . spacing ( 2 ) ,
25
+ } ,
22
26
backdrop : {
23
27
zIndex : theme . zIndex . drawer + 1 ,
24
28
color : '#fff' ,
@@ -31,8 +35,8 @@ class Admin extends Component {
31
35
super ( props ) ;
32
36
this . state = {
33
37
activeIndex : 0 ,
34
- isLoading : false ,
35
- statistics : [ ] ,
38
+ isLoading : undefined ,
39
+ statistics : undefined ,
36
40
filesInput : undefined ,
37
41
fileListHtml : undefined ,
38
42
lastExecution : undefined
@@ -45,9 +49,13 @@ class Admin extends Component {
45
49
this . handleGetStatistics = this . handleGetStatistics . bind ( this ) ;
46
50
}
47
51
48
- refreshPage ( ) {
49
- this . handleGetFileList ( ) ;
50
- this . handleGetStatistics ( ) ;
52
+ async refreshPage ( ) {
53
+ this . setState ( { isLoading : true } )
54
+
55
+ await this . handleGetFileList ( ) ;
56
+ await this . handleGetStatistics ( ) ;
57
+
58
+ this . setState ( { isLoading : false } )
51
59
}
52
60
53
61
componentDidMount ( ) {
@@ -81,139 +89,130 @@ class Admin extends Component {
81
89
event . preventDefault ( ) ;
82
90
83
91
this . setState ( { isLoading : true } ) ;
92
+ fetch ( '/api/execute' ) ;
84
93
85
- const response = await fetch ( '/api/execute' ) ;
86
- const result = await response . json ( ) ;
87
-
88
- this . setState ( { isLoading : false } ) ;
89
-
90
- this . refreshPage ( ) ;
91
-
92
- return result
94
+ setTimeout ( ( ) => {
95
+ this . refreshPage ( ) ;
96
+ } , 3000 ) ;
93
97
}
94
98
95
99
async handleGetStatistics ( ) {
96
- this . setState ( { isLoading : true } )
97
-
98
- try {
99
- const statsData = await fetch ( "/api/statistics" ) ;
100
- const statsResponse = await statsData . json ( ) ;
100
+ const statsData = await fetch ( "/api/statistics" ) ;
101
+ const statsResponse = await statsData . json ( ) ;
101
102
103
+ if ( statsResponse !== 'Running' ) {
102
104
this . setState ( {
103
105
statistics : _ . toPairsIn ( statsResponse . stats ) ,
104
106
lastExecution : statsResponse . executionTime
105
107
} ) ;
106
-
107
- this . setState ( { isLoading : false } )
108
- } finally {
109
- this . setState ( { isLoading : false } )
108
+ } else {
109
+ this . setState ( { statistics : statsResponse } ) ;
110
110
}
111
-
112
111
}
113
112
114
113
async handleGetFileList ( ) {
115
- this . setState ( { isLoading : true } )
116
-
117
- try {
118
- const filesData = await fetch ( "/api/listCurrentFiles" ) ;
119
- const filesResponse = await filesData . json ( ) ;
120
-
121
- this . setState ( { fileListHtml : filesResponse } ) ;
122
-
123
- } finally {
124
- this . setState ( { isLoading : false } )
125
- }
114
+ const filesData = await fetch ( "/api/listCurrentFiles" ) ;
115
+ const filesResponse = await filesData . json ( ) ;
116
+ this . setState ( { fileListHtml : filesResponse } ) ;
126
117
}
127
118
128
119
render ( ) {
129
120
const { classes} = this . props ;
130
121
131
122
return (
132
- < div style = { { paddingLeft : 20 } } >
123
+ < div className = { classes . root } >
133
124
< h1 > Admin Portal</ h1 >
134
- < Backdrop className = { classes . backdrop } open = { this . state . isLoading === true } >
135
- < CircularProgress size = { 60 } />
136
- </ Backdrop >
137
- < Grid container spacing = { 3 } direction = "column" style = { { padding : 30 } } >
138
- < Grid container spacing = { 3 } direction = "row" >
139
- < Grid item sm = { 6 } >
140
- < h2 > Latest Files</ h2 >
141
- { _ . isEmpty ( this . state . fileListHtml ) !== true &&
142
- < TableContainer component = { Paper } className = "statisticsData" >
143
- < Table aria-label = "simple table" className = { classes . table } >
144
- < TableHead >
145
- < TableRow >
146
- < TableCell > < b > File Type</ b > </ TableCell >
147
- < TableCell > < b > Last Updated</ b > </ TableCell >
148
- </ TableRow >
149
- </ TableHead >
150
- < TableBody >
151
- { _ . map ( this . state . fileListHtml , file => {
152
- const fileName = file . split ( "-" ) [ 0 ] ;
153
- let fileDate = file . split ( "-" ) . slice ( 1 ) . join ( ) . split ( "." ) [ 0 ] ;
154
- let fileDateOnlyNumbers = fileDate . replaceAll ( "," , "" ) ;
155
- let fileDateFormatted = moment ( fileDateOnlyNumbers , "YYYYMMDDhmmss" ) . local ( ) . format ( "MMMM Do YYYY, h:mm:ss a" ) ;
156
-
157
- return (
158
- < TableRow >
159
- < TableCell > { fileName } </ TableCell >
160
- < TableCell > { fileDateFormatted } </ TableCell >
161
- </ TableRow >
162
- )
163
- } )
164
- }
165
- </ TableBody >
166
- </ Table >
167
- </ TableContainer > }
168
-
169
- < Paper style = { { padding : 5 , marginTop : 10 } } >
170
- < CardContent >
171
- < h3 style = { { marginTop : 0 } } > Upload Files</ h3 >
172
- < form onSubmit = { this . handleUpload } >
173
- < input type = "file" value = { this . state . filesInput } multiple />
174
- < Button type = "submit" variant = "contained" color = "primary" > Upload</ Button >
175
- </ form >
176
- </ CardContent >
177
- </ Paper >
178
- </ Grid >
179
-
180
- < Grid item sm = { 6 } >
181
- < h2 > Last Match Analysis </ h2 >
182
- { _ . isEmpty ( this . state . statistics ) !== true &&
183
- < TableContainer component = { Paper } className = "statisticsData" >
184
- < Table aria-label = "simple table" className = { classes . table } >
185
- < TableBody >
186
- < TableRow key = 'time' >
125
+ { this . state . statistics === 'Running' && < Alert severity = "info" > Execution is in Progress...</ Alert > }
126
+ < Backdrop className = { classes . backdrop } open = { this . state . isLoading !== false } >
127
+ < CircularProgress size = { 60 } />
128
+ </ Backdrop >
129
+ < Grid container spacing = { 3 } direction = "column" style = { { padding : 20 } } >
130
+ < Grid container spacing = { 3 } direction = "row" >
131
+ < Grid item sm = { 6 } >
132
+ < h2 > Latest Files</ h2 >
133
+ { _ . isEmpty ( this . state . fileListHtml ) !== true &&
134
+ < TableContainer component = { Paper } className = "statisticsData" >
135
+ < Table aria-label = "simple table" className = { classes . table } >
136
+ < TableHead >
137
+ < TableRow >
138
+ < TableCell > < b > File Type</ b > </ TableCell >
139
+ < TableCell > < b > Last Updated</ b > </ TableCell >
140
+ </ TableRow >
141
+ </ TableHead >
142
+ < TableBody >
143
+ { _ . map ( this . state . fileListHtml , ( file , index ) => {
144
+ const fileName = file . split ( "-" ) [ 0 ] ;
145
+ let fileDate = file . split ( "-" ) . slice ( 1 ) . join ( ) . split ( "." ) [ 0 ] ;
146
+ let fileDateOnlyNumbers = fileDate . replaceAll ( "," , "" ) ;
147
+ let fileDateFormatted = moment ( fileDateOnlyNumbers , "YYYYMMDDhmmss" ) . local ( ) . format ( "MMMM Do YYYY, h:mm:ss a" ) ;
148
+
149
+ return (
150
+ < TableRow key = { index } >
151
+ < TableCell > { fileName } </ TableCell >
152
+ < TableCell > { fileDateFormatted } </ TableCell >
153
+ </ TableRow >
154
+ )
155
+ } )
156
+ }
157
+ </ TableBody >
158
+ </ Table >
159
+ </ TableContainer > }
160
+
161
+ < Paper style = { { padding : 5 , marginTop : 10 } } >
162
+ < CardContent >
163
+ < h3 style = { { marginTop : 0 } } > Upload Files</ h3 >
164
+ < form onSubmit = { this . handleUpload } >
165
+ < input type = "file" value = { this . state . filesInput } multiple />
166
+ < Button type = "submit" variant = "contained" color = "primary"
167
+ disabled = { this . state . statistics === 'Running' } >
168
+ Upload
169
+ </ Button >
170
+ </ form >
171
+ </ CardContent >
172
+ </ Paper >
173
+ </ Grid >
174
+
175
+ < Grid item sm = { 6 } >
176
+ < h2 > Last Match Analysis </ h2 >
177
+ { _ . isEmpty ( this . state . statistics ) !== true &&
178
+ this . state . statistics !== 'Running' &&
179
+ < TableContainer component = { Paper } className = "statisticsData" >
180
+ < Table aria-label = "simple table" className = { classes . table } >
181
+ < TableBody >
182
+ < TableRow key = 'time' >
183
+ < TableCell align = "left" component = "th" scope = "row" >
184
+ < b > Last Analysis</ b >
185
+ </ TableCell >
186
+ < TableCell align = "left" >
187
+ < b > { moment ( this . state . lastExecution , "dddd MMMM Do h:mm:ss YYYY" ) . local ( ) . format ( "MMMM Do YYYY, h:mm:ss a" ) } </ b >
188
+ </ TableCell >
189
+ </ TableRow >
190
+ { this . state . statistics . map ( ( row , index ) => (
191
+ < TableRow key = { index } >
187
192
< TableCell align = "left" component = "th" scope = "row" >
188
- < b > Last Analysis</ b >
189
- </ TableCell >
190
- < TableCell align = "left" >
191
- < b > { moment ( this . state . lastExecution , "dddd MMMM Do h:mm:ss YYYY" ) . local ( ) . format ( "MMMM Do YYYY, h:mm:ss a" ) } </ b >
193
+ { row [ 0 ] }
192
194
</ TableCell >
195
+ < TableCell align = "left" > { row [ 1 ] } </ TableCell >
193
196
</ TableRow >
194
- { this . state . statistics . map ( ( row , index ) => (
195
- < TableRow key = { index } >
196
- < TableCell align = "left" component = "th" scope = "row" >
197
- { row [ 0 ] }
198
- </ TableCell >
199
- < TableCell align = "left" > { row [ 1 ] } </ TableCell >
200
- </ TableRow >
201
- ) ) }
202
- </ TableBody >
203
- </ Table >
204
- </ TableContainer > }
205
- < Paper style = { { padding : 5 , marginTop : 10 } } >
206
- < CardContent >
207
- < h3 style = { { marginTop : 0 } } > Run New Analysis</ h3 >
208
- < form onSubmit = { this . handleExecute } >
209
- < Button type = "submit" variant = "contained"
210
- color = "primary" > Run Data Analysis</ Button >
211
- </ form >
212
- </ CardContent >
213
- </ Paper >
214
- </ Grid >
197
+ ) ) }
198
+ </ TableBody >
199
+ </ Table >
200
+ </ TableContainer >
201
+ }
202
+ < Paper style = { { padding : 5 , marginTop : 10 } } >
203
+ < CardContent >
204
+ < h3 style = { { marginTop : 0 } } > Run New Analysis</ h3 >
205
+ < form onSubmit = { this . handleExecute } >
206
+ < Button type = "submit" variant = "contained" color = "primary"
207
+ disabled = { this . state . statistics === 'Running' } >
208
+ Run Data Analysis
209
+ </ Button >
210
+ </ form >
211
+ </ CardContent >
212
+ </ Paper >
215
213
</ Grid >
216
214
</ Grid >
215
+ </ Grid >
217
216
</ div >
218
217
) ;
219
218
}
0 commit comments