forked from community/device-mgt-core
Add UI improvements to APPM UI See merge request entgra/carbon-device-mgt!178feature/appm-store/pbac
Dharmakeerthi Lasantha
5 years ago
commit
b82717790d
@ -0,0 +1,96 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Modal, Button, Tag, Collapse, List,Typography} from 'antd';
|
||||||
|
import pSBC from "shade-blend-color";
|
||||||
|
import config from "../../../../../../public/conf/config.json";
|
||||||
|
|
||||||
|
const {Text} = Typography;
|
||||||
|
const lifeCycleConfig = config.lifecycle;
|
||||||
|
|
||||||
|
class LifeCycleDetailsModal extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {visible: false};
|
||||||
|
}
|
||||||
|
|
||||||
|
showModal = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleCancel = e => {
|
||||||
|
console.log(e);
|
||||||
|
this.setState({
|
||||||
|
visible: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {lifecycle} = this.props;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
icon="question-circle"
|
||||||
|
onClick={this.showModal}
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
</Button>
|
||||||
|
<Modal
|
||||||
|
title="Lifecycle"
|
||||||
|
visible={this.state.visible}
|
||||||
|
footer = {null}
|
||||||
|
onCancel={this.handleCancel}
|
||||||
|
>
|
||||||
|
|
||||||
|
<List
|
||||||
|
itemLayout="horizontal"
|
||||||
|
dataSource={Object.keys(lifecycle)}
|
||||||
|
renderItem={lifecycleState => {
|
||||||
|
let text = "";
|
||||||
|
let footerText = "";
|
||||||
|
let nextProceedingStates = [];
|
||||||
|
|
||||||
|
if (lifeCycleConfig.hasOwnProperty(lifecycleState)) {
|
||||||
|
text = lifeCycleConfig[lifecycleState].text;
|
||||||
|
}
|
||||||
|
if (lifecycle[lifecycleState].hasOwnProperty("proceedingStates")) {
|
||||||
|
nextProceedingStates = lifecycle[lifecycleState].proceedingStates;
|
||||||
|
footerText = "You can only proceed to one of the following states:"
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<List.Item>
|
||||||
|
<List.Item.Meta
|
||||||
|
title={lifecycleState}
|
||||||
|
/>
|
||||||
|
{text}
|
||||||
|
<br/>
|
||||||
|
<Text type="secondary">{footerText}</Text>
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
nextProceedingStates.map(lifecycleState => {
|
||||||
|
return (
|
||||||
|
<Tag
|
||||||
|
key={lifecycleState}
|
||||||
|
style={{margin: 5}}
|
||||||
|
color={pSBC(0.30, config.theme.primaryColor)}
|
||||||
|
>
|
||||||
|
{lifecycleState}
|
||||||
|
</Tag>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</List.Item>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LifeCycleDetailsModal;
|
||||||
@ -1,136 +0,0 @@
|
|||||||
import axios from "axios";
|
|
||||||
import ActionTypes from "../constants/ActionTypes";
|
|
||||||
import config from "../../../public/conf/config.json";
|
|
||||||
import {message} from "antd";
|
|
||||||
|
|
||||||
export const getApps = () => dispatch => {
|
|
||||||
|
|
||||||
const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";
|
|
||||||
|
|
||||||
return axios.post(
|
|
||||||
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher,
|
|
||||||
request
|
|
||||||
).then(res => {
|
|
||||||
if (res.status === 200) {
|
|
||||||
let apps = [];
|
|
||||||
|
|
||||||
if (res.data.data.hasOwnProperty("applications")) {
|
|
||||||
apps = res.data.data.applications;
|
|
||||||
}
|
|
||||||
dispatch({type: ActionTypes.GET_APPS, payload: apps});
|
|
||||||
}
|
|
||||||
|
|
||||||
}).catch(function (error) {
|
|
||||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
|
||||||
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
|
|
||||||
} else {
|
|
||||||
message.error('Something went wrong when trying to load applications... :(');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getRelease = (uuid) => dispatch => {
|
|
||||||
|
|
||||||
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/release/" + uuid;
|
|
||||||
|
|
||||||
return axios.post(
|
|
||||||
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
|
|
||||||
).then(res => {
|
|
||||||
if (res.status === 200) {
|
|
||||||
let release = res.data.data;
|
|
||||||
dispatch({type: ActionTypes.GET_RELEASE, payload: release});
|
|
||||||
}
|
|
||||||
|
|
||||||
}).catch(function (error) {
|
|
||||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
|
||||||
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
|
|
||||||
} else {
|
|
||||||
message.error('Something went wrong... :(');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
export const openReleasesModal = (app) => dispatch => {
|
|
||||||
dispatch({
|
|
||||||
type: ActionTypes.OPEN_RELEASES_MODAL,
|
|
||||||
payload: {
|
|
||||||
app: app
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const openLifecycleModal = (nextState) => dispatch => {
|
|
||||||
dispatch({
|
|
||||||
type: ActionTypes.OPEN_LIFECYCLE_MODAL,
|
|
||||||
payload: {
|
|
||||||
nextState: nextState
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const closeLifecycleModal = () => dispatch => {
|
|
||||||
dispatch({
|
|
||||||
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getLifecycle = () => dispatch => {
|
|
||||||
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/lifecycle-config";
|
|
||||||
|
|
||||||
return axios.post(
|
|
||||||
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
|
|
||||||
).then(res => {
|
|
||||||
if (res.status === 200) {
|
|
||||||
let lifecycle = res.data.data;
|
|
||||||
dispatch({type: ActionTypes.GET_LIFECYCLE, payload: lifecycle});
|
|
||||||
}
|
|
||||||
|
|
||||||
}).catch(function (error) {
|
|
||||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
|
||||||
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
|
|
||||||
} else {
|
|
||||||
message.error('Something went wrong... :(');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
|
|
||||||
|
|
||||||
const payload = {
|
|
||||||
action: nextState,
|
|
||||||
reason: reason
|
|
||||||
};
|
|
||||||
|
|
||||||
const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-publisher/v1.0/applications/life-cycle/" + uuid;
|
|
||||||
|
|
||||||
|
|
||||||
return axios.post(
|
|
||||||
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
|
|
||||||
).then(res => {
|
|
||||||
if (res.status === 201) {
|
|
||||||
let release = res.data.data;
|
|
||||||
dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
|
|
||||||
}else {
|
|
||||||
alert("error");
|
|
||||||
dispatch({
|
|
||||||
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}).catch(function (error) {
|
|
||||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
|
||||||
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
|
|
||||||
} else if (error.response.status === 500) {
|
|
||||||
alert("error");
|
|
||||||
dispatch({
|
|
||||||
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import keyMirror from 'keymirror';
|
|
||||||
|
|
||||||
const ActionTypes = keyMirror({
|
|
||||||
LOGIN: null,
|
|
||||||
GET_APPS: null,
|
|
||||||
OPEN_RELEASES_MODAL: null,
|
|
||||||
CLOSE_RELEASES_MODAL: null,
|
|
||||||
GET_RELEASE: null,
|
|
||||||
GET_LIFECYCLE: null,
|
|
||||||
OPEN_LIFECYCLE_MODAL: null,
|
|
||||||
CLOSE_LIFECYCLE_MODAL: null,
|
|
||||||
UPDATE_LIFECYCLE_STATE: null,
|
|
||||||
});
|
|
||||||
|
|
||||||
export default ActionTypes;
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
import ActionTypes from "../constants/ActionTypes";
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
apps: [],
|
|
||||||
releaseView: {
|
|
||||||
visible: false,
|
|
||||||
app: null
|
|
||||||
},
|
|
||||||
release: null,
|
|
||||||
lifecycle: null,
|
|
||||||
lifecycleModal:{
|
|
||||||
visible: false,
|
|
||||||
nextState: null
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function rootReducer(state = initialState, action) {
|
|
||||||
if (action.type === ActionTypes.GET_APPS) {
|
|
||||||
return Object.assign({}, state, {
|
|
||||||
apps: action.payload
|
|
||||||
});
|
|
||||||
} else if (action.type === ActionTypes.OPEN_RELEASES_MODAL) {
|
|
||||||
return Object.assign({}, state, {
|
|
||||||
releaseView: {
|
|
||||||
visible: true,
|
|
||||||
app: action.payload.app
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else if (action.type === ActionTypes.GET_RELEASE) {
|
|
||||||
return Object.assign({}, state, {
|
|
||||||
release: action.payload
|
|
||||||
});
|
|
||||||
} else if (action.type === ActionTypes.GET_LIFECYCLE) {
|
|
||||||
return Object.assign({}, state, {
|
|
||||||
lifecycle: action.payload
|
|
||||||
});
|
|
||||||
}else if (action.type === ActionTypes.OPEN_LIFECYCLE_MODAL) {
|
|
||||||
return Object.assign({}, state, {
|
|
||||||
lifecycleModal: {
|
|
||||||
visible: true,
|
|
||||||
nextState: action.payload.nextState
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}else if (action.type === ActionTypes.CLOSE_LIFECYCLE_MODAL) {
|
|
||||||
return Object.assign({}, state, {
|
|
||||||
lifecycleModal: {
|
|
||||||
visible: false,
|
|
||||||
nextState: null
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}else if (action.type === ActionTypes.UPDATE_LIFECYCLE_STATE) {
|
|
||||||
return Object.assign({}, state, {
|
|
||||||
lifecycleModal: {
|
|
||||||
visible: false,
|
|
||||||
nextState: null,
|
|
||||||
},
|
|
||||||
release: action.payload
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default rootReducer;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { createStore, applyMiddleware } from "redux";
|
|
||||||
import rootReducer from "../reducers/index";
|
|
||||||
import thunk from "redux-thunk";
|
|
||||||
const store = createStore(rootReducer, applyMiddleware(thunk));
|
|
||||||
export default store;
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import * as dagre from "dagre";
|
|
||||||
import * as _ from "lodash";
|
|
||||||
|
|
||||||
const size = {
|
|
||||||
width: 60,
|
|
||||||
height: 60
|
|
||||||
};
|
|
||||||
|
|
||||||
export function distributeElements(model) {
|
|
||||||
let clonedModel = _.cloneDeep(model);
|
|
||||||
let nodes = distributeGraph(clonedModel);
|
|
||||||
nodes.forEach(node => {
|
|
||||||
let modelNode = clonedModel.nodes.find(item => item.id === node.id);
|
|
||||||
modelNode.x = node.x - node.width / 2;
|
|
||||||
modelNode.y = node.y - node.height / 2;
|
|
||||||
});
|
|
||||||
return clonedModel;
|
|
||||||
}
|
|
||||||
|
|
||||||
function distributeGraph(model) {
|
|
||||||
let nodes = mapElements(model);
|
|
||||||
let edges = mapEdges(model);
|
|
||||||
let graph = new dagre.graphlib.Graph();
|
|
||||||
graph.setGraph({});
|
|
||||||
graph.setDefaultEdgeLabel(() => ({}));
|
|
||||||
//add elements to dagre graph
|
|
||||||
nodes.forEach(node => {
|
|
||||||
graph.setNode(node.id, node.metadata);
|
|
||||||
});
|
|
||||||
edges.forEach(edge => {
|
|
||||||
if (edge.from && edge.to) {
|
|
||||||
graph.setEdge(edge.from, edge.to);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//auto-distribute
|
|
||||||
dagre.layout(graph);
|
|
||||||
return graph.nodes().map(node => graph.node(node));
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapElements(model) {
|
|
||||||
// dagre compatible format
|
|
||||||
return model.nodes.map(node => ({ id: node.id, metadata: { ...size, id: node.id } }));
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapEdges(model) {
|
|
||||||
// returns links which connects nodes
|
|
||||||
// we check are there both from and to nodes in the model. Sometimes links can be detached
|
|
||||||
return model.links
|
|
||||||
.map(link => ({
|
|
||||||
from: link.source,
|
|
||||||
to: link.target
|
|
||||||
}))
|
|
||||||
.filter(
|
|
||||||
item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue