Skip to content

feat(dashboard): apply new query policy & refactor widget context #5746

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.

Sign up for GitHub

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

Merged
piggggggggy merged 18 commits into from
Apr 7, 2025
Merged

feat(dashboard): apply new query policy & refactor widget context #5746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
4c7b0f8
chore: edit composable name
piggggggggy Apr 3, 2025
910a2fe
refactor(query-key-composable): add reactivity to returned params
piggggggggy Apr 6, 2025
cd46167
feat(widget-n-dashboard): create separated resource query
piggggggggy Apr 6, 2025
1bc22ce
fix(dashboard): apply new query key composable
piggggggggy Apr 6, 2025
7bf79b6
feat(widget-load): create widget load context composable
piggggggggy Apr 6, 2025
2fa0ca1
fix(widget): apply new query key composable
piggggggggy Apr 6, 2025
0b0c504
fix(data-table-cascade-update): apply new query key composable
piggggggggy Apr 6, 2025
089e40c
fix(widget-component): apply changed composable
piggggggggy Apr 6, 2025
ff59b33
fix(widgets): apply widget load context composable
piggggggggy Apr 6, 2025
b8c9ee8
chore: apply changed dashboard composable
piggggggggy Apr 6, 2025
d2bbad7
fix(dashboard): apply changed query composables
piggggggggy Apr 6, 2025
37c5ec4
chore(widget-form-query): change composable name & narrow context
piggggggggy Apr 6, 2025
5af9427
fix(widget): apply changed query composables
piggggggggy Apr 6, 2025
01adc75
chore: small fix
piggggggggy Apr 6, 2025
8826137
fix(dashboard-query): separate dashboard query context
piggggggggy Apr 7, 2025
f4d02ea
fix(dashboard): apply changed dashboard query composables
piggggggggy Apr 7, 2025
042f478
chore: small fix
piggggggggy Apr 7, 2025
4640bd9
chore: remove log
piggggggggy Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 36 additions & 24 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import {
computed, reactive, watch,
} from 'vue';
import type { TranslateResult } from 'vue-i18n';
import { useRoute } from 'vue-router/composables';

import { useMutation } from '@tanstack/vue-query';
import { useMutation, useQueryClient } from '@tanstack/vue-query';

