[WIP] Adding searchbar feature for ems cloud module

app/controllers/application_controller/miq_request_methods.rb

@@ -148,7 +148,7 @@ def pre_prov
       end
     elsif params[:hide_deprecated_templates]
       @edit = session[:edit]
-      @edit[:hide_deprecated_templates] = params[:hide_deprecated_templates] == "true"
+      @edit[:hide_deprecated_templates] = provisioning_is_cloud? ? params[:hide_deprecated_templates] == "true" : nil
       render_updated_templates
     else # First time in, build pre-provision screen
       set_pre_prov_vars
@@ -159,6 +159,7 @@ def pre_prov
 
   def render_updated_templates
     report_scopes = [:eligible_for_provisioning]
+    report_scopes.push([:filter_with_name, params[:search_text]])
     report_scopes.push(:non_deprecated) if @edit[:hide_deprecated_templates]
     options = options_for_provisioning(get_template_kls.to_s, report_scopes)
 

app/controllers/mixins/generic_show_mixin.rb

@@ -38,6 +38,13 @@ def show
         end
       end
 
+      if @showtype == @display
+        case @display
+          when "instances"
+
+        end
+      end
+
       if params[:action] == 'show' && !performed? && self.class.respond_to?(:default_show_template)
         render :template => self.class.default_show_template
       end
@@ -182,5 +189,33 @@ def nested_list(model, options = {})
       @view, @pages = get_view(model, view_options)
       @showtype = @display
     end
+
+   #private
+
+   #def handle_display_modes
+   # @search_text = params[:text]
+   # @items = fetch_items_based_on_display(@display, @search_text)
+   #end
+
+   #def fetch_items_based_on_display(display, search_text)
+    # case display
+    # when "images"
+    #   filter_items(Image, search_text)
+    # when "instance"
+    #   filter_items(MiqAeInstance, search_text)
+    # when "cloud_object_store_containers"
+    #   filter_items(CloudObjectStoreContainer, search_text)
+    # when "security_groups"
+    #   filter_items(SecurityGroup, search_text)
+    # when "cloud_networks"
+    #   filter_items(CloudNetwork, search_text)
+    # end
+    #end
+
+    #def filter_items(model_class, search_text)
+    #  query = model_class.all
+    #  query = query.where("name ILIKE ?", "%#{search_text}%") if search_text.present?
+    #  query
+    #end
   end
 end

