Status has now a waiting time (#599)

* Status has now a waiting time

* Waiting time is now dynamic

Author: ArneTR

api/api_helpers.py

@@ -81,10 +81,27 @@ def html_escape_multi(item):
 
 def get_machine_list():
     query = """
-            SELECT id, description, available
-            FROM machines
-            ORDER BY description ASC
+        WITH timings as (
+            SELECT
+                machine_id,
+                AVG(end_measurement - start_measurement)/1000000 as avg_duration
+            FROM runs
+            WHERE
+                end_measurement IS NOT NULL
+                AND created_at > NOW() - INTERVAL '30 DAY'
+            GROUP BY machine_id
+        ) SELECT
+                m.id, m.description, m.available,
+                m.status_code,
+                m.updated_at,
+                m.sleep_time_after_job,
+                (SELECT COUNT(id) FROM jobs as j WHERE j.machine_id = m.id AND j.state = 'WAITING') as job_amount,
+                (SELECT avg_duration FROM timings WHERE timings.machine_id = m.id )::int as avg_duration_seconds
+
+            FROM machines as m
+            ORDER BY m.description DESC
             """
+
     return DB().fetch_all(query)
 
 def get_run_info(run_id):

docker/structure.sql

@@ -8,6 +8,8 @@ CREATE TABLE machines (
     id SERIAL PRIMARY KEY,
     description text,
     available boolean DEFAULT false,
+    status_code text,
+    sleep_time_after_job integer,
     created_at timestamp with time zone DEFAULT now(),
     updated_at timestamp with time zone
 );

frontend/css/green-coding.css

@@ -115,13 +115,12 @@ Thanks to https://css-tricks.com/transitions-only-after-page-load/ */
 /* Handle collapsing on click or on small window */
 a,
 #menu {
-    -webkit-transition: left 300ms ease-in-out;
-    transition: left 300ms ease-in-out;
-
+    -webkit-transition: left 75ms ease-in-out;
+    transition: left 75ms ease-in-out;
 }
 #main {
-    -webkit-transition: margin-left 300ms ease-in-out;
-    transition: margin-left 300ms ease-in-out;
+    -webkit-transition: margin-left 75ms ease-in-out;
+    transition: margin-left 75ms ease-in-out;
 
 }
 
@@ -262,4 +261,4 @@ a,
 
 .wide.card {
     width: 400px !important;
-}
+}

frontend/js/helpers/main.js

@@ -165,26 +165,29 @@ async function makeAPICall(path, values=null) {
 /* Menu toggling */
 let openMenu = function(e){
     $(this).removeClass('closed').addClass('opened');
-    $(this).find('i').removeClass('right').addClass('left');
     $('#menu').removeClass('closed').addClass('opened');
     $('#main').removeClass('closed').addClass('opened');
     setTimeout(function(){window.dispatchEvent(new Event('resize'))}, 500) // needed for the graphs to resize
+    localStorage.setItem('menu_closed', false)
+
 }
 
 let closeMenu = function(e){
     $(this).removeClass('opened').addClass('closed');
-    $(this).find('i').removeClass('left').addClass('right');
     $('#menu').removeClass('opened').addClass('closed');
     $('#main').removeClass('opened').addClass('closed');
     setTimeout(function(){window.dispatchEvent(new Event('resize'))}, 500) // needed for the graphs to resize
+    localStorage.setItem('menu_closed', true)
 }
 
 $(document).ready(function () {
     $(document).on('click','#menu-toggle.closed', openMenu);
     $(document).on('click','#menu-toggle.opened', closeMenu);
 
-    if ($(window).width() < 960) {
+    if ($(window).width() < 960 || localStorage.getItem('menu_closed') == 'true') {
         $('#menu-toggle').removeClass('opened').addClass('closed');
+        $('#menu').removeClass('opened').addClass('closed');
+        $('#main').removeClass('opened').addClass('closed');
     }
 });
 

frontend/js/status.js

@@ -16,5 +16,28 @@ $(document).ready(function () {
             deferRender: true,
             order: [[7, 'desc']] // API also orders, but we need to indicate order for the user
         });
+        $('#machines-table').DataTable({
+            ajax: `${API_URL}/v1/machines`,
+            searching: false,
+            columns: [
+                { data: 0, title: 'ID'},
+                { data: 1, title: 'Name'},
+                { data: 2, title: 'Available'},
+                { data: 3, title: 'Status'},
+                { data: 4, title: 'Status date'},
+                { data: 5, title: 'Cooldown after Job', render: function(el) {
+                    return (el == null) ? 'awaiting info': `${el/60} Minutes`;
+                }},
+                { data: 6, title: 'Waiting Jobs'},
+                { data: 7, title: 'Estimated waiting time', render: function(el, type, row) {
+
+                    return (row[5] == null || row[7] == null) ? 'awaiting info' : `${( (row[7]+row[5]) * row[6]) / 60} Minutes`
+                }},
+            ],
+            deferRender: true,
+            //order: [[7, 'desc']] // API also orders, but we need to indicate order for the user
+        });
+
+
     })();
 });

frontend/status.html

@@ -44,6 +44,9 @@ <h1 class="ui header float left">
                 </div>
             </div>
         </div>
+        <h3>Machines</h3>
+        <table id="machines-table" class="ui celled striped table"></table>
+
         <h3>Jobs queue</h3>
         <table id="jobs-table" class="ui celled striped table"></table>
     </div>

migrations/2023_12_16_status_waiting_time.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "machines" ADD COLUMN "status_code" text;
+ALTER TABLE "machines" ADD COLUMN "sleep_time_after_job" text;

tools/client.py

@@ -27,6 +27,14 @@ def set_status(status_code, data=None, run_id=None):
     params = (status_code, GlobalConfig().config['machine']['id'], data, run_id)
     DB().query(query=query, params=params)
 
+    query = """
+        UPDATE machines
+        SET status_code=%s, sleep_time_after_job=%s
+        WHERE id = %s
+    """
+    params = (status_code, GlobalConfig().config['client']['sleep_time_after_job'], GlobalConfig().config['machine']['id'])
+    DB().query(query=query, params=params)
+
 
 # pylint: disable=broad-exception-caught
 if __name__ == '__main__':