From fc3e1faeb6805bf4f2f0264bcb6841760232e229 Mon Sep 17 00:00:00 2001 From: Shamalka Navod Date: Fri, 5 Jun 2020 05:07:37 +0000 Subject: [PATCH] Add application Life cycle history UI --- .../components/LifeCycleHistory/index.js | 62 ++++++++++ .../Release/components/LifeCycle/index.js | 116 ++++++++++++------ 2 files changed, 140 insertions(+), 38 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/LifeCycleHistory/index.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/LifeCycleHistory/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/LifeCycleHistory/index.js new file mode 100644 index 0000000000..158a0700de --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/LifeCycleHistory/index.js @@ -0,0 +1,62 @@ +/* + * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved. + * + * Entgra (pvt) Ltd. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { Tag, Timeline, Card } from 'antd'; +import { withConfigContext } from '../../../../../../../../../../components/ConfigContext'; + +class LifeCycleHistory extends React.Component { + constructor(props) { + super(props); + } + + render() { + const { lifeCycleStates } = this.props; + return ( +
+ + {lifeCycleStates.map( + (state, index) => + state && ( + + +
+ {state.previousState === state.currentState ? ( + 'Application Created' + ) : ( +
+ State changed from
+
+ {state.previousState} to{' '} + {state.currentState} +
+
+ )} + {state.updatedAt} +
+ + + ), + )} + +
+ ); + } +} + +export default withConfigContext(LifeCycleHistory); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js index f235ef5cfd..b5c3b3e035 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js @@ -27,6 +27,7 @@ import { Steps, Icon, Alert, + Tabs, } from 'antd'; import axios from 'axios'; import ReactQuill from 'react-quill'; @@ -34,8 +35,10 @@ import 'react-quill/dist/quill.snow.css'; import './styles.css'; import { withConfigContext } from '../../../../../../../../components/ConfigContext'; import { handleApiError } from '../../../../../../../../services/utils/errorHandler'; +import LifeCycleHistory from './components/LifeCycleHistory'; const { Text, Title, Paragraph } = Typography; +const { TabPane } = Tabs; const modules = { toolbar: [ @@ -73,6 +76,7 @@ class LifeCycle extends React.Component { isConfirmButtonLoading: false, current: 0, lifecycleSteps: [], + lifeCycleStates: [], }; } @@ -86,6 +90,7 @@ class LifeCycle extends React.Component { current: lifeCycleConfig[this.props.currentStatus].step, lifecycleSteps, }); + this.getLifeCycleHistory(); } componentDidUpdate(prevProps, prevState, snapshot) { @@ -154,6 +159,7 @@ class LifeCycle extends React.Component { message: 'Done!', description: 'Lifecycle state updated successfully!', }); + this.getLifeCycleHistory(); } }) .catch(error => { @@ -164,6 +170,31 @@ class LifeCycle extends React.Component { }); }; + getLifeCycleHistory = () => { + const config = this.props.context; + const { uuid } = this.props; + + axios + .get( + window.location.origin + + config.serverConfig.invoker.uri + + config.serverConfig.invoker.publisher + + '/applications/life-cycle/state-changes/' + + uuid, + ) + .then(res => { + if (res.status === 200) { + this.setState({ lifeCycleStates: JSON.parse(res.data.data) }); + } + }) + .catch(error => { + handleApiError( + error, + 'Error occurred while trying to get lifecycle history', + ); + }); + }; + onChange = current => { this.setState({ current }); }; @@ -174,6 +205,7 @@ class LifeCycle extends React.Component { selectedStatus, current, lifecycleSteps, + lifeCycleStates, } = this.state; const { lifecycle } = this.props; let proceedingStates = []; @@ -195,44 +227,52 @@ class LifeCycle extends React.Component { directly publishing it to your app store. You can easily transition from one state to another.
- -
- - {lifecycleSteps.map((step, index) => ( - } - title={step.title} - disabled={current !== step.step} - description={ - current === step.step && ( -
-

{step.text}

- {proceedingStates.map(lifecycleState => { - return ( - - ); - })} -
- ) - } - /> - ))} - -
+ + +
+ + {lifecycleSteps.map((step, index) => ( + } + title={step.title} + disabled={current !== step.step} + description={ + current === step.step && ( +
+

{step.text}

+ {proceedingStates.map(lifecycleState => { + return ( + + ); + })} +
+ ) + } + /> + ))} + +
+ + + + +