Add application Life cycle history UI

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 (
+      <div className="scroll" style={{ height: 500, overflowY: 'auto' }}>
+        <Timeline mode={'alternate'} style={{ marginTop: 10 }}>
+          {lifeCycleStates.map(
+            (state, index) =>
+              state && (
+                <Timeline.Item key={index} label={state.updatedAt}>
+                  <Card>
+                    <div style={{ textAlign: 'center' }}>
+                      {state.previousState === state.currentState ? (
+                        'Application Created'
+                      ) : (
+                        <div>
+                          State changed from <br />
+                          <div style={{ marginTop: 5 }}>
+                            <Tag color="blue">{state.previousState}</Tag> to{' '}
+                            <Tag color="blue">{state.currentState}</Tag>
+                          </div>
+                        </div>
+                      )}
+                      <Tag style={{ marginTop: 5 }}>{state.updatedAt}</Tag>
+                    </div>
+                  </Card>
+                </Timeline.Item>
+              ),
+          )}
+        </Timeline>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(LifeCycleHistory);

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,7 +227,8 @@ class LifeCycle extends React.Component {
           directly publishing it to your app store. You can easily transition
           from one state to another. <br />
         </Paragraph>
-        <Divider />
+        <Tabs defaultActiveKey="1" type="card">
+          <TabPane tab="Change Lifecycle" key="1">
             <div>
               <Steps
                 direction={'vertical'}
@@ -218,7 +251,9 @@ class LifeCycle extends React.Component {
                               <Button
                                 size={'small'}
                                 style={{ marginRight: 3 }}
-                            onClick={() => this.showReasonModal(lifecycleState)}
+                                onClick={() =>
+                                  this.showReasonModal(lifecycleState)
+                                }
                                 key={lifecycleState}
                                 type={'primary'}
                               >
@@ -233,6 +268,11 @@ class LifeCycle extends React.Component {
                 ))}
               </Steps>
             </div>
+          </TabPane>
+          <TabPane tab="Lifecycle History" key="2">
+            <LifeCycleHistory lifeCycleStates={lifeCycleStates} />
+          </TabPane>
+        </Tabs>
         <Divider />
         <Modal
           title="Confirm changing lifecycle state"