Add application Life cycle history UI

revert-70ac1926
Shamalka Navod 4 years ago committed by Dharmakeerthi Lasantha
parent a1106bec84
commit fc3e1faeb6

@ -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);

@ -27,6 +27,7 @@ import {
Steps, Steps,
Icon, Icon,
Alert, Alert,
Tabs,
} from 'antd'; } from 'antd';
import axios from 'axios'; import axios from 'axios';
import ReactQuill from 'react-quill'; import ReactQuill from 'react-quill';
@ -34,8 +35,10 @@ import 'react-quill/dist/quill.snow.css';
import './styles.css'; import './styles.css';
import { withConfigContext } from '../../../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../../../components/ConfigContext';
import { handleApiError } from '../../../../../../../../services/utils/errorHandler'; import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
import LifeCycleHistory from './components/LifeCycleHistory';
const { Text, Title, Paragraph } = Typography; const { Text, Title, Paragraph } = Typography;
const { TabPane } = Tabs;
const modules = { const modules = {
toolbar: [ toolbar: [
@ -73,6 +76,7 @@ class LifeCycle extends React.Component {
isConfirmButtonLoading: false, isConfirmButtonLoading: false,
current: 0, current: 0,
lifecycleSteps: [], lifecycleSteps: [],
lifeCycleStates: [],
}; };
} }
@ -86,6 +90,7 @@ class LifeCycle extends React.Component {
current: lifeCycleConfig[this.props.currentStatus].step, current: lifeCycleConfig[this.props.currentStatus].step,
lifecycleSteps, lifecycleSteps,
}); });
this.getLifeCycleHistory();
} }
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
@ -154,6 +159,7 @@ class LifeCycle extends React.Component {
message: 'Done!', message: 'Done!',
description: 'Lifecycle state updated successfully!', description: 'Lifecycle state updated successfully!',
}); });
this.getLifeCycleHistory();
} }
}) })
.catch(error => { .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 => { onChange = current => {
this.setState({ current }); this.setState({ current });
}; };
@ -174,6 +205,7 @@ class LifeCycle extends React.Component {
selectedStatus, selectedStatus,
current, current,
lifecycleSteps, lifecycleSteps,
lifeCycleStates,
} = this.state; } = this.state;
const { lifecycle } = this.props; const { lifecycle } = this.props;
let proceedingStates = []; let proceedingStates = [];
@ -195,7 +227,8 @@ class LifeCycle extends React.Component {
directly publishing it to your app store. You can easily transition directly publishing it to your app store. You can easily transition
from one state to another. <br /> from one state to another. <br />
</Paragraph> </Paragraph>
<Divider /> <Tabs defaultActiveKey="1" type="card">
<TabPane tab="Change Lifecycle" key="1">
<div> <div>
<Steps <Steps
direction={'vertical'} direction={'vertical'}
@ -218,7 +251,9 @@ class LifeCycle extends React.Component {
<Button <Button
size={'small'} size={'small'}
style={{ marginRight: 3 }} style={{ marginRight: 3 }}
onClick={() => this.showReasonModal(lifecycleState)} onClick={() =>
this.showReasonModal(lifecycleState)
}
key={lifecycleState} key={lifecycleState}
type={'primary'} type={'primary'}
> >
@ -233,6 +268,11 @@ class LifeCycle extends React.Component {
))} ))}
</Steps> </Steps>
</div> </div>
</TabPane>
<TabPane tab="Lifecycle History" key="2">
<LifeCycleHistory lifeCycleStates={lifeCycleStates} />
</TabPane>
</Tabs>
<Divider /> <Divider />
<Modal <Modal
title="Confirm changing lifecycle state" title="Confirm changing lifecycle state"

Loading…
Cancel
Save