use the vertical tabs component in the admin page

ontoportal-lirmm · Apr 8, 2024 · a12a8b6 · a12a8b6
1 parent 80c199b
commit a12a8b6
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 103 deletions.
diff --git a/app/assets/javascripts/bp_admin.js b/app/assets/javascripts/bp_admin.js
@@ -406,11 +406,11 @@ function populateOntologyRows(data) {
     var ontologyDateCreated = parseReportDate(ontology["date_created"]);
 
     if (ontology["logFilePath"] != '') {
-      bpLinks += "<a href='" + "/admin/ontologies/" + acronym + "/log' target='_blank'>Log</a>&nbsp;&nbsp;|&nbsp;&nbsp;";
+      bpLinks += "<div><a href='" + "/admin/ontologies/" + acronym + "/log' target='_blank'>Log</a> </div>";
     }
-    bpLinks += "<a href='" + BP_CONFIG.rest_url + "/ontologies/" + acronym + "?apikey=" + BP_CONFIG.apikey + "&userapikey: " + BP_CONFIG.userapikey + "' target='_blank'>REST</a>&nbsp;&nbsp;|&nbsp;&nbsp;";
+    bpLinks += "<div><a href='" + BP_CONFIG.rest_url + "/ontologies/" + acronym + "?apikey=" + BP_CONFIG.apikey + "&userapikey: " + BP_CONFIG.userapikey + "' target='_blank'>REST</a></div>";
     let title = `Ontology Submissions for ${acronym}`
-    let link = `<a id='link_submissions_${acronym}' href="/ontologies/${acronym}/submissions?container_id=application_modal_content" data-controller="show-modal" data-show-modal-title-value="${title}" data-action="click->show-modal#show" data-turbo="true" data-turbo-frame="application_modal_content">Submissions</a>`
+    let link = `<div><a id='link_submissions_${acronym}' href="/ontologies/${acronym}/submissions?container_id=application_modal_content" data-controller="show-modal" data-show-modal-title-value="${title}" data-action="click->show-modal#show" data-turbo="true" data-turbo-frame="application_modal_content">Submissions</a></div>`
     bpLinks += link
 
     var errStatus = ontology["errErrorStatus"] ? ontology["errErrorStatus"].join(", ") : '';
@@ -525,53 +525,45 @@ function displayOntologies(data, ontology) {
         {
           "targets": 0,
           "searchable": true,
-          "title": "Ontology",
-          "width": "160px"
+          "title": "Ontology"
         },
         {
           "targets": 1,
           "searchable": true,
           "title": "Admin",
-          "width": "160px"
         },
         {
           "targets": 2,
           "searchable": true,
           "title": "Format",
-          "width": "55px"
         },
         {
           "targets": 3,
           "searchable": true,
           "title": "Date Created",
           "type": "date",
-          "width": "170px"
         },
         {
           "targets": 4,
           "searchable": true,
           "title": "Report Date",
           "type": "date",
-          "width": "170px"
         },
         {
           "targets": 5,
           "searchable": false,
           "orderable": false,
           "title": "URL",
-          "width": "140px"
         },
         {
           "targets": 6,
           "searchable": true,
           "title": "Error Status",
-          "width": "130px"
         },
         {
           "targets": 7,
           "searchable": true,
           "title": "Missing Status",
-          "width": "130px"
         },
         {
           "targets": 8,
@@ -584,8 +576,8 @@ function displayOntologies(data, ontology) {
           "visible": false
         }
       ],
-      "autoWidth": false,
-      "lengthChange": false,
+      "autoWidth": true,
+      "lengthChange": true,
       "searching": true,
       "language": {
         "search": "Filter: ",

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
@@ -152,9 +152,7 @@ table.dataTable tbody tr.selected {
 }
 
 .site-admin-page-section {
-  display: flex;
   margin-top: 15px;
-
   .admin-action-item {
     margin-right: 8px;
   }

diff --git a/app/components/table_component/table_component_controller.js b/app/components/table_component/table_component_controller.js
@@ -15,7 +15,7 @@ export default class extends Controller {
         table_component = this.element.childNodes[1]
         let default_sort_column
         default_sort_column = parseInt(this.sortcolumnValue, 10)
-        if (this.sortcolumnValue || this.searchingValue){
+        if (this.sortValue || this.searchingValue || this.pagingValue){
             let table = new DataTable('#'+table_component.id, {
                 paging: this.pagingValue,
                 info: false,

diff --git a/app/helpers/admin_helper.rb b/app/helpers/admin_helper.rb
@@ -17,7 +17,7 @@ def visits_evolution
     @users_visits[:visits].last - @users_visits[:visits][-2]
   end
 
-  def action_button(name, link, method: :post, class_style: 'btn btn-link mb-3')
+  def action_button(name, link, method: :post, class_style: 'btn btn-link')
     button_to name, link, method: method, class: class_style,
                 form: {data: { turbo: true, turbo_confirm: t('admin.turbo_confirm', name: name), turbo_frame: '_top'}}
 

diff --git a/app/views/admin/_analytics.html.haml b/app/views/admin/_analytics.html.haml
@@ -1,47 +1,47 @@
-%div.container
-  %div.analytics.my-5
-    %dive.site-admin-page-section.flex-wrap.justify-content-center
-      %div.d-flex.flex-wrap.m-2.justify-content-center.w-100
-        %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.total_ontologies')
-          %div.card-header-1
-            = @ontologies_count
-          %div.card-header-3{data: {controller: 'tooltip'}, title: new_ontologies_created_title}
-            = t('admin.analytics.ontologies_count', size: @new_ontologies_count.size)
-        %div.col.card.d-flex.justify-content-center.p-2.mr-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.ontologies_with_errors')
-          %div.card-header-1
-            = @ontologies_problems_count
-          %div.card-header-3.py-2.mt-1
-        %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.total_visits')
-          %div.card-header-1
-            = format_number_abbreviated(@page_visits[:visits].sum)
-          %div.card-header-3.py-2.mt-1
+%div.analytics
+  %dive.site-admin-page-section
+    %div.d-flex
+      %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.total_ontologies')
+        %div.card-header-1
+          = @ontologies_count
+        %div.card-header-3{data: {controller: 'tooltip'}, title: new_ontologies_created_title}
+          = t('admin.analytics.ontologies_count', size: @new_ontologies_count.size)
+      %div.col.card.d-flex.justify-content-center.p-2.mr-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.ontologies_with_errors')
+        %div.card-header-1
+          = @ontologies_problems_count
+        %div.card-header-3.py-2.mt-1
+      %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.total_visits')
+        %div.card-header-1
+          = format_number_abbreviated(@page_visits[:visits].sum)
+        %div.card-header-3.py-2.mt-1
 
-        %div.col.card.d-flex.justify-content-center.p-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.active_users')
-          %div.card-header-1
-            = @users_visits[:visits].last
-          %div.card-header-3
-            = t('admin.analytics.visit_users', visits: visits_evolution)
-      %div.d-flex.flex-wrap.m-2.p-2.justify-content-center.w-100
-        %div.col.card.p-2.mr-2
-          = chart_component(title: t('admin.analytics.ontology_visits'), type: 'bar',
+      %div.col.card.d-flex.justify-content-center.p-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.active_users')
+        %div.card-header-1
+          = @users_visits[:visits].last
+        %div.card-header-3
+          = t('admin.analytics.visit_users', visits: visits_evolution)
+    %div.d-flex.mt-2
+      %div.col.card.p-2.mr-2
+        = chart_component(title: t('admin.analytics.ontology_visits'), type: 'bar',
                             labels: @ontology_visits[:labels].last(13),
                             datasets: visits_chart_dataset(@ontology_visits[:visits].last(13)))
 
-        %div.col.card.p-2
-          = chart_component(title: t('admin.analytics.unique_users_visits'), type: 'line',
+      %div.col.card.p-2
+        = chart_component(title: t('admin.analytics.unique_users_visits'), type: 'line',
                             labels: @users_visits[:labels].last(13),
                             datasets: visits_chart_dataset(@users_visits[:visits].last(13)))
 
-        %div.col-12.card.p-2.m-2
-          = chart_component(title: t('admin.analytics.page_visits'), type: 'bar',
+    %div.mt-2
+      %div.card.p-2
+        = chart_component(title: t('admin.analytics.page_visits'), type: 'bar',
                             labels: @page_visits[:labels].last(13).reverse,
                             datasets: visits_chart_dataset(@page_visits[:visits].last(13).reverse),
-                            index_axis: 'y')
+                            index_axis: 'y')
diff --git a/app/views/admin/_indexing.html.haml b/app/views/admin/_indexing.html.haml
@@ -0,0 +1,16 @@
+%div.container
+  %div#site-admin-clear-caches.my-5
+    %div.site-admin-page-header
+      CACHE MANAGEMENT
+    %dive.site-admin-page-section.d-flex.mb-3
+      = action_button("Flush UI cache", admin_clearcache_path, class_style: 'btn btn-primary mx-1')
+      = action_button("Reset UI cache connection", admin_resetcache_path, class_style: 'btn btn-primary mx-1')
+      = action_button("Flush GOO cache", admin_clear_goo_cache_path, class_style: 'btn btn-primary mx-1')
+      = action_button("Flush HTTP cache", admin_clear_http_cache_path, class_style: 'btn btn-primary mx-1')
+
+  %div.mb-5
+    %div.site-admin-page-header
+      VERSION MANAGEMENT
+    %dive.site-admin-page-section
+      = render TurboFrameComponent.new(id: 'update_check_frame', src: '/admin/indexer/collections') do |c|
+        - c.loader { 'Checking for updates ...' }
diff --git a/app/views/admin/_main.html.haml b/app/views/admin/_main.html.haml
@@ -1,8 +1,8 @@
-%div.container
-  %div#site-admin-clear-caches.my-5
+%div
+  %div#site-admin-clear-caches
     %div.site-admin-page-header
       = t('admin.main.cache_management')
-    %dive.site-admin-page-section
+    %dive.site-admin-page-section.d-flex
       = action_button(t('admin.main.clear_cache'), admin_clearcache_path, class_style: 'btn btn-primary mx-1')
       = action_button(t('admin.main.reset_cache'), admin_resetcache_path, class_style: 'btn btn-primary mx-1')
       = action_button(t('admin.main.clear_goo_cache'), admin_clear_goo_cache_path, class_style: 'btn btn-primary mx-1')
@@ -11,6 +11,6 @@
   %div.mb-5
     %div.site-admin-page-header
       = t('admin.main.version_management')
-    %dive.site-admin-page-section
+    %dive.site-admin-page-section.p-2
       = render TurboFrameComponent.new(id: 'update_check_frame', src: '/admin/update_check_enabled') do |c|
         - c.loader { t('admin.main.checking_for_updates') }
diff --git a/app/views/admin/index.html.haml b/app/views/admin/index.html.haml
@@ -1,8 +1,6 @@
 - @title = t('admin.index.title')
 
-%div
-  %div.container
-    %h3.my-1.py-5= t('admin.index.administration_console')
+
 %div
   %div.container.my-3
     = render_alerts_container
@@ -13,20 +11,15 @@
 
 %div
   %div.mx-1
-    - sections = [t('admin.index.analytics'), t('admin.index.site_administration'),t('admin.index.ontology_administration'),  t('admin.index.licensing'), t('admin.index.users'), t('admin.index.metadata_administration'), t('admin.index.groups'), t('admin.index.categories'), t('admin.index.persons_and_organizations'), t('admin.index.sparql')]
+    - sections = [t('admin.index.analytics'), t('admin.index.site_administration'),t('admin.index.ontology_administration'),  t('admin.index.licensing'), t('admin.index.users'), t('admin.index.metadata_administration'), t('admin.index.groups'), t('admin.index.categories'), t('admin.index.persons_and_organizations'), t('admin.index.sparql'), 'Search']
     - selected = params[:section] || sections.first.downcase
-    = render TabsContainerComponent.new(url_parameter: 'section') do |t|
-      - sections.each do |section_title|
-        - t.item(title: section_title.humanize,
-                     path: '',
-                     selected: section_title.downcase.eql?(selected.downcase),
-                     page_name: '')
+    = render Layout::VerticalTabsComponent.new(header:  t('admin.index.administration_console'), titles: sections, selected: selected) do |t|
       - t.item_content do
         = render 'analytics'
       - t.item_content do
         = render 'main'
       - t.item_content do
-        %div.ontologies_list_container.mt-3
+        %div
           %table{:style => "float:left;"}
             %tr
               %td{:style => "white-space:nowrap;"}
@@ -36,7 +29,7 @@
                 %a#refresh_report_action{:href => "javascript:;", :class => "link_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only", :style => "margin-left:11px;"}
                   %span.ui-button-text{:class => "report_date_generated_button"}
           %p.tab_description{:style => "clear:both;"}
-          %table#adminOntologies.zebra{:cellpadding => "0", :cellspacing => "0", :width => "100%"}
+          %table#adminOntologies.border.rounded.p-1
       - t.item_content do
         %div#renew-license-notice
           %table.table.table-sm.table-bordered.mt-5#license-table
@@ -53,23 +46,16 @@
 
         %div.mb-5#renew-license-form
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'users-list', src: users_path, loading: 'lazy')
+        = render TurboFrameComponent.new(id: 'users-list', src: users_path, loading: 'lazy')
       - t.item_content do
         = render partial: 'ontologies_metadata_curator/metadata_tab'
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'groups-list', src: admin_groups_path, loading: 'lazy')
+        = render TurboFrameComponent.new(id: 'groups-list', src: admin_groups_path, loading: 'lazy')
+      - t.item_content do
+        = render TurboFrameComponent.new(id: 'categories-list', src: admin_categories_path, loading: 'lazy')
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'categories-list', src: admin_categories_path, loading: 'lazy')
+        = render TurboFrameComponent.new(id: 'agents-list', src: agents_path, loading: 'lazy')
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'agents-list', src: agents_path, loading: 'lazy')
+        = sparql_query_container
       - t.item_content do
-        %div.container
-          = sparql_query_container
+        = render TurboFrameComponent.new(id: 'search-admin', src: '/admin/search', loading: 'lazy')
diff --git a/app/views/users/index.html.haml b/app/views/users/index.html.haml
@@ -1,9 +1,8 @@
 = turbo_frame_tag 'users-list' do
   %div.my-1
     = render_alerts_container
-  .d-flex.justify-content-end
-    = rounded_button_component("#{$REST_URL}/users?display=all&apikey=#{get_apikey}")
-  = render TableComponent.new(id: 'admin_users', custom_class: 'border rounded p-1') do |t|
+
+  = render TableComponent.new(id: 'admin_users', custom_class: 'border rounded p-1', searching: true, paging: true, sort: true) do |t|
     - t.header do |h|
       - h.th {t('users.index.first_name')}
       - h.th {t('users.index.last_name')}
@@ -26,21 +25,14 @@
         - r.td {Date.parse(user.created).to_s}
         - r.td do
           - count = (user.ontologies&.size || 0) +  (user.projects&.size || 0)
-          %div.d-flex.align-items-center{style: 'width: 250px'}
-            %span.mx-1
-              = link_to t('users.index.detail'), user_path(user.id.split('/').last), {data: {turbo_frame: '_top'}}
-            %span.mx-1
+          %div.d-flex.align-items-center{style: 'min-width: 200px'}
+            %span
+              = link_to t('users.index.detail'), user_path(CGI.escape(user.id.split('/').last)), {data: {turbo_frame: '_top'}}
+            %span
               - if count.zero?
-                = button_to t('users.index.delete'), user_path(user.id.split('/').last), method: :delete, class: 'btn btn-link',  form: {data: { turbo: true, turbo_confirm: t('users.index.turbo_confirm'), turbo_frame: '_top'}}
+                = button_to t('users.index.delete'), user_path(CGI.escape(user.id.split('/').last)), method: :delete, class: 'btn btn-link',  form: {data: { turbo: true, turbo_confirm: t('users.index.turbo_confirm'), turbo_frame: '_top'}}
               - else
                 %span{data: { controller: 'tooltip' }, title:t('users.index.error_delete_message')}
                   = link_to t('users.index.delete'), "", class: 'btn btn-link disabled'
-            %span.mx-1
-              = link_to t('users.index.login_as'), "login_as/#{user.username}", {data: {turbo_frame: '_top'}}
-    %tr.empty-state
-      %td.text-center{:colspan => "6"} There are currently no  agents.
-
-  :javascript
-    $.fn.dataTable.ext.errMode = 'none';
-    $("#admin_users").dataTable()
-
+            %span
+              = link_to t('users.index.login_as'), "login_as/#{user.username}", {data: {turbo_frame: '_top'}}