Merge pull request #395 from devtron-labs/feat/rb-sync-cluster

AbhishekA1509 · web-flow · commit 851f2f59312a · 2024-12-16T17:37:23.000+05:30
feat: rb sync cluster
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.14",
+    "version": "1.2.15",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/Icon/ic-tilde.svg b/src/Assets/Icon/ic-tilde.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-width="1.5" d="M21 10c-.095.47-.236.896-.422 1.28-.41.864-.981 1.512-1.716 1.947-.736.428-1.565.642-2.49.642-.758 0-1.463-.15-2.115-.45-.651-.299-1.383-.78-2.194-1.443-.833-.692-1.715-1.252-2.36-1.538A4.948 4.948 0 0 0 7.636 10c-.948 0-1.789.217-2.524.652-.728.428-1.296 1.074-1.705 1.936a5.5 5.5 0 0 0-.406 1.28" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
@@ -69,6 +69,7 @@ export const URLS = {
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
     CONFIG_DRIFT: 'config-drift',
     RESOURCE_BROWSER: '/resource-browser',
+    COMPARE_CLUSTERS: '/compare-clusters',
 }
 
 export const ROUTES = {
@@ -78,6 +79,8 @@ export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING: 'app/image-tagging',
+    CREATE_RESOURCE: 'k8s/resource/create',
+    K8S_RESOURCE_CREATE: 'k8s/resources/apply',
     CI_CONFIG_GET: 'app/ci-pipeline',
     CD_MATERIAL_GET: 'app/cd-pipeline',
     DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
@@ -116,6 +119,7 @@ export const ROUTES = {
     DEPLOYMENT_CHARTS_LIST: 'deployment/template/fetch',
     USER_LIST_MIN: 'user/list/min',
     CONFIG_DATA: 'config/data',
+    K8S_RESOURCE: 'k8s/resource',
     K8S_RESOURCE_LIST: 'k8s/resource/list',
     CONFIG_COMPARE_SECRET: 'config/compare/secret',
 }
diff --git a/src/Pages/ResourceBrowser/Helper.tsx b/src/Pages/ResourceBrowser/Helper.tsx
@@ -15,6 +15,12 @@
  */
 
 import { AggregationKeys, NodeType, Nodes } from '../../Shared'
+import { ALL_NAMESPACE_OPTION } from './constants'
+import {
+    ApiResourceGroupType,
+    CreateResourceRequestBodyParamsType,
+    CreateResourceRequestBodyType,
+} from './ResourceBrowser.Types'
 
 export function getAggregator(nodeType: NodeType, defaultAsOtherResources?: boolean): AggregationKeys {
     switch (nodeType) {
@@ -65,3 +71,46 @@ export function getAggregator(nodeType: NodeType, defaultAsOtherResources?: bool
             return defaultAsOtherResources ? AggregationKeys['Other Resources'] : AggregationKeys['Custom Resource']
     }
 }
+
+export const getK8sResourceListPayload = (
+    clusterId: string,
+    namespace: string,
+    selectedResource: ApiResourceGroupType,
+    filters: object,
+) => ({
+    clusterId: +clusterId,
+    k8sRequest: {
+        resourceIdentifier: {
+            groupVersionKind: selectedResource.gvk,
+            ...(selectedResource.namespaced && {
+                namespace: namespace === ALL_NAMESPACE_OPTION.value ? '' : namespace,
+            }),
+        },
+    },
+    ...filters,
+})
+
+export const createResourceRequestBody = ({
+    clusterId,
+    group,
+    version,
+    kind,
+    name,
+    namespace,
+    updatedManifest,
+}: CreateResourceRequestBodyParamsType): CreateResourceRequestBodyType => ({
+    appId: '',
+    clusterId,
+    k8sRequest: {
+        resourceIdentifier: {
+            groupVersionKind: {
+                Group: group || '',
+                Version: version || 'v1',
+                Kind: kind,
+            },
+            namespace,
+            name,
+        },
+        ...(updatedManifest && { patch: updatedManifest }),
+    },
+})
diff --git a/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts b/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts
@@ -76,13 +76,27 @@ export interface BulkSelectionActionWidgetProps {
     showBulkRestartOption: boolean
 }
 
+interface BulkOperationAdditionalKeysType {
+    label: string
+    value: string
+    isSortable: boolean
+    /**
+     * width to be given in gridTemplateColumns
+     */
+    width: string
+}
+
 export interface BulkOperation {
     name: string
+    /**
+     * Would these keys beside the name
+     */
+    additionalKeys?: BulkOperationAdditionalKeysType[]
     operation: (signal: AbortSignal, data?: unknown) => Promise<void>
 }
 
 export type BulkOperationModalProps = {
-    operationType: 'restart' | 'delete'
+    operationType: 'restart' | 'delete' | 'creation'
     clusterName: string
     operations: NonNullable<BulkOperation[]>
     handleModalClose: () => void
@@ -93,3 +107,40 @@ export type BulkOperationModalProps = {
 }
 
 export type BulkOperationModalState = BulkOperationModalProps['operationType'] | 'closed'
+
+export interface CreateResourceRequestBodyType {
+    appId: string
+    clusterId: number
+    k8sRequest: {
+        resourceIdentifier: Required<K8sRequestResourceIdentifierType>
+        patch?: string
+    }
+}
+
+export interface ResourceManifestDTO {
+    manifestResponse: {
+        manifest: Record<string, unknown>
+    }
+    secretViewAccess: boolean
+}
+
+export interface CreateResourceRequestBodyParamsType
+    extends Pick<CreateResourceRequestBodyType, 'clusterId'>,
+        Required<Pick<K8sRequestResourceIdentifierType, 'name' | 'namespace'>> {
+    updatedManifest?: string
+    group: GVKType['Group']
+    version: GVKType['Version']
+    kind: GVKType['Kind']
+}
+
+export interface CreateResourcePayload {
+    clusterId: number
+    manifest: string
+}
+
+export interface CreateResourceDTO {
+    kind: string
+    name: string
+    isUpdate: boolean
+    error: string
+}
diff --git a/src/Pages/ResourceBrowser/constants.ts b/src/Pages/ResourceBrowser/constants.ts
@@ -0,0 +1,6 @@
+import { SelectPickerOptionType } from '@Shared/Components'
+
+export const ALL_NAMESPACE_OPTION: Readonly<Pick<SelectPickerOptionType, 'value' | 'label'>> = {
+    value: 'all',
+    label: 'All namespaces',
+}
diff --git a/src/Pages/ResourceBrowser/index.ts b/src/Pages/ResourceBrowser/index.ts
@@ -16,5 +16,6 @@
 
 export * from './ResourceBrowser.Types'
 export * from './Helper'
+export * from './constants'
 export * from './types'
 export * from './service'
diff --git a/src/Pages/ResourceBrowser/service.ts b/src/Pages/ResourceBrowser/service.ts
@@ -1,7 +1,12 @@
 import { post } from '@Common/Api'
 import { ROUTES } from '@Common/Constants'
 import { ResponseType } from '@Common/Types'
-import { K8sResourceDetailType, K8sResourceListPayloadType } from './ResourceBrowser.Types'
+import {
+    CreateResourceDTO,
+    CreateResourcePayload,
+    K8sResourceDetailType,
+    K8sResourceListPayloadType,
+} from './ResourceBrowser.Types'
 
 export const getK8sResourceList = (
     resourceListPayload: K8sResourceListPayloadType,
@@ -10,3 +15,7 @@ export const getK8sResourceList = (
     post(ROUTES.K8S_RESOURCE_LIST, resourceListPayload, {
         signal,
     })
+
+export const createNewResource = (
+    resourceListPayload: CreateResourcePayload,
+): Promise<ResponseType<CreateResourceDTO[]>> => post(ROUTES.K8S_RESOURCE_CREATE, resourceListPayload)
diff --git a/src/Shared/Components/BulkSelection/BulkSelection.tsx b/src/Shared/Components/BulkSelection/BulkSelection.tsx
@@ -24,7 +24,7 @@ import { ReactComponent as ICCheckSquare } from '../../../Assets/Icon/ic-check-s
 import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.svg'
 import { ReactComponent as ICClose } from '../../../Assets/Icon/ic-close.svg'
 
-const BulkSelection = <T,>({ showPagination, disabled = false }: BulkSelectionProps) => {
+const BulkSelection = <T,>({ showPagination, disabled = false, showChevronDownIcon = true }: BulkSelectionProps) => {
     const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection<T>()
     const areOptionsSelected = getSelectedIdentifiersCount() > 0
     const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
@@ -74,7 +74,7 @@ const BulkSelection = <T,>({ showPagination, disabled = false }: BulkSelectionPr
                     // Ideally should be disabled but was giving issue with cursor
                 />
 
-                <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />
+                {showChevronDownIcon && <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />}
             </PopupMenu.Button>
 
             <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bcn-0 flex column dc__content-start dc__align-start dc__position-abs bcn-0 dc__border dc__border-radius-4-imp">
diff --git a/src/Shared/Components/BulkSelection/types.tsx b/src/Shared/Components/BulkSelection/types.tsx
@@ -49,6 +49,10 @@ export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxV
 
 export interface BulkSelectionProps {
     showPagination: boolean
+    /**
+     * @default true
+     */
+    showChevronDownIcon?: boolean
     disabled?: boolean
 }
 
diff --git a/src/Shared/Components/NumbersCount/NumbersCount.component.tsx b/src/Shared/Components/NumbersCount/NumbersCount.component.tsx
@@ -0,0 +1,13 @@
+import { ReactComponent as ICTilde } from '@Icons/ic-tilde.svg'
+import { NumbersCountProps } from './types'
+
+const NumbersCount = ({ count, isApprox, isSelected }: NumbersCountProps) => (
+    <div
+        className={`flex dc__no-shrink br-12 dc__gap-2 px-6 ${isSelected ? 'bcb-5 cn-0' : 'bcn-1 cn-7'} fs-13 fw-6 lh-20`}
+    >
+        {isApprox && <ICTilde className="dc__no-shrink icon-dim-12 scn-0" />}
+        <span>{count}</span>
+    </div>
+)
+
+export default NumbersCount
diff --git a/src/Shared/Components/NumbersCount/index.ts b/src/Shared/Components/NumbersCount/index.ts
@@ -0,0 +1 @@
+export { default as NumbersCount } from './NumbersCount.component'
diff --git a/src/Shared/Components/NumbersCount/types.ts b/src/Shared/Components/NumbersCount/types.ts
@@ -0,0 +1,13 @@
+export interface NumbersCountProps {
+    count: number
+    /**
+     * @default false
+     * @description If true, it will change the bgColor to var(--B500)
+     */
+    isSelected?: boolean
+    /**
+     * @default false
+     * @description If true, it will show the count with tilde like ~number
+     */
+    isApprox?: boolean
+}
diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts
@@ -57,6 +57,7 @@ export * from './Collapse'
 export * from './Security'
 export * from './Button'
 export * from './InvalidYAMLTippy'
+export * from './NumbersCount'
 export * from './EnterpriseTag'
 export * from './ConfirmationModal'
 export * from './DiffViewer'
diff --git a/src/index.ts b/src/index.ts
@@ -96,6 +96,7 @@ export interface customEnv {
     FEATURE_PROMO_EMBEDDED_MODAL_TITLE?: string
     FEATURE_PROMO_EMBEDDED_IFRAME_URL?: string
     FEATURE_BULK_RESTART_WORKLOADS_FROM_RB: string
+    FEATURE_RB_SYNC_CLUSTER_ENABLE?: boolean
     FEATURE_DEFAULT_MERGE_STRATEGY?: OverrideMergeStrategyType
     FEATURE_DEFAULT_LANDING_RB_ENABLE?: boolean
     FEATURE_CLUSTER_MAP_ENABLE?: boolean

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "1.2.14",`
	`3`	`+ "version": "1.2.15",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`