Updated XDMoD analytics rendering to remove nested tables

OSC · Sep 12, 2024 · 80453a6 · 80453a6
1 parent e5604a8
commit 80453a6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/apps/dashboard/app/assets/stylesheets/xdmod.scss b/apps/dashboard/app/assets/stylesheets/xdmod.scss
@@ -17,4 +17,17 @@
   tr[aria-expanded=false] .open {
     display: none;
   }
+
+  .job-analytics {
+    padding: 0.50rem 0.25rem;
+
+    span {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+    strong {
+      font-weight: 600;
+    }
+  }
 }
diff --git a/apps/dashboard/app/javascript/xdmod.js b/apps/dashboard/app/javascript/xdmod.js
@@ -2,12 +2,13 @@
 import _ from 'lodash';
 import {xdmodUrl, analyticsPath} from './config';
 import {today, startOfYear, thirtyDaysAgo} from './utils';
-import { jobsPanel, jobAnalyticsTable } from './xdmod/jobs';
+import { jobsPanel, jobAnalyticsHtml } from './xdmod/jobs';
 import Handlebars from 'handlebars';
 
 const jobsPageLimit = 10;
 
 const jobHelpers = {
+  realm: 'Jobs',
   title: function(){
     return "Recently Completed Jobs";
   },
@@ -44,7 +45,7 @@ const jobHelpers = {
 
     return `${month}/${day}`;
   },
-  job_url: function(id){ return `${xdmodUrl()}/#job_viewer?action=show&realm=SUPREMM&jobref=${id}`;  },
+  job_url: function(id){ return `${xdmodUrl()}/#job_viewer?action=show&realm=${this.realm}&jobref=${id}`;  },
   efficiency_label: function(efficiencyValue, inverse = false){
     const value = (parseFloat(efficiencyValue)*100).toFixed(1);
     let label = "N/A";
@@ -153,6 +154,7 @@ var promiseLoggedIntoXDMoD = (function(){
       })
       .then((user_data) => {
         if(user_data && user_data.success && user_data.results && user_data.results.person_id){
+          jobHelpers.realm = user_data.results.raw_data_allowed_realms?.includes('SUPREMM') ? 'SUPREMM' : 'Jobs';
           return Promise.resolve(user_data);
         }
         else{
@@ -169,7 +171,7 @@ function jobsUrl(user){
   url.searchParams.set('_dc', Date.now());
   url.searchParams.set('start_date', thirtyDaysAgo());
   url.searchParams.set('end_date', today());
-  url.searchParams.set('realm', user?.results?.raw_data_allowed_realms?.includes('SUPREMM') ? 'SUPREMM' : 'Jobs');
+  url.searchParams.set('realm', jobHelpers.realm);
   url.searchParams.set('limit', jobsPageLimit);
   url.searchParams.set('start', 0);
   url.searchParams.set('verbose', true);
@@ -180,7 +182,7 @@ function jobsUrl(user){
 function jobAnalyticsUrl(jobId){
   let url = new URL(`${xdmodUrl()}/rest/v1.0/warehouse/search/jobs/analytics`);
   url.searchParams.set('_dc', Date.now());
-  url.searchParams.set('realm', 'SUPREMM');
+  url.searchParams.set('realm', jobHelpers.realm);
   url.searchParams.set('jobid', jobId);
   return url;
 }
@@ -219,8 +221,8 @@ function renderJobs(context) {
 }
 
 function renderJobAnalytics(jobAnalytics, containerId) {
-  const analyticsTable = jobAnalyticsTable(jobAnalytics, jobHelpers)
-  $(containerId).html(analyticsTable);
+  const analyticsHtml = jobAnalyticsHtml(jobAnalytics, jobHelpers)
+  $(containerId).html(analyticsHtml);
 }
 
 function renderJobsEfficiency(context) {
@@ -329,7 +331,7 @@ jQuery(() => {
   // initialize the panels
   renderJobs({ loading: true });
 
-  $('#jobsPanelDiv').on('click', 'tr[data-xdmod-jobid][aria-expanded="true"]', function(event) {
+  $(`#${jobPanelId}`).on('click', 'tr[data-xdmod-jobid][aria-expanded="true"]', function(event) {
     const jobId = event.currentTarget.getAttribute("data-xdmod-jobid");
     addAnalyticsToJob(jobId)
   });

diff --git a/apps/dashboard/app/javascript/xdmod/jobs.js b/apps/dashboard/app/javascript/xdmod/jobs.js
@@ -9,7 +9,7 @@ export function jobsPanel(context, helpers){
   return div;
 }
 
-export function jobAnalyticsTable(context, jobHelpers) {
+export function jobAnalyticsHtml(context, jobHelpers) {
   if(context.error !== undefined) {
     return errorBody(context.error, jobHelpers);
   }
@@ -21,10 +21,12 @@ export function jobAnalyticsTable(context, jobHelpers) {
   const cpuEfficiency = jobHelpers.efficiency_label(dataByKey['CPU User']?.value, false)
   const memEfficiency = jobHelpers.efficiency_label(dataByKey['Memory Headroom']?.value, true)
   const walltimeEfficiency = jobHelpers.efficiency_label(dataByKey['Walltime Accuracy']?.value, false)
-  const analyticsContent = `<td>${cpuEfficiency}</td>
-                            <td>${memEfficiency}</td>
-                            <td>${walltimeEfficiency}</td>`;
-  return analyticsTable(analyticsContent);
+  const analyticsContent = `<div class="job-analytics">
+                                <span><strong>CPU:</strong> ${cpuEfficiency}</span>
+                                <span><strong>Mem:</strong> ${memEfficiency}</span>
+                                <span><strong>Walltime:</strong> ${walltimeEfficiency}</span>
+                            </div>`;
+  return analyticsContent
 }
 
 function card(context, helpers) {
@@ -96,6 +98,7 @@ function table(context, helpers) {
   tableElement.classList.add('table', 'table-sm', 'table-striped', 'table-condensed');
 
   const thead = document.createElement('thead');
+  // Empty th to accommodate for the job analytics button
   thead.innerHTML = '<tr> \
                       <th></th> \
                       <th>ID</th> \
@@ -173,11 +176,12 @@ function tableRows(context, helpers) {
 
     // Add job analytics placeholder
     const analyticsRow = document.createElement('tr');
-    const analyticsData = analyticsTable('<td colspan="3">LOADING...</td>')
     analyticsRow.innerHTML = `
       <td colspan="4" class="hiddenRow">
         <div class="collapse" id="details_${job.jobid}">
-          ${analyticsData}
+          <div class="job-analytics">
+            <span>LOADING...</span>
+          </div>
         </div>
       </td>`;
     rows.push(analyticsRow);
@@ -186,25 +190,6 @@ function tableRows(context, helpers) {
   return rows;
 }
 
-function analyticsTable(analyticsContent) {
-  const analyticsTable = `
-      <table class="table table-sm table-condensed">
-        <thead>
-        <tr>
-          <th>CPU</th>
-          <th>Mem</th>
-          <th>Walltime</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          ${analyticsContent}
-        </tr>
-        </tbody>
-      </table>`;
-  return analyticsTable;
-}
-
 function jobLink(url, id){
   const a = document.createElement('a');
   a.href = url;