feat(budget): create budget main page & create page & detail page

apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts

@@ -18,9 +18,9 @@ export interface BudgetUsageAnalyzeResult {
     project_id?: string;
     workspace_id?: string;
     data_source_id?: string;
-    provider_filter?: {
-        state?: string;
-        providers?: string[];
-    };
+    // provider_filter?: {
+    //     state?: string;
+    //     providers?: string[];
+    // };
     resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
 }

apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/list.ts

@@ -9,4 +9,5 @@ export interface BudgetUsageListParameters {
     data_source_id?: string;
     workspace_id?: string;
     project_id?: string;
+    service_account_id?: string;
 }

apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts

@@ -3,10 +3,10 @@ import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { Currency } from '@/store/display/type';
 
 
-interface ProviderFilter {
-    providers: string[];
-    state: 'ENABLED' | 'DISABLED';
-}
+// interface ProviderFilter {
+//     providers: string[];
+//     state: 'ENABLED' | 'DISABLED';
+// }
 
 export interface BudgetUsageModel {
     budget_id: string;
@@ -15,11 +15,11 @@ export interface BudgetUsageModel {
     cost: number;
     limit: number;
     currency: Currency;
-    provider_filter?: ProviderFilter;
     data_source_id: string;
     resource_group: Extract<ResourceGroupType, 'WORKSPACE'|'PROJECT'>;
     project_id: string;
     workspace_id: string;
+    service_account_id: string;
     domain_id: string;
     updated_at: string;
 }

apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts

@@ -1,21 +1,25 @@
 import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
-    BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit, ProviderFilter,
+    BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit,
 } from '@/api-clients/cost-analysis/budget/schema/type';
 
+import type { Currency } from '@/store/display/type';
+
 export interface BudgetCreateParameters {
-    data_source_id: string;
     name?: string;
     limit?: number;
     planned_limits?: BudgetPlannedLimit[];
-    provider_filter?: ProviderFilter;
+    currency: Currency;
     time_unit: BudgetTimeUnit;
     start: string;
     end: string;
-    notifications?: BudgetNotification[];
+    notification?: BudgetNotification;
     tags?: Tags;
     resource_group: Extract<ResourceGroupType, 'WORKSPACE'|'PROJECT'>;
     workspace_id?: string;
     project_id?: string;
+    service_account_id?: string;
+    budget_manager_id?: string;
+    budget_year?: string;
 }

apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts

@@ -2,5 +2,5 @@ import type { BudgetNotification } from '@/api-clients/cost-analysis/budget/sche
 
 export interface BudgetSetNotificationParameters {
     budget_id: string;
-    notifications: BudgetNotification[];
+    notification: BudgetNotification;
 }

apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts

@@ -6,5 +6,8 @@ export interface BudgetUpdateParameters {
     name?: string;
     limit?: number;
     planned_limits?: BudgetPlannedLimit[];
+    start?: string;
+    end?: string;
+    utilization_rate?: number;
     tags?: Tags;
 }

apps/web/src/api-clients/cost-analysis/budget/schema/model.ts

@@ -1,29 +1,35 @@
+
 import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
-    BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit, ProviderFilter,
+    BudgetNotification,
+    BudgetPlannedLimit,
+    BudgetTimeUnit,
 } from '@/api-clients/cost-analysis/budget/schema/type';
 
 import type { Currency } from '@/store/display/type';
 
-
 export interface BudgetModel {
-    budget_id: string;
-    name: string;
-    limit: number;
-    planned_limits: BudgetPlannedLimit[];
-    currency: Currency;
-    provider_filter: ProviderFilter;
-    time_unit: BudgetTimeUnit;
-    start: string;
-    end: string;
-    notifications: BudgetNotification[];
-    tags: Tags;
-    data_source_id: string;
-    resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>
-    project_id: string;
-    workspace_id: string;
-    domain_id: string;
-    created_at: string;
-    updated_at: string;
+  budget_id: string;
+  name: string;
+  limit: number;
+  planned_limits: BudgetPlannedLimit[];
+  currency: Currency;
+  time_unit: BudgetTimeUnit;
+  start: string;
+  end: string;
+  notification: BudgetNotification;
+  tags: Tags;
+  data_source_id: string;
+  resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
+  project_id: string;
+  workspace_id: string;
+  service_account_id: string;
+  budget_manager_id: string;
+  domain_id: string;
+  created_at: string;
+  updated_at: string;
+  budget_year: string;
+  notified_month: string;
+  utilization_rate: number;
 }

