BIGTOP-4498: Support remove service

bigtop-manager-ui/src/api/hosts/index.ts → bigtop-manager-ui/src/api/host/index.ts

@@ -18,7 +18,7 @@
  */
 
 import request from '@/api/request.ts'
-import type { HostListParams, HostParams, HostVO, HostVOList, InstalledStatusVO } from '@/api/hosts/types.ts'
+import type { HostListParams, HostParams, HostVO, HostVOList, InstalledStatusVO } from '@/api/host/types'
 import type { ComponentVO } from '@/api/component/types.ts'
 
 export const getHosts = (params?: HostListParams): Promise<HostVOList> => {

bigtop-manager-ui/src/api/service/index.ts

@@ -38,6 +38,10 @@ export const getService = (pathParams: ServiceParams) => {
   return get<ServiceVO>(`/clusters/${pathParams.clusterId}/services/${pathParams.id}`)
 }
 
+export const removeService = (pathParams: ServiceParams) => {
+  return del<boolean>(`/clusters/${pathParams.clusterId}/services/${pathParams.id}`)
+}
+
 export const getServiceConfigs = (pathParams: ServiceParams) => {
   return get<ServiceConfig[]>(`/clusters/${pathParams.clusterId}/services/${pathParams.id}/configs`)
 }
@@ -57,11 +61,13 @@ export const takeServiceConfigSnapshot = (pathParams: ServiceParams, data: Snaps
   )
 }
 