import {
PButton, PPopover, PSelectCard, PI, PDivider,
Expand Down Expand Up @@ -32,7 +33,8 @@ import WidgetFormAssetSecurityDataSourcePopper
import WidgetFormCostDataSourcePopper from '@/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue';
import WidgetFormUnifiedCostDataSourcePopper
from '@/common/modules/widgets/_components/WidgetFormUnifiedCostDataSourcePopper.vue';
import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
import {
DATA_SOURCE_DOMAIN,
DATA_TABLE_OPERATOR,
Expand All @@ -45,34 +47,44 @@ import type {
DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions, DataTableTransformOptions,
} from '@/common/modules/widgets/types/widget-model';

import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';

const widgetGenerateStore = useWidgetGenerateStore();
const widgetGenerateState = widgetGenerateStore.state;
const allReferenceStore = useAllReferenceStore();
const dashboardDetailStore = useDashboardDetailInfoStore();
const dashboardDetailState = dashboardDetailStore.state;
const userStore = useUserStore();
const route = useRoute();
const dashboardId = computed(() => route.params.dashboardId);

const emit = defineEmits<{(e: 'scroll'): void;}>();

const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);

/* Query */
const {
api: widgetApi,
} = useWidgetQuery({
widgetId: computed(() => widgetGenerateState.widgetId),
});
const {
dataTableList,
api,
keys: widgetQueryKeys,
queryClient,
} = useWidgetFormQuery({
keys: dataTableKeys,
api: dataTableApi,
} = useWidgetDataTableListQuery({
widgetId: computed(() => widgetGenerateState.widgetId),
});
const queryClient = useQueryClient();

const {
dashboard,
keys,
} = useDashboardDetailQuery({
dashboardId: computed(() => dashboardDetailState.dashboardId),
} = useDashboardGetQuery({
dashboardId,
});
const {
keys: widgetKeys,
} = useDashboardWidgetListQuery({
dashboardId,
});


Expand Down Expand Up @@ -193,16 +205,16 @@ const state = reactive({

/* Api */
const widgetCreateFn = (params: WidgetCreateParams): Promise<WidgetModel> => {
if (dashboardDetailState.dashboardId?.startsWith('private')) {
return api.privateWidgetAPI.create(params);
if (dashboardId.value?.startsWith('private')) {
return widgetApi.privateWidgetAPI.create(params);
}
return api.publicWidgetAPI.create(params);
return widgetApi.publicWidgetAPI.create(params);
};
const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutation({
mutationFn: widgetCreateFn,
onSuccess: (data) => {
const _isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
const widgetListQueryKey = _isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
const _isPrivate = dashboardId.value?.startsWith('private');
const widgetListQueryKey = _isPrivate ? widgetKeys.privateWidgetListQueryKey : widgetKeys.publicWidgetListQueryKey;
queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => (oldData.results?.length ? {
...oldData, results: [...oldData.results, data],
} : {
Expand All @@ -215,16 +227,16 @@ const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutatio
},
});
const dataTableAddFn = (params: DataTableAddParameters): Promise<DataTableModel> => {
if (dashboardDetailState.dashboardId?.startsWith('private')) {
return api.privateDataTableAPI.add(params);
if (dashboardId.value?.startsWith('private')) {
return dataTableApi.privateDataTableAPI.add(params);
}
return api.publicDataTableAPI.add(params);
return dataTableApi.publicDataTableAPI.add(params);
};
const { mutateAsync: addDataTable, isPending: dataTableAddLoading } = useMutation({
mutationFn: dataTableAddFn,
onSuccess: (data) => {
const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey;
const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => (oldData.results?.length ? {
...oldData, results: [...oldData.results, data],
} : {
Expand Down Expand Up @@ -269,7 +281,7 @@ const handleCreateUnsavedTransform = async (operator: DataTableOperator) => {
} as Partial<DataTableModel>;

const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey;
const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => (oldData.results?.length ? {
...oldData, results: [...oldData.results, unsavedTransformData],
} : {
Expand All @@ -288,7 +300,7 @@ const handleConfirmDataSource = async () => {
// create widget
if (widgetGenerateState.overlayType === 'ADD' && !widgetGenerateState.widgetId) {
await createWidget({
dashboard_id: dashboardDetailState.dashboardId as string,
dashboard_id: dashboardId.value as string,
tags: { created_by: userStore.state.userId },
widget_type: 'table',
});
Expand Down
89 changes: 51 additions & 38 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
computed, defineExpose, onMounted, reactive, watch,
} from 'vue';

import { useMutation } from '@tanstack/vue-query';
import { useMutation, useQueryClient } from '@tanstack/vue-query';
import {
cloneDeep, isArray, isEqual, uniq,
} from 'lodash';
Expand All @@ -17,6 +17,7 @@ import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data
import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete';
import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
import { i18n } from '@/translations';

import { useAllReferenceStore } from '@/store/reference/all-reference-store';
Expand All @@ -38,7 +39,8 @@ import WidgetFormDataTableCardSourceForm
import {
useDataTableCascadeUpdate,
} from '@/common/modules/widgets/_composables/use-data-table-cascade-update';
import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
import {
DATA_SOURCE_DOMAIN,
DATA_TABLE_OPERATOR,
Expand All @@ -53,7 +55,6 @@ import type {
} from '@/common/modules/widgets/types/widget-model';

import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';

interface Props {
selected: boolean;
Expand All @@ -68,20 +69,24 @@ const props = defineProps<Props>();
const widgetGenerateStore = useWidgetGenerateStore();
const widgetGenerateState = widgetGenerateStore.state;
const allReferenceStore = useAllReferenceStore();
const dashboardDetailStore = useDashboardDetailInfoStore();
const dashboardDetailState = dashboardDetailStore.state;

/* Query */
const {
widget,
keys: widgetKeys,
fetcher: widgetFetcher,
} = useWidgetQuery({
widgetId: computed(() => widgetGenerateState.widgetId),
});
const {
dataTableList,
keys,
api,
fetcher,
queryClient,
} = useWidgetFormQuery({
keys: dataTableKeys,
api: dataTableApi,
fetcher: dataTableFetcher,
} = useWidgetDataTableListQuery({
widgetId: computed(() => widgetGenerateState.widgetId),
});
const queryClient = useQueryClient();
const {
cascadeUpdateDataTable,
} = useDataTableCascadeUpdate({
Expand Down Expand Up @@ -230,33 +235,37 @@ const modalState = reactive({
referenceDataTableName: '',
});

/* Query Keys */
const { withSuffix: privateDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'get');
const { withSuffix: publicDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'get');
const { withSuffix: privateDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'load');
const { withSuffix: publicDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'load');
const { withSuffix: privateWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load');
const { withSuffix: publicWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load');
const { withSuffix: privateWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load-sum');
const { withSuffix: publicWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load-sum');

/* APIs */
const invalidateLoadQueries = async (data: DataTableModel) => {
await queryClient.invalidateQueries({
queryKey: [
...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
data.data_table_id,
],
});
await queryClient.invalidateQueries({
queryKey: [
...(state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
dashboardDetailState.dashboardId,
widgetGenerateState.widgetId,
],
});
await queryClient.invalidateQueries({
queryKey: [
...(state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
dashboardDetailState.dashboardId,
widgetGenerateState.widgetId,
],
});
if (!widgetGenerateState.widgetId) return;
if (data.data_table_id.startsWith('private')) {
await Promise.all([
queryClient.invalidateQueries({ queryKey: privateDataTableLoadQueryKey(state.dataTableId) }),
queryClient.invalidateQueries({ queryKey: privateWidgetLoadQueryKey(widgetGenerateState.widgetId) }),
queryClient.invalidateQueries({ queryKey: privateWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }),
]);
} else {
await Promise.all([
queryClient.invalidateQueries({ queryKey: publicDataTableLoadQueryKey(state.dataTableId) }),
queryClient.invalidateQueries({ queryKey: publicWidgetLoadQueryKey(widgetGenerateState.widgetId) }),
queryClient.invalidateQueries({ queryKey: publicWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }),
]);
}
};
const { mutateAsync: updateDataTableMutation } = useMutation({
mutationFn: fetcher.updateDataTableFn,
mutationFn: dataTableFetcher.updateDataTableFn,
onSuccess: async (data) => {
const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
const dataTableListQueryKey = state.isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
if (oldData.results) {
return {
Expand All @@ -271,6 +280,7 @@ const { mutateAsync: updateDataTableMutation } = useMutation({
}
return oldData;
});
await queryClient.invalidateQueries({ queryKey: state.isPrivate ? privateDataTableGetQueryKey(state.dataTableId) : publicDataTableGetQueryKey(state.dataTableId) });
await invalidateLoadQueries(data);

setInitialDataTableForm();
Expand All @@ -284,11 +294,11 @@ const { mutateAsync: updateDataTableMutation } = useMutation({
},
});
const { mutateAsync: updateWidget } = useMutation({
mutationFn: fetcher.updateWidgetFn,
mutationFn: widgetFetcher.updateWidgetFn,
onSuccess: (data) => {
const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
? keys.privateWidgetGetQueryKey
: keys.publicWidgetGetQueryKey;
? widgetKeys.privateWidgetGetQueryKey
: widgetKeys.publicWidgetGetQueryKey;
queryClient.setQueryData(widgetQueryKey.value, () => data);
},
onError: (e) => {
Expand Down Expand Up @@ -363,8 +373,8 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
};
const deleteDataTableFn = (params: DataTableDeleteParameters): Promise<void> => {
if (params.data_table_id.startsWith('private')) {
return api.privateDataTableAPI.delete(params);
} return api.publicDataTableAPI.delete(params);
return dataTableApi.privateDataTableAPI.delete(params);
} return dataTableApi.publicDataTableAPI.delete(params);
};
const { mutateAsync: deleteDataTable } = useMutation({
mutationFn: deleteDataTableFn,
Expand All @@ -376,7 +386,7 @@ const { mutateAsync: deleteDataTable } = useMutation({
widgetGenerateStore.setAllDataTableInvalidMap(_allDataTableInvalidMap);

const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
const dataTableListQueryKey = _isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
if (oldData.results) {
return {
Expand Down Expand Up @@ -441,6 +451,9 @@ const handleCancelModal = () => {
modalState.visible = false;
};
const handleUpdateDataTable = async () => {
if (!widgetGenerateState.widgetId) {
throw new Error('Widget ID is required');
}
state.loading = true;
const result = await updateDataTable();
if (result) {
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
import { useProxyValue } from '@/common/composables/proxy-state';
import WidgetFormDataTableCardFiltersItem
from '@/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue';
import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
import {
DATA_SOURCE_DOMAIN,
DATA_TABLE_QUERY_OPERATOR,
Expand Down Expand Up @@ -89,7 +89,7 @@ const appContextStore = useAppContextStore();
/* Query */
const {
dataTableList,
} = useWidgetFormQuery({
} = useWidgetDataTableListQuery({
widgetId: computed(() => widgetGenerateState.widgetId),
});

Expand Down
13 changes: 6 additions & 7 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { onClickOutside } from '@vueuse/core/index';
import {
computed, onMounted, reactive, ref,
} from 'vue';
import { useRoute } from 'vue-router/composables';

import { isArray } from 'lodash';

Expand All @@ -25,9 +26,8 @@ import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/t

import { blue, gray } from '@/styles/colors';

import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';


interface Props {
Expand All @@ -39,16 +39,15 @@ interface Props {
}

const props = defineProps<Props>();

const route = useRoute();
const dashboardId = computed(() => route.params.dashboardId);
const emit = defineEmits<{(e: 'delete'): void;
(e: 'update:selected-filter', filter: DataTableQueryFilterForDropdown): void;
}>();
const operatorButtonRef = ref<HTMLElement | null>(null);

const dashboardDetailStore = useDashboardDetailInfoStore();
const dashboardDetailState = dashboardDetailStore.state;
const { dashboard } = useDashboardDetailQuery({
dashboardId: computed(() => dashboardDetailState.dashboardId),
const { dashboard } = useDashboardGetQuery({
dashboardId,
});
const state = reactive({
visibleMenu: false,
Expand Down
Loading
Loading