feat: add documentation link for logs explorer quick filters

[ahmadshaheer]

Summary

Related Issues / PR's

close #6846

Screenshots

2025-01-20.13-23-32.mov

Updated recording: #6854 (comment)

Affected Areas and Manually Tested Areas

• Quick filters of logs explorer

---

Important

Adds documentation link for logs explorer quick filters with new empty state handling in CheckboxFilter.

• Behavior:
  • Adds documentation link for quick filters in logs explorer when no values are found, using LogsQuickFilterEmptyState.
  • LogsQuickFilterEmptyState component opens relevant documentation based on attribute key.
• Components:
  • New EmptyQuickFilterIcon component for displaying an icon in empty states.
  • Updates CheckboxFilter in Checkbox.tsx to include empty state handling with documentation link.
• Styles:
  • Adds styles for .go-to-docs in Checkbox.styles.scss for the new empty state UI.
• Types:
  • Introduces QuickFiltersSource enum in types.ts to differentiate between sources like LOGS_EXPLORER and INFRA_MONITORING.

^{This description was created by for 193c4fb. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to bb9f8e2 in 2 minutes and 59 seconds

More details

• Looked at 132 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:426

• Draft comment:
  Consider adding a null check for section before using it in the URL to prevent potential issues if filter.attributeKey.key is not found in QUICK_FILTER_DOC_PATHS.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:

1. The comment has a valid concern - if the key doesn't exist in QUICK_FILTER_DOC_PATHS, section would be undefined. 2. However, this is a UI element for documentation links - worst case is the link doesn't work perfectly. 3. The keys in QUICK_FILTER_DOC_PATHS seem to match the expected filter keys. 4. This is not a critical path that would break functionality.
   The comment identifies a real edge case that could occur. Missing documentation links could be frustrating for users.
   While valid, this is a low-risk UI enhancement feature. The worst case is a slightly malformed documentation URL, not a critical error.
   The comment should be deleted as it suggests defensive programming for a non-critical UI feature. The potential issue is minor and doesn't warrant the added complexity.

2. frontend/src/components/QuickFilters/QuickFilters.tsx:128

• Draft comment:
  Ensure that the key prop for the Checkbox and Slider components is unique. Consider using a combination of filter.type and filter.title or another unique identifier.
• Reason this comment was not posted:
  Comment did not seem useful.

3. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:553

• Draft comment:
  Avoid using inline styles like color={Color.BG_ROBIN_400}. Use CSS classes or styled components instead.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  While generally avoiding inline styles is good practice, this case is using a proper design token from a design system. The color is not hardcoded but rather referenced from a centralized token system. The styling is also quite minimal - just a single color property. Moving this to a CSS class would add complexity without much benefit.
  The comment correctly identifies an inline style usage. Using CSS classes could make the styling more maintainable and consistent with other components.
  However, since this is using a proper design token and is just a single color property, the benefit of moving it to CSS would be minimal. The current approach maintains the connection to the design system while being simple and clear.
  The comment should be deleted as it's suggesting a change that would add complexity without significant benefit, especially since proper design tokens are already being used.

Workflow ID: wflow_PNmEAQdHqkiRp1ef

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[nityanandagohain]

Show it only when there is no data for the key ?

Also add this mesage if possible

[ahmadshaheer]

Updated recording after the suggested changes

2025-01-20.17-21-58.mov

[ellipsis-dev]

❌ Changes requested. Incremental review on 233e0eb in 58 seconds

More details

• Looked at 355 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 4 drafted comments based on config settings.

1. frontend/src/assets/CustomIcons/EmptyQuickFilterIcon.tsx:90

• Draft comment:
  The EmptyQuickFilterIcon component is well-structured and follows best practices. No issues found.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The PR introduces a new icon component EmptyQuickFilterIcon which is used in the CheckboxFilter component. The icon is a static SVG and does not have any dynamic behavior or props that could lead to issues. The component is well-structured and follows React best practices. No issues found here.

2. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss:164

• Draft comment:
  The CSS changes are consistent with existing styles and follow best practices. No issues found.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The CSS changes in Checkbox.styles.scss are mostly structural and stylistic, aligning with the new design requirements. The changes are consistent with the existing styles and do not introduce any obvious issues. The use of BEM-like naming conventions is appropriate.

3. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:478

• Draft comment:
  The logic for displaying the documentation link is correctly implemented and aligns with the PR's intent. No issues found.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The CheckboxFilter component has been updated to include a new section for the documentation link when no attribute values are found. This aligns with the PR's intent to add a documentation link. The logic for displaying this section is correctly implemented, checking for !isLoading, !isInfraMonitoring, and !attributeValues.length. The URL construction for the documentation link is also correct.

4. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:494

• Draft comment:
  Avoid using inline styles for the ArrowUpRight icon's color property. Use a CSS class or styled component instead.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  While generally avoiding inline styles is good practice, in this case the color is using a design token which is the recommended approach for maintaining consistent theming. The comment seems to misunderstand that using a design token via props is actually a good pattern. The icon component likely expects a color prop as part of its API.
  Could there be value in moving even design token colors to CSS classes for better maintainability? Would that make the code more complex for little benefit?
  Using design tokens via props is a valid and common pattern, especially for icon components. Moving this to CSS would add complexity without clear benefits since we're already using the design system correctly.
  Delete this comment since it incorrectly flags proper usage of design tokens through component props as an issue.

Workflow ID: wflow_QR0sCgfhZivLh9FC

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[vikrantgupta25]

@ahmadshaheer the loading state shows the filter and no values found, which should not be the case. please take care of that

[ellipsis-dev]

❌ Changes requested. Incremental review on a103c97 in 51 seconds

More details

• Looked at 163 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/QuickFilterEmptyState.tsx:22

• Draft comment:
  Consider adding a default case for QUICK_FILTER_DOC_PATHS to handle unknown attributeKey values gracefully.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The PR introduces a new component QuickFilterEmptyState to handle the empty state of quick filters. This component is used in Checkbox.tsx to replace the inline JSX for the empty state. The component correctly uses the QUICK_FILTER_DOC_PATHS to generate the documentation link based on the attributeKey. The logic for opening the documentation link is encapsulated within the handleLearnMoreClick function, which is a good practice for separation of concerns. The component is styled using the existing CSS classes, ensuring consistency with the rest of the application. Overall, the component is well-structured and integrates seamlessly with the existing code.

2. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:460

• Draft comment:
  Ensure that the attributeKey passed to QuickFilterEmptyState is always valid and present in QUICK_FILTER_DOC_PATHS to avoid potential issues with undefined links.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The PR modifies the Checkbox.tsx file to use the new QuickFilterEmptyState component. This change is appropriate as it encapsulates the empty state logic into a separate component, improving code readability and maintainability. The QuickFilterEmptyState component is used when there are no attribute values and the isInfraMonitoring flag is false. This logic aligns with the existing behavior, ensuring that the empty state is displayed under the correct conditions. The removal of the handleLearnMoreClick function from Checkbox.tsx and its inclusion in QuickFilterEmptyState is a good refactor, as it centralizes the logic related to the empty state in one place.

3. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/QuickFilterEmptyState.tsx:1

• Draft comment:
  Avoid using component/index.tsx file structure for QuickFilterEmptyState. It makes it difficult to debug and find components using global search tools.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_Olb2ZgMvbk92p2dC

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to f9afdeb in 1 minute and 49 seconds

More details

• Looked at 411 lines of code in 7 files
• Skipped 0 files when reviewing.
• Skipped posting 4 drafted comments based on config settings.

1. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/QuickFilterEmptyState.tsx:23

• Draft comment:
  Consider adding a check to handle cases where attributeKey is not found in QUICK_FILTER_DOC_PATHS to avoid potential undefined behavior.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The issue is real - an undefined section would lead to a broken URL. However, looking at the QUICK_FILTER_DOC_PATHS object, it seems to be a fixed mapping for specific known attributes. The component is likely only used with these known keys. The PR rules say not to make speculative comments or ask for checks unless we're certain there's an issue.
  I could be wrong about the component only being used with known keys - there might be dynamic attribute keys passed in that aren't in the mapping.
  Without seeing the parent components and how this is used, we can't be certain this is a real issue. The PR rules specifically say to delete comments if we need more context.
  Delete the comment since we don't have strong evidence that undefined keys are actually possible in practice.

2. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:24

• Draft comment:
  Consider making source a required prop without a default value to ensure it is always provided.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The CheckboxFilter component uses the source prop to determine if the empty state with documentation should be shown. This is a good approach, but it would be more robust to ensure that source is always provided by making it a required prop without a default value. This will prevent any potential issues if the source is accidentally omitted.

3. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:447

• Draft comment:
  Consider storing the condition attributeValues.length > 0 in a variable to avoid repetition and improve readability.
• Reason this comment was not posted:
  Confidence changes required: 30%
  The CheckboxFilter component has a section where it checks if attributeValues.length > 0 to render the values. However, this check is repeated multiple times in the component. It would be more efficient to store this condition in a variable and reuse it, improving readability and maintainability.

4. frontend/src/pages/LogsExplorer/index.tsx:119

• Draft comment:
  Avoid using the component/index.tsx file structure approach. It makes it difficult to debug and find components using global search tools. This applies to other similar files as well.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

Workflow ID: wflow_2TxkJUHL0ZClGF2U

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 4d80c36 in 20 seconds

More details

• Looked at 76 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx:117

• Draft comment:
  The PR description mentions adding a documentation link to quick filters, but the code changes do not reflect this. The changes only modify the source property of QuickFilters components. This does not resolve the issue described in the PR.
• Reason this comment was not posted:
  Comment did not seem useful.

Workflow ID: wflow_7pl7eUAd5HiFYCJ1

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[vikrantgupta25]

minor comments

[ellipsis-dev]

👍 Looks good to me! Incremental review on a787c3d in 41 seconds

More details

• Looked at 113 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:527

• Draft comment:
  Ensure that the QUICK_FILTER_DOC_PATHS object in LogsQuickFilterEmptyState.tsx is comprehensive and includes all necessary attribute keys that might be used in the logs explorer. Missing keys could lead to broken links or lack of documentation access for certain filters.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The PR aims to add a documentation link for logs explorer quick filters. The LogsQuickFilterEmptyState component is used to display a message and a button that links to the documentation. The link is constructed using the QUICK_FILTER_DOC_PATHS object, which maps attribute keys to documentation sections. This seems to fulfill the requirement of linking to the documentation when no values are found for a quick filter.

Workflow ID: wflow_Kz8cl1UDEkToeLHx

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on c5b2d8b in 57 seconds

More details

• Looked at 172 lines of code in 7 files
• Skipped 0 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx:9

• Draft comment:
  The PR description mentions adding a documentation link to the quick filters, but there is no evidence of this change in the code. The PR only refactors the code by moving types to a separate file. This does not resolve the issue mentioned in the PR description.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/components/QuickFilters/FilterRenderers/Slider/Slider.tsx:1

• Draft comment:
  Avoid using inline styles or importing stylesheets directly in React components. Use CSS classes or styled components instead. This is also applicable in Checkbox.tsx, QuickFilters.tsx, LogsExplorer/index.tsx.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_Y9Pjtu8cNWfPmuTa

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 949242e in 51 seconds

More details

• Looked at 172 lines of code in 7 files
• Skipped 0 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. frontend/src/components/QuickFilters/FilterRenderers/Slider/Slider.tsx:3

• Draft comment:
  The PR description mentions adding a documentation link to the quick filters, but this change is not present in the code. Please ensure the documentation link is added as per the issue requirements.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/components/QuickFilters/FilterRenderers/Slider/Slider.tsx:1

• Draft comment:
  Avoid using inline styles or importing stylesheets directly in React components. Use CSS classes or styled components instead. This is also applicable in Checkbox.tsx, QuickFilters.tsx, LogsExplorer/index.tsx.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_gX2dmGssfDsKzGWa

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 193c4fb in 31 seconds

More details

• Looked at 52 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx:187

• Draft comment:
  The PR description mentions adding a documentation link to quick filters, but this change is not reflected in the code. Ensure the documentation link is added as required.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx:7

• Draft comment:
  Avoid using the component/index.tsx file structure approach, as it makes it difficult to debug and find components using global search tools like VS Code. This is applicable to the import from 'components/QuickFilters/QuickFilters'.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_C77rWpzjHO71Ux4Y

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.