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