17
17
import React , { useEffect , useState } from "react" ;
18
18
import { connect } from "react-redux" ;
19
19
import { HorizontalBar } from "react-chartjs-2" ;
20
+ import { Redirect } from "react-router-dom" ;
20
21
import {
21
22
Button ,
22
23
FormControl ,
@@ -40,13 +41,18 @@ import {
40
41
inlineCheckboxes ,
41
42
searchField ,
42
43
} from "../Common/FormComponents/common/styleLibrary" ;
44
+ import {
45
+ CONSOLE_UI_RESOURCE ,
46
+ IAM_SCOPES ,
47
+ } from "../../../common/SecureComponent/permissions" ;
43
48
import { AppState } from "../../../store" ;
44
49
import { ErrorResponseHandler } from "../../../common/types" ;
45
50
import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper" ;
46
51
import PageHeader from "../Common/PageHeader/PageHeader" ;
47
52
import api from "../../../common/api" ;
48
53
import BackLink from "../../../common/BackLink" ;
49
54
import PageLayout from "../Common/Layout/PageLayout" ;
55
+ import SecureComponent from "../../../common/SecureComponent/SecureComponent" ;
50
56
51
57
const styles = ( theme : Theme ) =>
52
58
createStyles ( {
@@ -273,128 +279,134 @@ const Heal = ({ classes, distributedSetup }: IHeal) => {
273
279
< PageHeader label = "Heal" />
274
280
< BackLink to = "/tools" label = "Return to Tools" />
275
281
< PageLayout >
276
- < Grid xs = { 12 } className = { classes . formBox } >
277
- < Grid item xs = { 12 } className = { classes . actionsTray } >
278
- < FormControl variant = "outlined" className = { classes . bucketField } >
279
- < Select
280
- label = "Bucket"
281
- id = "bucket-name"
282
- name = "bucket-name"
283
- value = { bucketName }
282
+ < SecureComponent
283
+ scopes = { [ IAM_SCOPES . ADMIN_HEAL_ACTION ] }
284
+ resource = { CONSOLE_UI_RESOURCE }
285
+ RenderError = { < Redirect to = { "/" } /> }
286
+ >
287
+ < Grid xs = { 12 } className = { classes . formBox } >
288
+ < Grid item xs = { 12 } className = { classes . actionsTray } >
289
+ < FormControl variant = "outlined" className = { classes . bucketField } >
290
+ < Select
291
+ label = "Bucket"
292
+ id = "bucket-name"
293
+ name = "bucket-name"
294
+ value = { bucketName }
295
+ onChange = { ( e ) => {
296
+ setBucketName ( e . target . value as string ) ;
297
+ } }
298
+ className = { classes . searchField }
299
+ input = { < SelectStyled /> }
300
+ displayEmpty
301
+ >
302
+ < MenuItem value = "" key = { `select-bucket-name-default` } >
303
+ Select Bucket
304
+ </ MenuItem >
305
+ { bucketNames . map ( ( option ) => (
306
+ < MenuItem
307
+ value = { option . value }
308
+ key = { `select-bucket-name-${ option . label } ` }
309
+ >
310
+ { option . label }
311
+ </ MenuItem >
312
+ ) ) }
313
+ </ Select >
314
+ </ FormControl >
315
+ < TextField
316
+ label = "Prefix"
317
+ className = { classes . prefixField }
318
+ id = "prefix-resource"
319
+ disabled = { false }
320
+ InputProps = { {
321
+ disableUnderline : true ,
322
+ } }
323
+ onChange = { ( e ) => {
324
+ setPrefix ( e . target . value ) ;
325
+ } }
326
+ variant = "standard"
327
+ />
328
+ </ Grid >
329
+ < Grid item xs = { 12 } className = { classes . inlineCheckboxes } >
330
+ < CheckboxWrapper
331
+ name = "recursive"
332
+ id = "recursive"
333
+ classes = { classes }
334
+ value = "recursive"
335
+ checked = { recursive }
284
336
onChange = { ( e ) => {
285
- setBucketName ( e . target . value as string ) ;
337
+ setRecursive ( e . target . checked ) ;
286
338
} }
287
- className = { classes . searchField }
288
- input = { < SelectStyled /> }
289
- displayEmpty
339
+ disabled = { false }
340
+ label = "Recursive"
341
+ />
342
+ < CheckboxWrapper
343
+ name = "forceStart"
344
+ id = "forceStart"
345
+ classes = { classes }
346
+ value = "forceStart"
347
+ checked = { forceStart }
348
+ onChange = { ( e ) => {
349
+ setForceStart ( e . target . checked ) ;
350
+ } }
351
+ disabled = { false }
352
+ label = "Force Start"
353
+ />
354
+ < CheckboxWrapper
355
+ name = "forceStop"
356
+ id = "forceStop"
357
+ classes = { classes }
358
+ value = "forceStop"
359
+ checked = { forceStop }
360
+ onChange = { ( e ) => {
361
+ setForceStop ( e . target . checked ) ;
362
+ } }
363
+ disabled = { false }
364
+ label = "Force Stop"
365
+ />
366
+ </ Grid >
367
+ < Grid item xs = { 12 } className = { classes . buttonBar } >
368
+ < Button
369
+ type = "submit"
370
+ variant = "contained"
371
+ color = "primary"
372
+ disabled = { start }
373
+ onClick = { ( ) => setStart ( true ) }
290
374
>
291
- < MenuItem value = "" key = { `select-bucket-name-default` } >
292
- Select Bucket
293
- </ MenuItem >
294
- { bucketNames . map ( ( option ) => (
295
- < MenuItem
296
- value = { option . value }
297
- key = { `select-bucket-name-${ option . label } ` }
298
- >
299
- { option . label }
300
- </ MenuItem >
301
- ) ) }
302
- </ Select >
303
- </ FormControl >
304
- < TextField
305
- label = "Prefix"
306
- className = { classes . prefixField }
307
- id = "prefix-resource"
308
- disabled = { false }
309
- InputProps = { {
310
- disableUnderline : true ,
311
- } }
312
- onChange = { ( e ) => {
313
- setPrefix ( e . target . value ) ;
314
- } }
315
- variant = "standard"
316
- />
375
+ Start
376
+ </ Button >
377
+ </ Grid >
317
378
</ Grid >
318
- < Grid item xs = { 12 } className = { classes . inlineCheckboxes } >
319
- < CheckboxWrapper
320
- name = "recursive"
321
- id = "recursive"
322
- classes = { classes }
323
- value = "recursive"
324
- checked = { recursive }
325
- onChange = { ( e ) => {
326
- setRecursive ( e . target . checked ) ;
327
- } }
328
- disabled = { false }
329
- label = "Recursive"
330
- />
331
- < CheckboxWrapper
332
- name = "forceStart"
333
- id = "forceStart"
334
- classes = { classes }
335
- value = "forceStart"
336
- checked = { forceStart }
337
- onChange = { ( e ) => {
338
- setForceStart ( e . target . checked ) ;
379
+ < Grid item xs = { 12 } className = { classes . graphContainer } >
380
+ < HorizontalBar
381
+ data = { data }
382
+ width = { 80 }
383
+ height = { 30 }
384
+ options = { {
385
+ title : {
386
+ display : true ,
387
+ text : "Item's Health Status [%]" ,
388
+ fontSize : 20 ,
389
+ } ,
390
+ legend : {
391
+ display : true ,
392
+ position : "right" ,
393
+ } ,
339
394
} }
340
- disabled = { false }
341
- label = "Force Start"
342
395
/>
343
- < CheckboxWrapper
344
- name = "forceStop"
345
- id = "forceStop"
346
- classes = { classes }
347
- value = "forceStop"
348
- checked = { forceStop }
349
- onChange = { ( e ) => {
350
- setForceStop ( e . target . checked ) ;
351
- } }
352
- disabled = { false }
353
- label = "Force Stop"
354
- />
355
- </ Grid >
356
- < Grid item xs = { 12 } className = { classes . buttonBar } >
357
- < Button
358
- type = "submit"
359
- variant = "contained"
360
- color = "primary"
361
- disabled = { start }
362
- onClick = { ( ) => setStart ( true ) }
363
- >
364
- Start
365
- </ Button >
366
- </ Grid >
367
- </ Grid >
368
- < Grid item xs = { 12 } className = { classes . graphContainer } >
369
- < HorizontalBar
370
- data = { data }
371
- width = { 80 }
372
- height = { 30 }
373
- options = { {
374
- title : {
375
- display : true ,
376
- text : "Item's Health Status [%]" ,
377
- fontSize : 20 ,
378
- } ,
379
- legend : {
380
- display : true ,
381
- position : "right" ,
382
- } ,
383
- } }
384
- />
385
- < Grid item xs = { 12 } className = { classes . scanInfo } >
386
- < div className = { classes . scanData } >
387
- < strong > Size scanned:</ strong > { hStatus . sizeScanned }
388
- </ div >
389
- < div className = { classes . scanData } >
390
- < strong > Objects healed:</ strong > { hStatus . objectsHealed } /{ " " }
391
- { hStatus . objectsScanned }
392
- </ div >
393
- < div className = { classes . scanData } >
394
- < strong > Healing time:</ strong > { hStatus . healDuration } s
395
- </ div >
396
+ < Grid item xs = { 12 } className = { classes . scanInfo } >
397
+ < div className = { classes . scanData } >
398
+ < strong > Size scanned:</ strong > { hStatus . sizeScanned }
399
+ </ div >
400
+ < div className = { classes . scanData } >
401
+ < strong > Objects healed:</ strong > { hStatus . objectsHealed } /{ " " }
402
+ { hStatus . objectsScanned }
403
+ </ div >
404
+ < div className = { classes . scanData } >
405
+ < strong > Healing time:</ strong > { hStatus . healDuration } s
406
+ </ div >
407
+ </ Grid >
396
408
</ Grid >
397
- </ Grid >
409
+ </ SecureComponent >
398
410
</ PageLayout >
399
411
</ React . Fragment >
400
412
) ;
0 commit comments