Timeline UI Conversion

app/controllers/application_controller/timelines/options.rb

@@ -34,6 +34,8 @@ def update_from_params(params)
       self.levels = params[:tl_levels]&.map(&:to_sym) || group_levels
       self.categories = {}
       params.fetch(:tl_categories, []).each do |category_display_name|
+        next if category_display_name == "Other"
+
         group_data = event_groups[events[category_display_name]]
         category = {
           :display_name => category_display_name,

app/javascript/components/timeline-options/timeline-options-simple.schema.js

@@ -0,0 +1,141 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+
+const createSchemaSimple = (
+  timelineEvents, managementGroupNames, managementGroupLevels, policyGroupNames, policyGroupLevels
+) => ({
+  fields: [
+    {
+      component: componentTypes.SUB_FORM,
+      title: __('Options'),
+      id: 'options',
+      name: 'options',
+      fields: [
+        {
+          component: componentTypes.SELECT,
+          id: 'timelineEvents',
+          name: 'timelineEvents',
+          label: __('Event Types'),
+          validate: [{ type: validatorTypes.REQUIRED }],
+          isRequired: true,
+          includeEmpty: true,
+          options: timelineEvents,
+        },
+        /// ///////////////////
+        // Managment Events //
+        /// ///////////////////
+        {
+          component: componentTypes.SELECT,
+          id: 'managementGroupNames',
+          name: 'managementGroupNames',
+          label: __('Category Managements'),
+          options: managementGroupNames,
+          isMulti: true,
+          isSearchable: true,
+          isClearable: true,
+          simpleValue: true,
+          validate: [{ type: validatorTypes.REQUIRED }],
+          isRequired: true,
+          condition: {
+            and: [
+              {
+                when: 'timelineEvents',
+                is: 'EmsEvent',
+              },
+            ],
+          },
+        },
+        {
+          component: componentTypes.SELECT,
+          id: 'managementGroupLevels',
+          name: 'managementGroupLevels',
+          label: __('Levels Management'),
+          options: managementGroupLevels,
+          isMulti: true,
+          isSearchable: true,
+          isClearable: true,
+          simpleValue: true,
+          validate: [{ type: validatorTypes.REQUIRED }],
+          isRequired: true,
+          condition: {
+            and: [
+              {
+                when: 'timelineEvents',
+                is: 'EmsEvent',
+              },
+            ],
+          },
+        },
+        /// ///////////////
+        // Policy Events //
+        /// ///////////////
+        {
+          component: componentTypes.SELECT,
+          id: 'policyGroupNames',
+          name: 'policyGroupNames',
+          label: __('Category Policy'),
+          options: policyGroupNames,
+          isMulti: true,
+          isSearchable: true,
+          isClearable: true,
+          simpleValue: true,
+          validate: [{ type: validatorTypes.REQUIRED }],
+          isRequired: true,
+          condition: {
+            and: [
+              {
+                when: 'timelineEvents',
+                is: 'MiqEvent',
+              },
+            ],
+          },
+        },
+        {
+          component: componentTypes.RADIO,
+          label: __('Event Result'),
+          name: 'policyGroupLevels',
+          id: 'policyGroupLevels',
+          validate: [{ type: validatorTypes.REQUIRED }],
+          isRequired: true,
+          options: policyGroupLevels,
+          condition: {
+            and: [
+              {
+                when: 'timelineEvents',
+                is: 'MiqEvent',
+              },
+            ],
+          },
+        },
+      ],
+    },
+    /// //////
+    // Time //
+    /// //////
+    {
+      component: componentTypes.SUB_FORM,
+      title: __('Dates Range'),
+      id: 'datesRange',
+      name: 'datesRange',
+      fields: [
+        {
+          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 createSchemaSimple;

app/javascript/components/timeline-options/timeline-options.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import MiqFormRenderer from '@@ddf';
+import PropTypes from 'prop-types';
+import createSchemaSimple from './timeline-options-simple.schema';
+import mapper from '../../forms/mappers/componentMapper';
+
+const TimelineOptions = ({ url }) => {
+  const [{
+    isLoading, timelineEvents, managementGroupNames, managementGroupLevels, policyGroupNames, policyGroupLevels,
+  }, setState] = useState({
+    isLoading: true,
+  });
+
+  useEffect(() => {
+    if (isLoading) {
+      API.options(`/api/event_streams`).then((dropdownValues) => {
+        const data = dropdownValues.data.timeline_events;
+        const managementGroupNames = []; const managementGroupLevels = []; const policyGroupNames = []; const
+          policyGroupLevels = [];
+        const timelineEvents = [
+          { label: data.EmsEvent.description, value: 'EmsEvent' },
+          { label: data.MiqEvent.description, value: 'MiqEvent' },
+        ];
+
+        // Management Events
+        Object.entries(data.EmsEvent.group_names).forEach((entry) => {
+          const [key, value] = entry;
+          managementGroupNames.push({ label: value, value });
+        });
+        Object.entries(data.EmsEvent.group_levels).forEach((entry) => {
+          const [key, value] = entry;
+          managementGroupLevels.push({ label: value, value: key });
+        });
+
+        // Policy Events
+        Object.entries(data.MiqEvent.group_names).forEach((entry) => {
+          const [key, value] = entry;
+          policyGroupNames.push({ label: value, value: key });
+        });
+        // NOTE: data.MiqEvent.group_levels does not have the expected `Both` option
+        policyGroupLevels.push({ label: 'Success', value: 'success' });
+        policyGroupLevels.push({ label: 'Failure', value: 'failure' });
+        policyGroupLevels.push({ label: 'Both', value: 'both' });
+
+        // TODO: is there a way to make the above more elegant/shorter?
+        // NOTE: group_names for MiqEvents and MiqEvents includes the 'Other' option,
+        // this did not exist in previous versions of the timeline
+        setState((state) => ({
+          ...state,
+          isLoading: false,
+          timelineEvents,
+          managementGroupNames,
+          managementGroupLevels,
+          policyGroupNames,
+          policyGroupLevels,
+        }));
+      });
+    }
+  });
+
+  const onSubmit = (values) => {
+    miqSparkleOn();
+    const show = values.timelineEvents === 'EmsEvent' ? 'timeline' : 'policy_timeline';
+    const categories = values.timelineEvents === 'EmsEvent' ? values.managementGroupNames : values.policyGroupNames;
+    const vmData = {
+      tl_show: show,
+      tl_categories: categories,
+      tl_levels: values.managementGroupLevels ? values.managementGroupLevels : [],
+      tl_result: values.policyGroupLevels ? values.policyGroupLevels : 'success',
+    };
+    window.ManageIQ.calendar.calDateFrom = values.startDate;
+    window.ManageIQ.calendar.calDateTo = values.endDate;
+    window.miqJqueryRequest(url, { beforeSend: true, data: vmData });
+  };
+
+  const onReset = () => {
+    setState((state) => ({
+      ...state,
+    }));
+  };
+
+  return !isLoading && (
+    <>
+      <MiqFormRenderer
+        componentMapper={mapper}
+        schema={createSchemaSimple(
+          timelineEvents, managementGroupNames, managementGroupLevels, policyGroupNames, policyGroupLevels,
+        )}
+        onSubmit={onSubmit}
+        onReset={onReset}
+        canReset
+      />
+    </>
+  );
+};
+
+TimelineOptions.propTypes = {
+  url: PropTypes.string,
+};
+
+TimelineOptions.defaultProps = {
+  url: '',
+};
+
+export default TimelineOptions;

app/javascript/oldjs/controllers/index.js

@@ -18,6 +18,5 @@ require('./ops/pglogical_replication_form_controller.js');
 require('./playbook-reusable-code-mixin.js');
 require('./reconfigure/reconfigure_form_controller.js');
 require('./schedule/schedule_form_controller.js');
-require('./timeline/timeline_options_controller.js');
 require('./tree_view_controller.js');
 require('./vm_cloud/vm_cloud_live_migrate_form_controller.js');

app/javascript/oldjs/miq_timeline.js

@@ -171,6 +171,7 @@
   };
 })(ManageIQ);
 
+// TODO: Convert this file to React
 window.miqInitTimeline = function(json) {
   if (!json) {
     return;

app/javascript/packs/component-definitions-common.js

@@ -109,6 +109,7 @@ import TableListViewWrapper from '../react/table_list_view_wrapper';
 import TaggingWrapperConnected from '../components/taggingWrapper';
 import { TagView } from '../tagging';
 import TenantQuotaForm from '../components/tenant-quota-form';
+import TimelineOptions from '../components/timeline-options/timeline-options';
 import ToastList from '../components/toast-list/toast-list';
 import VmEditForm from '../components/vm-edit-form';
 import TextualSummaryWrapper from '../react/textual_summary_wrapper';
@@ -254,6 +255,7 @@ ManageIQ.component.addReact('TagView', TagView);
 ManageIQ.component.addReact('TaggingWrapperConnected', TaggingWrapperConnected);
 ManageIQ.component.addReact('TenantQuotaForm', TenantQuotaForm);
 ManageIQ.component.addReact('TextualSummaryWrapper', TextualSummaryWrapper);
+ManageIQ.component.addReact('TimelineOptions', TimelineOptions);
 ManageIQ.component.addReact('TimeProfileReportsTable', TimeProfileReportsTable);
 ManageIQ.component.addReact('TimeProfileTable', TimeProfileTable);
 ManageIQ.component.addReact('ToastList', ToastList);