Skip to content
This repository has been archived by the owner on May 26, 2018. It is now read-only.

Commit

Permalink
update presentation tab of pirus
Browse files Browse the repository at this point in the history
  • Loading branch information
ikit committed Nov 21, 2016
1 parent 84056bf commit 0e1d3e2
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 40 deletions.
144 changes: 105 additions & 39 deletions pirus/api_rest/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@

<!-- Pirus specific -->
<link rel="stylesheet" href="/assets/pirus.css"/>
<link rel="stylesheet" href="/assets/circle.css"/>
<link rel="stylesheet" href="/assets/font-awesome-4.6.3/css/font-awesome.min.css"/>
</head>
<body>
Expand All @@ -41,7 +42,7 @@
<li><a data-toggle="tab" href="#presentation"><i class="fa fa-eye" aria-hidden="true"></i> Presentation</a></li>
<li class="active"><a data-toggle="tab" href="#demo"><i class="fa fa-desktop" aria-hidden="true"></i> Demo</a></li>
<li><a data-toggle="tab" href="#api"><i class="fa fa-code" aria-hidden="true"></i> API</a></li>
<li><a href="http://pirus.readthedocs.io/en/latest/?badge=latest" target="_blanck" style="color:#337ab7!important;"><i class="fa fa-question" aria-hidden="true"></i> Help</a></li>
<li><a href="http://pirus.readthedocs.io/en/latest/?badge=latest" target="_blanck"><i class="fa fa-question" aria-hidden="true"></i> Help</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
Expand All @@ -59,19 +60,65 @@ <h1 class="content-subhead hidden" style="margin-top:70px"><i class="fa fa-retwe
<h1 class="content-subhead"><i class="fa fa-user" aria-hidden="true"></i> Online</h1>
<ul id="userList"></ul>
-->
<div class="row">
<div class="col-md-4"><img src="/assets/img/resume.png" width="300px" /></div>
<div class="col-md-8">
<p style="margin-top: 130px;">Pirus is a tool that allow you to manage and run informatic's pipeline.</p>
<p>So there is 3 mains objects that you can manipulates :
<ul>
<li>File</li>
<li>Pipeline</li>
<li>Run</li>
<div style="width:700px; margin:auto;">
<img src="/assets/img/resume.jpg" width="700px" style="margin-bottom:20px"/>
<h1>Pirus ( PIpeline RUnner Service)</h1>
<p><b>Pirus</b> is a tool to manage installation and execution of informatic pipelines.
<ul><li>Stand alone project</li>
<li>Sub project of Regovar</li>
<li>Pipeline</li>
<li>Run</li>
<li>Inputs -> Outputs</li>
<li>Push notifications</li>
<li>Monitoring</li>
</ul>
</p>
<h1>Goals of Pirus</h1>
<p>Pirus aimed at performing computing tasks taking as input files to produce results in the form of one or more files. First devised in order to perform bioinformatic pipelines as part of research and or medical diagnostics, Pirus is for both computer scientists developing these pipelines, as system administrators to ensure the computer server maintenance, that to end users.</p>
<p style="display: block; margin:auto; margin-top:30px; font-style:italic; color:#999; font-size:20px;">Each of them have different needs</p>
<img src="https://raw.githubusercontent.com/REGOVAR/Pirus/master/docs/img/0032.1.png" width="700px" style="margin-bottom:50px;"/>
<div class="row">
<div class="col-md-4">
<b>Sys administrator</b>
<ul><li>No way they install anything on the serverw</li>
<li>I don’t want to struggle with theirs weirds dependancies</li>
<li>Deployement shall be easy</li>
</ul>
</p>
<p>You can browse and manage each of theses objets via the 3 dedicated sections (see the top navigation bar).</p>
</div>
<div class="col-md-4">
<b>Bio informaticien</b>
<ul><li>I want to do all I want</li>
<li>I want to use all softwares I wants (and I choose the version)</li>
<li>No time to spent on a endusers graphical interface</li>
</ul>
</div>
<div class="col-md-4">
<b>Clinician</b>
<ul><li>I don’t want to see any command line</li>
<li>I just want to click a button to get my results</li>
<li>I’m interruptable, I do many things at the same time, I don’t want to be stuck when waiting my results</li>
</ul>
</div>
</div>
<p style="display: block; margin:auto; margin-top:30px; font-style:italic; color:#999; font-size:20px;">Yes ! The solution exists ! Pirus !</p>
<img src="https://raw.githubusercontent.com/REGOVAR/Pirus/master/docs/img/0032.2.png" width="700px" style="margin-bottom:50px;"/>
<p>
<b>Features</b>
<ul><li>Deployement with pip install [TODO]</li>
<li>All in one product (server application, client web interface)</li>
<li>One simple config file</li>
<li>No exotics depencies, no weird customizations</li>
<li>Virtual environment for pipeline execution (LXD container)</li>
<li>API REST</li>
<li>Easy to create a custom pipeline (few technical constraints)</li>
<li>Resumable upload for big files</li>
<li>Possibility to expose a simple interface to setup a pipeline (according to a unique json file)</li>

