feat: Multi Select Variable

[ktx-vaidehi]

• Dashboard : Multiple variable selection dropdown does not open in full screen mode #3460
• Variable dropdown in dashboads doesn't provide option for unselect/select #2015

Summary by CodeRabbit

• New Features

  • Added multi-select functionality for variables in dashboards.
  • Introduced a custom value selector component for dashboard settings.
  • Updated the app to use Quasar's fullscreen module.

• Enhancements

  • Improved query verification process in DashboardQueryEditor.
  • Enhanced filtering logic for variable placeholders and values in queries.
  • Added "IN" operator support for dashboard queries.

• Bug Fixes

  • Fixed issues with handling and displaying selected values in various components.

• Performance Improvements

  • Increased size parameter for dashboard panel data loading from 10 to 100.

• Localization

  • Added new localization key: "multiSelect" for multiple selection support.

• UI/UX

  • Updated styles and key bindings in DrilldownPopUp.
  • Enhanced display logic for selected values in VariableQueryValueSelector.

• Dependencies

  • Updated Quasar package from version ^2.7.5 to ^2.15.4.

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 424a839 and 61f4b39.

Files ignored due to path filters (1)

• web/package-lock.json is excluded by !**/package-lock.json

Files selected for processing (18)

• src/common/meta/dashboards/v3/mod.rs (1 hunks)
• web/package.json (1 hunks)
• web/src/components/dashboards/PanelSchemaRenderer.vue (1 hunks)
• web/src/components/dashboards/VariablesValueSelector.vue (11 hunks)
• web/src/components/dashboards/addPanel/DashboardMapQueryBuilder.vue (2 hunks)
• web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue (2 hunks)
• web/src/components/dashboards/addPanel/DashboardQueryEditor.vue (1 hunks)
• web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue (2 hunks)
• web/src/components/dashboards/addPanel/DrilldownPopUp.vue (4 hunks)
• web/src/components/dashboards/settings/AddSettingVariable.vue (5 hunks)
• web/src/components/dashboards/settings/VariableCustomValueSelector.vue (1 hunks)
• web/src/components/dashboards/settings/VariableQueryValueSelector.vue (4 hunks)
• web/src/composables/dashboard/usePanelDataLoader.ts (5 hunks)
• web/src/composables/useDashboardPanel.ts (2 hunks)
• web/src/locales/languages/en.json (1 hunks)
• web/src/main.ts (2 hunks)
• web/src/views/Dashboards/RenderDashboardCharts.vue (1 hunks)
• web/src/views/Dashboards/ViewDashboard.vue (4 hunks)

Files skipped from review as they are similar to previous changes (15)

• src/common/meta/dashboards/v3/mod.rs
• web/package.json
• web/src/components/dashboards/PanelSchemaRenderer.vue
• web/src/components/dashboards/VariablesValueSelector.vue
• web/src/components/dashboards/addPanel/DashboardMapQueryBuilder.vue
• web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue
• web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
• web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue
• web/src/components/dashboards/addPanel/DrilldownPopUp.vue
• web/src/components/dashboards/settings/AddSettingVariable.vue
• web/src/components/dashboards/settings/VariableCustomValueSelector.vue
• web/src/components/dashboards/settings/VariableQueryValueSelector.vue
• web/src/locales/languages/en.json
• web/src/views/Dashboards/RenderDashboardCharts.vue
• web/src/views/Dashboards/ViewDashboard.vue

Additional context used

Biome

web/src/main.ts

[error] 52-52: Unexpected any. Specify a different type.

web/src/composables/dashboard/usePanelDataLoader.ts

[error] 37-37: Unexpected any. Specify a different type.

---

[error] 38-38: Unexpected any. Specify a different type.

---

[error] 39-39: Unexpected any. Specify a different type.

---

[error] 40-40: Unexpected any. Specify a different type.

---

[error] 41-41: Unexpected any. Specify a different type.

---

[error] 43-43: Unexpected any. Specify a different type.

---

[error] 50-50: Unexpected any. Specify a different type.

---

[error] 57-57: Unexpected any. Specify a different type.

---

[error] 60-60: Unexpected any. Specify a different type.

---

[error] 67-67: Unexpected any. Specify a different type.

---

[error] 67-67: Use !== instead of !=.
!= is only allowed when comparing against null

---

[error] 68-68: Unexpected any. Specify a different type.

---

[error] 74-74: Unexpected any. Specify a different type.

---

[error] 94-97: The call chain .map().flat() can be replaced with a single .flatMap() call.

---

[error] 95-95: Unexpected any. Specify a different type.

---

[error] 96-96: Unexpected any. Specify a different type.

---

[error] 98-98: Unexpected any. Specify a different type.

---

[error] 111-111: Unexpected any. Specify a different type.

---

[error] 114-114: Use === instead of ==.
== is only allowed when comparing against null

---

[error] 141-141: Unexpected any. Specify a different type.

web/src/composables/useDashboardPanel.ts

[error] 36-36: Unexpected any. Specify a different type.

---

[error] 130-130: Unexpected any. Specify a different type.

---

[error] 135-135: Unexpected any. Specify a different type.

---

[error] 164-164: Unexpected any. Specify a different type.

---

[error] 214-214: Use === instead of ==.
== is only allowed when comparing against null

---

[error] 217-217: Unexpected any. Specify a different type.

---

[error] 245-245: Unexpected any. Specify a different type.

---

[error] 275-275: Unexpected any. Specify a different type.

---

[error] 288-288: Unexpected any. Specify a different type.

---

[error] 307-307: Unexpected any. Specify a different type.

---

[error] 307-307: Use === instead of ==.
== is only allowed when comparing against null

---

[error] 320-324: Template literals are preferred over string concatenation.

---

[error] 329-329: Use === instead of ==.
== is only allowed when comparing against null

---

[error] 333-333: Use === instead of ==.
== is only allowed when comparing against null

---

[error] 334-334: Use === instead of ==.
== is only allowed when comparing against null

---

[error] 344-344: Unexpected any. Specify a different type.

---

[error] 362-362: Unexpected any. Specify a different type.

---

[error] 362-362: Use === instead of ==.
== is only allowed when comparing against null

---

[error] 375-379: Template literals are preferred over string concatenation.

---

[error] 384-384: Use === instead of ==.
== is only allowed when comparing against null

Additional comments not posted (5)

web/src/main.ts (2)

17-17: Import of AppFullscreen looks good.

Ensure that all dependencies and configurations required for AppFullscreen are properly set up.

---

42-42: Configuration of AppFullscreen in Quasar plugins is correctly implemented.

web/src/composables/dashboard/usePanelDataLoader.ts (1)

707-726: Addition of the areArraysEqual function is well-implemented for comparing arrays.

Consider adding unit tests for this function to ensure its correctness across various edge cases.

web/src/composables/useDashboardPanel.ts (2)

832-832: Increase the size parameter to improve data retrieval efficiency.

This change aligns with the PR's objective to enhance backend functionality by allowing more data to be fetched in a single call, which can improve performance and user experience.

---

873-873: Increase the size parameter to improve data retrieval efficiency.

This change is consistent with the previous one and further supports the enhancement of data handling capabilities in the application.