From b653474f137905252de7dcbd0974ddf74072c914 Mon Sep 17 00:00:00 2001 From: Manor Date: Sun, 29 Dec 2019 23:01:26 +0200 Subject: [PATCH] feat(clean containers ui): clean containers ui --- ui/src/App/index.js | 2 +- ui/src/features/configurationColumn.scss | 1 - ui/src/features/get-configuration.js | 76 +++++- ui/src/features/get-configuration.scss | 31 ++- ui/src/features/mainMenu.js | 6 +- ui/src/features/redux/action.js | 236 ++++++++++++------ .../features/redux/actions/configActions.js | 49 ++-- ui/src/features/redux/apis/configApi.js | 8 + .../features/redux/reducers/configReducer.js | 7 +- ui/src/features/redux/saga/configSagas.js | 14 +- .../redux/selectors/configSelector.js | 2 + ui/src/features/redux/types/configTypes.js | 6 +- 12 files changed, 321 insertions(+), 117 deletions(-) diff --git a/ui/src/App/index.js b/ui/src/App/index.js index 418428070..27ad7e55d 100644 --- a/ui/src/App/index.js +++ b/ui/src/App/index.js @@ -43,7 +43,7 @@ class App extends React.Component { ( )} /> - ( + ( )} /> diff --git a/ui/src/features/configurationColumn.scss b/ui/src/features/configurationColumn.scss index c33f41354..511c9cfd6 100644 --- 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 index b343b9688..b18c4e480 100644 --- a/ui/src/features/get-configuration.js +++ b/ui/src/features/get-configuration.js @@ -4,7 +4,9 @@ import { config, errorOnGetConfig, processingGetConfig, - processingUpdateConfig + processingUpdateConfig, + cleanFinishedContainersSuccess, + cleanFinishedContainersFailure } from './redux/selectors/configSelector'; import * as Actions from './redux/action'; import Loader from '../features/components/Loader'; @@ -12,7 +14,29 @@ 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 ( +
+

{title}

+ + {children} + +
+ + ) +}; + 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 ( - -
+ +
{errorOnGetConfig ? errorMsgGetConfig : null} {processingGetConfig && } {(config && !errorOnGetConfig && !processingGetConfig) && - - - } +
+ + + + +
+ + +
+ +
+ }
- + {cleanFinishedContainersSuccess && } + + {currentError&& + { + this.props.setCleanFinishedContainersFailure(undefined); + this.props.getConfigFailure(undefined); + }} showMessage={currentError.message}/>} + ) } } @@ -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 index 75d0b21cd..e044296bd 100644 --- 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 -} \ No newline at end of file + 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 index 47b6410a2..b3f0b5f4b 100644 --- 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, diff --git a/ui/src/features/redux/action.js b/ui/src/features/redux/action.js index 796490bb2..8337d3ff2 100644 --- a/ui/src/features/redux/action.js +++ b/ui/src/features/redux/action.js @@ -1,83 +1,163 @@ -import { getTest,initCreateTestForm,editTest,cleanAllErrors,clearDeleteTestSuccess, deleteTest, deleteTestFailure, deleteTestSuccess, clearErrorOnDeleteTest, getTests, getTestsSuccess, getTestFaliure, chooseTest, processingGetTests, clearSelectedTest, clearErrorOnGetTests, clearTests, getTestsFaliure, getTestSuccess,createTest } from './actions/testsActions'; -import { clearStopJobSuccess, clearDeleteJobSuccess, deleteJob, deleteJobFailure, deleteJobSuccess, clearErrorOnDeleteJob, clearErrorOnStopJob, stopRunningJob, stopRunningJobSuccess, stopRunningJobFailure, createJobSuccess, createJobFailure, processingCreateJob, clearErrorOnCreateJob, createJob, editJob, getJobsFaliure, processingGetJobs, getJobsSuccess, getJobs, getJob, clearErrorOnGetJobs, clearSelectedJob, getJobFaliure, getJobSuccess,editJobSuccess } from './actions/jobsActions'; -import { getLastReports, getReport, clearErrorOnGetReports, clearReports, clearSelectedReport, getReportFaliure, getReports, getReportsFaliure, getReportsSuccess, getReportSuccess, processingGetReports } from './actions/reportsActions'; -import { updateConfig, clearUpdateConfigError, processGetConfig, processUpdateConfig, getConfigDataMapSuccess, getConfigSuccess, getConfigDataMap, getConfigFailure, getConfig, updateConfigFailure, updateConfigSuccess, deleteConfigKey,cleanUpdateConfigSuccess } from './actions/configActions'; +import { + getTest, + initCreateTestForm, + editTest, + cleanAllErrors, + clearDeleteTestSuccess, + deleteTest, + deleteTestFailure, + deleteTestSuccess, + clearErrorOnDeleteTest, + getTests, + getTestsSuccess, + getTestFaliure, + chooseTest, + processingGetTests, + clearSelectedTest, + clearErrorOnGetTests, + clearTests, + getTestsFaliure, + getTestSuccess, + createTest +} from './actions/testsActions'; +import { + clearStopJobSuccess, + clearDeleteJobSuccess, + deleteJob, + deleteJobFailure, + deleteJobSuccess, + clearErrorOnDeleteJob, + clearErrorOnStopJob, + stopRunningJob, + stopRunningJobSuccess, + stopRunningJobFailure, + createJobSuccess, + createJobFailure, + processingCreateJob, + clearErrorOnCreateJob, + createJob, + editJob, + getJobsFaliure, + processingGetJobs, + getJobsSuccess, + getJobs, + getJob, + clearErrorOnGetJobs, + clearSelectedJob, + getJobFaliure, + getJobSuccess, + editJobSuccess +} from './actions/jobsActions'; +import { + getLastReports, + getReport, + clearErrorOnGetReports, + clearReports, + clearSelectedReport, + getReportFaliure, + getReports, + getReportsFaliure, + getReportsSuccess, + getReportSuccess, + processingGetReports +} from './actions/reportsActions'; +import { + updateConfig, + clearUpdateConfigError, + processGetConfig, + processUpdateConfig, + getConfigDataMapSuccess, + getConfigSuccess, + getConfigDataMap, + getConfigFailure, + getConfig, + updateConfigFailure, + updateConfigSuccess, + deleteConfigKey, + cleanUpdateConfigSuccess, + cleanFinishedContainers, + cleanFinishedContainersSuccess, + cleanFinishedContainersFailure +} from './actions/configActions'; export { - // tests// - getTest, - initCreateTestForm, - editTest, - cleanAllErrors, - getTests, - getTestsSuccess, - getTestFaliure, - chooseTest, - processingGetTests, - clearSelectedTest, - clearErrorOnGetTests, - clearTests, - getTestsFaliure, - getTestSuccess, - deleteTest, - deleteTestSuccess, - deleteTestFailure, - clearErrorOnDeleteTest, - clearDeleteTestSuccess, - createTest, - // jobs// - getJobsFaliure, - processingGetJobs, - getJobsSuccess, - getJobs, - getJob, - clearErrorOnGetJobs, - clearSelectedJob, - getJobFaliure, - getJobSuccess, - createJobFailure, - processingCreateJob, - clearErrorOnCreateJob, - createJob, - editJob, - editJobSuccess, - createJobSuccess, - stopRunningJob, - stopRunningJobSuccess, - stopRunningJobFailure, - clearErrorOnStopJob, - deleteJob, - deleteJobSuccess, - deleteJobFailure, - clearErrorOnDeleteJob, - clearDeleteJobSuccess, - clearStopJobSuccess, + // tests// + getTest, + initCreateTestForm, + editTest, + cleanAllErrors, + getTests, + getTestsSuccess, + getTestFaliure, + chooseTest, + processingGetTests, + clearSelectedTest, + clearErrorOnGetTests, + clearTests, + getTestsFaliure, + getTestSuccess, + deleteTest, + deleteTestSuccess, + deleteTestFailure, + clearErrorOnDeleteTest, + clearDeleteTestSuccess, + createTest, + // jobs// + getJobsFaliure, + processingGetJobs, + getJobsSuccess, + getJobs, + getJob, + clearErrorOnGetJobs, + clearSelectedJob, + getJobFaliure, + getJobSuccess, + createJobFailure, + processingCreateJob, + clearErrorOnCreateJob, + createJob, + editJob, + editJobSuccess, + createJobSuccess, + stopRunningJob, + stopRunningJobSuccess, + stopRunningJobFailure, + clearErrorOnStopJob, + deleteJob, + deleteJobSuccess, + deleteJobFailure, + clearErrorOnDeleteJob, + clearDeleteJobSuccess, + clearStopJobSuccess, - // reports// - getReport, - clearErrorOnGetReports, - clearReports, - clearSelectedReport, - getReportFaliure, - getReports, - getReportsFaliure, - getReportsSuccess, - getReportSuccess, - processingGetReports, - getLastReports, + // reports// + getReport, + clearErrorOnGetReports, + clearReports, + clearSelectedReport, + getReportFaliure, + getReports, + getReportsFaliure, + getReportsSuccess, + getReportSuccess, + processingGetReports, + getLastReports, - //config - getConfigDataMapSuccess, - getConfigSuccess, - getConfigDataMap, - getConfigFailure, - getConfig, - updateConfigFailure, - updateConfigSuccess, - updateConfig, - processGetConfig, - processUpdateConfig, - clearUpdateConfigError, - deleteConfigKey, - cleanUpdateConfigSuccess + //config + getConfigDataMapSuccess, + getConfigSuccess, + getConfigDataMap, + getConfigFailure, + getConfig, + updateConfigFailure, + updateConfigSuccess, + updateConfig, + processGetConfig, + processUpdateConfig, + clearUpdateConfigError, + deleteConfigKey, + cleanUpdateConfigSuccess, + cleanFinishedContainers, + cleanFinishedContainersSuccess, + cleanFinishedContainersFailure }; diff --git a/ui/src/features/redux/actions/configActions.js b/ui/src/features/redux/actions/configActions.js index eea5c8697..603754aa0 100644 --- a/ui/src/features/redux/actions/configActions.js +++ b/ui/src/features/redux/actions/configActions.js @@ -1,64 +1,79 @@ import * as Types from '../types/configTypes'; export const getConfig = () => ( - { type: Types.GET_CONFIG } + {type: Types.GET_CONFIG} ); export const getConfigSuccess = (config) => ( - { type: Types.GET_CONFIG_SUCCESS, config } + {type: Types.GET_CONFIG_SUCCESS, config} ); export const getConfigDataMap = () => ( - { type: Types.GET_CONFIG_DATA_MAP } + {type: Types.GET_CONFIG_DATA_MAP} ); export const getConfigDataMapSuccess = (config_data_map) => ( - { type: Types.GET_CONFIG_DATA_MAP_SUCCESS, config_data_map } + {type: Types.GET_CONFIG_DATA_MAP_SUCCESS, config_data_map} ); export const getConfigFailure = (error) => ( - { type: Types.GET_CONFIG_FAILURE, error } + {type: Types.GET_CONFIG_FAILURE, error} ); export const updateConfigFailure = (error) => ( - { type: Types.UPDATE_CONFIG_FAILURE, error } + {type: Types.UPDATE_CONFIG_FAILURE, error} ); export const updateConfigSuccess = () => ( - { type: Types.UPDATE_CONFIG_SUCCESS } + {type: Types.UPDATE_CONFIG_SUCCESS} ); export const cleanUpdateConfigSuccess = () => ( - { type: Types.CLEAN_UPDATE_CONFIG_SUCCESS } + {type: Types.CLEAN_UPDATE_CONFIG_SUCCESS} ); export const processGetConfig = (state) => ( - { type: Types.PROCESSING_GET_CONFIG, state } + {type: Types.PROCESSING_GET_CONFIG, state} ); export const processUpdateConfig = (state) => ( - { type: Types.PROCESSING_UPDATE_CONFIG, state } + {type: Types.PROCESSING_UPDATE_CONFIG, state} ); export const processGetConfigDataMap = (state) => ( - { type: Types.PROCESSING_GET_CONFIG_DATA_MAP, state } + {type: Types.PROCESSING_GET_CONFIG_DATA_MAP, state} ); export const updateConfig = (body) => ( - { type: Types.UPDATE_CONFIG, body } + {type: Types.UPDATE_CONFIG, body} ); export const clearUpdateConfigError = (state) => ( - { type: Types.CLEAR_ERROR_ON_UPDATE_CONFIG, state } + {type: Types.CLEAR_ERROR_ON_UPDATE_CONFIG, state} ); export const deleteConfigKey = (key) => ( - { type: Types.DELETE_CONFIG_KEY, key } + {type: Types.DELETE_CONFIG_KEY, key} ); export const processDeleteConfigKey = (state) => ( - { type: Types.PROCESSING_DELETE_CONFIG_KEY, state } + {type: Types.PROCESSING_DELETE_CONFIG_KEY, state} ); export const deleteConfigKeyFailure = (error) => ( - { type: Types.DELETE_CONFIG_FAILURE, error } -); \ No newline at end of file + {type: Types.DELETE_CONFIG_FAILURE, error} +); + +export const cleanFinishedContainers = () => ( + {type: Types.CLEAN_FINISHED_CONTAINERS} +); + + +export const cleanFinishedContainersSuccess = (result) => ( + {type: Types.CLEAN_FINISHED_CONTAINERS_SUCCESS, result} +); + +export const cleanFinishedContainersFailure = (error) => ( + {type: Types.CLEAN_FINISHED_CONTAINERS_FAILURE, error} +); + + diff --git a/ui/src/features/redux/apis/configApi.js b/ui/src/features/redux/apis/configApi.js index b09d3d7ad..ccd359340 100644 --- a/ui/src/features/redux/apis/configApi.js +++ b/ui/src/features/redux/apis/configApi.js @@ -23,3 +23,11 @@ export const deleteFrameworkConfigKey = (configKey) => { }); }; + +export const cleanFinishedContainersApi = () => { + return axios.delete(`${env.PREDATOR_URL}/jobs/runs/containers`, { + headers: {}, + responseType: 'json' + }); +}; + diff --git a/ui/src/features/redux/reducers/configReducer.js b/ui/src/features/redux/reducers/configReducer.js index 8f9463fbc..fcacef7a4 100644 --- a/ui/src/features/redux/reducers/configReducer.js +++ b/ui/src/features/redux/reducers/configReducer.js @@ -7,7 +7,8 @@ const initialState = Immutable.Map({ processing_update_config: false, processing_delete_config_key: false, error_get_config: undefined, - error_update_config: undefined + error_update_config: undefined, + clean_finished_containers_success: undefined }); export default function reduce (state = initialState, action = {}) { @@ -30,6 +31,10 @@ export default function reduce (state = initialState, action = {}) { return state.set('update_config_success', true); case Types.CLEAN_UPDATE_CONFIG_SUCCESS: return state.set('update_config_success', undefined); + case Types.CLEAN_FINISHED_CONTAINERS_SUCCESS: + return state.set('clean_finished_containers_success', action.result); + case Types.CLEAN_FINISHED_CONTAINERS_FAILURE: + return state.set('clean_finished_containers_failure', action.error); default: return state; } diff --git a/ui/src/features/redux/saga/configSagas.js b/ui/src/features/redux/saga/configSagas.js index 0e0c01a5c..a5457ae3e 100644 --- a/ui/src/features/redux/saga/configSagas.js +++ b/ui/src/features/redux/saga/configSagas.js @@ -1,7 +1,7 @@ import {put, takeLatest, call} from 'redux-saga/effects' import * as Actions from '../actions/configActions' import * as Types from '../types/configTypes' -import {getFrameworkConfig, updateFrameworkConfig, deleteFrameworkConfigKey} from '../apis/configApi' +import {getFrameworkConfig, updateFrameworkConfig, deleteFrameworkConfigKey,cleanFinishedContainersApi} from '../apis/configApi' import _ from 'lodash'; export function* getConfig() { @@ -15,6 +15,15 @@ export function* getConfig() { yield put(Actions.processGetConfig(false)); } +export function* cleanFinishedContainers() { + try { + const config = yield call(cleanFinishedContainersApi); + yield put(Actions.cleanFinishedContainersSuccess(config.data)); + } catch (e) { + yield put(Actions.cleanFinishedContainersFailure(e)) + } +} + export function* editConfig(action) { try { yield put(Actions.processUpdateConfig(true)); @@ -57,4 +66,5 @@ export function* configRegister() { yield takeLatest(Types.GET_CONFIG, getConfig); yield takeLatest(Types.UPDATE_CONFIG, editConfig); yield takeLatest(Types.DELETE_CONFIG_KEY, deleteConfigKey); -} \ No newline at end of file + yield takeLatest(Types.CLEAN_FINISHED_CONTAINERS, cleanFinishedContainers); +} diff --git a/ui/src/features/redux/selectors/configSelector.js b/ui/src/features/redux/selectors/configSelector.js index 285e9b0ae..f5e8b6201 100644 --- a/ui/src/features/redux/selectors/configSelector.js +++ b/ui/src/features/redux/selectors/configSelector.js @@ -5,3 +5,5 @@ export const processingGetConfig = (state) => state.ConfigReducer.get('processin export const processingUpdateConfig = (state) => state.ConfigReducer.get('processing_update_config'); export const processGetConfigDataMap = (state) => state.ConfigReducer.get('processing_get_config_data_map'); export const update_config_success = (state) => state.ConfigReducer.get('update_config_success'); +export const cleanFinishedContainersSuccess = (state) => state.ConfigReducer.get('clean_finished_containers_success'); +export const cleanFinishedContainersFailure = (state) => state.ConfigReducer.get('clean_finished_containers_failure'); diff --git a/ui/src/features/redux/types/configTypes.js b/ui/src/features/redux/types/configTypes.js index eebbea507..c5a5dbf64 100644 --- a/ui/src/features/redux/types/configTypes.js +++ b/ui/src/features/redux/types/configTypes.js @@ -20,4 +20,8 @@ export const CLEAN_ALL_ERRORS = 'CLEAN_ALL_ERRORS'; export const DELETE_CONFIG_KEY = 'DELETE_CONFIG_KEY'; export const PROCESSING_DELETE_CONFIG_KEY = 'PROCESSING_DELETE_CONFIG_KEY'; -export const DELETE_CONFIG_FAILURE = 'DELETE_CONFIG_FAILURE'; \ No newline at end of file +export const DELETE_CONFIG_FAILURE = 'DELETE_CONFIG_FAILURE'; + +export const CLEAN_FINISHED_CONTAINERS = 'CLEAN_FINISHED_CONTAINERS'; +export const CLEAN_FINISHED_CONTAINERS_SUCCESS = 'CLEAN_FINISHED_CONTAINERS_SUCCESS'; +export const CLEAN_FINISHED_CONTAINERS_FAILURE = 'CLEAN_FINISHED_CONTAINERS_FAILURE';