<li>Push notification for Run progress</li>
<li>Mail notification for Run status changed (when finished or when an error occured by example) [TODO]</li>
<li>Run can be paused, resumed and canceled</li>
</ul>
</p>
</div>
</div>

Expand All @@ -89,8 +136,8 @@ <h1 class="content-subhead"><i class="fa fa-user" aria-hidden="true"></i> Online
<a class="btn btn-default" href="#modalNewFile" title="New file" data-toggle="modal" href="#modalNewFilel"><i class="fa fa-file-o" aria-hidden="true"></i></a>
<a class="btn btn-default" href="#modalNewPipeline" title="New Pipeline" data-toggle="modal" href="#modalNewFilel"><i class="fa fa-puzzle-piece" aria-hidden="true"></i></a>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="New run">
<i class="fa fa-tasks" aria-hidden="true"></i> <span class="caret"></span>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="New run">
<i class="fa fa-play" aria-hidden="true"></i> New run<!--<span class="caret"></span>-->
</button>
{% if pipes|length ==0 %}
<strong>Warning!</strong> You need to install pipeline first.
Expand Down Expand Up @@ -131,9 +178,9 @@ <h1 class="content-subhead"><i class="fa fa-user" aria-hidden="true"></i> Online
</div>
</div>
</div>
<div class="panel-body" style="padding-top: 0; padding-bottom:0;">
<div class="panel-body" style="padding-top: 0; padding-bottom:0; padding-left:0;">
<div class="row">
<div class="col-md-3" style="height:500px; border-right: 1px solid #ddd; overflow-y: scroll;">
<div class="col-md-3" style="height:500px; border-right: 1px solid #ddd; overflow-y: auto;">

<a class="btn" style="display:block; text-align:left;" role="button" data-toggle="collapse" href="#browserNavSelectionPanel" aria-expanded="false" aria-controls="browserNavSelectionPanel">
<i class="fa fa-chevron-right" aria-hidden="true"></i> <i class="fa fa-check-square-o" aria-hidden="true"></i> Selection <span id="selection_count" class="badge"></span>
Expand All @@ -143,28 +190,21 @@ <h1 class="content-subhead"><i class="fa fa-user" aria-hidden="true"></i> Online
</ul>
</div>

<a class="btn" style="display:block; text-align:left;" role="button" data-toggle="collapse" href="#browserNavLastPanel" aria-expanded="false" aria-controls="browserNavLastPanel" onclick="javascript:show_tab('browser_activities')">
<i class="fa fa-chevron-right" aria-hidden="true"></i> <i class="fa fa-clock-o" aria-hidden="true"></i> Last activity
</a>
<div id="browserNavLastPanel" class="collapse">
<div>

</div>
</div>
<a class="btn" style="display:block; text-align:left;" role="button" onclick="javascript:show_tab('browser_files')"><i class="fa fa-files-o" aria-hidden="true"></i> All Files</a>
<a class="btn" style="display:block; text-align:left;" role="button" onclick="javascript:show_tab('browser_inprogress')"><i class="fa fa-tasks" aria-hidden="true"></i> In progress <span class="badge">3</span></a>

<hr/>


{% for p in pipes %}
<a class="btn" style="display:block; text-align:left;" role="button" data-toggle="collapse" href="#browser_navpanel_pipe_{{p["id"]}}" aria-expanded="false" aria-controls="browser_navpanel_pipe_{{p["id"]}}">
<i class="fa fa-chevron-right" aria-hidden="true"></i> <i class="fa fa-puzzle-piece" aria-hidden="true"></i> Pipeline {{p["name"]}}</a>
<div id="browser_navpanel_pipe_{{p["id"]}}" class="collapse">
<div>
<ul>
{% for r in p["runs"] %}
<li><a onclick="javascript:show_tab('browser_run','{{r["id"]}}')"><i class="fa fa-tasks" aria-hidden="true"></i> {{r["name"]}}</a></li>
{% if r["status"] in ["WAITING", "PAUSE", "INITIALIZING", "RUNNING", "FINISHING", "ERROR", "DONE", "CANCELED"] %}
<li><a onclick="javascript:show_tab('browser_run','{{r["id"]}}')" href="#"><i class="fa fa-tasks" aria-hidden="true"></i> {{r["name"]}}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
Expand All @@ -176,8 +216,7 @@ <h1 class="content-subhead"><i class="fa fa-user" aria-hidden="true"></i> Online


<div id="browser_files">

