feat(clean containers ui): clean containers ui

Zooz · Dec 29, 2019 · b653474 · b653474
1 parent 0d71e58
commit b653474
Show file tree

Hide file tree

Showing 12 changed files with 321 additions and 117 deletions.
diff --git a/ui/src/App/index.js b/ui/src/App/index.js
@@ -43,7 +43,7 @@ class App extends React.Component {
               <Route exact path='/last_reports' render={props => (
                 <GetReports {...props} />
               )} />
-            <Route exact path='/configuration' render={props => (
+            <Route exact path='/settings' render={props => (
                 <Configuration {...props} />
              )} />
             </DrawerE>

diff --git a/ui/src/features/configurationColumn.scss b/ui/src/features/configurationColumn.scss
@@ -20,7 +20,6 @@
 }
 
 
-
 .icon {
   font-size:20px;
 }

diff --git a/ui/src/features/get-configuration.js b/ui/src/features/get-configuration.js
@@ -4,15 +4,39 @@ import {
     config,
     errorOnGetConfig,
     processingGetConfig,
-    processingUpdateConfig
+    processingUpdateConfig,
+    cleanFinishedContainersSuccess,
+    cleanFinishedContainersFailure
 } from './redux/selectors/configSelector';
 import * as Actions from './redux/action';
 import Loader from '../features/components/Loader';
 import ConfigurationForm from './components/ConfigurationForm';
 import Page from '../components/Page';
 import Card from '../components/Card';
 import style from './get-configuration.scss'
+import TitleInput from "../components/TitleInput";
+import classnames from 'classnames';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import ErrorDialog from '../features/components/ErrorDialog';
+
+import {
+    faTrashAlt,
+} from '@fortawesome/free-solid-svg-icons'
+import Snackbar from "material-ui/Snackbar";
+
 const errorMsgGetConfig = 'Error occurred while trying to get Predator configuration.';
+const CardWithTitle = ({children, title}) => {
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', width: '50%'}}>
+            <h1 color={'#555555'}>{title}</h1>
+            <Card className={style['card-wrapper']}>
+                {children}
+            </Card>
+        </div>
+
+    )
+};
+
 class getConfiguration extends React.Component {
     constructor(props) {
         super(props);
@@ -23,23 +47,50 @@ class getConfiguration extends React.Component {
     }
 
     componentWillUnmount() {
-        this.props.getConfigFailure(undefined);
     }
 
     render() {
-        const {config, errorOnGetConfig, processingGetConfig} = this.props;
+        const {config, errorOnGetConfig, processingGetConfig, cleanFinishedContainersSuccess, cleanFinishedContainersFailure} = this.props;
+       const currentError = cleanFinishedContainersFailure || errorOnGetConfig;
         return (
-            <Page title={'Configuration'} description={'Customize Predator behavior'}>
-                <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
+            <Page title={'Settings'} description={'Customize Predator behavior'}>
+                <div>
                     {errorOnGetConfig ? errorMsgGetConfig : null}
                     {processingGetConfig && <Loader/>}
                     {(config && !errorOnGetConfig && !processingGetConfig) &&
-                    <Card className={style['card-wrapper']}>
-                        <ConfigurationForm history={this.props.history} config={config}/>
-                    </Card>}
+                    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+                        <CardWithTitle title={'Configuration'}>
+                            <ConfigurationForm history={this.props.history} config={config}/>
+                        </CardWithTitle>
+                        <CardWithTitle title={'Housekeeping'}>
+                            <div className={style['configuration-item-wrapper']}>
+                                <TitleInput title={'Clean up finished containers'}/>
+                                <FontAwesomeIcon
+                                    className={classnames(style['icon'], {
+                                        [style['action-style']]: true,
+                                        [style['disabled-button']]: false
+                                    })}
+                                    onClick={this.props.cleanFinishedContainers} icon={faTrashAlt}/>
+                            </div>
+                        </CardWithTitle>
+                    </div>
+                    }
                 </div>
-            </Page>
+                {cleanFinishedContainersSuccess && <Snackbar
+                    open={cleanFinishedContainersSuccess}
+                    bodyStyle={{backgroundColor: '#2fbb67'}}
+                    message={`${cleanFinishedContainersSuccess.deleted} containers were deleted`}
+                    autoHideDuration={4000}
+                    // onRequestClose={this.handleSnackbarClose}
+                />}
+
+                {currentError&&
+                <ErrorDialog closeDialog={() => {
+                    this.props.setCleanFinishedContainersFailure(undefined);
+                    this.props.getConfigFailure(undefined);
+                }} showMessage={currentError.message}/>}
 
+            </Page>
         )
     }
 }
@@ -49,7 +100,9 @@ function mapStateToProps(state) {
         config: config(state),
         processingGetConfig: processingGetConfig(state),
         processingUpdateConfig: processingUpdateConfig(state),
-        errorOnGetConfig: errorOnGetConfig(state)
+        errorOnGetConfig: errorOnGetConfig(state),
+        cleanFinishedContainersSuccess: cleanFinishedContainersSuccess(state),
+        cleanFinishedContainersFailure: cleanFinishedContainersFailure(state)
     }
 }
 
@@ -59,6 +112,9 @@ const mapDispatchToProps = {
     updateConfigFailure: Actions.updateConfigFailure,
     updateConfigSuccess: Actions.updateConfigSuccess,
     getConfigFailure: Actions.getConfigFailure,
+    cleanFinishedContainers: Actions.cleanFinishedContainers,
+    setCleanFinishedContainersFailure: Actions.cleanFinishedContainersFailure
+
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(getConfiguration);
diff --git a/ui/src/features/get-configuration.scss b/ui/src/features/get-configuration.scss
@@ -1,6 +1,31 @@
 
 
 .card-wrapper {
-  width:50%;
-  margin-bottom: 80px
-}
+  margin-bottom: 80px;
+}
+
+.action-style {
+  color:#557eff;
+  cursor: pointer;
+  height:46px;
+  display:flex;
+  align-items: center;
+}
+
+.disabled-button {
+  color: #b4c9d3;
+  cursor: not-allowed;
+}
+
+
+.icon {
+  font-size:20px;
+}
+
+.configuration-item-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1
+}
diff --git a/ui/src/features/mainMenu.js b/ui/src/features/mainMenu.js
@@ -31,9 +31,9 @@ module.exports = [
     },
     {
         key: 3,
-        primaryText: 'Configuration',
-        navigateTo: 'configuration',
-        icon: faWrench
+        primaryText: 'Settings',
+        navigateTo: 'settings',
+        icon: faWrench,
     },
     {
         key: 4,
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,6 @@ @@
     }
     .icon {
       font-size:20px;
     }
@@ Expand Down @@