Merge branch 'pub-issues' into 'master'

Add application Life cycle history UI

Closes product-iots#541

See merge request entgra/carbon-device-mgt!566
merge-requests/563/merge
Dharmakeerthi Lasantha 4 years ago
commit 4046bd715c

@ -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,
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"

Loading…
Cancel
Save