diff --git a/app/controllers/ops_controller.rb b/app/controllers/ops_controller.rb index 1a5be655d5f6..ee94d25c4cd7 100644 --- a/app/controllers/ops_controller.rb +++ b/app/controllers/ops_controller.rb @@ -202,7 +202,7 @@ def explorer edit_changed? end # do not show buttons, when settings_workers - it uses react form buttons - if @sb[:active_tab] == "settings_workers" + if ["settings_workers", "diagnostics_cu_repair"].include?(@sb[:active_tab]) @x_edit_buttons_locals = nil end render :layout => "application" @@ -803,7 +803,7 @@ def handle_bottom_cell(nodetype, presenter, locals) else presenter.hide(:paging_div).hide(:form_buttons_div) end - if @sb[:active_tab] == "settings_workers" + if ["settings_workers", "diagnostics_cu_repair"].include?(@sb[:active_tab]) presenter.hide(:form_buttons_div) end end diff --git a/app/controllers/ops_controller/diagnostics.rb b/app/controllers/ops_controller/diagnostics.rb index a5bde2d713f1..f507f4cedfba 100644 --- a/app/controllers/ops_controller/diagnostics.rb +++ b/app/controllers/ops_controller/diagnostics.rb @@ -239,38 +239,22 @@ def cu_repair_field_changed def cu_repair assert_privileges("ops_diagnostics") - return unless load_edit("curepair_edit__new", "replace_cell__explorer") - - if @edit[:new][:end_date].to_time < @edit[:new][:start_date].to_time - add_flash(_("End Date cannot be earlier than Start Date"), :error) + if params[:end_date].to_time < params[:start_date].to_time + render :json => {:status => :error, :message => _("End Date cannot be earlier than Start Date")} else # converting string to time, and then converting into user selected timezone - from = "#{@edit[:new][:start_date]} #{@edit[:new][:start_hour]}:#{@edit[:new][:start_min]}:00".to_time.in_time_zone(@edit[:new][:timezone]) - to = "#{@edit[:new][:end_date]} #{@edit[:new][:end_hour]}:#{@edit[:new][:end_min]}:00".to_time.in_time_zone(@edit[:new][:timezone]) + from = "#{params[:start_date]} #{params[:start_hour]}:#{params[:start_min]}:00".to_time.in_time_zone(params[:timezone]) + to = "#{params[:end_date]} #{params[:end_hour]}:#{params[:end_min]}:00".to_time.in_time_zone(params[:timezone]) selected_zone = Zone.find(x_node.split('-').last) begin Metric::Capture.perf_capture_gap_queue(from, to, selected_zone) rescue => bang # Push msg and error flag - add_flash(_("Error during 'C & U Gap Collection': %{message}") % {:message => bang.message}, :error) + render :json => {:status => :error, :message => _("Error during 'C & U Gap Collection': %{message}") % {:message => bang.message}} else - @edit[:new][:start_date] = @edit[:new][:end_date] = "" - add_flash(_("C & U Gap Collection successfully initiated")) + render :json => {:status => :success, :message => _("C & U Gap Collection successfully initiated")} end end - - render :update do |page| - page << javascript_prologue - page.replace("flash_msg_div", :partial => "layouts/flash_msg") - page << "miqScrollTop();" if @flash_array.present? - page.replace_html("diagnostics_cu_repair", :partial => "diagnostics_cu_repair_tab") - page << "ManageIQ.calendar.calDateFrom = null;" - page << "ManageIQ.calendar.calDateTo = new Date();" - page << "miqBuildCalendar();" - page << "miqSparkle(false);" - # disable button - page << javascript_for_miq_button_visibility(false) - end end def log_collection_form_fields diff --git a/app/javascript/components/c-and-u-collections-form/helper.js b/app/javascript/components/c-and-u-collections-form/helper.js new file mode 100644 index 000000000000..93281bd43331 --- /dev/null +++ b/app/javascript/components/c-and-u-collections-form/helper.js @@ -0,0 +1,8 @@ +/** Function to append 0 to beginning of a number if it is a single digit. */ +const padStart = (number) => String(number).padStart(2, '0'); + +/** This function format the date. */ +export const formatDate = (date) => { + const newDate = new Date(date[0]); + return `${padStart(newDate.getMonth() + 1)}/${padStart(newDate.getDate())}/${newDate.getFullYear()}`; +}; diff --git a/app/javascript/components/c-and-u-collections-form/index.jsx b/app/javascript/components/c-and-u-collections-form/index.jsx new file mode 100644 index 000000000000..b692257878db --- /dev/null +++ b/app/javascript/components/c-and-u-collections-form/index.jsx @@ -0,0 +1,66 @@ +import React, { useState, useEffect } from 'react'; +import MiqFormRenderer from '@@ddf'; +import createSchema from './schema'; +import NotificationMessage from '../notification-message'; +import { timeZoneData } from '../schedule-form/helper'; +import { formatDate } from './helper'; + +const DiagnosticsCURepairForm = () => { + const [data, setData] = useState({ + isLoading: true, + timezones: undefined, + response: undefined, + }); + + useEffect(() => { + API.get('/api').then(({ timezones }) => { + setData({ + ...data, + isLoading: false, + timezones: timeZoneData(timezones), + }); + }); + }, []); + + const onSubmit = (values) => { + const paramsData = { + timezone: values.timezone, + start_date: formatDate(values.startDate), + end_date: formatDate(values.endDate), + }; + http.post(`/ops/cu_repair?button=submit`, paramsData, { skipErrors: [400, 500] }) + .then(({ status, message }) => { + setData({ + ...data, + isLoading: true, + response: { status, message }, + }); + setTimeout(() => { + setData({ + ...data, + response: undefined, + isLoading: false, + }); + }, 1000); + }); + }; + + const renderMessage = ({ status, message }) => ; + + return ( + <> + { data.response && renderMessage(data.response) } + { !data.isLoading && ( + + )} + { + `${__('Note')} : ${__('Gap Collection is only available for VMware vSphere Infrastructures')}` + } + + ); +}; + +export default DiagnosticsCURepairForm; diff --git a/app/javascript/components/c-and-u-collections-form/schema.js b/app/javascript/components/c-and-u-collections-form/schema.js new file mode 100644 index 000000000000..fe670389d693 --- /dev/null +++ b/app/javascript/components/c-and-u-collections-form/schema.js @@ -0,0 +1,36 @@ +import { componentTypes, validatorTypes } from '@@ddf'; + +const createSchema = (timezones) => ({ + title: __('Collection Options'), + fields: [ + { + component: componentTypes.SELECT, + id: 'timezone', + name: 'timezone', + label: __('Timezone'), + initialValue: 'UTC', + validate: [{ type: validatorTypes.REQUIRED }], + isRequired: true, + includeEmpty: true, + options: timezones, + }, + { + component: 'date-picker', + id: 'startDate', + name: 'startDate', + label: __('Start Date'), + validate: [{ type: validatorTypes.REQUIRED }], + isRequired: true, + }, + { + component: 'date-picker', + id: 'endDate', + name: 'endDate', + label: __('End Date'), + validate: [{ type: validatorTypes.REQUIRED }], + isRequired: true, + }, + ], +}); + +export default createSchema; diff --git a/app/javascript/packs/component-definitions-common.js b/app/javascript/packs/component-definitions-common.js index 8ea69b9092e4..b97e3c6f4d8a 100644 --- a/app/javascript/packs/component-definitions-common.js +++ b/app/javascript/packs/component-definitions-common.js @@ -161,6 +161,7 @@ import StorageServiceForm from '../components/storage-service-form'; import VolumeMappingForm from '../components/volume-mapping-form'; import ZoneForm from '../components/zone-form'; import AnsiblePlayBookEditCatalogForm from '../components/ansible-playbook-edit-catalog-form'; +import DiagnosticsCURepairForm from '../components/c-and-u-collections-form'; /** * Add component definitions to this file. @@ -331,3 +332,4 @@ ManageIQ.component.addReact('VolumeMappingForm', VolumeMappingForm); ManageIQ.component.addReact('VmCommonRenameForm', VmCommonRenameForm); ManageIQ.component.addReact('ZoneForm', ZoneForm); ManageIQ.component.addReact('AnsiblePlayBookEditCatalogForm', AnsiblePlayBookEditCatalogForm); +ManageIQ.component.addReact('DiagnosticsCURepairForm', DiagnosticsCURepairForm); diff --git a/app/javascript/spec/c-and-u-collections-form/__snapshots__/c-and-u-collections-form.spec.js.snap b/app/javascript/spec/c-and-u-collections-form/__snapshots__/c-and-u-collections-form.spec.js.snap new file mode 100644 index 000000000000..c95fdd2f8c05 --- /dev/null +++ b/app/javascript/spec/c-and-u-collections-form/__snapshots__/c-and-u-collections-form.spec.js.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DiagnosticsCURepairForm Component Should add a record from DiagnosticsCURepair form 1`] = ` + + + Note : Gap Collection is only available for VMware vSphere Infrastructures + + +`; + +exports[`DiagnosticsCURepairForm Component Should render a new DiagnosticsCURepair form 1`] = ` + + + Note : Gap Collection is only available for VMware vSphere Infrastructures + + +`; diff --git a/app/javascript/spec/c-and-u-collections-form/c-and-u-collections-form.spec.js b/app/javascript/spec/c-and-u-collections-form/c-and-u-collections-form.spec.js new file mode 100644 index 000000000000..d36acbf1eed4 --- /dev/null +++ b/app/javascript/spec/c-and-u-collections-form/c-and-u-collections-form.spec.js @@ -0,0 +1,43 @@ +import React from 'react'; +import toJson from 'enzyme-to-json'; +import fetchMock from 'fetch-mock'; +import { act } from 'react-dom/test-utils'; + +import { mount } from '../helpers/mountForm'; +import DiagnosticsCURepairForm from '../../components/c-and-u-collections-form'; +import { formatDate } from '../../components/c-and-u-collections-form/helper'; + +describe('DiagnosticsCURepairForm Component', () => { + afterEach(() => { + fetchMock.reset(); + fetchMock.restore(); + }); + it('Should render a new DiagnosticsCURepair form', async() => { + let wrapper; + await act(async() => { + wrapper = mount(); + }); + wrapper.update(); + expect(toJson(wrapper)).toMatchSnapshot(); + }); + + it('Should add a record from DiagnosticsCURepair form', async(done) => { + const paramsData = { + timezone: 'UTC', + start_date: formatDate('12/12/2023'), + end_date: formatDate('12/01/2023'), + }; + const timezones = [ + { name: 'International Date Line West', description: '(GMT-12:00) International Date Line West' }, + { name: 'American Samoa', description: '(GMT-11:00) American Samoa' }, + { name: 'Midway Island', description: '(GMT-11:00) Midway Island' }, + { name: 'Hawaii', description: '(GMT-10:00) Hawaii' }, + { name: 'Alaska', description: '(GMT-09:00) Alaska' }, + ]; + fetchMock.getOnce('/api', { timezones }); + fetchMock.postOnce('/api/instances/1850//ops/cu_repair?button=submit/', paramsData); + const wrapper = mount(); + expect(toJson(wrapper)).toMatchSnapshot(); + done(); + }); +}); diff --git a/app/views/ops/_diagnostics_cu_repair_tab.html.erb b/app/views/ops/_diagnostics_cu_repair_tab.html.erb new file mode 100644 index 000000000000..184ccd5a383e --- /dev/null +++ b/app/views/ops/_diagnostics_cu_repair_tab.html.erb @@ -0,0 +1 @@ +<%= react('DiagnosticsCURepairForm') =%>