apps/web/src/api-clients/cost-analysis/budget/schema/type.ts

@@ -1,11 +1,20 @@
 export type BudgetTimeUnit = 'MONTHLY' | 'TOTAL';
-type BudgetNotificationType = 'CRITICAL' | 'WARNING';
-type BudgetNotificationUnit = 'PERCENT' | 'ACTUAL_COST';
+type BudgetNotificationUnit = 'PERCENT';
+type BudgetNotificationState = 'ENABLED' | 'DISABLED';
 
-export interface BudgetNotification {
+interface BudgetNotificationPlan {
     threshold: number;
     unit: BudgetNotificationUnit;
-    notification_type: BudgetNotificationType;
+}
+
+export interface BudgetNotificationRecipients {
+    users: string[];
+}
+
+export interface BudgetNotification {
+    state: BudgetNotificationState;
+    plans?: BudgetNotificationPlan[];
+    recipients?: BudgetNotificationRecipients;
 }
 
 export interface BudgetPlannedLimit {

apps/web/src/api-clients/identity/service-account/schema/api-verbs/create.ts

@@ -7,6 +7,7 @@ export interface ServiceAccountCreateParameters {
     secret_schema_id?: string;
     secret_data?: Record<string, any>;
     tags?: Tags;
+    service_account_mgr_id?: string;
     trusted_account_id?: string;
     project_id: string;
 }

apps/web/src/api-clients/identity/service-account/schema/api-verbs/update.ts

@@ -5,5 +5,6 @@ export interface ServiceAccountUpdateParameters {
     name?: string;
     data?: Record<string, any>;
     tags?: Tags;
+    service_account_mgr_id?: string;
     project_id?: string;
 }

apps/web/src/api-clients/identity/service-account/schema/model.ts

@@ -20,6 +20,7 @@ export interface ServiceAccountModel {
     created_at: string;
     last_synced_at: string;
     state: ServiceAccountType;
+    service_account_mgr_id: string;
     // asset_info: ServiceAccountAssetInfoType;
     // cost_info: ServiceAccountCostInfoType;
 }

apps/web/src/common/modules/project/ProjectSelectDropdown.vue

@@ -53,6 +53,7 @@ interface Props {
     styleType?: string;
     appearanceType?: 'stack'|'badge';
     showDeleteAllButton?: boolean;
+    showDropdownLeftArea?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -73,6 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
     styleType: undefined,
     appearanceType: undefined,
     showDeleteAllButton: undefined,
+    showDropdownLeftArea: false,
 });
 
 const emit = defineEmits<{(e: 'select', value: ProjectTreeNodeData[]): void;
@@ -321,6 +323,14 @@ watch(() => state._selectedProjectIds, (selectedProjectIds) => {
                            @update:visible-menu="handleUpdateVisibleMenu"
                            @delete-tag="handleDeleteTag"
         >
+            <template v-if="props.showDropdownLeftArea"
+                      #dropdown-left-area
+            >
+                <p-i name="ic_project"
+                     width="1rem"
+                     height="1rem"
+                />
+            </template>
             <template #menu-no-data-format>
                 <div />
             </template>

apps/web/src/common/modules/user/UserSelectDropdown.vue

@@ -52,6 +52,8 @@ const props = withDefaults(defineProps<{
      showCategoryTitle?: boolean;
      placeholder?: string;
      excludedSelectedIds?: string[];
+     size?: 'sm'|'md';
+     pageSize?: number;
 }>(), {
     selectedId: undefined,
     selectedIds: undefined,
@@ -71,6 +73,8 @@ const props = withDefaults(defineProps<{
     showCategoryTitle: true,
     placeholder: 'Select',
     excludedSelectedIds: undefined,
+    size: 'md',
+    pageSize: 10,
 });
 
 const emit = defineEmits<{(event: 'update:selected-id', value?: string): void;
@@ -267,7 +271,6 @@ watch([() => props.selectedId, () => props.selectedIds], ([newUserId, newUserIds
 
 <template>
     <p-select-dropdown class="user-select-dropdown"
-                       page-size="10"
                        show-select-marker
                        is-filterable
                        show-delete-all-button
@@ -283,6 +286,8 @@ watch([() => props.selectedId, () => props.selectedIds], ([newUserId, newUserIds
                        :style-type="props.styleType"
                        :placeholder="props.placeholder"
                        :block="props.block"
+                       :size="props.size"
+                       :page-size="props.pageSize"
                        @update:selected="handleUpdateSelectedUserItems"
     >
         <template v-if="props.appearanceType === 'stack'"

apps/web/src/services/cost-explorer/components/BudgetAlertsModal.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+
+interface Props {
+    visible: boolean;
+    budgetOnOffValue: boolean;
+}
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+    budgetOnOffValue: false,
+});
+
+const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
+}>();
+
+const setNotification = async () => {
+    try {
+        await budgetPageStore.updateBudgetNotifications({
+            budget_id: budgetPageState.budgetData?.budget_id ?? '',
+            notification: {
+                ...budgetPageState.budgetData?.notification,
+                state: !props.budgetOnOffValue ? 'ENABLED' : 'DISABLED',
+            },
+        });
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+const handleClose = () => {
+    emit('update:visible', false);
+};
+
+const handleConfirm = () => {
+    setNotification();
+    emit('update:visible', false);
+};
+</script>
+
+<template>
+    <p-button-modal :visible="props.visible"
+                    :header-title="$t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.UPDATE_BUDGET_ALERT')"
+                    size="sm"
+                    @cancel="handleClose"
+                    @close="handleClose"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <div v-if="props.budgetOnOffValue">
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.BUDGET_ALERT_MODAL_DESC1') }}
+            </div>
+            <div v-else-if="!props.budgetOnOffValue">
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.BUDGET_ALERT_MODAL_DESC2') }}
+            </div>
+        </template>
+    </p-button-modal>
+</template>

apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue

@@ -99,7 +99,7 @@ watch([() => state.amountPlanInfo, () => state.isAllValid], ([amountPlanInfo, is
     <p-pane-layout class="budget-create-form-amount-plan">
         <p-heading class="pt-8 px-4 pb-4"
                    heading-type="sub"
-                   :title="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.AMOUNT_PLAN.AMOUNT_PLANNING')"
+                   :title="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.BUDGET_DETAILS.TITLE')"
         />
         <div class="p-4">
             <budget-create-period-select

apps/web/src/services/cost-explorer/components/BudgetCreateManagerSelect.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { PFieldGroup } from '@cloudforet/mirinae';
+
+import type { ServiceAccountGetParameters } from '@/api-clients/identity/service-account/schema/api-verbs/get';
+import type { ServiceAccountModel } from '@/api-clients/identity/service-account/schema/model';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+
+const handleSelectId = (selectedId: string|undefined) => {
+    if (selectedId) budgetCreatePageStore.setBudgetManager(selectedId);
+};
+
+const handleFormatBudgetManager = (value: Record<string, any>) => {
+    if (Array.isArray(value.USER) && value.USER.length === 0) {
+        budgetCreatePageStore.setBudgetManager('');
+    }
+};
+
+const fetchSelectedServiceAccount = async (serviceAccountId: string) => {
+    try {
+        const result = await SpaceConnector.clientV2.identity.serviceAccount.get<ServiceAccountGetParameters, ServiceAccountModel>({
+            service_account_id: serviceAccountId,
+        });
+        if (result.service_account_mgr_id.length > 0) {
+            budgetCreatePageStore.setBudgetManager(result.service_account_mgr_id);
+        }
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+watch(() => budgetCreatePageState.scope.serviceAccount, async () => {
+    if (budgetCreatePageState.scope.serviceAccount) {
+        await fetchSelectedServiceAccount(budgetCreatePageState.scope.serviceAccount);
+    }
+}, { immediate: true, deep: true });
+</script>
+
+<template>
+    <p-field-group required
+                   :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_MANAGER')"
+    >
+        <user-select-dropdown
+            show-user-list
+            :show-user-group-list="false"
+            :selected-id="budgetCreatePageState.budgetManager"
+            @update:selected-id="handleSelectId"
+            @formatted-selected-ids="handleFormatBudgetManager"
+        />
+    </p-field-group>
+</template>