diff --git a/Taskfile.yaml b/Taskfile.yaml index 86c957591..a8cdf1316 100644 --- a/Taskfile.yaml +++ b/Taskfile.yaml @@ -10,7 +10,7 @@ tasks: - | BASE_URL=devc.kloudlite.io COOKIE_DOMAIN=".kloudlite.io" - GATEWAY_URL="http://gateway.karthik-testing.svc.cluster.local" + GATEWAY_URL="http://gateway.kloudlite.svc.cluster.local" case {{.app}} in "auth") PORT=4000 @@ -49,7 +49,7 @@ tasks: esac REMIX_DEV_ORIGIN="https://{{.app}}$URL_SUFFIX.devc.kloudlite.io" - + cp -r ./static/common/. ./public/ cp -r ./static/{{.app}}/. ./public/ @@ -94,7 +94,7 @@ tasks: BASE_URL=kloudlite.io URL_SUFFIX="" COOKIE_DOMAIN=".kloudlite.io" - GATEWAY_URL="http://gateway.karthik-testing.svc.cluster.local" + GATEWAY_URL="http://gateway.kloudlite.svc.cluster.local" case {{.app}} in "auth") diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql index a5e66599b..17b56733b 100644 --- a/gql-queries-generator/doc/queries.graphql +++ b/gql-queries-generator/doc/queries.graphql @@ -616,7 +616,6 @@ query consoleGetNodePool($clusterName: String!, $poolName: String!) { cloudProvider maxCount minCount - targetCount } status { checks @@ -708,7 +707,6 @@ query consoleListNodePools($clusterName: String!, $search: SearchNodepool, $pagi cloudProvider maxCount minCount - targetCount } status { checks @@ -1567,154 +1565,6 @@ mutation consoleDeleteSecret($projectName: String!, $envName: String!, $secretNa ) } -mutation consoleCreateVpnDevice($clusterName: String!, $vpnDevice: VPNDeviceIn!) { - infra_createVPNDevice(clusterName: $clusterName, vpnDevice: $vpnDevice) { - id - } -} - -mutation consoleUpdateVpnDevice($clusterName: String!, $vpnDevice: VPNDeviceIn!) { - infra_updateVPNDevice(clusterName: $clusterName, vpnDevice: $vpnDevice) { - id - } -} - -query consoleListVpnDevices($clusterName: String, $search: SearchVPNDevices, $pq: CursorPaginationIn) { - infra_listVPNDevices(clusterName: $clusterName, search: $search, pq: $pq) { - edges { - cursor - node { - clusterName - createdBy { - userEmail - userId - userName - } - creationTime - displayName - lastUpdatedBy { - userEmail - userId - userName - } - markedForDeletion - metadata { - annotations - creationTimestamp - deletionTimestamp - generation - labels - name - namespace - } - spec { - ports { - port - targetPort - } - } - status { - checks - isReady - lastReadyGeneration - lastReconcileTime - message { - RawMessage - } - resources { - apiVersion - kind - name - namespace - } - } - syncStatus { - action - error - lastSyncedAt - recordVersion - state - syncScheduledAt - } - updateTime - } - } - pageInfo { - endCursor - hasNextPage - hasPreviousPage - startCursor - } - totalCount - } -} - -query consoleGetVpnDevice($clusterName: String!, $name: String!) { - infra_getVPNDevice(clusterName: $clusterName, name: $name) { - clusterName - createdBy { - userEmail - userId - userName - } - creationTime - displayName - lastUpdatedBy { - userEmail - userId - userName - } - markedForDeletion - metadata { - annotations - creationTimestamp - deletionTimestamp - generation - labels - name - namespace - } - spec { - ports { - port - targetPort - } - } - status { - checks - isReady - lastReadyGeneration - lastReconcileTime - message { - RawMessage - } - resources { - apiVersion - kind - name - namespace - } - } - syncStatus { - action - error - lastSyncedAt - recordVersion - state - syncScheduledAt - } - updateTime - wireguardConfig { - value - encoding - } - } -} - -mutation consoleDeleteVpnDevice($clusterName: String!, $deviceName: String!) { - infra_deleteVPNDevice(clusterName: $clusterName, deviceName: $deviceName) -} - query consoleListInvitationsForAccount($accountName: String!) { accounts_listInvitations(accountName: $accountName) { accepted @@ -3882,15 +3732,15 @@ mutation authCli_updateDeviceCluster($deviceName: String!, $clusterName: String! core_updateVpnClusterName(deviceName: $deviceName, clusterName: $clusterName) } -mutation authCli_UpdateDeviceNs($deviceName: String!, $ns: String!) { +mutation authCli_updateDeviceNs($deviceName: String!, $ns: String!) { core_updateVpnDeviceNs(deviceName: $deviceName, ns: $ns) } -mutation authCli_CoreUpdateDevicePorts($deviceName: String!, $ports: [PortIn!]!) { +mutation authCli_updateDevicePorts($deviceName: String!, $ports: [PortIn!]!) { core_updateVPNDevicePorts(deviceName: $deviceName, ports: $ports) } -mutation authCli_CoreUpdateDeviceEnv($deviceName: String!, $projectName: String!, $envName: String!) { +mutation authCli_updateDeviceEnv($deviceName: String!, $projectName: String!, $envName: String!) { core_updateVPNDeviceEnv( deviceName: $deviceName projectName: $projectName @@ -3898,7 +3748,7 @@ mutation authCli_CoreUpdateDeviceEnv($deviceName: String!, $projectName: String! ) } -query authCli_listCoreDevices { +query authCli_listDevices { core_listVPNDevicesForUser { displayName environmentName @@ -3906,6 +3756,7 @@ query authCli_listCoreDevices { name } projectName + clusterName status { isReady message { @@ -3927,12 +3778,13 @@ query authCli_listCoreDevices { } } -query authCli_getCoreDevice($name: String!) { +query authCli_getDevice($name: String!) { core_getVPNDevice(name: $name) { displayName metadata { name } + clusterName projectName spec { activeNamespace @@ -3949,7 +3801,7 @@ query authCli_getCoreDevice($name: String!) { } } -mutation authCli_createCoreDevice($vpnDevice: ConsoleVPNDeviceIn!) { +mutation authCli_createDevice($vpnDevice: ConsoleVPNDeviceIn!) { core_createVPNDevice(vpnDevice: $vpnDevice) { metadata { name @@ -3961,11 +3813,7 @@ mutation authCli_createCoreDevice($vpnDevice: ConsoleVPNDeviceIn!) { } } -mutation authCli_updateCoreDevicePorts($deviceName: String!, $ports: [PortIn!]!) { - core_updateVPNDevicePorts(deviceName: $deviceName, ports: $ports) -} - -query authCli_CoreCheckNameAvailability($resType: ConsoleResType!, $name: String!) { +query authCli_coreCheckNameAvailability($resType: ConsoleResType!, $name: String!) { core_checkNameAvailability(resType: $resType, name: $name) { result suggestedNames @@ -4092,35 +3940,17 @@ query authCli_listApps($projectName: String!, $envName: String!) { edges { cursor node { - createdBy { - userEmail - userId - userName - } - creationTime displayName - enabled environmentName - kind - lastUpdatedBy { - userEmail - userId - userName - } markedForDeletion metadata { annotations - creationTimestamp - deletionTimestamp - generation - labels name namespace } projectName spec { displayName - freeze containers { args command @@ -4137,62 +3967,13 @@ query authCli_listApps($projectName: String!, $envName: String!) { type } image - imagePullPolicy - livenessProbe { - failureThreshold - httpGet { - httpHeaders - path - port - } - initialDelay - interval - shell { - command - } - tcp { - port - } - type - } name - readinessProbe { - failureThreshold - initialDelay - interval - type - } - resourceCpu { - max - min - } - resourceMemory { - max - min - } - volumes { - items { - fileName - key - } - mountPath - refName - type - } - } - hpa { - enabled - maxReplicas - minReplicas - thresholdCpu - thresholdMemory } intercept { enabled toDevice } nodeSelector - region replicas serviceAccount services { @@ -4201,39 +3982,16 @@ query authCli_listApps($projectName: String!, $envName: String!) { targetPort type } - tolerations { - effect - key - operator - tolerationSeconds - value - } } status { checks isReady - lastReadyGeneration - lastReconcileTime message { RawMessage } - resources { - apiVersion - kind - name - namespace - } } - updateTime } } - pageInfo { - endCursor - hasNextPage - hasPreviousPage - startCursor - } - totalCount } } diff --git a/src/apps/console/page-components/handle-console-devices.tsx b/src/apps/console/page-components/handle-console-devices.tsx index 01b93890d..1c05ed87a 100644 --- a/src/apps/console/page-components/handle-console-devices.tsx +++ b/src/apps/console/page-components/handle-console-devices.tsx @@ -21,7 +21,6 @@ import List from '~/console/components/list'; import NoResultsFound from '~/console/components/no-results-found'; import QRCode from '~/console/components/qr-code'; import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { IDevices } from '~/console/server/gql/queries/vpn-queries'; import { ExtractNodeType, ensureResource, diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/_layout.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/_layout.tsx index 0db91f93a..bafa09fc9 100644 --- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/_layout.tsx +++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/_layout.tsx @@ -79,16 +79,6 @@ const ClusterTabs = () => { to: '/storage', value: '/storage', }, - { - label: ( - - - VPN - - ), - to: '/network/vpn', - value: '/network', - }, { label: ( diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx index 1827d6203..9f3a76b1f 100644 --- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx +++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx @@ -1,6 +1,7 @@ import { PencilSimple, Trash } from '@jengaicons/react'; import { generateKey, titleCase } from '~/components/utils'; import { + listFlex, ListItem, ListTitle, } from '~/console/components/console-list-components'; @@ -128,7 +129,6 @@ const ListView = ({ items = [], onAction }: IResource) => { const statusRender = listStatus({ key: `${keyPrefix}status`, item, - className: 'flex-grow', }); return ( { render: () => , }, statusRender, + listFlex({key:"flex-1"}), { key: generateKey(keyPrefix, 'author'), className: 'w-[180px]', diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/_layout.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/_layout.tsx deleted file mode 100644 index 0b344e0f9..000000000 --- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/_layout.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Outlet, useOutletContext } from '@remix-run/react'; -import { IClusterContext } from '../_layout'; - -const ContainerRegistry = () => { - const rootContext = useOutletContext(); - return ; -}; - -export default ContainerRegistry; diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/devices-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/devices-resources.tsx deleted file mode 100644 index 4c503532e..000000000 --- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/devices-resources.tsx +++ /dev/null @@ -1,263 +0,0 @@ -import { PencilLine, QrCode, Trash, WireGuardlogo } from '@jengaicons/react'; -import { useState } from 'react'; -import { toast } from '~/components/molecule/toast'; -import { generateKey, titleCase } from '~/components/utils'; -import { - ListItem, - ListTitle, -} from '~/console/components/console-list-components'; -import DeleteDialog from '~/console/components/delete-dialog'; -import Grid from '~/console/components/grid'; -import List from '~/console/components/list'; -import ListGridView from '~/console/components/list-grid-view'; -import ResourceExtraAction from '~/console/components/resource-extra-action'; -import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { IDevices } from '~/console/server/gql/queries/vpn-queries'; -import { - ExtractNodeType, - parseName, - parseUpdateOrCreatedBy, - parseUpdateOrCreatedOn, -} from '~/console/server/r-utils/common'; -import { useReload } from '~/root/lib/client/helpers/reloader'; -import { handleError } from '~/root/lib/utils/common'; -import { useParams } from '@remix-run/react'; -import HandleDevices, { ShowWireguardConfig } from './handle-devices'; - -const RESOURCE_NAME = 'device'; -type BaseType = ExtractNodeType; - -const parseItem = (item: BaseType) => { - return { - name: item.displayName, - id: parseName(item), - updateInfo: { - author: titleCase( - `${parseUpdateOrCreatedBy(item)} updated the ${RESOURCE_NAME}` - ), - time: parseUpdateOrCreatedOn(item), - }, - }; -}; - -type OnAction = ({ - action, - item, -}: { - action: 'edit' | 'delete' | 'qr' | 'config'; - item: BaseType; -}) => void; - -type IExtraButton = { - onAction: OnAction; - item: BaseType; -}; -const ExtraButton = ({ onAction, item }: IExtraButton) => { - return ( - , - type: 'item', - onClick: () => onAction({ action: 'edit', item }), - key: 'edit', - }, - { - label: 'Show QR Code', - icon: , - type: 'item', - onClick: () => onAction({ action: 'qr', item }), - key: 'qr', - }, - { - label: 'Show Wireguard Config', - icon: , - type: 'item', - onClick: () => onAction({ action: 'config', item }), - key: 'wireguard-config', - }, - { - type: 'separator', - key: 'sep-1', - }, - { - label: 'Delete', - icon: , - type: 'item', - onClick: () => onAction({ action: 'delete', item }), - key: 'delete', - className: '!text-text-critical', - }, - ]} - /> - ); -}; - -interface IResource { - items: BaseType[]; - onAction: OnAction; -} - -const GridView = ({ items, onAction }: IResource) => { - return ( - - {items.map((item, index) => { - const { name, id, updateInfo } = parseItem(item); - const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`; - return ( - ( - } - /> - ), - }, - { - key: generateKey(keyPrefix, updateInfo.author), - render: () => ( - - ), - }, - ]} - /> - ); - })} - - ); -}; - -const ListView = ({ items, onAction }: IResource) => { - return ( - - {items.map((item, index) => { - const { name, id, updateInfo } = parseItem(item); - const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`; - return ( - , - }, - { - key: generateKey(keyPrefix, updateInfo.author), - className: 'w-[200px] min-w-[200px] max-w-[200px]', - render: () => ( - - ), - }, - { - key: generateKey(keyPrefix, 'action'), - render: () => , - }, - ]} - /> - ); - })} - - ); -}; - -const DeviceResources = ({ items = [] }: { items: BaseType[] }) => { - const [showHandleDevice, setShowHandleDevice] = useState( - null - ); - const [showDeleteDialog, setShowDeleteDialog] = useState( - null - ); - const [showWireguardConfig, setShowWireguardConfig] = useState<{ - device: string; - mode: 'qr' | 'config'; - } | null>(null); - - const api = useConsoleApi(); - const reloadPage = useReload(); - - const props: IResource = { - items, - onAction: ({ action, item }) => { - switch (action) { - case 'edit': - setShowHandleDevice(item); - break; - case 'delete': - setShowDeleteDialog(item); - break; - case 'qr': - setShowWireguardConfig({ device: parseName(item), mode: 'qr' }); - break; - case 'config': - setShowWireguardConfig({ device: parseName(item), mode: 'config' }); - break; - default: - } - }, - }; - - const params = useParams(); - return ( - <> - } - gridView={} - /> - { - try { - const { errors } = await api.deleteVpnDevice({ - deviceName: parseName(showDeleteDialog), - clusterName: params.cluster || '', - }); - - if (errors) { - throw errors[0]; - } - reloadPage(); - toast.success(`${titleCase(RESOURCE_NAME)} deleted successfully`); - setShowDeleteDialog(null); - } catch (err) { - handleError(err); - } - }} - /> - setShowWireguardConfig(null), - data: showWireguardConfig!, - mode: showWireguardConfig?.mode || 'config', - }} - /> - setShowHandleDevice(null), - }} - /> - - ); -}; - -export default DeviceResources; diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/handle-devices.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/handle-devices.tsx deleted file mode 100644 index 94329ad03..000000000 --- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/handle-devices.tsx +++ /dev/null @@ -1,538 +0,0 @@ -/* eslint-disable no-nested-ternary */ -/* eslint-disable react/destructuring-assignment */ -import { - ArrowLineDown, - ArrowRight, - Check, - ChevronLeft, - ChevronRight, - Plus, - SmileySad, - X, -} from '@jengaicons/react'; -import { useOutletContext, useParams } from '@remix-run/react'; -import { useEffect, useState } from 'react'; -import { IconButton } from '~/components/atoms/button'; -import Chips from '~/components/atoms/chips'; -import { NumberInput, TextInput } from '~/components/atoms/input'; -import { usePagination } from '~/components/molecule/pagination'; -import Popup from '~/components/molecule/popup'; -import { toast } from '~/components/molecule/toast'; -import { cn } from '~/components/utils'; -import { IdSelector } from '~/console/components/id-selector'; -import List from '~/console/components/list'; -import NoResultsFound from '~/console/components/no-results-found'; -import QRCode from '~/console/components/qr-code'; -import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { IDevices } from '~/console/server/gql/queries/vpn-queries'; -import { - ExtractNodeType, - ensureResource, - parseName, -} from '~/console/server/r-utils/common'; -import { ensureClusterClientSide } from '~/console/server/utils/auth-utils'; -import { useReload } from '~/root/lib/client/helpers/reloader'; -import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form'; -import { ENV_NAMESPACE } from '~/root/lib/configs/env'; -import Yup from '~/root/lib/server/helpers/yup'; -import { handleError } from '~/root/lib/utils/common'; -import { IDialogBase } from '~/console/components/types.d'; -import CommonPopupHandle from '~/console/components/common-popup-handle'; -import { LoadingPlaceHolder } from '~/console/components/loading'; -import { downloadFile } from '~/console/utils/commons'; -import CodeView from '~/console/components/code-view'; -import { InfoLabel } from '~/console/components/commons'; -import { parseValue } from '~/console/page-components/util'; -import { NameIdView } from '~/console/components/name-id-view'; -import { IAccountContext } from '../../../../_layout'; - -interface IExposedPorts { - targetPort?: number; - port?: number; -} - -interface IExposedPortList { - exposedPorts: IExposedPorts[]; - onDelete: (exposedPorts: IExposedPorts) => void; -} -const ExposedPortList = ({ - exposedPorts, - onDelete = (_) => _, -}: IExposedPortList) => { - const itemsPerPage = 4; - - const { page, hasNext, hasPrevious, onNext, onPrev, setItems } = - usePagination({ - items: exposedPorts, - itemsPerPage, - }); - - useEffect(() => { - setItems(exposedPorts); - }, [exposedPorts]); - return ( -
- {exposedPorts.length > 0 && ( - -
- Exposed ports -
-
- } - size="xs" - variant="plain" - onClick={() => onPrev()} - disabled={!hasPrevious} - /> - } - size="xs" - variant="plain" - onClick={() => onNext()} - disabled={!hasNext} - /> -
-
- } - > - {page.map((ep, index) => { - return ( - ( -
- Exposed: - {ep.port} - - Target: - {ep.targetPort} -
- ), - }, - { - key: `${index}-column-3`, - render: () => ( -
- } - variant="plain" - size="sm" - onClick={() => { - onDelete(ep); - }} - /> -
- ), - }, - ]} - /> - ); - })} - - )} - {exposedPorts.length === 0 && ( -
- } - shadow={false} - border={false} - /> -
- )} - - ); -}; - -export const ExposedPorts = ({ - ports, - onChange, -}: { - ports: IExposedPorts[]; - onChange: (ports: IExposedPorts[]) => void; -}) => { - const { errors, handleChange, submit, values, resetValues } = useForm({ - initialValues: { - port: '', - targetPort: '', - }, - validationSchema: Yup.object({ - port: Yup.number() - .required() - .test('is-valid', 'Port already exists.', (value) => { - return !ports.some((p) => p.port === value); - }), - targetPort: Yup.number().min(0).max(65535).required(), - }), - onSubmit: (val) => { - onChange?.([ - ...ports, - { - port: - typeof val.port === 'string' ? parseInt(val.port, 10) : val.port, - targetPort: - typeof val.targetPort === 'string' - ? parseInt(val.targetPort, 10) - : val.targetPort, - }, - ]); - resetValues(); - }, - }); - - return ( - <> -
-
-
- - } - size="lg" - error={!!errors.port} - message={errors.port} - value={values.port} - onChange={({ target }) => { - handleChange('port')(dummyEvent(parseValue(target.value, 0))); - }} - /> -
-
- - } - size="lg" - autoComplete="off" - value={values.targetPort} - onChange={({ target }) => { - handleChange('targetPort')( - dummyEvent(parseValue(target.value, 0)) - ); - }} - /> -
-
- } - variant="basic" - disabled={!values.port || !values.targetPort} - onClick={submit} - /> -
-
-
- { - onChange?.(ports.filter((v) => v.port !== ep.port)); - }} - /> - - ); -}; - -export const QRCodeView = ({ data }: { data: string }) => { - return ( -
-
-
- Use WireGuard on your phone -
-
    -
  • Download the app from Google Play or Apple Store
    • -
  • Open the app on your Phone
    • -
  • Tab on the ➕ Plus icon
    • -
  • Point your phone to this screen to capture the QR code
    • -
-
-
- -
-
- ); -}; - -const decodeConfig = ({ - encoding, - value, -}: { - encoding: string; - value: string; -}) => { - switch (encoding) { - case 'base64': - return atob(value); - default: - return value; - } -}; - -const downloadConfig = ({ - filename, - data, -}: { - filename: string; - data: string; -}) => { - downloadFile({ filename, data, format: 'text/plain' }); -}; - -export const ShowWireguardConfig = ({ - visible, - setVisible, - data, - mode = 'config', -}: { - visible: boolean; - setVisible: (visible: boolean) => void; - data: { device: string }; - mode: 'qr' | 'config'; -}) => { - const [loading, setLoading] = useState(false); - const [config, setConfig] = useState(undefined); - const api = useConsoleApi(); - - const { cluster } = useParams(); - - useEffect(() => { - if (visible) { - (async () => { - setLoading(true); - try { - const { errors, data: out } = await api.getVpnDevice({ - clusterName: cluster || '', - name: data.device, - }); - if (errors) { - throw errors[0]; - } - if (out.wireguardConfig) { - setConfig(decodeConfig(out.wireguardConfig)); - } else { - setConfig(undefined); - } - } catch (error) { - handleError(error); - } finally { - setLoading(false); - } - })(); - } - }, [visible]); - - const modeView = () => { - if (!config) { - return ( -
- No wireguard config found. -
- ); - } - switch (mode) { - case 'qr': - return ; - case 'config': - default: - return ( -
-
- Please use the following configuration to set up your WireGuard - client. -
- -
- ); - } - }; - - return ( - - - {mode === 'config' ? 'Wireguard Config' : 'Wireguard Config QR Code'} - - - {loading ? ( - - ) : ( - modeView() - )} - - {!loading && config && ( - - { - downloadConfig({ - filename: `${data.device}-wireguardconfig.yaml`, - data: config, - }); - }} - content="Export" - prefix={} - variant="primary" - /> - - )} - - ); -}; - -type IDialog = IDialogBase>; - -const Root = (props: IDialog) => { - const { isUpdate, setVisible } = props; - const api = useConsoleApi(); - const reloadPage = useReload(); - const params = useParams(); - - const { cluster } = params; - - const { values, errors, handleChange, handleSubmit, resetValues, isLoading } = - useForm({ - initialValues: isUpdate - ? { - displayName: props.data.displayName, - name: parseName(props.data), - ports: props.data.spec?.ports || [], - isNameError: false, - } - : { - displayName: '', - name: '', - ports: [], - isNameError: false, - }, - validationSchema: Yup.object({ - name: Yup.string().required(), - displayName: Yup.string().required(), - }), - onSubmit: async (val) => { - try { - ensureClusterClientSide(params); - - if (!isUpdate) { - const { errors } = await api.createVpnDevice({ - clusterName: ensureResource(cluster), - vpnDevice: { - displayName: val.displayName, - metadata: { - name: val.name, - namespace: ENV_NAMESPACE, - }, - spec: { - ports: val.ports, - }, - }, - }); - if (errors) { - throw errors[0]; - } - } else if (isUpdate && props.data) { - const { errors } = await api.updateVpnDevice({ - clusterName: cluster || '', - vpnDevice: { - displayName: val.displayName, - metadata: { - name: parseName(props.data), - namespace: ENV_NAMESPACE, - }, - spec: { - ports: val.ports, - }, - }, - }); - if (errors) { - throw errors[0]; - } - } - - reloadPage(); - resetValues(); - toast.success('Device created successfully'); - setVisible(false); - } catch (err) { - handleError(err); - } - }, - }); - - return ( - { - if (!values.isNameError) { - handleSubmit(e); - } else { - e.preventDefault(); - } - }} - > - -
- - { - handleChange('ports')(dummyEvent(ports)); - }} - /> -
- - - - - - - ); -}; - -const HandleDevices = (props: IDialog) => { - return ( - - ); -}; - -export default HandleDevices; diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/route.tsx deleted file mode 100644 index e1f1d44d8..000000000 --- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/network+/vpn/route.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Plus } from '@jengaicons/react'; -import { defer } from '@remix-run/node'; -import { useLoaderData } from '@remix-run/react'; -import { useState } from 'react'; -import { Button } from '~/components/atoms/button'; -import { LoadingComp, pWrapper } from '~/console/components/loading-component'; -import Wrapper from '~/console/components/wrapper'; -import { GQLServerHandler } from '~/console/server/gql/saved-queries'; -import { ensureAccountSet } from '~/console/server/utils/auth-utils'; -import { getPagination, getSearch } from '~/console/server/utils/common'; -import logger from '~/root/lib/client/helpers/log'; -import { IRemixCtx } from '~/root/lib/types/common'; -import fake from '~/root/fake-data-generator/fake'; -import DeviceResources from './devices-resources'; -import HandleDevices from './handle-devices'; -import Tools from './tools'; - -export const loader = async (ctx: IRemixCtx) => { - const promise = pWrapper(async () => { - ensureAccountSet(ctx); - const { cluster } = ctx.params; - const { data, errors } = await GQLServerHandler(ctx.request).listVpnDevices( - { - clusterName: cluster, - pq: getPagination(ctx), - search: getSearch(ctx), - } - ); - if (errors) { - logger.error(errors[0]); - throw errors[0]; - } - - return { - devicesData: data || {}, - }; - }); - - return defer({ promise }); -}; -const VPN = () => { - const [visible, setVisible] = useState(false); - const { promise } = useLoaderData(); - - return ( - <> - - {({ devicesData }) => { - const devices = devicesData.edges?.map(({ node }) => node); - return ( - 0 && ( -