diff --git a/app/javascript/dashboard/api/captain/assistant.js b/app/javascript/dashboard/api/captain/assistant.js index dcd92f735..1fc17798d 100644 --- a/app/javascript/dashboard/api/captain/assistant.js +++ b/app/javascript/dashboard/api/captain/assistant.js @@ -37,6 +37,20 @@ class CaptainAssistant extends ApiClient { params: { range, timezone_offset: getTimezoneOffset() }, }); } + + getDrilldown({ assistantId, metric, range, page, signal }) { + const requestConfig = { + params: { + metric, + range, + timezone_offset: getTimezoneOffset(), + page, + }, + }; + if (signal) requestConfig.signal = signal; + + return axios.get(`${this.url}/${assistantId}/drilldown`, requestConfig); + } } export default new CaptainAssistant(); diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue new file mode 100644 index 000000000..cf17e7804 --- /dev/null +++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue @@ -0,0 +1,234 @@ + + + diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue index 9f8a76f43..cf66a0a2f 100644 --- a/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue +++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue @@ -8,16 +8,35 @@ const props = defineProps({ hint: { type: String, default: '' }, // null = neutral, true = good direction, false = bad direction trendGood: { type: Boolean, default: null }, + clickable: { type: Boolean, default: false }, }); +const emit = defineEmits(['click']); + const trendClass = computed(() => { if (props.trendGood === null) return 'text-n-slate-11'; return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11'; }); + +const onActivate = () => { + if (props.clickable) emit('click'); +}; diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js index 7c37cd9cc..8309ed360 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js @@ -1,7 +1,13 @@ import { computed, ref } from 'vue'; import ReportsAPI from 'dashboard/api/reports'; -export function useReportDrilldown() { +// `fetcher` is any `({ ...request, page, signal }) => Promise` returning the +// shared drilldown envelope (`{ data: { meta, payload } }`), so the same paging +// and abort machinery backs both the reports and Captain assistant drilldowns. +// The default is wrapped so `ReportsAPI` stays the receiver when invoked. +export function useReportDrilldown( + fetcher = params => ReportsAPI.getDrilldown(params) +) { const activeRequest = ref(null); const records = ref([]); const meta = ref({}); @@ -20,17 +26,7 @@ export function useReportDrilldown() { const isCurrentRequest = token => token === requestToken && !!activeRequest.value; - const requestFingerprint = request => - JSON.stringify({ - metric: request.metric, - bucketTimestamp: request.bucketTimestamp, - from: request.from, - to: request.to, - type: request.type, - id: request.id, - groupBy: request.groupBy, - businessHours: request.businessHours, - }); + const requestFingerprint = request => JSON.stringify(request); const abortActiveRequest = () => { if (!activeRequestController) return; @@ -55,7 +51,7 @@ export function useReportDrilldown() { hasError.value = false; try { - const response = await ReportsAPI.getDrilldown({ + const response = await fetcher({ ...request, page, signal: controller.signal, diff --git a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue index 56a5b5cae..027f75ff5 100644 --- a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue @@ -1,5 +1,6 @@