forked from community/device-mgt-core
Add UI improvements to APPM UI See merge request entgra/carbon-device-mgt!281feature/appm-store/pbac
Dharmakeerthi Lasantha
5 years ago
commit
220aba8e90
@ -1,54 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, 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 "./CustomNode.css";
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component that renders a person's name and gender, along with icons
|
|
||||||
* representing if they have a driver license for bike and / or car.
|
|
||||||
* @param {Object} props component props to render.
|
|
||||||
*/
|
|
||||||
function CustomNode({ node }) {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="node" style={{backgroundColor: node.color}}>
|
|
||||||
<div className="name">{node.id}</div>
|
|
||||||
|
|
||||||
{/*<div className="flex-container fill-space flex-container-row">*/}
|
|
||||||
{/*<div className="fill-space">*/}
|
|
||||||
{/*<div*/}
|
|
||||||
{/*className="icon"*/}
|
|
||||||
{/*style={{ backgroundImage: `url('${isMale ? ICON_TYPES.MAN : ICON_TYPES.WOMAN}')` }}*/}
|
|
||||||
{/*/>*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
|
|
||||||
{/*<div className="icon-bar">*/}
|
|
||||||
{/*{person.hasBike && (*/}
|
|
||||||
{/*<div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.BIKE}')` }} />*/}
|
|
||||||
{/*)}*/}
|
|
||||||
{/*{person.hasCar && <div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.CAR}')` }} />}*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CustomNode;
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, 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 * as SRD from "storm-react-diagrams";
|
|
||||||
import "storm-react-diagrams/dist/style.min.css";
|
|
||||||
import "./LifeCycle.css";
|
|
||||||
import {distributeElements} from "../../../js/utils/dagre-utils.ts";
|
|
||||||
|
|
||||||
const inPortName = "IN";
|
|
||||||
const outPortName = "OUT";
|
|
||||||
|
|
||||||
class LifeCycleGraph extends React.Component {
|
|
||||||
render() {
|
|
||||||
|
|
||||||
const lifecycle = this.props.lifecycle;
|
|
||||||
const nodes = [];
|
|
||||||
const links = [];
|
|
||||||
|
|
||||||
const engine = new SRD.DiagramEngine();
|
|
||||||
engine.installDefaultFactories();
|
|
||||||
|
|
||||||
const model = new SRD.DiagramModel();
|
|
||||||
const nextStates = lifecycle[this.props.currentStatus].proceedingStates;
|
|
||||||
|
|
||||||
|
|
||||||
Object.keys(lifecycle).forEach((stateName) => {
|
|
||||||
let color = "rgb(83, 92, 104)";
|
|
||||||
if (stateName === this.props.currentStatus) {
|
|
||||||
color = "rgb(192,255,0)";
|
|
||||||
} else if (nextStates.includes(stateName)) {
|
|
||||||
color = "rgb(0,192,255)";
|
|
||||||
}
|
|
||||||
const node = createNode(stateName, color);
|
|
||||||
nodes.push(node);
|
|
||||||
lifecycle[stateName].node = node;
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.keys(lifecycle).forEach((stateName) => {
|
|
||||||
const state = lifecycle[stateName];
|
|
||||||
//todo: remove checking property
|
|
||||||
if (state.hasOwnProperty("proceedingStates")) {
|
|
||||||
|
|
||||||
state.proceedingStates.forEach((proceedingState) => {
|
|
||||||
links.push(connectNodes(state.node, lifecycle[proceedingState].node));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
nodes.forEach((node) => {
|
|
||||||
model.addNode(node);
|
|
||||||
// node.addListener({
|
|
||||||
// selectionChanged: (node, isSelected) => {
|
|
||||||
// console.log(isSelected);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
links.forEach((link) => {
|
|
||||||
model.addLink(link);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
let distributedModel = getDistributedModel(engine, model);
|
|
||||||
engine.setDiagramModel(distributedModel);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{height: 500}}>
|
|
||||||
<SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDistributedModel(engine, model) {
|
|
||||||
const serialized = model.serializeDiagram();
|
|
||||||
const distributedSerializedDiagram = distributeElements(serialized);
|
|
||||||
|
|
||||||
//deserialize the model
|
|
||||||
let deSerializedModel = new SRD.DiagramModel();
|
|
||||||
deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
|
|
||||||
return deSerializedModel;
|
|
||||||
}
|
|
||||||
|
|
||||||
function createNode(name, color) {
|
|
||||||
const node = new SRD.DefaultNodeModel(name, color);
|
|
||||||
node.addPort(new SRD.DefaultPortModel(true, inPortName, " "));
|
|
||||||
node.addPort(new SRD.DefaultPortModel(false, outPortName, " "));
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
function connectNodes(nodeFrom, nodeTo) {
|
|
||||||
return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName));
|
|
||||||
}
|
|
||||||
|
|
||||||
function f() {
|
|
||||||
// console.log(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LifeCycleGraph;
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, 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 { Upload, Icon, message } from 'antd';
|
|
||||||
|
|
||||||
function getBase64(img, callback) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.addEventListener('load', () => callback(reader.result));
|
|
||||||
reader.readAsDataURL(img);
|
|
||||||
}
|
|
||||||
|
|
||||||
function beforeUpload(file) {
|
|
||||||
const isJPG = file.type === 'image/jpeg';
|
|
||||||
if (!isJPG) {
|
|
||||||
message.error('You can only upload JPG file!');
|
|
||||||
}
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
||||||
if (!isLt2M) {
|
|
||||||
message.error('Image must smaller than 2MB!');
|
|
||||||
}
|
|
||||||
return isJPG && isLt2M;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class IconImage extends React.Component {
|
|
||||||
state = {
|
|
||||||
loading: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = (info) => {
|
|
||||||
if (info.file.status === 'uploading') {
|
|
||||||
this.setState({ loading: true });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (info.file.status === 'done') {
|
|
||||||
// Get this url from response in real world.
|
|
||||||
getBase64(info.file.originFileObj, imageUrl => this.setState({
|
|
||||||
imageUrl,
|
|
||||||
loading: false,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const uploadButton = (
|
|
||||||
<div>
|
|
||||||
<Icon type={this.state.loading ? 'loading' : 'plus'} />
|
|
||||||
<div className="ant-upload-text">Upload</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
const imageUrl = this.state.imageUrl;
|
|
||||||
return (
|
|
||||||
<Upload
|
|
||||||
name="avatar"
|
|
||||||
listType="picture-card"
|
|
||||||
className="avatar-uploader"
|
|
||||||
showUploadList={false}
|
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
|
||||||
beforeUpload={beforeUpload}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
>
|
|
||||||
{imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
|
|
||||||
</Upload>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default IconImage;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, 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 { Upload, Icon, Modal} from 'antd';
|
|
||||||
|
|
||||||
|
|
||||||
class UploadScreenshots extends React.Component {
|
|
||||||
state = {
|
|
||||||
previewVisible: false,
|
|
||||||
previewImage: '',
|
|
||||||
fileList: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCancel = () => this.setState({ previewVisible: false });
|
|
||||||
|
|
||||||
handlePreview = (file) => {
|
|
||||||
this.setState({
|
|
||||||
previewImage: file.url || file.thumbUrl,
|
|
||||||
previewVisible: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = ({ fileList }) => this.setState({ fileList });
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { previewVisible, previewImage, fileList } = this.state;
|
|
||||||
const uploadButton = (
|
|
||||||
<div>
|
|
||||||
<Icon type="plus" />
|
|
||||||
<div className="ant-upload-text">Upload</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<div className="clearfix">
|
|
||||||
<Upload
|
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
|
||||||
listType="picture-card"
|
|
||||||
fileList={fileList}
|
|
||||||
onPreview={this.handlePreview}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
>
|
|
||||||
{fileList.length >= 3 ? null : uploadButton}
|
|
||||||
</Upload>
|
|
||||||
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
|
||||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default UploadScreenshots;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, 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 { Upload, Icon, Modal} from 'antd';
|
|
||||||
|
|
||||||
|
|
||||||
class AddTagModal extends React.Component {
|
|
||||||
state = {
|
|
||||||
previewVisible: false,
|
|
||||||
previewImage: '',
|
|
||||||
fileList: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCancel = () => this.setState({ previewVisible: false });
|
|
||||||
|
|
||||||
handlePreview = (file) => {
|
|
||||||
this.setState({
|
|
||||||
previewImage: file.url || file.thumbUrl,
|
|
||||||
previewVisible: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = ({ fileList }) => this.setState({ fileList });
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { previewVisible, previewImage, fileList } = this.state;
|
|
||||||
const uploadButton = (
|
|
||||||
<div>
|
|
||||||
<Icon type="plus" />
|
|
||||||
<div className="ant-upload-text">Upload</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<div className="clearfix">
|
|
||||||
<Upload
|
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
|
||||||
listType="picture-card"
|
|
||||||
fileList={fileList}
|
|
||||||
onPreview={this.handlePreview}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
>
|
|
||||||
{fileList.length >= 3 ? null : uploadButton}
|
|
||||||
</Upload>
|
|
||||||
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
|
||||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default AddTagModal;
|
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2019, 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 {Button, DatePicker} from "antd";
|
||||||
|
|
||||||
|
class InstallModalFooter extends React.Component{
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state={
|
||||||
|
scheduledTime: null,
|
||||||
|
isScheduledInstallVisible: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onDateTimeChange = (value, dateString) => {
|
||||||
|
this.setState({
|
||||||
|
scheduledTime: dateString
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
showScheduledInstall = ()=>{
|
||||||
|
this.setState({
|
||||||
|
isScheduledInstallVisible: true
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
hideScheduledInstall = ()=>{
|
||||||
|
this.setState({
|
||||||
|
isScheduledInstallVisible: false
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {scheduledTime,isScheduledInstallVisible} =this.state;
|
||||||
|
const {disabled, type} = this.props;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
textAlign: "right",
|
||||||
|
display: (!isScheduledInstallVisible)?'block':'none'
|
||||||
|
}}>
|
||||||
|
<Button style={{margin: 5}} disabled={disabled} htmlType="button" type="primary"
|
||||||
|
onClick={this.props.operation}>
|
||||||
|
{type}
|
||||||
|
</Button>
|
||||||
|
<Button style={{margin: 5}} disabled={disabled} htmlType="button"
|
||||||
|
onClick={this.showScheduledInstall}>
|
||||||
|
Scheduled {type}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
textAlign: "right",
|
||||||
|
display: (isScheduledInstallVisible)?'block':'none'
|
||||||
|
}}>
|
||||||
|
<DatePicker showTime
|
||||||
|
placeholder="Select Time"
|
||||||
|
format="YYYY-MM-DDTHH:mm"
|
||||||
|
onChange={this.onDateTimeChange}/>
|
||||||
|
<Button disabled={scheduledTime == null}
|
||||||
|
style={{margin: 5}}
|
||||||
|
htmlType="button"
|
||||||
|
type="primary"
|
||||||
|
onClick={()=>{
|
||||||
|
this.props.operation(scheduledTime);
|
||||||
|
}}>
|
||||||
|
Schedule
|
||||||
|
</Button>
|
||||||
|
<Button style={{margin: 5}} htmlType="button"
|
||||||
|
onClick={this.hideScheduledInstall}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InstallModalFooter;
|
||||||
Loading…
Reference in new issue