diff --git a/qiita_pet/templates/portals_edit.html b/qiita_pet/templates/portals_edit.html
index d13508356..df76d3082 100644
--- a/qiita_pet/templates/portals_edit.html
+++ b/qiita_pet/templates/portals_edit.html
@@ -1,7 +1,6 @@
{% extends sitebase.html%}
{%block head%}
-
-
+
+
@@ -92,6 +95,91 @@
}
}
+ /*
+ * Remove a job from the workflow
+ *
+ * @param job_id str The id of the job to be removed
+ *
+ * This function executes an AJAX call to remove the given job from the
+ * current workflow and updates the graph accordingly
+ *
+ */
+ function remove_job(job_id, workflow_id = undefined) {
+ var update_graph = false;
+ if (workflow_id === undefined) {
+ workflow_id = $("#graph-network-div").attr("data-wf-id");
+ update_graph = true;
+ }
+ if(confirm("Are you sure you want to delete the job " + job_id + "? All jobs depending on this job will also be removed.")) {
+ $.ajax({
+ url: '{% raw qiita_config.portal_dir %}/study/process/workflow/',
+ type: 'PATCH',
+ data: {'op': 'remove', 'path': '/' + workflow_id + '/' + job_id},
+ success: function(data) {
+ if(data.status == 'error') {
+ bootstrapAlert(data.message, "danger");
+ }
+ else {
+ if (update_graph) {
+ remove_job_node_from_graph(job_id);
+ var job_count = nodes.get({filter: function(item) {
+ return item.group == "job";
+ }}).length;
+ $("#graph-network-div").attr("data-wf-job-count", job_count);
+ if (job_count == 0) {
+ $('#run-btn').prop('disabled', true);
+ }
+ $("#processing-info-div").empty();
+ } else {
+ processing_jobs_vue.update_processing_job_data();
+ bootstrapAlert("Job deleted", "success", 10000);
+ }
+ }
+ }
+ });
+ }
+ }
+
+ /*
+ * Remove a job node from the network visualization
+ *
+ * @param job_id str The id of the job
+ *
+ * This function removes the given job and its children from the
+ * network visualization
+ *
+ */
+ function remove_job_node_from_graph(job_id) {
+ var queue = [job_id];
+ var edge_list = edges.get();
+ var current;
+ var edge;
+ while(queue.length !== 0) {
+ current = queue.pop();
+ for(var i in edge_list) {
+ edge = edge_list[i];
+ if(edge.from == current) {
+ if($.inArray(edge.to, queue) == -1) {
+ queue.push(edge.to);
+ }
+ edges.remove(edge.id);
+ }
+ }
+ nodes.remove(current);
+ }
+ var edges_to_remove = edges.get(
+ {filter: function(item) {
+ return item.to == job_id;
+ }});
+ var edge_ids = [];
+ $(edges_to_remove).each(function(i){
+ edge_ids.push(edges_to_remove[i].id);
+ });
+
+ edges.remove(edge_ids);
+ processing_network.redraw();
+ }
+
$(document).ready(function() {
$.getJSON("{% raw qiita_config.portal_dir %}/analysis/dflt/sumary/", function(result) {
if(parseInt(result.studies) > 0) {
@@ -119,199 +207,367 @@
}
});
});
+
+ // Based on http://codepen.io/willvincent/pen/LbeKKW
+ // and https://datatables.net/examples/api/row_details.html
+
+ Vue.component('data-table-processing-jobs', {
+ template: '
',
+ props: ['jobs'],
+ data() {
+ return {
+ headers: [
+ { "className": 'more-info-processing-jobs',
+ "orderable": false,
+ "data": null,
+ "defaultContent": ''},
+ { title: 'Heartbeat' },
+ { title: 'Name' },
+ { title: 'Status' },
+ { title: 'Step' }
+ ],
+ rows: [] ,
+ dtHandle: null
+ }
+ },
+ watch: {
+ jobs(val, oldVal) {
+ let vm = this;
+
+ if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
+ vm.rows = [];
+ val.forEach(function (item) {
+ // Fish out the specific column data for each item in your data set and push it to the appropriate place.
+ // Basically we're just building a multi-dimensional array here. If the data is _already_ in the right format you could
+ // skip this loop...
+ let row = [];
+ row.push('')
+ row.push(item.heartbeat);
+ row.push(item.name);
+ row.push(item.status);
+ row.push(item.step);
+ row.push(item.id);
+
+ let params = "";
+ for (k in item.params) {
+ params += '
' + k + ' : ' + item.params[k] + '
';
+ }
+ row.push(params)
+ row.push(item.processing_job_workflow_id)
+ vm.rows.push(row);
+ });
+
+ // Here's the magic to keeping the DataTable in sync.
+ // It must be cleared, new rows added, then redrawn!
+ vm.dtHandle.clear();
+ vm.dtHandle.rows.add(vm.rows);
+ vm.dtHandle.draw();
+ }
+ }
+ },
+ mounted() {
+ let vm = this;
+ // Instantiate the datatable and store the reference to the instance in our dtHandle element.
+ vm.dtHandle = $(this.$el).DataTable({
+ // Specify whatever options you want, at a minimum these:
+ columns: vm.headers,
+ data: vm.rows,
+ searching: false,
+ paging: false,
+ info: false,
+ order: [[1, 'desc']]
+ });
+
+ $('#processing-jobs-datatables').on('click', 'td.more-info-processing-jobs', function () {
+ var tr = $(this).closest('tr');
+ var row = vm.dtHandle.row( tr );
+
+ if ( row.child.isShown() ) {
+ // This row is already open - close it
+ row.child.hide();
+ tr.removeClass('shown');
+ }
+ else {
+ // Open this row
+ row.child( format_extra_info_processing_jobs(row.data()) ).show();
+ tr.addClass('shown');
+ }
+ });
+ }
});
-
+
+ // this has to be global so we can update when we click on the processing
+ // jobs button
+ processing_jobs_vue = new Vue({
+ el: '#processing-jobs-table',
+ data: {
+ jobs: [],
+ search: ''
+ },
+ computed: {
+ filteredJobs() {
+ let jobs = this.jobs;
+ return this.$options.filters.filterBy(jobs, this.search);
+ }
+ },
+ filters: {
+ filterBy: function (list, value) {
+ if (value === "") {
+ return list
+ }
+ value = value.toLowerCase()
+ return list.filter(function(item) {
+ for (var k in item) {
+ if (item[k].toString().toLowerCase().indexOf(value) > -1) {
+ return true
+ }
+ }
+ return false;
+ });
+ }
+ },
+ methods: {
+ update_processing_job_data: function () {
+ let vm = this;
+ $.ajax({
+ url: "{% raw qiita_config.portal_dir %}/user/jobs/",
+ success(response) {
+ if (typeof response.jobs === 'undefined' || response.status !== 'success') {
+ vm.jobs = []
+ } else {
+ vm.jobs = response.jobs;
+ }
+ }
+ });
+ }
+ },
+ mounted() {
+ let vm = this;
+ setInterval(function (){
+ // the div is hidden
+ if ($("#qiita-main").width() != $("#qiita-main").parent().width()) {
+ vm.update_processing_job_data();
+ }
+ }, 30000);
+ }
+ });
+ });
+
+
{% block head %}{% end %}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% if user %}
+
+ Analysis
+
+
+
+ Study
+
+
+ {% set user_level = user.level %}
+ {% if user_level == 'admin' %}
+
+ Admin
+
+
+ {% elif user_level == 'dev' %}
+
+ Dev
+
+
+ {% end %}
+ {% end %}
+
+
{% if user %}
-
- Analysis
-
-
-
- Study
-
-
- {% set user_level = user.level %}
- {% if user_level == 'admin' %}
-
- Admin
-
+
+
+
+
+
+
+ {% elif maintenance is None %}
+
+
+
{% end %}
-
-
- {% if user %}
-
-
- {% elif maintenance is None %}
-
-
-
+
+
+
+
+
+
+ {% if message != '' %}
+ {% if level not in {'danger', 'success', 'info', 'warning'} %}
+ {% set level = 'info' %}
{% end %}
-
-
-
+ {% block content %}{% end %}
- {% if message != '' %}
-
-
×
-
- {% raw message %}
-
+
+
+
+
This site only works with the following browsers
+
Chrome >= {{allowed_min_browser_versions['chrome']}}: You can download Chrome from here or you can find instructions on how to update it here
+ {% if 'safari' in allowed_min_browser_versions %}
+
Safari >= {{allowed_min_browser_versions['safari']}}: You can update Safari following these instructions.
+ {% end %}
+ {% if 'firefox' in allowed_min_browser_versions %}
+
Firefox >= {{allowed_min_browser_versions['firefox']}}: For instructions on how to install or update Firefox go here.
+ {% end %}
+ {% if 'IE' in allowed_min_browser_versions %}
+
Internet Explorer >= {{allowed_min_browser_versions['IE']}}: For instructions on how to update IE go here.
+ {% end %}
- {% end %}
-
-
-
- {% block content %}{% end %}
-
-
-
-
This site only works with the following browsers
-
Chrome >= {{allowed_min_browser_versions['chrome']}}: You can download Chrome from here or you can find instructions on how to update it here
- {% if 'safari' in allowed_min_browser_versions %}
-
Safari >= {{allowed_min_browser_versions['safari']}}: You can update Safari following these instructions.
- {% end %}
- {% if 'firefox' in allowed_min_browser_versions %}
-
Firefox >= {{allowed_min_browser_versions['firefox']}}: For instructions on how to install or update Firefox go here.
- {% end %}
- {% if 'IE' in allowed_min_browser_versions %}
-
Internet Explorer >= {{allowed_min_browser_versions['IE']}}: For instructions on how to update IE go here.
- {% end %}
+
+