Add Search Bar for Cloud Tenants Images and Instances Page

[Rajkannan-2252]

Hi @Fryguy,

I need to have a search bar for these pages,

When I go to Cloud Tenants, I can see the tenant user dashboard. In that dashboard, there are multiple images and instances, so I need a search option to filter the images or instances.

Path: Compute/Cloud/Tenants/Tenant Dashboard/Tenant Name (All Images), (All Instances)

Could you please guide me on how to add a search bar?

For your reference, I shared the screenshots below.

[jeffibm]

Hey @Fryguy , implementing a search bar will be a time-consuming task much more than this. https://github.com/ManageIQ/manageiq-ui-classic/pull/9159.

Possible ToDo's-

• Reuse the react component (from the above PR) right above the line -cloud_tenant/show.html.haml#L8
• or maybe need to think of a different way to do it.
• Need a new GET request to filter the results.

We need to dig deep to find a solution.

In the meantime, @Rajkannan-2252 can refer to the previous PRs and post his findings here to discuss further.

[Rajkannan-2252]

Hi @jeffibm,

Thank you for your response and for trying out the solution from the previous pull request. It's unfortunate that the search bar didn't appear on our page even after adding the React component above the specified line in the cloud_tenant/show.html.haml#L8 file.

[jeffibm]

Hi @jeffibm,

Hey @Rajkannan-2252 ,

Adding the component directly is not enough :)

You will have to improvise a bit to make it work.

I only suggested that you refer to the previous PR to get some ideas.

[Rajkannan-2252]

Hello @jeffibm Thanks for the input.

We are trying this from our end too. Meanwhile, kindly let us know if you get any outputs for the same.

[Rajkannan-2252]

Hello @jeffibm

"Based on our previous pull request, we're looking to incorporate the code snippet for the filter_with_name method. You can find it at this location:https://github.com/ManageIQ/manageiq/blob/71899d696b71d8897f38246aa65d82923e65aaae/app/models/miq_template.rb#L35 For this request, where should this code be added?

[jeffibm]

Hello @jeffibm

"Based on our previous pull request, we're looking to incorporate the code snippet for the filter_with_name method. You can find it at this location:

https://github.com/ManageIQ/manageiq/blob/71899d696b71d8897f38246aa65d82923e65aaae/app/models/miq_template.rb#L35

For this request, where should this code be added?

Hey, @Rajkannan-2252 , I have no idea about this.

[Rajkannan-2252]

"Hi @jeffibm,

I implemented the changes from the previous pull request as instructed. While I successfully added the search bar function to the cloud tenant page, I encountered an issue with filtering the search results.

I've provided screenshots below for your reference.

Thank you."

[jeffibm]

Hey @Rajkannan-2252 , I will have to debug this whole module before I can support you with answers, and it's way more complicated than the previous PR. we will let you know once the resources are available to work on this. Thanks

[Rajkannan-2252]

Hi @jeffibm, Thank you for the update.

Take your time with the debugging process.

[Rajkannan-2252]

Hi @jeffibm,

Any updates on this PR?

[jeffibm]

Hi @jeffibm,

Any updates on this PR?

Hey @Rajkannan-2252 , no updates yet. will start on this when resources are released from high-priority tasks.

[Rajkannan-2252]

Hello @jeffibm,

Got it! Just let me know when you're ready to proceed, and I'll be here to assist you with whatever you need.

[Rajkannan-2252]

Hello @Fryguy ,

Any updates on this PR?

[Rajkannan-2252]

Hello @jeffibm ,

Any updates on this PR?

[Rajkannan-2252]

Hi @GilbertCherrie ,

I need to have a search bar for these pages,

When I go to Cloud Tenants, I can see the tenant user dashboard. In that dashboard, there are multiple images and instances, so I need a search option to filter the images or instances.

Path: Compute/Cloud/Tenants/Tenant Dashboard/Tenant Name (All Images), (All Instances)

Could you please guide me on how to add a search bar?

For your reference, I shared the screenshots below.

[GilbertCherrie]

I'm not too sure how to do it and don't really have the bandwidth to look into this right now, @jeffibm do you have any idea how to add the search bar here?

[Rajkannan-2252]

Hi @jeffibm, I understand you're busy. For your reference, we added a new React component named FilterImage. Below are the details:

Component File Path: /app/javascript/components/filter-image/index.jsx 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 FilterImage = ({ 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="filter-image"> <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() } ); };

export default FilterImage;

FilterImage.propTypes = { searchText: PropTypes.string.isRequired, url: PropTypes.string.isRequired, };

View File Path: /app/views/cloud_tenant/show.html.haml #main_div

• if @showtype == "performance" = render partial: "layouts/performance_async"
• else
  • 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(action: "show", id: @record&.id, only_path: true) = react('FilterImage', { initialSearchText: params[:search_text] || '', url: url }) = render partial: "layouts/gtl", locals: { action_url: "show/#{@record&.id}" }
  • elsif @showtype == "compare" = raise 'compare partial called through "show"' = render partial: "layouts/compare"
  • elsif @showtype == "drift_history" = render partial: "layouts/drift_history"
  • elsif @showtype == "drift" = raise 'drift partial called through "show"' = render partial: "layouts/compare"
  • elsif @showtype == "item" = render partial: "layouts/item"
  • elsif @showtype == "timeline" = render partial: "layouts/tl_show_async"
  • elsif @showtype == 'main' = render partial: "layouts/textual_groups_generic"

Could you please review this and let me know if anything needs to be adjusted? Thank you!

[miq-bot]

This issue has been automatically marked as stale because it has not been updated for at least 3 months.

If you can still reproduce this issue on the current release or on master, please reply with all of the information you have about it in order to keep the issue open.