Skip to content
GitLab
Commit 0bca5597 authored by Philippe Bardou's avatar Philippe Bardou
Browse files

Graph...

parent bfae822e
Expand all Hide whitespace changes
Inline Side-by-side
docs/example1.html
View file @ 0bca5597
......@@ -147,7 +147,7 @@
<script src="../src/js/jquery.fileupload.js"></script>
<script src="../src/js/jquery.fileupload-process.js"></script>
<script src="../src/js/jquery.fileupload-validate.js"></script>
<script src='../src/js/cytoscape.min.js' type='text/javascript'></script>
<script src='../src/js/cytoscape.js' type='text/javascript'></script>
<script src='../src/js/jflow-activewf.js' type='text/javascript'></script>
<script src='../src/js/jflow-availablewf.js' type='text/javascript'></script>
......
src/js/cytoscape.js 0 → 100644
View file @ 0bca5597
This diff is collapsed.
src/js/jflow-wfstatus.js
View file @ 0bca5597
......@@ -44,10 +44,16 @@
components: new Array()
};
for (var i in data.components) {
var failed = parseInt(((parseInt(data.components[i].aborted) + parseInt(data.components[i].failed)) * 100) / parseInt(data.components[i].total)),
var failed = 0,
completed = 0,
running = 0,
waiting = 0;
if(parseInt(data.components[i].total) != 0) {
failed = parseInt(((parseInt(data.components[i].aborted) + parseInt(data.components[i].failed)) * 100) / parseInt(data.components[i].total)),
completed = parseInt((parseInt(data.components[i].completed) * 100) / parseInt(data.components[i].total)),
running = parseInt((parseInt(data.components[i].running) * 100) / parseInt(data.components[i].total)),
waiting = parseInt((parseInt(data.components[i].waiting) * 100) / parseInt(data.components[i].total));
running = parseInt((parseInt(data.components[i].running) * 100) / parseInt(data.components[i].total)),
waiting = parseInt((parseInt(data.components[i].waiting) * 100) / parseInt(data.components[i].total));
}
workflow.components.push({
name: data.components[i].name,
elapsed_time: data.components[i].elapsed_time,
......@@ -78,7 +84,7 @@
success: function(data) {
$this.$element.find("#wfstatus_error_panel").hide();
if( data != null ) {
$this.$element.find("#wfstatus_error_msg").text( data["msg"].join("<br/>") );
$this.$element.find("#wfstatus_error_msg").html( data["msg"].join('<br/>') );
$this.$element.find("#wfstatus_error_location").text( data["location"] );
$this.$element.find("#wfstatus_error_panel").show();
}
......@@ -90,6 +96,7 @@
if (this.options.forceUsingWorkflow) {
var workflow = this.reformatWorkflowJSON(this.options.forceUsingWorkflow);
this.$element.html("");
$.tmpl(this.options.headTemplate, {workflow: workflow}).appendTo(this.$element);
$.tmpl(this.options.listTemplate, {workflow: workflow}).appendTo(this.$element);
// force for first display, then reload an update
this.options.forceUsingWorkflow = null;
......@@ -123,6 +130,7 @@
success: function(data) {
var workflow = $this.reformatWorkflowJSON(data);
$this.$element.html("");
$.tmpl($this.options.headTemplate, {workflow: workflow}).appendTo($this.$element);
$.tmpl($this.options.listTemplate, {workflow: workflow}).appendTo($this.$element);
$this.errorMessage();
$("[id^=component_]").hover(function(){
......@@ -170,47 +178,75 @@
$this.$element.html(alert_message);
},
success: function(data) {
console.log(data)
// prepare the container
$this.$element.html("");
$this.$element.height(500);
//$this.$element.width(200);
var workflow = $this.reformatWorkflowJSON(data);
$this.$element.html("");
$.tmpl($this.options.headTemplate, {workflow: workflow}).appendTo($this.$element);
$.tmpl($this.options.graphTemplate, {workflow: workflow}).appendTo($this.$element);
// prepare the data
var nodes = new Array(),
var nodes = new Array(),
edges = new Array();
for (var i in data.components) {
nodes.push({ data: { id: data.components[i].name, name: data.components[i].name} });
var err = 0,
wai = workflow.components[i].waiting,
run = workflow.components[i].running,
fai = workflow.components[i].failed,
com = workflow.components[i].completed;
if((wai+run+fai+com)==0) { err = 100; }
nodes.push({ data: {
id: data.components[i].name,
name: data.components[i].name,
err: err,
wai: wai,
run: run,
fai: fai,
com: com
}});
}
for (var i in data.edges) {
if (data.edges[i][0] != null && data.edges[i][1] != null) {
edges.push({ data: { source: data.edges[i][0], target: data.edges[i][1] } });
}
}
$this.$element.cytoscape({
$('#cytoscape_panel').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
'width': '80px',
'height': '80px',
'content': 'data(id)',
'pie-size': '100%',
'pie-1-background-color': 'lightgrey', //Error
'pie-1-background-size': 'mapData(err, 0, 100, 0, 100)',
'pie-2-background-color': '#faa732', //Waiting
'pie-2-background-size': 'mapData(wai, 0, 100, 0, 100)',
'pie-3-background-color': '#0e90d2', //Running
'pie-3-background-size': 'mapData(run, 0, 100, 0, 100)',
'pie-4-background-color': '#dd514c', //Failed
'pie-4-background-size': 'mapData(fai, 0, 100, 0, 100)',
'pie-5-background-color': '#7fe175', //Completed
'pie-5-background-size': 'mapData(com, 0, 100, 0, 100)',
'background-color': 'lightgrey',
'text-valign': 'bottom',
'color': 'black',
'font-family': '"Trebuchet MS",Verdana,"Lucida Grande", Tahoma, Helvetica, sans-serif',
'border-opacity' : 1,
'border-width' : '0.05em',
'font-size': '10px'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
'width': 1,
//'curve-style':'haysack',
//'target-arrow-shape': 'triangle',
'opacity': 0.5
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
/*'border-width': 30,
'border-color': 'red',
'color': 'red'*/
})
.selector('.faded')
.css({
......@@ -221,25 +257,19 @@
nodes: nodes,
edges: edges
},
layout: {
name: 'grid',
padding: 10
padding: 25
},
ready: function(){
window.cy = this;
cy.elements().unselectify();
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
......@@ -333,21 +363,22 @@
$.fn.wfstatus.defaults = {
serverURL: "http://localhost:8080",
headTemplate: ['<dl class="dl-horizontal">',
'<dt>Start</dt>',
'<dd>${workflow.start_time}</dd>',
'<dt>End</dt>',
'<dd>${workflow.end_time}</dd>',
'<dt>Elapsed time</dt>',
'<dd>${workflow.elapsed_time}</dd>',
'<br/>',
'<div id="wfstatus_error_panel" class="alert alert-error" style="display:none;">',
' <strong>Error message :</strong><br/>',
' <span id="wfstatus_error_msg"></span><br/>',
' <strong>Error location :</strong><br/>',
' <span id="wfstatus_error_location"></span>',
'</div>',
'</dl>'].join('\n'),
listTemplate: ['<dl class="dl-horizontal">',
'<dt>Start</dt>',
'<dd>${workflow.start_time}</dd>',
'<dt>End</dt>',
'<dd>${workflow.end_time}</dd>',
'<dt>Elapsed time</dt>',
'<dd>${workflow.elapsed_time}</dd>',
'<br/>',
'<div id="wfstatus_error_panel" class="alert alert-error" style="display:none;">',
' <strong>Error message :</strong><br/>',
' <span id="wfstatus_error_msg"></span><br/>',
' <strong>Error location :</strong><br/>',
' <span id="wfstatus_error_location"></span>',
'</div>',
'<br/>',
'{{each(index, component) workflow.components}}',
'<div id="component_${component.name}"><p><dt>${component.name}</dt>',
'<dd>',
......@@ -360,9 +391,13 @@
'</dd></p></div>',
'{{/each}}',
'</dl>'].join('\n'),
graphTemplate: ['<div id="cytoscape_panel" style="background-image:url(img/grid.png);*/',
'background-color:#f9f9f9;margin-top:-20px;border:1px solid lightgrey;border-radius:5px;',
'width:515px;height:393px">',
'</div>'].join('\n'),
workflowID: null,
forceUsingWorkflow: null,
display: "list"
display: "graph"
}
$.fn.wfstatus.Constructor = WFStatus
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment