🤴🏾 Jobs priorisation UI

package.json

@@ -32,7 +32,7 @@
     "shake.js": "^1.2.2",
     "sirv-cli": "^2.0.2",
     "svelte": "^3.55.0",
-    "svelte-scrollto": "0.2.0",
+    "svelte-scrolling": "1.4.0",
     "web-streams-polyfill": "^3.2.1",
     "yamljs": "^0.3.0"
   }

src/components/tools/routes.js

@@ -41,7 +41,7 @@ export const routes = {
     },
     '/about': { component: Default, props: {title: 'À propos'}, title: 'À propos', desc: 'À propos de matchID: conditions légales données et code opensource, foire aux questions, documentation de l\'API, statistiques de consultation, ...'},
     '/link': { component: Link, title: 'Appariement', desc: 'matchID permet l\'appariement de votre fichier client, jusque 1 million d\'enregistrements, au fichier des décès de l`INSEE' },
-    '/jobs': { auth: true, component: LinkJobs, title: 'Traitements', desc: 'page d\'administration des traitements' },
+    '/jobs': { component: LinkJobs, title: 'Traitements', desc: 'page d\'administration des traitements' },
     '/edits': { auth: true, component: EditsList, title: 'Modifications', desc: 'page d\'administration des modifications' },
     '/stats': { component: Stats, title: 'statistiques de fréquentation', desc: 'statistiques de consultation de deces.matchid.io: visiteurs uniques, appels API, ... historique depuis début 2020' },
     '/explain': { component: AlgoDetails, title: 'Explication de l\'algorithme', desc: 'détails sur l\'algorithme d\'appariement' },

src/components/views/EditsList.svelte

@@ -112,7 +112,7 @@
 
 <script>
     import { onMount } from 'svelte';
-    import * as animateScroll from 'svelte-scrollto';
+    import { scrollTo } from 'svelte-scrolling'
     import ResultCard from './ResultCard.svelte';
     import Icon from './Icon.svelte';
     import StatsTile from './StatsTile.svelte';
@@ -152,7 +152,7 @@
             location.hash = id;
             $route.hash = location.hash;
             setTimeout(() => {
-                animateScroll.scrollTo({element: `#${id}`, delay: 400});
+                scrollTo({ref: `#${id}`, duration: 400});
             }, 400);
         };
     };
@@ -168,4 +168,4 @@
     td {
         vertical-align: middle;
     }
-</style>
+</style>

src/components/views/Info.svelte

@@ -60,7 +60,7 @@
 
 <script>
   import { onMount } from 'svelte';
-  import * as animateScroll from 'svelte-scrollto';
+  import { scrollTo } from 'svelte-scrolling'
   import { slide } from 'svelte/transition';
   import { version, themeDnum, route } from '../tools/stores.js';
   import Icon from './Icon.svelte';
@@ -499,7 +499,7 @@
       $route.hash = location.hash;
       if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
         setTimeout(() => {
-          animateScroll.scrollTo({element: `#${id}`, duration: 400});
+          scrollTo({ref: `#${id}`, duration: 400});
         }, 400);
       };
     };

src/components/views/LinkConfigureOptions.svelte

@@ -96,6 +96,7 @@
                 quote: {size:3,label: "Délimiteur", options:[['aucun', undefined],['guillemets doubles (")','"'],["guillemets simples (')","'"]]},
                 skipLines: {label: "Lignes sautées:", options: [['aucune',0],[1,1],[2,2],[3,3],[4,4],[5,5]]},
                 dateFormat: {size: 3,label: "Format des dates", options:[['dd/MM/yyyy','dd/MM/yyyy'],['yyyy-MM-dd','yyyy-MM-dd'],['yyyyMMdd','yyyyMMdd'],['ddMMyyyy','ddMMyyyy'],['dd-MM-yyyy','dd-MM-yyyy'],['yyyy/MM/dd']]},
