Merge pull request #2761 from devtron-labs/feat/online-connectivity-dev

feat: online connectivity dev

Author: shivani170

.env

@@ -71,3 +71,4 @@ FEATURE_AI_INTEGRATION_ENABLE=false
 LOGIN_PAGE_IMAGE=
 FEATURE_MANAGE_TRAFFIC_ENABLE=false
 FEATURE_REDFISH_NODE_ENABLE=false
+FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE=false

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-6",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-7",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component.tsx

@@ -28,8 +28,9 @@ const CreateClusterForm = importComponentFromFELibrary(
     'CreateClusterForm',
     () => (
         <EnterpriseTrialDialog
-            featureTitle="EKS Cluster"
-            featureDescription="With Devtron, you can effortlessly create an Amazon EKS cluster."
+            featureTitle="Create Kubernetes Cluster"
+            featureDescription="Use Devtron to easily create Kubernetes clusters on popular cloud providers. Simplify cluster
+                provisioning and management with a guided, user-friendly interface."
         />
     ),
     'function',
@@ -74,7 +75,7 @@ const CreateCluster = ({ handleReloadClusterList, handleRedirectOnModalClose }:
                         FooterComponent={FooterComponent}
                     />
                 )
-            case CreateClusterTypeEnum.CREATE_EKS_CLUSTER:
+            case CreateClusterTypeEnum.CREATE_CLUSTER:
                 return (
                     <CreateClusterForm
                         apiCallInProgress={apiCallInProgress}

src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/constants.tsx

@@ -12,18 +12,15 @@ export const SIDEBAR_CONFIG: SidebarConfigType = {
             </p>
         ),
     },
-    [CreateClusterTypeEnum.CREATE_EKS_CLUSTER]: {
-        title: 'Create EKS Cluster',
-        iconName: 'ic-cluster',
-        dataTestId: 'create-eks-cluster-tab',
+    [CreateClusterTypeEnum.CREATE_CLUSTER]: {
+        title: 'Create Kubernetes Cluster',
+        iconName: 'ic-new',
+        dataTestId: 'create-cluster-tab',
         body: (
-            <>
-                <p className="m-0">With Devtron, you can effortlessly create an Amazon EKS cluster.</p>
-                <p className="m-0">
-                    Amazon Elastic Kubernetes Service (Amazon EKS) is a fully managed Kubernetes service that enables
-                    you to run Kubernetes seamlessly in both AWS Cloud and on-premises data centers.
-                </p>
-            </>
+            <p className="m-0">
+                Use Devtron to easily create Kubernetes clusters on popular cloud providers. Simplify cluster
+                provisioning and management with a guided, user-friendly interface.
+            </p>
         ),
         isEnterprise: true,
     },

src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types.ts

@@ -2,7 +2,7 @@ import { IconName } from '@devtron-labs/devtron-fe-common-lib'
 
 export enum CreateClusterTypeEnum {
     CONNECT_CLUSTER = 'connect-cluster',
-    CREATE_EKS_CLUSTER = 'create-eks-cluster',
+    CREATE_CLUSTER = 'create-cluster',
     ADD_ISOLATED_CLUSTER = 'add-isolated-cluster',
 }
 

src/components/common/hooks/constants.ts

@@ -33,4 +33,4 @@ export const FILE_READING_FAILED_STATUS = {
 }
 
 export const ONLINE_BANNER_TIMEOUT = 3000
-export const INTERNET_CONNECTIVITY_INTERVAL = 10000
+export const INTERNET_CONNECTIVITY_INTERVAL = 30000

src/components/common/hooks/useOnline/service.ts

@@ -0,0 +1,29 @@
+import { Routes } from '@Config/constants'
+
+import { INTERNET_CONNECTIVITY_INTERVAL } from '../constants'
+import { CheckConnectivityParamsType, FetchConnectivityParamsType } from './types'
+
+const fetchWithTimeout = ({ url, options, controller }: FetchConnectivityParamsType): Promise<any> => {
+    const timeoutId = setTimeout(() => controller.abort(), INTERNET_CONNECTIVITY_INTERVAL)
+
+    return fetch(url, { ...options, signal: controller.signal }).finally(() => {
+        clearTimeout(timeoutId)
+    })
+}
+
+export const getFallbackInternetConnectivity = ({ controller }: CheckConnectivityParamsType): Promise<any> =>
+    fetchWithTimeout({
+        url: 'https://www.google.com/favicon.ico',
+        options: {
+            method: 'HEAD',
+            mode: 'no-cors',
+        },
+        controller,
+    })
+
+export const getInternetConnectivity = ({ controller }: CheckConnectivityParamsType): Promise<any> => {
+    const baseUrl = window._env_?.CENTRAL_API_ENDPOINT ?? 'https://api.devtron.ai'
+    const url = `${baseUrl}/${Routes.HEALTH}`
+
+    return fetchWithTimeout({ url, options: {}, controller })
+}

src/components/common/hooks/useOnline/types.ts

@@ -0,0 +1,7 @@
+export interface FetchConnectivityParamsType {
+    url: string
+    options: RequestInit
+    controller: AbortController
+}
+
+export interface CheckConnectivityParamsType extends Pick<FetchConnectivityParamsType, 'controller'> {}

src/components/common/hooks/useOnline/useOnline.ts

@@ -1,47 +1,69 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { getIsRequestAborted, noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
-
-import { getInternetConnectivity } from '@Services/service'
+import { noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
 
 import { INTERNET_CONNECTIVITY_INTERVAL } from '../constants'
+import { getFallbackInternetConnectivity, getInternetConnectivity } from './service'
 
 export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
     const [online, setOnline] = useState(structuredClone(navigator.onLine))
     const abortControllerRef = useRef<AbortController>(new AbortController())
     const timeoutRef = useRef<NodeJS.Timeout>(null)
     const { isAirgapped } = useMainContext()
 
+    const hideInternetConnectivityBanner = isAirgapped || window._env_.FEATURE_INTERNET_CONNECTIVITY_ENABLE
+
     const handleClearTimeout = () => {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current)
         }
         abortControllerRef.current.abort()
     }
 
+    const onConnectivitySuccess = (checkConnectivity) => {
+        setOnline((prev) => {
+            if (!prev) onOnline()
+            return true
+        })
+        timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+    }
+
     const checkConnectivity = async () => {
-        if (isAirgapped) return
+        if (hideInternetConnectivityBanner) return
 
         handleClearTimeout()
         const controller = new AbortController()
         abortControllerRef.current = controller
 
         try {
-            await getInternetConnectivity(abortControllerRef.current)
-            setOnline((prev) => {
-                if (!prev) {
-                    onOnline()
-                }
-                return true
+            await getFallbackInternetConnectivity({
+                controller: abortControllerRef.current,
             })
-            timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
-        } catch (error) {
-            setOnline(false)
-            if (!getIsRequestAborted(error)) {
-                timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+            onConnectivitySuccess(checkConnectivity)
+        } catch {
+            if (abortControllerRef.current.signal.aborted) {
+                if (timeoutRef.current) {
+                    timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+                }
+                return
+            }
+            const fallbackController = new AbortController()
+            abortControllerRef.current = fallbackController
+            try {
+                await getInternetConnectivity({
+                    controller: abortControllerRef.current,
+                })
+                onConnectivitySuccess(checkConnectivity)
+            } catch {
+                if (!abortControllerRef.current.signal.aborted) {
+                    setOnline(false)
+                } else if (timeoutRef.current) {
+                    timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+                }
             }
         }
     }
+
     const handleOffline = () => {
         handleClearTimeout()
         setOnline(false)
@@ -58,7 +80,7 @@ export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
     }, [])
 
     useEffect(() => {
-        if (isAirgapped) return null
+        if (hideInternetConnectivityBanner) return null
         window.addEventListener('online', handleOnline)
         window.addEventListener('offline', handleOffline)
 

src/config/routes.ts

@@ -17,7 +17,7 @@
 import { AppConfigProps, URLS as COMMON_URLS, EnvResourceType } from '@devtron-labs/devtron-fe-common-lib'
 import { generatePath } from 'react-router-dom'
 
-const CREATE_CLUSTER_PATH = 'create/cluster/:type(connect-cluster|create-eks-cluster|add-isolated-cluster)'
+const CREATE_CLUSTER_PATH = 'create/cluster/:type(connect-cluster|create-cluster|add-isolated-cluster)'
 
 export const URLS = {
     CHARTS: '/chart-store',