feat: api proxy

containers/clusterManagement/index.tsx

@@ -22,13 +22,11 @@ import { Container, Content, Description, Header, LearnMoreLink } from './cluste
 import { getClusterManagementColumns, getClusterState } from './columnDefinition';
 
 export interface ClusterManagementProps {
-  apiUrl: string;
   useTelemetry: boolean;
   kubefirstVersion: string;
 }
 
 const ClusterManagement: FunctionComponent<ClusterManagementProps> = ({
-  apiUrl,
   kubefirstVersion,
   useTelemetry,
 }) => {
@@ -62,7 +60,7 @@ const ClusterManagement: FunctionComponent<ClusterManagementProps> = ({
   };
 
   const handleDeleteCluster = () => {
-    dispatch(deleteCluster({ apiUrl, clusterName: selectedCluster?.clusterName })).unwrap();
+    dispatch(deleteCluster({ clusterName: selectedCluster?.clusterName })).unwrap();
     handleGetClusters();
     closeDeleteModal();
   };
@@ -73,8 +71,8 @@ const ClusterManagement: FunctionComponent<ClusterManagementProps> = ({
   };
 
   const handleGetClusters = useCallback(async (): Promise<void> => {
-    await dispatch(getClusters({ apiUrl }));
-  }, [apiUrl, dispatch]);
+    await dispatch(getClusters());
+  }, [dispatch]);
 
   const getClusterInterval = (params: ClusterRequestProps) => {
     return setInterval(async () => {
@@ -85,7 +83,6 @@ const ClusterManagement: FunctionComponent<ClusterManagementProps> = ({
   useEffect(() => {
     if (isDeleting && !isDeleted && selectedCluster) {
       interval.current = getClusterInterval({
-        apiUrl,
         clusterName: selectedCluster?.clusterName as string,
       });
       handleGetClusters();
@@ -106,11 +103,11 @@ const ClusterManagement: FunctionComponent<ClusterManagementProps> = ({
 
   useEffect(() => {
     handleGetClusters();
-  }, [apiUrl, dispatch, handleGetClusters]);
+  }, [dispatch, handleGetClusters]);
 
   useEffect(() => {
-    dispatch(setConfigValues({ isTelemetryEnabled: useTelemetry, apiUrl, kubefirstVersion }));
-  }, [dispatch, useTelemetry, apiUrl, kubefirstVersion]);
+    dispatch(setConfigValues({ isTelemetryEnabled: useTelemetry, kubefirstVersion }));
+  }, [dispatch, useTelemetry, kubefirstVersion]);
 
   return (
     <Container>

containers/header/index.tsx

@@ -13,9 +13,8 @@ import { ClusterIndicator, ClusterMenu, Container } from './header.styled';
 
 const Header: FunctionComponent = () => {
   const dispatch = useAppDispatch();
-  const { apiUrl, clusters, selectedCluster } = useAppSelector(({ api, cluster, config }) => ({
+  const { clusters, selectedCluster } = useAppSelector(({ api, cluster }) => ({
     clusters: api.clusters,
-    apiUrl: config.apiUrl,
     selectedCluster: cluster.selectedCluster,
   }));
 
@@ -32,10 +31,8 @@ const Header: FunctionComponent = () => {
   };
 
   useEffect(() => {
-    if (apiUrl) {
-      dispatch(getClusters({ apiUrl }));
-    }
-  }, [apiUrl, dispatch]);
+    dispatch(getClusters());
+  }, [dispatch]);
 
   useEffect(() => {
     if (clusters.length && !selectedCluster) {

containers/provision/index.tsx

@@ -24,16 +24,11 @@ import Button from '../../components/button';
 import { AdvancedOptionsContainer, ErrorContainer, Form, FormContent } from './provision.styled';
 
 export interface ProvisionProps {
-  apiUrl: string;
   kubefirstVersion: string;
   useTelemetry: boolean;
 }
 
-const Provision: FunctionComponent<ProvisionProps> = ({
-  apiUrl,
-  kubefirstVersion,
-  useTelemetry,
-}) => {
+const Provision: FunctionComponent<ProvisionProps> = ({ kubefirstVersion, useTelemetry }) => {
   const dispatch = useAppDispatch();
   const { installType, gitProvider, installationStep, values, error, authErrors } = useAppSelector(
     ({ git, installation }) => ({
@@ -137,8 +132,8 @@ const Provision: FunctionComponent<ProvisionProps> = ({
 
     await dispatch(clearError());
     await dispatch(clearClusterState());
-    await dispatch(createCluster({ apiUrl })).unwrap();
-  }, [apiUrl, dispatch, error]);
+    await dispatch(createCluster()).unwrap();
+  }, [dispatch, error]);
 
   const form = useMemo(() => {
     if (installationStep === 0) {
@@ -205,12 +200,12 @@ const Provision: FunctionComponent<ProvisionProps> = ({
   ]);
 
   useEffect(() => {
-    dispatch(setConfigValues({ isTelemetryEnabled: useTelemetry, apiUrl, kubefirstVersion }));
+    dispatch(setConfigValues({ isTelemetryEnabled: useTelemetry, kubefirstVersion }));
 
     return () => {
       dispatch(resetInstallState());
     };
-  }, [dispatch, useTelemetry, apiUrl, kubefirstVersion]);
+  }, [dispatch, useTelemetry, kubefirstVersion]);
 
   useEffect(() => {
     if (isSetupStep) {

containers/services/index.tsx

@@ -22,15 +22,13 @@ enum SERVICES_TABS {
 }
 
 export interface ServicesProps {
-  apiUrl: string;
   domainName: string;
   k3dDomain: string;
   kubefirstVersion: string;
   useTelemetry: boolean;
 }
 
 const Services: FunctionComponent<ServicesProps> = ({
-  apiUrl,
   domainName,
   k3dDomain,
   kubefirstVersion,
@@ -66,11 +64,9 @@ const Services: FunctionComponent<ServicesProps> = ({
   };
 
   useEffect(() => {
-    dispatch(
-      setConfigValues({ isTelemetryEnabled: useTelemetry, kubefirstVersion, k3dDomain, apiUrl }),
-    );
+    dispatch(setConfigValues({ isTelemetryEnabled: useTelemetry, kubefirstVersion, k3dDomain }));
     dispatch(getMarketplaceApps());
-  }, [dispatch, useTelemetry, kubefirstVersion, k3dDomain, apiUrl]);
+  }, [dispatch, useTelemetry, kubefirstVersion, k3dDomain]);
 
   useEffect(() => {
     if (!selectedCluster?.clusterName) {

containers/terminalLogs/terminalLogs.tsx

@@ -48,7 +48,6 @@ const TerminalLogs: FunctionComponent = () => {
   const interval = useRef<NodeJS.Timer>();
   const dispatch = useAppDispatch();
   const {
-    config: { apiUrl = '' },
     api: {
       isProvisioned,
       isProvisioning,
@@ -94,7 +93,7 @@ const TerminalLogs: FunctionComponent = () => {
   useEffect(() => {
     const clusterName = values?.clusterName;
     if (isProvisioning && !isProvisioned && clusterName) {
-      interval.current = getClusterInterval({ apiUrl, clusterName });
+      interval.current = getClusterInterval({ clusterName });
     }
 
     if (isProvisioned) {
@@ -130,7 +129,7 @@ const TerminalLogs: FunctionComponent = () => {
 
       terminal.open(terminalRef.current);
 
-      const emitter = createLogStream(`${apiUrl}/stream`);
+      const emitter = createLogStream(`api/stream`);
       emitter.on('log', (log) => {
         if (
           log.message.includes('time=') &&
@@ -156,19 +155,12 @@ const TerminalLogs: FunctionComponent = () => {
 
       emitter.startLogStream();
 
-      // const tempLogs = [];
-      // setInterval(() => {
-      //   tempLogs.push(`\x1b[0;37m 2023-05-05 \x1b[0;34m INFO:\x1b[1;37m Hey Kubefirst \n`);
-      //   setLogs(tempLogs);
-      //   terminal.write(`\x1b[0;37m 2023-05-05 \x1b[0;34m INFO:\x1b[1;37m Hey Kubefirst \n`);
-      // }, 5000);
-
       return () => {
         terminal.dispose();
         emitter.stopLogStream();
       };
     }
-  }, [apiUrl, loadAddons]);
+  }, [loadAddons]);
 
   useEffect(() => {
     Object.keys(CLUSTER_CHECKS).forEach((checkKey) => {

package.json

@@ -35,11 +35,13 @@
     "axios": "^1.3.3",
     "axios-mock-adapter": "^1.21.4",
     "babel-preset-next": "^1.4.0",
+    "eventsource": "^2.0.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "next": "13.0.3",
     "next-redux-wrapper": "^8.0.0",
     "posthog-node": "^2.6.0",
+    "query-string": "^8.1.0",
     "react": "18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
@@ -74,6 +76,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@types/analytics-node": "^3.1.9",
+    "@types/eventsource": "^1.1.11",
     "@types/react": "^18.0.24",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/styled-components": "^5.1.26",

pages/api/config.ts

@@ -5,43 +5,11 @@ type Configs = {
 };
 
 export default function handler(req: NextApiRequest, res: NextApiResponse<Configs>) {
-  const {
-    API_URL = '',
-    ARGO_CD_URL = '',
-    ARGO_WORKFLOWS_URL = '',
-    ATLANTIS_URL = '',
-    CLOUD = '',
-    CLUSTER_ID = '',
-    CLUSTER_TYPE = '',
-    DOMAIN_NAME = '',
-    GIT_PROVIDER = '',
-    GITHUB_OWNER = '',
-    GITLAB_OWNER = '',
-    KUBEFIRST_VERSION = '',
-    METAPHOR_DEVELOPMENT_URL = '',
-    METAPHOR_STAGING_URL = '',
-    METAPHOR_PRODUCTION_URL = '',
-    USE_TELEMETRY = '',
-    VAULT_URL = '',
-  } = process.env;
+  const { API_URL = '', KUBEFIRST_VERSION = '', USE_TELEMETRY = '' } = process.env;
 
   res.status(200).json({
     API_URL,
-    ARGO_CD_URL,
-    ARGO_WORKFLOWS_URL,
-    ATLANTIS_URL,
-    CLOUD,
-    CLUSTER_ID,
-    CLUSTER_TYPE,
-    DOMAIN_NAME,
-    GIT_PROVIDER,
-    GITHUB_OWNER,
-    GITLAB_OWNER,
     KUBEFIRST_VERSION,
-    VAULT_URL,
-    METAPHOR_DEVELOPMENT_URL,
-    METAPHOR_STAGING_URL,
-    METAPHOR_PRODUCTION_URL,
     USE_TELEMETRY,
   });
 }

pages/api/proxy.ts

@@ -0,0 +1,24 @@
+import axios from 'axios';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { API_URL = '' } = process.env;
+  const { body, url } = req.body;
+  const { url: queryUrl } = req.query;
+
+  if (!API_URL) {
+    return res.status(200).json('API_URL not provided');
+  }
+
+  const kubefirstEndpointUrl = `${API_URL}${queryUrl || url}`;
+
+  // eslint-disable-next-line no-console
+  console.log(`METHOD: ${req.method} URL: ${kubefirstEndpointUrl}`);
+  try {
+    const response = await axios({ url: kubefirstEndpointUrl, data: body, method: req.method });
+    res.status(200).json(response.data);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    res.status(500).send(error?.response?.data || error?.message);
+  }
+}

pages/api/proxyHealth.ts

@@ -0,0 +1,13 @@
+import axios from 'axios';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { API_URL = '' } = process.env;
+
+  if (!API_URL) {
+    return res.status(200).json('API_URL not provided');
+  }
+
+  const response = await axios.get(`${API_URL}/health`);
+  res.status(200).json(response.data);
+}

pages/api/stream.ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import EventSource from 'eventsource';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { API_URL = '' } = process.env;
+
+  res.writeHead(200, {
+    'Connection': 'keep-alive',
+    'Content-Encoding': 'none',
+    'Cache-Control': 'no-cache',
+    'Content-Type': 'text/event-stream',
+  });
+  res.flushHeaders();
+
+  const eventSource = new EventSource(`${API_URL}/stream`);
+
+  eventSource.addEventListener('open', () => {
+    // eslint-disable-next-line no-console
+    console.log('connection established from console api');
+  });
+  eventSource.addEventListener('message', (e) => {
+    res.write(`data: ${e.data}\n\n`);
+  });
+}

pages/cluster-management.tsx

@@ -23,11 +23,10 @@ const ClusterManagementPage: FunctionComponent<ClusterManagementProps> = (props)
 };
 
 export async function getServerSideProps() {
-  const { API_URL = '', KUBEFIRST_VERSION = '', USE_TELEMETRY = '' } = process.env;
+  const { KUBEFIRST_VERSION = '', USE_TELEMETRY = '' } = process.env;
 
   return {
     props: {
-      apiUrl: API_URL,
       kubefirstVersion: KUBEFIRST_VERSION,
       useTelemetry: USE_TELEMETRY === 'true',
     },

pages/index.ts

@@ -34,7 +34,7 @@ const MainPage: FunctionComponent<MainPageProps> = ({ flags }) => {
 };
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const { API_URL = '', POSTHOG_KEY = '', USE_TELEMETRY = '' } = process.env;
+  const { POSTHOG_KEY = '', USE_TELEMETRY = '' } = process.env;
 
   let flags;
   try {
@@ -49,7 +49,6 @@ export const getServerSideProps: GetServerSideProps = async () => {
   return {
     props: {
       flags,
-      apiUrl: API_URL,
       useTelemetry: USE_TELEMETRY === 'true',
     },
   };

pages/provision.tsx

@@ -30,11 +30,10 @@ const ProvisionPage: FunctionComponent<ProvisionProps> = (props) => {
 };
 
 export async function getServerSideProps() {
-  const { API_URL = '', KUBEFIRST_VERSION = '', USE_TELEMETRY = '' } = process.env;
+  const { KUBEFIRST_VERSION = '', USE_TELEMETRY = '' } = process.env;
 
   return {
     props: {
-      apiUrl: API_URL,
       kubefirstVersion: KUBEFIRST_VERSION,
       useTelemetry: USE_TELEMETRY === 'true',
     },

pages/services.tsx

@@ -3,7 +3,6 @@ import React, { FunctionComponent } from 'react';
 import Services from '../containers/services';
 
 interface ServicesPageProps {
-  apiUrl: string;
   domainName: string;
   k3dDomain: string;
   kubefirstVersion: string;
@@ -14,7 +13,6 @@ const ServicesPage: FunctionComponent<ServicesPageProps> = (props) => <Services
 
 export async function getServerSideProps() {
   const {
-    API_URL = '',
     DOMAIN_NAME = '',
     K3D_DOMAIN = '',
     KUBEFIRST_VERSION = '',
@@ -23,7 +21,6 @@ export async function getServerSideProps() {
 
   return {
     props: {
-      apiUrl: API_URL,
       domainName: DOMAIN_NAME,
       k3dDomain: K3D_DOMAIN,
       kubefirstVersion: KUBEFIRST_VERSION,