Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / launchpad / src / launchpad_card / jobListCard.jsx

diff --git a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
new file mode 100644 (file)
index 0000000..2a66540
--- /dev/null
+++ b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
@@ -0,0 +1,177 @@
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed 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 './jobListCard.scss'
+import Uptime from 'widgets/uptime/uptime.jsx';
+import Modal from 'react-awesome-modal';
+
+
+class JobListCard extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+        this.state.hideParameters = true;
+        this.state.modalVisible = false;
+    }
+    openModal() {
+        this.setState({
+            modalVisible : true
+        });
+    }
+
+    closeModal() {
+        this.setState({
+            modalVisible : false
+        });
+    }
+    getStatusColor(status) {
+        let color;
+        switch(status) {
+            case 'success' : color = 'green'; break;
+            case 'failure' : color = 'red'; break;
+            default : color = 'yellow'; break;
+        }
+        return 'jobListCard--status_' + color;
+    }
+    toggleParametersView(hideParameters) {
+        this.setState({
+            hideParameters: !hideParameters
+        })
+    }
+    getJobDetails(job) {
+        let jobDetails = null;
+        if (job['job-status-details']) {
+            jobDetails = (
+                <section className='jobListCard--details'>
+                    <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
+                    <Modal
+                        visible={this.state.modalVisible}
+                        width="600"
+                        height="400"
+                        effect="fadeInUp">
+                        <div>
+                            <div className='jobListCard--details--content'>{job['job-status-details']}</div>
+                            <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
+                        </div>
+                    </Modal>
+                </section>
+            );
+        }
+        return jobDetails;
+    }
+    nsrCardHTML(props, key) {
+        let self = this;
+        let jobListStatus = this.getStatusColor(this.props['job-status']);
+        let hideParameters = this.state.hideParameters;
+        let parameterList = function(props) {
+            return props['parameter'] && props['parameter'].map((p, i) => {
+                let k = null;
+                if(key) {
+                    k = k + '-' + i;
+                }
+                return (
+                    <div key={k || i} className="jobListCard--listitem">
+                        <span className="jobListCard--parameter">{p.name}:</span> {p.value}
+                    </div>
+                );
+            });
+        }
+        let jobDetailsHTML = this.getJobDetails(this.props);
+        return (
+            <div className="jobListCard">
+                <div className="jobListCard--header">
+                    <div className="jobListCard--name">
+                        {props['job-name']}
+                    </div>
+                    <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
+                </div>
+                <div className="jobListCard--subtitle">
+                    <span>ID: {this.props['job-id']}</span>
+                </div>
+                <div className="jobListCard--subtitle">
+                    <Uptime initialTime={props['create-time']} run={false} /> ago
+                </div>
+                <div className={"jobListCard--parameters"}>
+                    <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>{hideParameters ? 'Show' : 'Hide'} Parameters</h4>
+                    <div className={"jobListCard--list"} style={{display: hideParameters ? 'none' : 'flex'}}>
+                        {
+                            parameterList(props)
+                        }
+                        {
+                            props.vnfr && props.vnfr.map(function(v) {
+                                return v.primitive && v.primitive.map(function(p) {
+                                    return parameterList(p, p.name)
+                                })
+                            })
+                        }
+                    </div>
+                </div>
+                {jobDetailsHTML}
+            </div>
+        )
+    }
+    vnfrCardHTML(props) {
+        let self = this;
+        let jobListStatus = this.getStatusColor(props['execution-status'] );
+        let hideParameters = this.state.hideParameters;
+        return (
+            <div className="jobListCard">
+                <div className="jobListCard--header">
+                    <div className="jobListCard--name">
+                        {props.name}
+                    </div>
+                    <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
+                </div>
+                <div className="jobListCard--subtitle">
+                    <span>ID: {props['job-id']}</span>
+                </div>
+                <div className={"jobListCard--parameters"}>
+                    <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
+                        { hideParameters ? 'Show' : 'Hide' } Parameters
+                    </h4>
+                    <div style={{display: hideParameters ? 'none' : 'initial'}}>
+                        <div className={"jobListCard--list"}>
+                            {
+                                props['parameter'] && props['parameter'].map((q, k) => {
+                                        return (
+                                            <div key={k} className="jobListCard--listitem">
+                                                <span className="jobListCard--parameter">{q.name}:</span> {q.value}
+                                            </div>
+                                        );
+                                })
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+    render() {
+        let html;
+        let card = <div></div>
+        if (this.props.type=="nsr") {
+            card = this.nsrCardHTML(this.props);
+        }
+        if (this.props.type=="vnfr") {
+            card = this.vnfrCardHTML(this.props);
+        }
+        return card;
+    }
+}
+export default JobListCard;