fix: add task management tab to cloud service detail view

apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailTabs.vue

@@ -6,7 +6,7 @@ import { get } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PDynamicLayout, PTab, PEmpty, PTextButton, PI,
+    PDynamicLayout, PTab, PEmpty, PTextButton, PI, PHeading,
 } from '@cloudforet/mirinae';
 import type { DynamicLayoutFieldHandler } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type';
 
@@ -15,10 +15,12 @@ import type { CloudServiceGetParameters } from '@/schema/inventory/cloud-service
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
 import { i18n } from '@/translations';
 
+import { useDisplayStore } from '@/store/display/display-store';
 import { useDomainStore } from '@/store/domain/domain-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
 import config from '@/lib/config';
+import { MENU_ID } from '@/lib/menu/config';
 import type { Reference } from '@/lib/reference/type';
 
 
@@ -40,6 +42,10 @@ import CloudServiceLogTab
 import CloudServiceTagsPanel
     from '@/services/asset-inventory-v1/components/CloudServiceTagsPanel.vue';
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
+import BoardTaskTable from '@/services/ops-flow/components/BoardTaskTable.vue';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
 
 interface Props {
@@ -59,6 +65,8 @@ const isAlertManagerVersionV2 = (config.get('ADVANCED_SERVICE')?.alert_manager_v
 
 const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
+const displayStore = useDisplayStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
 
 const router = useRouter();
 
@@ -80,16 +88,25 @@ const singleItemTabState = reactive({
         if (isAlertManagerVersionV2) {
             defaultTabs.push({ name: 'alerts', label: i18n.t('INVENTORY.CLOUD_SERVICE.PAGE.TAB_ALERTS') });
         }
+        if (displayStore.getters.availableAdvancedServices[MENU_ID.OPS_FLOW]) {
+            defaultTabs.push({ name: 'task', label: taskManagementTemplateStore.templates.Task });
+        }
         return defaultTabs;
     }),
     activeTab: 'detail',
 });
 
 const multiItemTabState = reactive({
-    tabs: computed(() => ([
-        { name: 'data', label: i18n.t('INVENTORY.CLOUD_SERVICE.PAGE.TAB_SELECTED_DATA') },
-        { name: 'monitoring', label: i18n.t('INVENTORY.CLOUD_SERVICE.PAGE.TAB_MONITORING') },
-    ])),
+    tabs: computed(() => {
+        const defaultTabs = [
+            { name: 'data', label: i18n.t('INVENTORY.CLOUD_SERVICE.PAGE.TAB_SELECTED_DATA') },
+            { name: 'monitoring', label: i18n.t('INVENTORY.CLOUD_SERVICE.PAGE.TAB_MONITORING') },
+        ];
+        if (displayStore.getters.availableAdvancedServices[MENU_ID.OPS_FLOW]) {
+            defaultTabs.push({ name: 'task', label: taskManagementTemplateStore.templates.Task });
+        }
+        return defaultTabs;
+    }),
     activeTab: 'data',
 });
 
@@ -176,6 +193,17 @@ const monitoringState: MonitoringProps = reactive({
                 :cloud-service-id="tableState.selectedCloudServiceIds[0]"
             />
         </template>
+        <template #task>
+            <p-heading class="py-6 px-4"
+                       heading-type="sub"
+            >
+                {{ taskManagementTemplateStore.templates.Task }}
+            </p-heading>
+            <board-task-table :key="tableState.selectedItems[0].cloud_service_id"
+                              tag="div"
+                              :related-assets="[tableState.selectedItems[0].cloud_service_id]"
+            />
+        </template>
     </p-tab>
     <p-tab v-else-if="props.selectedIndex > 1"
            :tabs="multiItemTabState.tabs"
@@ -230,6 +258,12 @@ const monitoringState: MonitoringProps = reactive({
         <template #monitoring>
             <monitoring :resources="monitoringState.resources" />
         </template>
+        <template #task>
+            <board-task-table :key="tableState.selectedItems.map((d) => d.cloud_service_id).join(',')"
+                              tag="div"
+                              :related-assets="tableState.selectedItems.map(d => d.cloud_service_id)"
+            />
+        </template>
     </p-tab>
     <p-empty v-else
              style="height: auto; margin-top: 4rem;"