upcoming: [DI-20348] - Changes for Adding CloudPulseCustomSelect component and Integration

[venkymano-akamai]

Description 📝

Changes for new component CloudPulseCustomSelect that helps to display various filters in the dashboard view and integration of custom select component with metrics API call.

Changes 🔄

List any change relevant to the reviewer.

1. Created new component CloudPulseCustomSelect.
2. Integration of the select custom filters with the metrics API call.

Target release date 🗓️

9/3/24

Preview 📷

Include a screenshot or screen recording of the change

💡 Use <video src="" /> tag when including recordings in table.

Before	After

How to test 🧪

1. Login as mock user since some of the API endpoints are not available.
2. Go the Monitors tab.
3. In the dashboard selection dropdown, select Dbaas Dashboard.
4. In the Filters selection section, you can see select an Engine dropdown, that uses CloudPulseCustomSelect component.
5. Also you can add a filter in the FilterConfig.ts file for dbaas like below and upon selection, we can see the filter goes in the metrics API request inside filters object.

{
      configuration: {
        filterKey: 'test',
        filterType: 'string',
        isFilterable: true, // isFilterable -- this determines whethere you need to pass it metrics api
        isMetricsFilter: false, // if it is false, it will go as a part of filter params, else global filter
        isMultiSelect: false,
        name: 'Test Filter',
        neededInServicePage: false,
        options: [
          {
            id: 'test',
            label: 'Test1',
          },
          {
            id: 'test2',
            label: 'Test2',
          },
        ],
        placeholder: 'Select a Test',
        priority: 5,
        type: CloudPulseSelectTypes.static,
      },
      name: 'Test Filter',
    }

6. In the above config, if you remove the options, the error message will appear below the dropdown
   Note- You might encounter flickering issues, that is caused due to preferences, that will be solved in the upcoming PR

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[hkhalil-akamai]

Is there a typo in this string?

[hkhalil-akamai]

Can we shorten the name of this function? Use the JSDoc comment instead to describe what it does.

[hkhalil-akamai]

Same comment here about shortening this function name.

[venkymano-akamai]

@hkhalil-akamai , addressed the comments, please check if it is good now

[github-actions]

Coverage Report: ✅
Base Coverage: 82.62%
Current Coverage: 82.62%

[jaalah-akamai]

@dwiley-akamai this is ready for review 👍

[dwiley-akamai]

Should this be cased as "DBaaS"?

[venkymano-akamai]

@dwiley-akamai / @hkhalil-akamai - Addressed those comments including eslint issues as well, please check if it is good now

[hkhalil-akamai]

Thanks for addressing feedback & apologies for the delay in approving.

[nikhagra-akamai]

Thanks for addressing feedback & apologies for the delay in approving.

Thank you for approval @hkhalil-akamai. @jaalah-akamai / @dwiley-akamai can we get second approval and merge if everything is fine

[venkymano-akamai]

@jaalah-akamai , we have enough approvals, please check if it is good for merging