-export const recoveryServiceConfigSnapshot = (pathParams: SnapshotRecovery): Promise<ServiceConfig[]> => {
+export const recoveryServiceConfigSnapshot = (pathParams: SnapshotRecovery) => {
   return post<ServiceConfig[]>(
     `/clusters/${pathParams.clusterId}/services/${pathParams.id}/config-snapshots/${pathParams.snapshotId}`
   )
 }
-export const deleteServiceConfigSnapshot = (pathParams: SnapshotRecovery): Promise<boolean> => {
-  return del(`/clusters/${pathParams.clusterId}/services/${pathParams.id}/config-snapshots/${pathParams.snapshotId}`)
+export const deleteServiceConfigSnapshot = (pathParams: SnapshotRecovery) => {
+  return del<boolean>(
+    `/clusters/${pathParams.clusterId}/services/${pathParams.id}/config-snapshots/${pathParams.snapshotId}`
+  )
 }

bigtop-manager-ui/src/components/common/button-group/index.vue

@@ -67,10 +67,16 @@
             </span>
           </a-button>
           <template #overlay>
-            <a-menu v-if="!item.disabled" @click="item.dropdownMenuClickEvent">
-              <a-menu-item v-for="actionItem in item.dropdownMenu" v-bind="actionItem" :key="actionItem.action">
-                {{ actionItem.text }}
-              </a-menu-item>
+            <a-menu
+              v-if="!item.disabled && item.dropdownMenuClickEvent"
+              @click="item.dropdownMenuClickEvent($event, payload)"
+            >
+              <template v-for="actionItem in item.dropdownMenu" :key="actionItem.action">
+                <a-menu-divider v-if="actionItem.divider" />
+                <a-menu-item v-bind="{ key: actionItem.action, ...actionItem }">
+                  {{ actionItem.text }}
+                </a-menu-item>
+              </template>
             </a-menu>
           </template>
         </a-dropdown>

bigtop-manager-ui/src/components/common/button-group/types.ts

@@ -25,20 +25,21 @@ type ShapeType = 'default' | 'circle' | 'round'
 export interface DropdownMenu extends MenuItemProps {
   action: string
   text: string
+  divider?: boolean
 }
-export interface GroupItem<T = any> {
+export interface GroupItem<T = any, R = any> {
   icon?: string
   tip?: string
   text?: string
   action?: T
-  hidden?: boolean | ((item?: GroupItem<T>, ...payload: any[]) => boolean)
+  hidden?: boolean | ((item?: GroupItem<T>, ...payload: R[]) => boolean)
   type?: BtnType
   shape?: ShapeType
   disabled?: boolean
   danger?: boolean
   dropdownMenu?: DropdownMenu[]
-  clickEvent?: (item?: GroupItem<T>, ...payload: any[]) => void
-  dropdownMenuClickEvent?: MenuProps['onClick']
+  clickEvent?: (item?: GroupItem<T>, ...payload: R[]) => void
+  dropdownMenuClickEvent?: (info: Parameters<NonNullable<MenuProps['onClick']>>[0], ...payload: R[]) => void
 }
 
 export interface Props {

bigtop-manager-ui/src/components/common/form-filter/index.vue

@@ -24,22 +24,20 @@
 
   interface FilterFormPops {
     filterItems: FilterFormItem[]
+    filterValue?: Record<string, any>
   }
 
   const { t } = useI18n()
-  const props = defineProps<FilterFormPops>()
-  const emits = defineEmits(['filter'])
-  const { filterItems } = toRefs(props)
+  const props = withDefaults(defineProps<FilterFormPops>(), {
+    filterValue: () => {
+      return {}
+    }
+  })
+  const emits = defineEmits(['filter', 'update:filterValue'])
+  const { filterItems, filterValue } = toRefs(props)
 
   const tempFilterParams = shallowRef({})
-  const filterParams = ref(
-    filterItems.value.reduce(
-      (pre, value) => {
-        return Object.assign(pre, { [`${value.key}`]: undefined })
-      },
-      {} as Record<string, any>
-    )
-  )
+  const filterParams = ref<Record<string, any>>({})
 
   const formatFilterFormItems = computed(() =>
     filterItems.value.map((v) => {
@@ -67,15 +65,24 @@
 
   const confirmFilterParams = () => {
     emits('filter', filterParams.value)
+    emits('update:filterValue', filterParams.value)
   }
 
   const onSelect: MenuProps['onSelect'] = ({ item, key }) => {
     filterParams.value[`${item.id}`] = key
+    emits('update:filterValue', filterParams.value)
   }
 
   const resetFilter = (item: any) => {
     filterParams.value[item.key] = undefined
+    emits('update:filterValue', filterParams.value)
   }
+
+  onMounted(() => {
+    filterItems.value.forEach((item) => {
+      filterParams.value[item.key] = filterValue.value[item.key] ?? undefined
+    })
+  })
 </script>
 
 <template>

bigtop-manager-ui/src/features/create-cluster/index.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
   import { useMenuStore } from '@/store/menu'
   import { message, Modal } from 'ant-design-vue'
-  import { getInstalledStatus, installDependencies } from '@/api/hosts'
+  import { getInstalledStatus, installDependencies } from '@/api/host'
   import { execCommand } from '@/api/command'
 
   import SvgIcon from '@/components/base/svg-icon/index.vue'
@@ -30,7 +30,7 @@
   import HostManage from './components/host-manage.vue'
   import CheckWorkflow from './components/check-workflow.vue'
 
-  import { type InstalledStatusVO, Status } from '@/api/hosts/types'
+  import { type InstalledStatusVO, Status } from '@/api/host/types'
   import type { ClusterCommandReq, CommandRequest, CommandVO, HostReq } from '@/api/command/types'
 
   const { t } = useI18n()

bigtop-manager-ui/src/features/create-host/index.vue

@@ -23,13 +23,13 @@
   import { UploadOutlined } from '@ant-design/icons-vue'
   import { useClusterStore } from '@/store/cluster'
   import { uploadFile } from '@/api/upload-file'
-  import { updateHost } from '@/api/hosts'
+  import { updateHost } from '@/api/host'
 
   import ParsedPreview from './components/parsed-preview.vue'
 
   import type { UploadProps } from 'ant-design-vue'
   import type { HostReq } from '@/api/command/types'
-  import type { HostParams, HostVO } from '@/api/hosts/types'
+  import type { HostParams, HostVO } from '@/api/host/types'
   import type { FormItem } from '@/components/common/form-builder/types'
 
   type ModeType = 'EDIT' | 'ADD'

bigtop-manager-ui/src/features/create-host/install-dependencies.vue

@@ -19,14 +19,14 @@
 
 <script setup lang="ts">
   import { message, TableColumnType } from 'ant-design-vue'
-  import { getInstalledStatus, installDependencies } from '@/api/hosts'
+  import { getInstalledStatus, installDependencies } from '@/api/host'
   import { useClusterStore } from '@/store/cluster'
   import { generateRandomId } from '@/utils/tools'
   import { execCommand } from '@/api/command'
 
   import HostCreate from './index.vue'
 
-  import { type InstalledStatusVO, Status } from '@/api/hosts/types'
+  import { type InstalledStatusVO, Status } from '@/api/host/types'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { CommandRequest, HostReq } from '@/api/command/types'

bigtop-manager-ui/src/features/create-service/components/component-assigner.vue

@@ -19,14 +19,14 @@
 
 <script setup lang="ts">
   import { TableColumnType, Empty } from 'ant-design-vue'
-  import { getHosts } from '@/api/hosts'
+  import { getHosts } from '@/api/host'
 
   import { useCreateServiceStore } from '@/store/create-service'
   import { useServiceStore } from '@/store/service'
 
   import TreeSelector from './tree-selector.vue'
 
-  import type { HostVO } from '@/api/hosts/types'
+  import type { HostVO } from '@/api/host/types'
   import type { FilterConfirmProps, FilterResetProps, TableRowSelection } from 'ant-design-vue/es/table/interface'
   import type { Key } from 'ant-design-vue/es/_util/type'