From 70bece5e757815cc91da514c0fd4dd0481972eb5 Mon Sep 17 00:00:00 2001 From: JEFFREY-Bonson Date: Tue, 11 Apr 2023 10:24:42 +0530 Subject: [PATCH] Utilizations tabs conversion and viloation errors fixes --- app/helpers/utilization_helper.rb | 24 +++++++++++++++++++ .../components/miq-custom-tab/index.jsx | 1 + app/stylesheet/miq-custom-tab.scss | 5 +++- app/views/catalog/_form.html.haml | 7 +++--- app/views/catalog/_sandt_tree_show.html.haml | 8 +++---- app/views/catalog/_st_angular_form.html.haml | 7 +++--- app/views/layouts/_content.html.haml | 13 +++++----- app/views/miq_request/_prov_wf.html.haml | 2 +- .../utilization/_utilization_tabs.html.haml | 23 +++++++----------- 9 files changed, 57 insertions(+), 33 deletions(-) create mode 100644 app/helpers/utilization_helper.rb diff --git a/app/helpers/utilization_helper.rb b/app/helpers/utilization_helper.rb new file mode 100644 index 00000000000..a3ed8c6b33d --- /dev/null +++ b/app/helpers/utilization_helper.rb @@ -0,0 +1,24 @@ +module UtilizationHelper + def utilization_tab_configuration + [:summary, :details, :report].map do |item| + {:name => item, :text => utilization_tabs_types[item]} + end + end + + def utilization_tab_content(key_name, &block) + if utilization_tabs_types[key_name] + class_name = key_name == :summary ? 'tab_content active' : 'tab_content' + tag.div(:id => key_name, :class => class_name, &block) + end + end + + private + + def utilization_tabs_types + { + :summary => _('Summary'), + :details => _('Details'), + :report => _('Report'), + } + end +end diff --git a/app/javascript/components/miq-custom-tab/index.jsx b/app/javascript/components/miq-custom-tab/index.jsx index f88c6364837..7971a9c2c1b 100644 --- a/app/javascript/components/miq-custom-tab/index.jsx +++ b/app/javascript/components/miq-custom-tab/index.jsx @@ -8,6 +8,7 @@ const MiqCustomTab = ({ containerId, tabLabels, type }) => { { type: 'CATALOG_SUMMARY' }, { type: 'CATALOG_EDIT' }, { type: 'CATALOG_REQUEST_INFO', url: `/miq_request/prov_field_changed?tab_id=${name}&edit_mode=true` }, + { type: 'UTILIZATION' }, ]; const configuration = (name) => tabConfigurations(name).find((item) => item.type === type); diff --git a/app/stylesheet/miq-custom-tab.scss b/app/stylesheet/miq-custom-tab.scss index 61183d592e1..0d191f5e4b1 100644 --- a/app/stylesheet/miq-custom-tab.scss +++ b/app/stylesheet/miq-custom-tab.scss @@ -1,9 +1,12 @@ +.miq_custom_tab_wrapper div[role='tabpanel'] { + display: none; +} + .miq_custom_tabs_container { display: flex; flex-direction: column; width: 100%; - margin-top: -32px; .tab_content { display: flex; diff --git a/app/views/catalog/_form.html.haml b/app/views/catalog/_form.html.haml index 0757a688f3b..5740e15b1e3 100644 --- a/app/views/catalog/_form.html.haml +++ b/app/views/catalog/_form.html.haml @@ -1,7 +1,8 @@ - catalog_tab_labels, catalog_condition = catalog_tab_edit_configuration(@edit[:new]) -= react('MiqCustomTab', {:containerId => 'catalog-tabs-edit', - :tabLabels => catalog_tab_labels, - :type => 'CATALOG_EDIT'}) +.miq_custom_tab_wrapper + = react('MiqCustomTab', {:containerId => 'catalog-tabs-edit', + :tabLabels => catalog_tab_labels, + :type => 'CATALOG_EDIT'}) #catalog-tabs-edit.miq_custom_tabs_container = catalog_tab_content(:basic) do diff --git a/app/views/catalog/_sandt_tree_show.html.haml b/app/views/catalog/_sandt_tree_show.html.haml index 0d9aed667b8..71572df81e4 100644 --- a/app/views/catalog/_sandt_tree_show.html.haml +++ b/app/views/catalog/_sandt_tree_show.html.haml @@ -1,10 +1,10 @@ = render :partial => "layouts/flash_msg" - record, sb, tenants_tree, options, no_wf_msg = @record, @sb, @tenants_tree, @options, @no_wf_msg - tab_labels, condition = catalog_tab_configuration(record) - -= react('MiqCustomTab', {:containerId => 'catalog-tabs', - :tabLabels => tab_labels, - :type => 'CATALOG_SUMMARY'}) +.miq_custom_tab_wrapper + = react('MiqCustomTab', {:containerId => 'catalog-tabs', + :tabLabels => tab_labels, + :type => 'CATALOG_SUMMARY'}) #catalog-tabs.miq_custom_tabs_container = catalog_tab_content(:basic) do diff --git a/app/views/catalog/_st_angular_form.html.haml b/app/views/catalog/_st_angular_form.html.haml index 18ddae73811..ac6e107f881 100644 --- a/app/views/catalog/_st_angular_form.html.haml +++ b/app/views/catalog/_st_angular_form.html.haml @@ -1,7 +1,8 @@ - @angular_form = true -= react('MiqCustomTab', {:containerId => 'catalog-tabs-generic-edit', - :tabLabels => catalog_tab_edit_generic_configuration, - :type => 'CATALOG_EDIT'}) +.miq_custom_tab_wrapper + = react('MiqCustomTab', {:containerId => 'catalog-tabs-generic-edit', + :tabLabels => catalog_tab_edit_generic_configuration, + :type => 'CATALOG_EDIT'}) %form.form-horizontal#form_div{"name" => "angularForm", diff --git a/app/views/layouts/_content.html.haml b/app/views/layouts/_content.html.haml index 641ea8a482e..f6d750234c8 100644 --- a/app/views/layouts/_content.html.haml +++ b/app/views/layouts/_content.html.haml @@ -4,12 +4,13 @@ = yield - elsif inner_layout_present? .container-fluid.container-pf-nav-pf-vertical.container-pf-nav-pf-vertical-with-sub-menus.max-height{:style => "overflow: hidden !important"} - #breadcrumbs - = render :partial => "layouts/breadcrumbs" - .row.toolbar-pf#toolbar.miq-toolbar-menu - .col-sm-12 - = miq_toolbar toolbar_from_hash - .row.max-height.content-focus-order + %header + #breadcrumbs + = render :partial => "layouts/breadcrumbs" + .row.toolbar-pf#toolbar.miq-toolbar-menu + .col-sm-12 + = miq_toolbar toolbar_from_hash + %main.row.max-height.content-focus-order - if simulate? #left_div.sidebar-pf.sidebar-pf-left.scrollable.max-height.col-sm-5.col-md-4.col-sm-pull-7.col-md-pull-8 #default_left_cell diff --git a/app/views/miq_request/_prov_wf.html.haml b/app/views/miq_request/_prov_wf.html.haml index e041e6aa9c5..8cc4e40d8e3 100644 --- a/app/views/miq_request/_prov_wf.html.haml +++ b/app/views/miq_request/_prov_wf.html.haml @@ -1,7 +1,7 @@ -# wf The workflow object currently in use -# dialog The name (symbol) of the selected dialog - if (@options && @options[:wf]) || (@edit && @edit[:wf]) - #prov_wf_div + #prov_wf_div.miq_custom_tab_wrapper - options = @options || @edit[:new] - wf = options[:wf] || @edit[:wf] - tabname = (@tabactive || options[:current_tab_key]).to_s diff --git a/app/views/utilization/_utilization_tabs.html.haml b/app/views/utilization/_utilization_tabs.html.haml index 59a2783e5c0..5799a2b4afc 100644 --- a/app/views/utilization/_utilization_tabs.html.haml +++ b/app/views/utilization/_utilization_tabs.html.haml @@ -1,18 +1,11 @@ -#utilization_tabs - %ul.nav.nav-tabs{'role' => 'tablist'} - = miq_tab_header('summary', @sb[:active_tab]) do - = _('Summary') - = miq_tab_header('details', @sb[:active_tab]) do - = _('Details') - = miq_tab_header('report', @sb[:active_tab]) do - = _('Report') - .tab-content - = miq_tab_content('summary', @sb[:active_tab]) do +#utilization-tabs-wrapper.miq_custom_tab_wrapper + = react('MiqCustomTab', {:containerId => 'utilization-tabs', + :tabLabels => utilization_tab_configuration, + :type => 'UTILIZATION'}) + #utilization-tabs.miq_custom_tabs_container + = utilization_tab_content(:summary) do = render :partial => "utilization_summary" - = miq_tab_content('details', @sb[:active_tab]) do + = utilization_tab_content(:details) do = render :partial => "utilization_details" - = miq_tab_content('report', @sb[:active_tab]) do + = utilization_tab_content(:report) do = render :partial => "utilization_report" - -:javascript - miq_tabs_init('#utilization_tabs', '/utilization/change_tab');