A list of running notes on genstat index page

run_dir/design/index.html

@@ -54,38 +54,23 @@ <h6 class="dropdown-header">User Presets</h6>
   </div>
 
   <div class="row pt-5">
-    <div class="col-lg-7">
-      <h3>Longest waiting projects</h3>
-      <div class="scroll-body">
-        <table class="table table-bordered sortable" id="prio_projs_table">
-          <thead id="prio_projs_table_head">
-            <tr class="sticky darkth">
-              <th class="sort">Project:</th>
-              <th class="sort">Library:</th>
-              <th class="sort">Status:</th>
-              <th class="sort">Days waiting:</th>
-            </tr>
-          </thead>
-          <tbody id="prio_projs_table_body"></tbody>
-        </table>
-      </div>
+    <div class="col-lg-8 pr-4" id="vue_index_main">
+      <v-running-notes-list :user="{email: '{{user.email}}', user: '{{user.name}}'}" :partition_id="null"></v-running-notes-list-decoupled>
     </div>
 
-    <div class="col-lg-5">
-      <h3>Server Status</h3>
+    <div class="col-lg-4">
+    <h3>Server Status</h3>
       <table class="table table-bordered table-disk-quotas">
         <thead>
           <tr class="darkth">
             <th>Server</th>
-            <th>Instrument</th>
             <th>Disk (Used / Quota)</th>
           </tr>
         </thead>
         <tbody>
           {% for server, status in server_status %}
           <tr>
             <td>{{ server }}</td>
-            <td>{{ status.get('instrument') }}</td>
             <td class="disk-quotas-highcharts {{ status.get('css_class') }}"><div class="wrapper"><span class="val" style="width:{{ status.get('used_percentage') }};">
               <span>{{ status.get('space_used') }}</span></span>
               <span class="percent float-right">{{ status.get('disk_size') }}</span></div>
@@ -97,11 +82,13 @@ <h3>Server Status</h3>
     </div>
   </div>
 </div>
-
+<script src="/static/js/vue.v3.2.47.global.prod.js"></script>
+<script src="/static/js/axios.v1.3.4.min.js"></script>
+<script src="/static/js/external/textarea-caret.3.1.0.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
 <script type="text/javascript" src="/static/js/index.js?v={{ gs_globals['git_commit'] }}" id="indexpage-js-import"></script>
 <script src="/static/js/dataTables-extensions-1.13.6.min.js"></script>
-
+<script type="module" src="/static/js/index_vue.js"></script>
 {% end %}
 
 {% end %}

run_dir/design/project_samples.html

@@ -9,9 +9,11 @@
 
 
 {% block stuff %}
+<div class="container-xxl">
 
-<div id="v_projects_main">
-    <v-project-details project_id="{{project_id}}" :user="{email: '{{user.email}}', user: '{{user.name}}'}" :single_project_mode="true" :as_modal="false"/>
+    <div id="v_projects_main">
+        <v-project-details project_id="{{project_id}}" :user="{email: '{{user.email}}', user: '{{user.name}}'}" :single_project_mode="true" :as_modal="false"/>
+    </div>
 </div>
 {% end %}
 

run_dir/static/js/index.js

@@ -41,99 +41,11 @@ const fill_sensorpush_status_field = () => {
     });
 };
 