<table id="browserContentTab" class="table table-striped table-bordered" cellspacing="0" width="100%" style="margin:0">
<table id="browser_files_table" class="table table-striped table-bordered" cellspacing="0" width="100%" style="margin:0">
<thead>
<tr>
<th></th>
Expand All @@ -189,11 +228,10 @@ <h1 class="content-subhead"><i class="fa fa-user" aria-hidden="true"></i> Online
</tr>
</thead>
{% for f in files %}
<tr id="fileEntry-{{ f["id"] }}" onmouseover="javascript:display_status_bar('{{ f["id"] }}')">
<tr id="fileEntry-{{ f["id"] }}" onmouseover="javascript:display_status_bar('{{ f["id"] }}')" onclick="javascript:select_file('{{ f["id"] }}')" style="cursor: pointer;">
<td><input type="checkbox"
value="{{ f["id"] }}"
name="{% if f["source"]["type"] == "output" %}{{ f["source"]["run_name"] }} > {% endif %}{{ f["name"] }}"
onchange="javascript:select_file('{{ f["id"] }}')"/>
name="{% if f["source"]["type"] == "output" %}{{ f["source"]["run_name"] }} > {% endif %}{{ f["name"] }}"/>
</td>
<td>{% if f["source"]["type"] == "output" %}
{{ f["source"]["run_name"] }} <i class="fa fa-chevron-right" aria-hidden="true"></i>
Expand All @@ -212,18 +250,46 @@ <h1 class="content-subhead"><i class="fa fa-user" aria-hidden="true"></i> Online
</table>
</div>

<div id="browser_activities" class="collapse" >
TODO :Last activity panel. <br/>
Display list of last activaty : file upload/generation, pipeline upload/installation, run status change.
</div>

<div id="browser_inprogress" class="collapse" >
... TO DO ...
<table id="browser_inprogress_table" class="table table-striped table-bordered" cellspacing="0" width="100%" style="margin:0">
<thead>
<tr>
<th>Name</th>
<th>Details</th>
<th>Progress</th>
<th>Status</th>
<th class="collapse">Comments</th>
<th class="collapse">Tags</th>
</tr>
</thead>
{% for f in files %}
<tr id="fileEntry-{{ f["id"] }}" onmouseover="javascript:display_status_bar('{{ f["id"] }}')" onclick="javascript:select_file('{{ f["id"] }}')" style="cursor: pointer;">
<td><input type="checkbox"
value="{{ f["id"] }}"
name="{% if f["source"]["type"] == "output" %}{{ f["source"]["run_name"] }} > {% endif %}{{ f["name"] }}"/>
</td>
<td>{% if f["source"]["type"] == "output" %}
{{ f["source"]["run_name"] }} <i class="fa fa-chevron-right" aria-hidden="true"></i>
{% endif %}
{{ f["name"] }}
{% if f["comments"] %}
<a href="#" data-toggle="tooltip" data-placement="right" title="{{f["comments"]}}"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
{% endif %}
</td>
<td>{{ f["size"] }}</td>
<td>{{ f["create_date"] }}</td>
<td class="collapse">{{ f["comments"] }}</td>
<td class="collapse">{% for t in f["tags"] %}{{t}}{% endfor %}</td>
</tr>
{% endfor %}
</table>
</div>

<div id="browser_run" class="collapse" >
<button id="browser_run_monitoring_refresh" type="button" class="btn btn-primary" style="display; block; float:right; margin-top:-10px; margin-right:10px" ><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
<h3 id="browser_run_name" style="margin-left: 20px;"></h3>
<p id="browser_run_details"></p>
<p id="browser_run_details" style="margin-left: 58px; color:#999; margin-top:10px;"></p>
<nav class="navbar navbar-default" style="margin-bottom: 0;">
<div id="navbar" class="navbar-collapse" style="height: 1px;">
<ul class="nav navbar-nav">
Expand Down Expand Up @@ -541,7 +607,7 @@ <h4 class="modal-title"><i class="fa fa-play" aria-hidden="true"></i> New <span
update_datagrid();
init_pirus_browser();

$("#browserContentTab td").contextMenu({
$("#browser_files_table td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
Expand All @@ -550,7 +616,7 @@ <h4 class="modal-title"><i class="fa fa-play" aria-hidden="true"></i> New <span
}
});

$("#browserContentTab").tablesorter();
$("#browser_files_table").tablesorter();

});

Expand Down
Binary file added pirus/api_rest/templates/img/resume.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed pirus/api_rest/templates/img/resume.png
View file
Binary file not shown.
3 changes: 2 additions & 1 deletion pirus/api_rest/templates/pirus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ function show_tab(tab_id, run_id)
var demo_pirus_selection = [];
function select_file(file_id)
{
var check = $('#fileEntry-' + file_id + ' input')[0].checked;
var check = !$('#fileEntry-' + file_id + ' input')[0].checked;
$('#fileEntry-' + file_id + ' input').prop('checked', check);
var file_name = $('#fileEntry-' + file_id + ' td:nth-child(2)').html().trim();
if (check)
{
Expand Down

0 comments on commit 0e1d3e2

Please sign in to comment.