-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated efficiency look and feel to highlight values
- Loading branch information
Showing
5 changed files
with
185 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
dev/metrics/views/batch_connect/sessions/card/_session_card_assets.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <style> | ||
|
|
||
| table.metrics th { | ||
| font-size: 0.9rem; | ||
| } | ||
| table.metrics td { | ||
| font-size: 0.8rem; | ||
| } | ||
|
|
||
| .job-metrics i.app-icon { | ||
| width: 0.8rem; | ||
| height: 0.8rem; | ||
| font-size: 0.8rem; | ||
| vertical-align: 1px; | ||
| color: #6c757d; | ||
| } | ||
|
|
||
| div.job-metric-details { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| div.job-metric-details [title]{ | ||
| cursor: default; | ||
| } | ||
|
|
||
| div.job-metric-details table { | ||
| margin-top: 0.5rem; | ||
| } | ||
|
|
||
| div.job-metric-details .text-dark { | ||
| --bs-text-opacity: 0.8; | ||
| } | ||
|
|
||
| p.job-metrics-description { | ||
| cursor: pointer; | ||
| margin: 0; | ||
| } | ||
|
|
||
| p[aria-expanded=true] .closed { | ||
| display: none; | ||
| } | ||
|
|
||
| p[aria-expanded=false] .open { | ||
| display: none; | ||
| } | ||
|
|
||
| </style> | ||
| <script> | ||
| // TESTED WITH OOD 3.x and 4.0 | ||
| // OVERRIDE OOD replaceHTML FUNCTION TO INTERCEPT THE AJAX RESPONSE FOR THE SESSION CARDS. | ||
| // WE WANT TO KEEP THE METRICS COLLAPSABLE STATE BETWEEN AJAX REFRESH | ||
| const originalFunction = window.replaceHTML; | ||
| const metricsCollapseState = {}; | ||
|
|
||
| window.replaceHTML = function(id, html) { | ||
| const ele = document.getElementById(id); | ||
|
|
||
| if(ele == null) { | ||
| return; | ||
| } | ||
|
|
||
| const tmp = document.createElement('div'); | ||
| tmp.innerHTML = html; | ||
| const sessionCards = tmp.querySelector('template'); | ||
|
|
||
| // UPDATE COLLAPSABLE ITEMS | ||
| sessionCards.content.querySelectorAll('.job-metric-details .collapse').forEach((element) => { | ||
| const jobMetricsId = element.dataset.sessionId; | ||
| const isOpen = metricsCollapseState[jobMetricsId]; | ||
|
|
||
| if (isOpen) { | ||
| element.classList.remove('collapse'); | ||
| element.classList.add('show'); | ||
| } | ||
| }); | ||
|
|
||
| // UPDATE BUTTONS | ||
| sessionCards.content.querySelectorAll('.job-metrics-description').forEach((element) => { | ||
| const jobMetricsId = element.dataset.sessionId; | ||
| const isOpen = metricsCollapseState[jobMetricsId]; | ||
|
|
||
| if (isOpen) { | ||
| element.setAttribute('aria-expanded', 'true'); | ||
| } | ||
| }); | ||
|
|
||
| const updatedSessionCards = sessionCards.innerHTML; | ||
| tmp.remove(); | ||
|
|
||
| setInnerHTML(ele, updatedSessionCards); | ||
| }; | ||
|
|
||
| // LISTEN TO BOOTSTRAP COLLAPSABLE OPEN AND CLOSE EVENTS | ||
| jQuery(function (){ | ||
| $('#batch_connect_sessions').on('hide.bs.collapse', function (element) { | ||
| // ENSURE IS ONE OF THE METRICS COLLAPSABLE | ||
| if (element.target.dataset.sessionId) { | ||
| metricsCollapseState[element.target.dataset.sessionId] = false; | ||
| } | ||
| }) | ||
|
|
||
| $('#batch_connect_sessions').on('show.bs.collapse', function (element) { | ||
| // ENSURE IS ONE OF THE METRICS COLLAPSABLE | ||
| if (element.target.dataset.sessionId) { | ||
| metricsCollapseState[element.target.dataset.sessionId] = true; | ||
| } | ||
| }) | ||
| }); | ||
|
|
||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <% content_for :title, "#{t('dashboard.breadcrumbs_my_sessions')} - #{@user_configuration.dashboard_title}" %> | ||
| <%- | ||
| any_apps = (@sys_app_groups + @usr_app_groups + @dev_app_groups).any? | ||
| -%> | ||
|
|
||
| <%= javascript_include_tag 'batch_connect_sessions', nonce: true %> | ||
|
|
||
| <%= render partial: '/batch_connect/sessions/card/session_card_assets' %> | ||
|
|
||
| <%= render partial: 'batch_connect/shared/breadcrumb', | ||
| locals: { | ||
| links: [ | ||
| { | ||
| text: t('dashboard.breadcrumbs_home'), | ||
| href: root_path | ||
| }, | ||
| { | ||
| text: t('dashboard.breadcrumbs_my_sessions') | ||
| }] | ||
| } | ||
| %> | ||
|
|
||
| <div class="row"> | ||
| <%- if any_apps -%> | ||
| <div class="col-md-3"> | ||
| <%= render partial: 'batch_connect/shared/saved_settings_menu' %> | ||
| <%= | ||
| render( | ||
| partial: "batch_connect/shared/app_menu", | ||
| locals: { | ||
| sys_app_groups: @sys_app_groups, | ||
| usr_app_groups: @usr_app_groups, | ||
| dev_app_groups: @dev_app_groups, | ||
| apps_menu_group: @apps_menu_group | ||
| } | ||
| ) | ||
| %> | ||
| </div> | ||
| <div class="col-md-9"> | ||
| <div id="batch_connect_sessions"> | ||
| <%= render(partial: 'panels') %> | ||
| </div> | ||
| </div> | ||
| <%- else -%> | ||
| <div class="col-md-12"> | ||
| <div class="ood-appkit markdown"> | ||
| <p><%= t('dashboard.batch_connect_no_apps') %></p> | ||
| </div> | ||
| </div> | ||
| <%- end -%> | ||
| </div> | ||
| <div id="full-page-spinner" class="d-none"> | ||
| <div class="spinner-border" role="status"></div> | ||
| </div> |