Update files table in Projects

apps/dashboard/app/assets/stylesheets/projects.scss

@@ -2,6 +2,14 @@
   vertical-align: middle !important;
 }
 
+th.d-above-xl, td.d-above-xl {
+  display: none;
+
+  @media (min-width: 1200px) {
+    display: table-cell;
+  }
+}
+
 .project-card {
   width: fit-content;
 }
@@ -119,6 +127,7 @@
 
   .job-popup {
     position: absolute;
+    z-index: 1;  
     left: 5.75%;
     width: 88.5%; // 2*left + width should always = 100
 

apps/dashboard/app/javascript/files/data_table.js

@@ -3,6 +3,7 @@ import { getGlobusLink, updateGlobusLink } from './globus.js';
 import { downloadEnabled } from '../config.js';
 export { CONTENTID, EVENTNAME };
 import { OODAlertError } from '../alert.js';
+import { toHumanSize } from '../utils.js';
 
 const EVENTNAME = {
     getJsonResponse: 'getJsonResponse',
@@ -178,15 +179,6 @@ class DataTable {
         return this._table;
     }
 
-    toHumanSize(number) {
-      if(number === null) {
-        return '-';
-      } else {
-        const unitIndex = number == 0 ? 0 : Math.floor(Math.log(number) / Math.log(1000));
-        return `${((number / Math.pow(1000, unitIndex)).toFixed(2))} ${['B', 'kB', 'MB', 'GB', 'TB', 'PB'][unitIndex]}`;
-      }
-    }
-
     loadDataTable() {
         this._table = $(CONTENTID).on('xhr.dt', function (e, settings, json, xhr) {
             // new ajax request for new data so update date/time
@@ -233,7 +225,7 @@ class DataTable {
                 {
                     data: 'size',
                     render: (data, type, row, meta) => {
-                        return type == "display" ? this.toHumanSize(row.size) : data;
+                        return type == "display" ? toHumanSize(row.size) : data;
                     }
                 }, // human_size
                 {

apps/dashboard/app/javascript/projects.js

@@ -1,6 +1,6 @@
 import { rootPath } from './config.js';
 import { replaceHTML } from './turbo_shim';
-
+import { toHumanSize } from './utils.js';
 
 jQuery(function() {
   $('[data-job-poller="true"]').each((_index, ele) => {
@@ -10,8 +10,17 @@ jQuery(function() {
   $("[data-bs-toggle='project']").each((_index, ele) => {
     updateProjectSize(ele);
   });
+
+  document.addEventListener('turbo:frame-render', onTurboFrameLoad);  
 });
 
+function onTurboFrameLoad() {
+  $("td.update-to-human-size").each((_index, ele) => {
+    updateFileSize(ele);
+  });
+}
+
+
 function jobDetailsPath(cluster, jobId) {
   const baseUrl = rootPath();
   const config = document.getElementById('project_config');
@@ -111,3 +120,7 @@ function updateProjectSize(element) {
     }
   });
 }
+
+function updateFileSize(ele) {
+  ele.textContent = toHumanSize(ele.textContent, 0);
+}

apps/dashboard/app/javascript/utils.js

@@ -21,6 +21,15 @@ export function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+export function toHumanSize(number, precision = 2) {
+  if(number === null) {
+    return '-';
+  } else {
+    const unitIndex = number == 0 ? 0 : Math.floor(Math.log(number) / Math.log(1000));
+    return `${((number / Math.pow(1000, unitIndex)).toFixed(precision))} ${['B', 'kB', 'MB', 'GB', 'TB', 'PB'][unitIndex]}`;
+  }
+}
+
 export function startOfYear() {
   const now = new Date();
   const past = new Date();

apps/dashboard/app/views/files/turbo_frames/_directory.html.erb

@@ -1,23 +1,30 @@
 <%= turbo_frame_tag "project_directory" do %>
-  <div class="d-flex justify-content-left lead text-weight-800 text-break">
-    <strong><%= frame_path(path)  %></strong>
+  <div class="d-flex justify-content-center lead text-weight-800 text-break">
+    <strong class="mx-2"><%= frame_path(path)  %></strong>
   </div>
   <table class="table table-striped table-condensed w-100 table-hover caption-right">
     <thead>
       <tr>
-        <th>Type</th>
+        <th></th>
         <th>Name</th>
-        <th>Size</th>
-        <th>Date</th>
-        <th>Owner</th>
-        <th>Mode</th>
+        <th><span class="sr-only">Actions</span></th>
+        <% private_dir = path.to_s.start_with?(CurrentUser.home) %>
+        <% if private_dir %>
+          <th>Size</th>
+          <th>Date</th>
+        <% else %>
+          <th class='d-above-xl'>Size</th>
+          <th class='d-above-xl'>Date</th>
+          <th>Owner</th>
+          <th>Mode</th>
+        <% end %>
       </tr>
     </thead>
     <tbody>
-        <%= render partial: "files/turbo_frames/files", locals: { path: path, files: files } %>
+        <%= render partial: "files/turbo_frames/files", locals: { path: path, files: files, private_dir: private_dir } %>
     </tbody>
   </table>
   <div class="row content-justied-center col-6 mx-auto ">
     <%= files_button(path) %>
   </div>
-<% end %>
+<% end %>

apps/dashboard/app/views/files/turbo_frames/_files.html.erb

@@ -16,7 +16,10 @@
     </strong>
   </td>
   <td></td>
-  <td></td>
+<% unless private_dir %>
+  <td class="d-above-xl"></td>
+  <td class="d-above-xl"></td>
+<% end%>
   <td></td>
   <td></td>
 </tr>
@@ -25,39 +28,87 @@
     <td>
       <i class="fa <%= file[:directory] ? 'fa-folder' : 'fa-file' %>">
     </td>
-    <td>
-      <%- if file[:directory] -%>
+    <% full_path = "#{path}/#{file[:name]}" %>
+    <%- if file[:directory] -%>
+      <td>
         <%= link_to(
           file[:name], 
           directory_frame_path(
-            path: "#{path}/#{file[:name]}"
+            path: full_path
           ),
           title: "Show #{file[:name]} directory",
           data: { turbo_frame: "project_directory" }
         )
         %>
-      <%- else -%>
+      </td>
+      <td></td>
+    <%- else -%>
+      <td>
         <%= 
           link_to(
             file[:name],
-            files_path("#{path}/#{file[:name]}"),
+            files_path(full_path),
             format: :html,
             target: "_top",
           )
         %>
-      <%- end -%>
-    </td>
-    <td>
+      </td>
+      <td class="p-0 py-1">
+        <div class="btn-group actions-btn-group">
+          <button type="button"
+                  class="actions-btn btn btn-outline-dark btn-sm dropdown-toggle"
+                  data-bs-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false">
+            <span class="fa fa-ellipsis-v"></span>
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="actionsDropdown_<%= h full_path %>">
+            <li>
+              <%= link_to files_path(full_path, format: :html),
+                          target: '_top',
+                          class: 'view-file dropdown-item',
+                          data: { row_index: nil } do %>
+                <i class="fas fa-eye" aria-hidden="true"></i>
+                View
+              <% end %>
+            </li>
+
+            <% if file[:downloadable] %>
+              <li>
+                <%= link_to OodAppkit.editor.edit(path: full_path).to_s,
+                            target: '_top',
+                            class: 'edit-file dropdown-item' do %>
+                  <i class="fas fa-edit" aria-hidden="true"></i>
+                  Edit
+                <% end %>
+              </li>
+
+              <li>
+                <%= link_to files_path(full_path, download: '1'),
+                            target: '_top',
+                            class: 'download-file dropdown-item' do %>
+                  <i class="fas fa-download" aria-hidden="true"></i>
+                  Download
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      </td>
+    <%- end -%>
+    <td class="<%= file[:directory] ? '' : 'update-to-human-size' %> <%= private_dir ? '' : 'd-above-xl' %>">
       <%= file[:size] %>
     </td>
-    <td>
+    <td class="<%= private_dir ? '' : 'd-above-xl' %>">
       <%= DateTime.parse(Time.at(file[:date]).to_s).strftime("%F %r") %>
     </td>
-    <td>
-      <%= file[:owner] %>
-    </td>
-    <td>
-      <%= file[:mode] %>
-    </td>
+    <% unless private_dir %>
+      <td>
+        <%= file[:owner] %>
+      </td>
+      <td>
+        <%= file[:mode].to_s(8).rjust(3,'0')[-3..] %>
+      </td>
+    <% end %>
   </tr>
-<%- end -%>
+<%- end -%>

apps/dashboard/app/views/projects/show.html.erb

@@ -77,7 +77,7 @@
       </div>
     </div>
     <div class="col-12 col-lg-7 jobs-files-item">
-      <div id="directory_browser" class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
+      <div id="directory_browser" class="border border-2 px-1 py-3 mt-3 mb-5 bg-white rounded">
         <h2 class="lead fw-bolder d-flex justify-content-center"><%= "#{t('dashboard.project')} #{t('dashboard.directory')}" %>: &nbsp<i><%= @project.id %></i></h2>
         <hr>
         <%= turbo_frame_tag 'project_directory',