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,44 +227,52 @@ class LifeCycle extends React.Component {
           directly publishing it to your app store. You can easily transition
           from one state to another. <br />
         </Paragraph>
-        <Divider />
-        <div>
-          <Steps
-            direction={'vertical'}
-            current={current}
-            onChange={this.onChange}
-            size="small"
-          >
-            {lifecycleSteps.map((step, index) => (
-              <Step
-                key={index}
-                icon={<Icon type={step.icon} />}
-                title={step.title}
-                disabled={current !== step.step}
-                description={
-                  current === step.step && (
-                    <div style={{ width: 400 }}>
-                      <p>{step.text}</p>
-                      {proceedingStates.map(lifecycleState => {
-                        return (
-                          <Button
-                            size={'small'}
-                            style={{ marginRight: 3 }}
-                            onClick={() => this.showReasonModal(lifecycleState)}
-                            key={lifecycleState}
-                            type={'primary'}
-                          >
-                            {lifecycleState}
-                          </Button>
-                        );
-                      })}
-                    </div>
-                  )
-                }
-              />
-            ))}
-          </Steps>
-        </div>
+        <Tabs defaultActiveKey="1" type="card">
+          <TabPane tab="Change Lifecycle" key="1">
+            <div>
+              <Steps
+                direction={'vertical'}
+                current={current}
+                onChange={this.onChange}
+                size="small"
+              >
+                {lifecycleSteps.map((step, index) => (
+                  <Step
+                    key={index}
+                    icon={<Icon type={step.icon} />}
+                    title={step.title}
+                    disabled={current !== step.step}
+                    description={
+                      current === step.step && (
+                        <div style={{ width: 400 }}>
+                          <p>{step.text}</p>
+                          {proceedingStates.map(lifecycleState => {
+                            return (
+                              <Button
+                                size={'small'}
+                                style={{ marginRight: 3 }}
+                                onClick={() =>
+                                  this.showReasonModal(lifecycleState)
+                                }
+                                key={lifecycleState}
+                                type={'primary'}
+                              >
+                                {lifecycleState}
+                              </Button>
+                            );
+                          })}
+                        </div>
+                      )
+                    }
+                  />
+                ))}
+              </Steps>
+            </div>
+          </TabPane>
+          <TabPane tab="Lifecycle History" key="2">
+            <LifeCycleHistory lifeCycleStates={lifeCycleStates} />
+          </TabPane>
+        </Tabs>
         <Divider />
         <Modal
           title="Confirm changing lifecycle state"