app/javascript/components/filter-provision-instance/index.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Search32, Close32 } from '@carbon/icons-react';
+import { Button, Checkbox, TextInput } from 'carbon-components-react';
+
+/** Component to filter the images at provisioning instances page. */
+const FilterProvisionInstance = ({
+  hideDeprecated, searchText, url, showCheckbox,
+}) => {
+  const [data, setData] = useState({
+    loading: false,
+    searchText,
+    hideDeprecated,
+  });
+
+  useEffect(() => {
+    if (data.loading) {
+      $.post(`${url}?search_text=${encodeURIComponent(data.searchText)}&hide_deprecated_templates=${data.hideDeprecated}`);
+    }
+  }, [data.loading]);
+
+  /** Function to handle the clear button's click event of the search bar. */
+  const onClear = () => {
+    const updatedData = searchText ? { loading: true } : {};
+    setData({ ...data, searchText: '', ...updatedData });
+  };
+
+  /** Function to render the Clear button. */
+  const renderClear = () => (
+    <Button
+      kind="secondary"
+      disabled={data.loading}
+      renderIcon={Close32}
+      iconDescription={__('Clear')}
+      hasIconOnly
+      tooltipPosition="bottom"
+      type="reset"
+      onClick={onClear}
+    />
+  );
+
+  /** Function to render the Lens button. */
+  const renderLens = () => (
+    <Button
+      renderIcon={Search32}
+      disabled={data.loading}
+      iconDescription={__('Search')}
+      hasIconOnly
+      tooltipPosition="bottom"
+      className="search_button"
+      onClick={() => setData({ ...data, loading: true })}
+    />
+  );
+
+  return (
+    <div className="miq-filter-provision-instance">
+      <div className="col-md-7 checkbox_wrapper">
+        {
+          showCheckbox && (
+            <Checkbox
+              id="hide_deprecated"
+              labelText="Hide Deprecated"
+              disabled={data.loading}
+              checked={data.hideDeprecated}
+              onChange={() => setData({ ...data, loading: true, hideDeprecated: !data.hideDeprecated })}
+            />
+          )
+        }
+      </div>
+      <div className="col-md-5 search_bar_wrapper">
+        <div className="search_bar">
+          <TextInput
+            hideLabel
+            value={data.searchText}
+            placeholder={__('Search with name')}
+            labelText={__('Search')}
+            id="filter_with_name"
+            disabled={data.loading}
+            onChange={(event) => setData({ ...data, searchText: event.target.value })}
+          />
+          { data.searchText && renderClear() }
+          { renderLens() }
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterProvisionInstance;
+
+FilterProvisionInstance.propTypes = {
+  hideDeprecated: PropTypes.bool,
+  searchText: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  showCheckbox: PropTypes.bool.isRequired,
+};
+
+FilterProvisionInstance.defaultProps = {
+  hideDeprecated: false,
+};

app/javascript/components/instance-filter/instance-filter.jsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Search32, Close32 } from '@carbon/icons-react';
+import { Button, Checkbox, TextInput } from 'carbon-components-react';
+
+/** Component to filter the images at provisioning instances page. */
+const InstanceFilter = ({
+  searchText, url,
+}) => {
+  console.log('Props received:', { searchText, url });
+  const [data, setData] = useState({
+    loading: false,
+    searchText,
+  });
+
+  useEffect(() => {
+    if (data.loading) {
+      $.post(`${url}?search_text=${encodeURIComponent(data.searchText)}`);
+    }
+  }, [data.loading]);
+
+  /** Function to handle the clear button's click event of the search bar. */
+  const onClear = () => {
+    const updatedData = searchText ? { loading: true } : {};
+    setData({ ...data, searchText: '', ...updatedData });
+  };
+
+  /** Function to render the Clear button. */
+  const renderClear = () => (
+    <Button
+      kind="secondary"
+      disabled={data.loading}
+      renderIcon={Close32}
+      iconDescription={__('Clear')}
+      hasIconOnly
+      tooltipPosition="bottom"
+      type="reset"
+      onClick={onClear}
+    />
+  );
+
+  /** Function to render the Lens button. */
+  const renderLens = () => (
+    <Button
+      renderIcon={Search32}
+      disabled={data.loading}
+      iconDescription={__('Search')}
+      hasIconOnly
+      tooltipPosition="bottom"
+      className="search_button"
+      onClick={() => setData({ ...data, loading: true })}
+    />
+  );
+
+  return (
+    <div className="miq-filter-provision-instance">
+      <div className="col-md-5 search_bar_wrapper">
+        <div className="search_bar">
+          <TextInput
+            hideLabel
+            value={data.searchText}
+            placeholder={__('Search with name')}
+            labelText={__('Search')}
+            id="filter_the_name"
+            disabled={data.loading}
+            onChange={(event) => setData({ ...data, searchText: event.target.value })}
+          />
+          { data.searchText && renderClear() }
+          { renderLens() }
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InstanceFilter;
+
+InstanceFilter.propTypes = {
+  searchText: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+

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

@@ -49,6 +49,8 @@ import EditServiceForm from '../components/edit-service-form';
 import EvacuateForm from '../components/evacuate-form';
 import EventChart from '../components/provider-dashboard-charts/events-bar-chart';
 import FilterDropdown from '../components/filter-dropdown';
+import FilterProvisionInstance from '../components/filter-provision-instance';
+import InstanceFilter from '../components/instance-filter/instance-filter';
 import FirmwareRegistryForm from '../components/firmware-registry/firmware-registry-form';
 import FlavorForm from '../components/flavor-form';
 import FonticonPicker from '../components/fonticon-picker';
@@ -219,6 +221,8 @@ ManageIQ.component.addReact('EditServiceForm', EditServiceForm);
 ManageIQ.component.addReact('EvacuateForm', EvacuateForm);
 ManageIQ.component.addReact('EventChart', EventChart);
 ManageIQ.component.addReact('FilterDropdown', FilterDropdown);
+ManageIQ.component.addReact('FilterProvisionInstance', FilterProvisionInstance);
+ManageIQ.component.addReact('InstanceFilter',InstanceFilter);
 ManageIQ.component.addReact('FirmwareRegistryForm', FirmwareRegistryForm);
 ManageIQ.component.addReact('FlavorForm', FlavorForm);
 ManageIQ.component.addReact('FonticonPicker', FonticonPicker);

app/stylesheet/miq-data-table.scss

@@ -255,7 +255,7 @@
   flex-direction: column;
 
   .provision-instance-list {
-    height: calc(100vh - 210px);
+    height: calc(100vh - 255px);
     overflow: auto;
   }
   .provision-instance-actions {

app/stylesheet/search-bar.scss

@@ -1,3 +1,16 @@
+.miq-filter-provision-instance {
+  display: flex;
+  align-items: center;
+
+  .checkbox_wrapper {
+    padding-left: 0;
+  }
+
+  .search_bar_wrapper {
+    padding-right: 0;
+  }
+}
+
 .search_bar {
   display: flex;
 

app/views/cloud_tenant/show.html.haml

@@ -5,6 +5,8 @@
     - arr = %w[floating_ips network_ports cloud_tenants cloud_networks cloud_subnets network_routers network_services instances images]
     - arr.concat(%w[security_groups security_policies cloud_object_store_containers cloud_volumes cloud_volume_snapshots custom_button_events])
     - if arr.include?(@display) && @showtype != "compare"
+      - url = url_for_only_path(:action => "show")
+      = react('InstanceFilter', { searchText: params[:search_text] || '', url: url })
       = render :partial => "layouts/gtl", :locals => {:action_url => "show/#{@record.id}"}
     - elsif @showtype == "compare"
       = raise 'compare partial called through "show"'

app/views/miq_request/_pre_prov.html.haml

@@ -1,27 +1,21 @@
 #pre_prov_div
-  - typ = request.parameters[:controller] == "vm_cloud" ? ui_lookup(:table => "template_cloud") : ui_lookup(:table => "template_infra")
+  :ruby
+    typ = request.parameters[:controller] == "vm_cloud" ? ui_lookup(:table => "template_cloud") : ui_lookup(:table => "template_infra")
+    show_checkbox = !@edit[:hide_deprecated_templates].nil?
+    id = @edit[:req_id] || "new"
+    hide_deprecated_url = url_for_only_path(:action => "vm_pre_prov", :template_klass => params[:template_klass], :id => id.to_s)
+
   %h3
     = _("Provision %{what} based on the selected %{type}") % {:what => ui_lookup(:tables => request.parameters[:controller]), :type => typ}
   %label
-    - id = @edit[:req_id] || "new"
-    - unless @edit[:hide_deprecated_templates].nil?
-      - hide_depricated_url = url_for_only_path({:action => "vm_pre_prov",
-                                              :template_klass => params[:template_klass],
-                                              :id => id.to_s,
-                                              :hide_deprecated_templates => !@edit[:hide_deprecated_templates]})
-      %input{:type => "checkbox",
-             :onclick => "miqAjax('#{hide_depricated_url}')",
-             :checked => @edit[:hide_deprecated_templates]}
-        = _('Hide deprecated')
-
+  = react('FilterProvisionInstance', {:hideDeprecated => @edit[:hide_deprecated_templates], :searchText => params[:search_text] || '', :url => hide_deprecated_url, :showCheckbox => show_checkbox})
+
   .provision-instance-container
     .provision-instance-list
       = render :partial => "layouts/x_gtl"
 
     .provision-instance-actions
       #pre_prov_form_buttons_div.pull-right
-        = render :partial => 'layouts/x_edit_buttons', :locals => {:action_url => 'pre_prov',
-                                                                  :continue_button => true,
-                                                                  :no_reset => true}
+        = render :partial => 'layouts/x_edit_buttons', :locals => {:action_url => 'pre_prov', :continue_button => true, :no_reset => true}
   :javascript
     $(provisioningListenToRx);