+                tmpfilePersistence: {size: 2,label: "Temps de persistence du fichier", options:[['1 minute','60000'],['1 heure','3600000'],['4 heures','14400000'],['8 heures','28800000']]},
             }
         },
         api: {

src/components/views/LinkJob.svelte

@@ -158,6 +158,7 @@
         formData.append('candidateNumber', $linkOptions.api.candidateNumber);
         formData.append('pruneScore', $linkOptions.api.pruneScore);
         formData.append('dateFormat', $linkOptions.csv.dateFormat || 'dd/MM/yyyy');
+        formData.append('tmpfilePersistence', $linkOptions.csv.tmpfilePersistence);
         Object.keys($linkMapping && $linkMapping.reverse).map(k => formData.append(k,$linkMapping.reverse[k]));
         if ($linkOptions.csv.type === 'gedcom') {
             formData.append('csv', new Blob([$linkOptions.csv.csv], {type: 'text/csv;charset=utf-8;'}));

src/components/views/LinkJobs.svelte

@@ -1,4 +1,4 @@
-{#if $admin && ready}
+{#if ready}
     <div class="rf-container rf-padding-top-2N">
         <div class="rf-grid-row">
             <div class="rf-col-xl-2 rf-col-lg-2 rf-col-md-12 rf-col-sm-12 rf-col-xs-12">
@@ -31,7 +31,7 @@
                                     Math.floor(
                                         jobs.filter(j => j.status === 'completed').map(j =>j.rows).reduce((a,b) => a+b)
                                         /
-                                        jobs.filter(j => j.status === 'completed').map(j =>j.delay).reduce((a,b) => a+b)
+                                        jobs.filter(j => j.status === 'completed').map(j =>j.processing_time).reduce((a,b) => a+b)
                                     )
                                 }
                                 label="Lignes / Seconde"/>
@@ -53,7 +53,9 @@
                         <table class="rf-table rf-table--narrow rf-table--striped">
                             <thead>
                                 <tr>
-                                    <th>date</th>
+                                    <th>création</th>
+                                    <th>fin</th>
+                                    <th>suppression</th>
                                     <th>id</th>
                                     <th>statut</th>
                                     <th>lignes</th>
@@ -65,7 +67,9 @@
                                 {#each jobs as job, idx}
                                     <tr>
                                         <td>{job.date}</td>
-                                        <td>{job.user || job.id.substring(0,10) + '...'}</td>
+                                        <td>{job.finishedOnTime}</td>
+                                        <td>{job.deletionTime}</td>
+                                        <td>{$admin ? job.user : job.id.substring(0,10) + '...'}</td>
                                         <td>
                                             <div style="display: flex;align-items:center">
                                                 {#if job.status == 'active'}
@@ -116,17 +120,19 @@
     import StatsTile from './StatsTile.svelte';
     import axios from 'axios';
     import Icon from './Icon.svelte';
-
     import { admin, accessToken } from '../tools/stores.js';
     let jobs = [];
     let ready = false;
     let headers;
 
-    $: headers = {
+    $: {
+      headers = {
         headers: {
             Authorization: `Bearer ${$accessToken}`
         }
-    };
+      }
+      getJobsData()
+    }
 
     const statusLabel = {
         completed: 'succès',
@@ -150,6 +156,10 @@
         'lastSeenAliveDate'
     ];
 
+    const dateTostr = (_date) => {
+        const pad = (num) => num.toString().padStart(2, '0');
+        return `${_date.getFullYear()}-${pad(_date.getMonth() + 1)}-${pad(_date.getDate())} ${pad(_date.getHours())}:${pad(_date.getMinutes())}`;
+    }
 
     const getJobsData = async () => {
         let response = await fetch('__BACKEND_PROXY_PATH__/queue/jobs', headers);
@@ -173,10 +183,12 @@
                 processing_time: delay,
                 columns: validColumns.filter(c => j.data && j.data[c]),
                 processing_rate: j.processedOn && Math.floor((progress / 100) * (j.data.totalRows / delay)),
+                finishedOnTime: j.finishedOn ? dateTostr(new Date(j.finishedOn)) : 'job en cours',
+                deletionTime: j.finishedOn ? dateTostr(new Date(j.finishedOn + (j.data.tmpfilePersistence || 3600000))) : 'job en cours',
                 progress: progress
             })});
         jobs = tmpJobs.sort((a,b) => (b.date - a.date)).map(j => {
-            j.date=new Date(j.date).toISOString();
+            j.date= dateTostr(new Date(j.date));
             return j;
         });
         ready = true;
@@ -191,9 +203,6 @@
       }
     }
 
-    $: if ($admin) {
-        getJobsData();
-    }
 
 </script>
 

src/components/views/MatchIDHeader.svelte

@@ -220,8 +220,6 @@
                                                 API Key
                                             </a>
                                         </li>
-                                    {/if}
-                                    {#if $admin}
                                         <li
                                             class="rf-menu__item rf-href"
                                             class:rf-menu__item--active={!modal && ($route.path === '/jobs')}
@@ -235,6 +233,8 @@
                                                 Appariements
                                             </a>
                                         </li>
+                                    {/if}
+                                    {#if $admin}
                                         <li
                                             class="rf-menu__item rf-href"
                                             class:rf-menu__item--active={!modal && ($route.path === '/stats')}