-const fill_prioprojs_table = () => {
-    //Get projects that have been waiting the longest
-    $.getJSON("api/v1/prio_projects", (data) => {
-        $("#prio_projs_table_body").empty();
-        data.forEach((project) => {
-            const check_value = Math.abs(project[2]);
-            let day_color = '';
-            let stat_color = '';
-            let status = '';
-            switch (project[1]) {
-                case 'days_recep_ctrl':
-                    day_color = check_value > 7 ? (check_value > 14 ? 'text-danger' : 'text-orange') : 'text-success';
-                    stat_color = 'text-recep';
-                    status = 'In reception control';
-                    break;
-                case 'days_prep_start':
-                    day_color = check_value > 7 ?  (check_value > 10 ? 'text-danger': 'text-orange') :'text-success';
-                    stat_color = 'text-prep-start';
-                    status = 'To prep';
-                    break;
-                case 'days_prep':
-                    day_color = check_value > 7 ? (check_value > 10 ? 'text-danger': 'text-orange') :'text-success';
-                    stat_color = 'text-prep';
-                    status = 'In prep';
-                    break;
-                case 'days_seq_start':
-                    day_color = check_value > 7 ? (check_value > 10 ? 'text-danger': 'text-orange') :'text-success';
-                    stat_color = 'text_seq_start';
-                    status = 'To sequencing';
-                    break;
-                case 'days_seq':
-                    day_color = check_value > 7 ? (check_value > 10 ? 'text-danger': 'text-orange') : 'text-success';
-                    stat_color = 'text-seq';
-                    status = 'In sequencing';
-                    break;
-                case 'days_analysis':
-                    day_color = check_value > 7 ? (check_value > 10 ? 'text-danger': 'text-orange') : 'text-success';
-                    stat_color = 'text-analysis';
-                    status = 'In analysis';
-                    break;
-                case 'days_data_delivery':
-                    day_color = check_value > 7 ? (check_value > 10 ? 'text-danger': 'text-orange') : 'text-success';
-                    stat_color = 'text-delivery';
-                    status = 'In delivery';
-                    break;
-                case 'days_close':
-                    day_color = check_value > 7 ? (check_value > 10 ? 'text-danger': 'text-orange') : 'text-success';
-                    stat_color = 'text-close';
-                    status = 'To close';
-                    break;
-            }
-            const projectLibrary = project[0].split('|');
-            const library = projectLibrary[1];
-            const nameProjId = projectLibrary[0].replace('(', '').replace(')', '').split(' ');
-            const tblRow = `<tr><td><a href="/project/${nameProjId[1]}">${nameProjId[1]}</a></td>` +
-                `<td>${library}</td><td><span class="${stat_color}">${status}</span></td>` +
-                `<td><span class="${day_color}">${check_value}</span></td></tr>`;
-            $("#prio_projs_table_body").append(tblRow);
-        });
-        init_listjs();
-    });
-};
-
-const init_listjs = () => {
-    const table = $('#prio_projs_table').DataTable({
-        paging: false,
-        destroy: true,
-        info: false,
-        order: [[3, "desc"]],
-        searching: false,
-    });
-    //Add the bootstrap classes to the search thingy
-    $('div.dataTables_filter input').addClass('form-control search search-query');
-    $('#prio_projs_table_filter').addClass('form-inline float-right');
-    $("#prio_projs_table_filter").appendTo("h1");
-    $('#prio_projs_table_filter label input').appendTo($('#prio_projs_table_filter'));
-    $('#prio_projs_table_filter label').remove();
-    $("#prio_projs_table_filter input").attr("placeholder", "Search..");
-    // Apply the search
-    table.columns().every(function() {
-        const that = this;
-        $('input', this.footer()).on('keyup change', function() {
-            that.search(this.value).draw();
-        });
-    });
-};
-
 $('body').on('click', '.group', (event) => {
     $($("#prio_projs_table").DataTable().column(0).header()).trigger("click");
 });
 
 $(document).ready(() => {
     fill_last_updated_text();
     fill_sensorpush_status_field();
-    fill_prioprojs_table();
 });

run_dir/static/js/index_vue.js

@@ -0,0 +1,8 @@
+import { vRunningNotesList, vRunningNoteSingle } from './running_notes_component.js'
+
+const vIndex = {}
+
+const app = Vue.createApp(vIndex)
+app.component('v-running-notes-list', vRunningNotesList)
+app.component('v-running-note-single', vRunningNoteSingle)
+app.mount('#vue_index_main')

run_dir/static/js/projects_main_vue.js

@@ -1,6 +1,6 @@
 import {vProjectCards, vProjectDataField, vProjectDetails} from './projects_components.js'
 import { getDropdownPosition } from './smart_suggestion.js';
-import { vRunningNotesTab, vRunningNoteSingle } from './running_notes_component.js'
+import { vRunningNotesTab, vRunningNotesList, vRunningNoteSingle } from './running_notes_component.js'
 
 
 const vProjectsStatus = {
@@ -440,5 +440,6 @@ app.component('v-project-data-field-tooltip', vProjectDataField)
 app.component('v-projects-cards', vProjectCards)
 app.component('v-project-details', vProjectDetails)
 app.component('v-running-note-single', vRunningNoteSingle)
+app.component('v-running-notes-list', vRunningNotesList)
 app.component('v-running-notes-tab', vRunningNotesTab)
 app.mount('#v_projects_main')