Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make dshboards "refreshable" #1784

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

filipgutica
Copy link
Contributor

@filipgutica filipgutica commented Nov 12, 2024

Summary

https://konghq.atlassian.net/browse/MA-3089

  • Expose a "refresh" function from dashboard-renderer so host app can initiate "refresh"
  • Use state validating and validating_has_data to determine loading state appropriately

https://www.loom.com/share/afcd026de712408da886e722cb044395

@kongponents-bot
Copy link
Collaborator

Preview components from this PR in consuming application

In consuming application project install preview versions of shared packages generated by this PR:

@kong-ui-public/analytics-metric-provider@pr-1784
@kong-ui-public/dashboard-renderer@pr-1784

Copy link
Contributor

@adorack adorack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to review.

@@ -127,6 +129,7 @@ const {
queryFn,
averageLatencies,
abortController: props.abortController,
refreshCounter: toRef(props, 'refreshCounter'),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we don't toRef it here, it loses reactivity since it's being passed off to a util function 🤔

Copy link
Contributor

@adorack adorack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please fix the PR title before merging.

@@ -39,6 +39,7 @@ interface FetcherOptions {
queryFn: AnalyticsBridge['queryFn']
averageLatencies: Ref<boolean>,
abortController?: AbortController
refreshCounter?: Ref<number>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the prop has a default value, this option will always be available.

Suggested change
refreshCounter?: Ref<number>
refreshCounter: Ref<number>

@@ -115,7 +115,7 @@ export default function useMetricFetcher(opts: MetricFetcherOptions): FetcherRes
// need to have some uniqueness in the cache key to avoid collisions.
// this was happening when there are multiple providers on the same page with the same dimensions and metrics.
// For example the singleProvider and multiProvider that appear in the test harness.
return `metric-fetcher-${opts.timeframe.value.cacheKey()}-${opts.dimensions?.join('-')}-${opts.metrics.value?.join('-')}-${additionalFilterKey}`
return `metric-fetcher-${opts.timeframe.value.cacheKey()}-${opts.dimensions?.join('-')}-${opts.metrics.value?.join('-')}-${additionalFilterKey}-${opts.refreshCounter?.value}`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return `metric-fetcher-${opts.timeframe.value.cacheKey()}-${opts.dimensions?.join('-')}-${opts.metrics.value?.join('-')}-${additionalFilterKey}-${opts.refreshCounter?.value}`
return `metric-fetcher-${opts.timeframe.value.cacheKey()}-${opts.dimensions?.join('-')}-${opts.metrics.value?.join('-')}-${additionalFilterKey}-${opts.refreshCounter.value}`

(With the above suggestion.)

@@ -173,7 +173,7 @@ export default function useMetricFetcher(opts: MetricFetcherOptions): FetcherRes
})

return {
isLoading: computed(() => STATE.PENDING === metricRequestState.value),
isLoading: computed(() => [STATE.PENDING, STATE.VALIDATING, STATE.VALIDATING_HAS_DATA].includes(metricRequestState.value)),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm. This makes the auto-refresh UX very noisy -- the page drops to loading states every time the charts update. I'm not aware of many uses of auto-refresh right now, so this is probably an acceptable trade-off right now, but I'll poke Christian and Helen.

@@ -16,4 +16,5 @@ export interface MetricFetcherOptions {
queryReady: Ref<boolean>
queryFn: AnalyticsBridge['queryFn']
abortController?: AbortController
refreshCounter?: Ref<number>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
refreshCounter?: Ref<number>
refreshCounter: Ref<number>

@@ -31,8 +31,10 @@ const props = withDefaults(defineProps<{
context: DashboardRendererContextInternal,
height?: number,
queryReady: boolean,
refreshCounter?: number,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need to be optional? The renderer is the only thing that renders tiles, and it always provides the counter...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants