chore: metrics explorer improvements

[amlannandy]

Summary

• Update Metadata API was updated, so corresponding UI changes were also required.
• Fixed the graph query call in related metrics
• Added error handling and empty states at few places
• Other minor fixes

Related Issues / PR's

fixes #7260

Screenshots

NA

Affected Areas and Manually Tested Areas

---

Important

Improve Metrics Explorer with updated Metadata API, enhanced error handling, and UI adjustments.

• API Updates:
  • Add temporality to MetricDetails and UpdateMetricMetadataProps in getMetricDetails.ts and updateMetricMetadata.ts.
  • Update updateMetricMetadata to include isMonotonic based on metricType and temporality.
• UI Enhancements:
  • Add error handling and empty states in RelatedMetrics.tsx and RelatedMetricsCard.tsx.
  • Update Explorer.tsx to use LOCALSTORAGE.METRICS_LIST_OPTIONS.
  • Add MetricsLoading component for loading states in MetricsLoading.tsx.
• Style Adjustments:
  • Modify styles in Explorer.styles.scss and MetricsLoading.styles.scss for better layout and responsiveness.
• Miscellaneous:
  • Remove unused imports and code in RelatedMetrics.tsx and RelatedMetricsCard.tsx.
  • Update MetricDetails.tsx to handle navigation and error states.

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

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 53d1129 in 2 minutes and 25 seconds

More details

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

1. frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx:110

• Draft comment:
  Avoid using inline styles. Move the background and overscrollBehavior styles to a dedicated CSS/SCSS file.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

2. frontend/src/container/MetricsExplorer/Explorer/RelatedMetricsCard.tsx:15

• Draft comment:
  Inconsistent error-checking: using both 'queryResult.error' and 'queryResult.isError'. Standardize error handling by using one consistent property (preferably queryResult.isError).
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

3. frontend/src/container/TimeSeriesView/TimeSeriesView.tsx:167

• Draft comment:
  Avoid inline style on the container div; move static styles like height and width into the CSS/SCSS file.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

4. frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx:129

• Draft comment:
  Consider abstracting repeated Select component setups into a reusable component. This will help maintain consistency and reduce duplication, especially for fields like 'metric_type' and 'temporality'.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50%
  While there is some duplication between the Select components, the differences (option mapping, state updates, types) are significant enough that abstracting them might add more complexity than it solves. The components are also localized to this specific use case and aren't reused elsewhere. The current implementation is clear and maintainable.
  The comment identifies a real pattern of duplication. A reusable component could make the code more DRY and enforce consistency.
  However, the duplication is minimal and the differences between the components make abstraction potentially more complex than helpful. The current code is clear and maintainable as is.
  The comment should be removed as the suggested refactor would add unnecessary complexity for minimal benefit in this specific case.

5. frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx:110

• Draft comment:
  Avoid inline styles in the Drawer component. Instead of setting styles (overscrollBehavior and background) inline (lines 110–112), consider moving these styles to a CSS class or using a styled component for consistency and easier theming.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

6. frontend/src/container/MetricsExplorer/Explorer/RelatedMetricsCard.tsx:15

• Draft comment:
  There is inconsistent error handling: the component checks both 'queryResult.error' and later 'queryResult.isError'. Consider using a single consistent flag for error state instead of mixing these approaches.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

7. frontend/src/container/MetricsExplorer/Summary/Summary.tsx:103

• Draft comment:
  Using 'eslint-disable-next-line react-hooks/exhaustive-deps' here may lead to missing dependency updates. Verify if 'handleChangeQueryData' (or related dependencies) should be included in the dependency array to avoid stale closures.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50%
  The eslint-disable is actually intentional here since we only want this to run once on mount to reset filters. Including handleChangeQueryData in the deps array would cause the effect to run whenever that function changes, which would repeatedly reset the filters. This would interfere with the component's functionality where filters are meant to persist until component unmount.
  I could be wrong about the intention - maybe the filters should be reset whenever handleChangeQueryData changes. The comment might be catching a real issue.
  The code comment explicitly states this is meant to run "when the component mounts", and the empty deps array with eslint-disable is a common pattern for mount-only effects. The suggested change would break the intended functionality.
  The comment should be deleted as it suggests a change that would break the intended mount-only behavior of the effect.

8. frontend/src/container/TimeSeriesView/TimeSeriesView.tsx:167

• Draft comment:
  The graph container div has inline styles (height and width). For consistency and maintainability, consider moving these styles into a CSS class or styled component.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

9. frontend/src/constants/localStorage.ts:2

• Draft comment:
  The value for METRICS_TIME_IN_DURATION is 'metricsTimeDurations', which uses lowerCamelCase instead of the all-uppercase style used by the other enum values. If this is unintentional, please consider updating it for consistency.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

10. frontend/src/container/MetricsExplorer/Summary/Summary.tsx:49

• Draft comment:
  There is an inconsistency in the casing of the logical operator for filters. In the useMemo hook (line 49), the operator is set as 'and' (lowercase), but in the useEffect (line 104-107), it's reset to 'AND' (uppercase). Consider standardizing this value throughout the file for clarity and to avoid potential issues.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_tGoe1S0eGFmryCVZ

---

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 0eb3cc1 in 51 seconds

More details

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

1. frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx:25

• Draft comment:
  Removed debugging logs. Ensure not to leave console logs in production code.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx:25

• Draft comment:
  Good cleanup: Removing debug console.log statements to avoid unwanted logging in production.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

Workflow ID: wflow_Xlw8l2escvHdlaq2

---

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