wip

Makefile

@@ -1,3 +1,4 @@
+APP_NAME = busola-web
 IMG_NAME = busola-web
 LOCAL_IMG_NAME = busola
 IMG = $(DOCKER_PUSH_REPOSITORY)$(DOCKER_PUSH_DIRECTORY)/$(IMG_NAME)
@@ -21,30 +22,12 @@ release: build-image push-image
 
 release-local: build-image-local push-image-local
 
-build-image:
-	docker build -t $(IMG_NAME) -f Dockerfile .
-
-build-image-local:
-	docker build -t $(LOCAL_IMG_NAME) -f Dockerfile.local .
-
-push-image:
-	docker tag $(IMG_NAME) $(IMG):$(TAG)
-	docker push $(IMG):$(TAG)
-ifeq ($(JOB_TYPE), postsubmit)
-	@echo "Sign image with Cosign"
-	cosign version
-	cosign sign -key ${KMS_KEY_URL} $(REPO)$(IMG):$(TAG)
-else
-	@echo "Image signing skipped"
-endif
-
-push-image-local:
-	docker tag $(LOCAL_IMG_NAME) $(LOCAL_IMG):$(TAG)
-	docker push $(LOCAL_IMG):$(TAG)
-ifeq ($(JOB_TYPE), postsubmit)
-	@echo "Tag image with latest"
-	docker tag $(LOCAL_IMG_NAME) $(LOCAL_IMG):latest
-	docker push $(LOCAL_IMG):latest
-else
-	@echo "Image tagging with latest skipped"
-endif
+build-image: ## Build busola backend image
+	docker build -t $(APP_NAME) -f Dockerfile.web .
+
+install-busola-web: build-image ## Build busola web image and install it on local k3d cluster
+	$(eval HASH_TAG=$(shell docker images $(APP_NAME):latest --quiet))
+	docker tag $(APP_NAME) $(APP_NAME):$(HASH_TAG)
+
+	k3d image import $(APP_NAME):$(HASH_TAG) -c kyma
+	kubectl set image deployment web busola=$(APP_NAME):$(HASH_TAG)

README.md

@@ -178,18 +178,41 @@ For the information on how to run tests and configure them, go to the [`tests`](
    docker run --rm -it -p 3001:3001 -v <path to your custom config>:/app/core-ui/environments/ --env ENVIRONMENT={your-env} --pid=host --name busola europe-docker.pkg.dev/kyma-project/prod/busola:latest
    ```
 
-## Busola installed in Kubernetes cluster
+## Deploy busola in Kubernetes Cluster
 
-You can install busola on kubernetes cluster in 3 flavours:
+To install busola on k8s cluster go to `resources` directory and run:
 
-- normal
-- with ingress
-- with Istio configuration
+```shell
+kustomize build base/ | kubectl apply -f-
+```
+
+To install busola with istio gateway please prepare `DOMAIN`, go to `resources` and run:
+
+```shell
+./apply-resources-istio.sh ${YOUR_DOMAIN}
+```
+
+### Access busola installed on Kubernetes
 
-To install Busola in kubernetes
+You can access busola installed on Kubernetes in several ways, depends on how it's installed:
 
 ### K3d
 
+Use port-forward
+
+```shell
+kubectl port-forward services/web 8080:8080
+kubectl port-forward services/backend 3001:3001
+```
+
+Install ingress by runing:
+
+```shell
+(cd resources && kubectl apply -f ingress/ingress.yaml)
+```
+
+Then go to `localhost`
+
 ### Port-forward
 
 ### Istio-ingress gateway

backend/index.js

@@ -51,7 +51,6 @@ if (gzipEnabled)
   );
 
 if (process.env.NODE_ENV === 'development') {
-  console.log('Use development settings of cors');
   app.use(cors({ origin: '*' }));
 }
 

resources/base/backend/kustomization.yaml

@@ -7,4 +7,4 @@ resources:
 images:
   - name: busola-backend
     newName: europe-docker.pkg.dev/kyma-project/prod/busola-backend
-    newTag: v0.0.1
+    newTag: latest

resources/base/web/deployment.yaml

@@ -26,20 +26,14 @@ spec:
                   key: ENVIRONMENT
                   name: environment
             - name: BACKEND_URL
-              value: backend
+              valueFrom:
+                configMapKeyRef:
+                  optional: true
+                  key: BACKEND_URL
+                  name: busola-config
           resources:
             requests:
               cpu: 100m
               memory: 21Mi
           ports:
             - containerPort: 8080
-          volumeMounts:
-            - name: config
-              mountPath: /app/core-ui/config
-      volumes:
-        - name: config
-          configMap:
-            name: busola-config
-            items:
-              - key: config
-                path: config.yaml

resources/base/web/kustomization.yaml

@@ -1,11 +1,10 @@
 apiVersion: kustomize.config.k8s.io/v1beta1
 kind: Kustomization
 resources:
-  - configmap.yaml
   - deployment.yaml
   - hpa.yaml
   - service.yaml
 images:
   - name: busola-web
     newName: europe-docker.pkg.dev/kyma-project/prod/busola-web
-    newTag: v0.0.1
+    newTag: latest

resources/ingress/configmap.yaml

@@ -0,0 +1,6 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: busola-config
+data:
+  BACKEND_URL: 'http://localhost/backend'

src/components/Gardener/useGardenerLoginFunction.tsx

@@ -21,12 +21,12 @@ async function failFastFetch<T>(
 }
 
 export function useGardenerLogin(setReport: (report: string) => void) {
-  const { backendAddress } = getClusterConfig();
   const clustersInfo = useClustersInfo();
 
   const getAvailableProjects = async (
     fetchHeaders: HeadersInit,
   ): Promise<string[]> => {
+    const { backendAddress } = await getClusterConfig();
     type SSRResult = {
       status: { resourceRules: PermissionSet[] };
     };
@@ -63,6 +63,8 @@ export function useGardenerLogin(setReport: (report: string) => void) {
     fetchHeaders: HeadersInit,
     availableProjects: string[],
   ) => {
+    const { backendAddress } = await getClusterConfig();
+
     type ShootsResult = {
       items: K8sResource[];
     };

src/shared/hooks/BackendAPI/useFetch.ts

@@ -5,7 +5,7 @@ import { throwHttpError } from 'shared/hooks/BackendAPI/config';
 
 import { authDataState, AuthDataState } from '../../../state/authDataAtom';
 import { getClusterConfig } from '../../../state/utils/getBackendInfo';
-import { clusterState, ActiveClusterState } from '../../../state/clusterAtom';
+import { ActiveClusterState, clusterState } from '../../../state/clusterAtom';
 
 export type FetchFn = ({
   relativeUrl,
@@ -40,7 +40,7 @@ export const createFetchFn = ({
     },
     signal: abortController?.signal,
   };
-  const { backendAddress } = getClusterConfig();
+  const { backendAddress } = await getClusterConfig();
 
   try {
     const response = await fetch(backendAddress + relativeUrl, init);

src/shared/utils/env.ts

@@ -1,15 +1,37 @@
 import joinPaths from './path';
 
-export default async function getConfigDir(): Promise<string> {
+export enum Envs {
+  BACKEND_URL = 'BACKEND_URL',
+  ENVIRONMENT = 'ENVIRONMENT',
+}
+
+export default async function getEnv(env: Envs): Promise<string> {
   const input = await fetchActiveEnv();
-  const envVar = input.trim().split('=');
-  if (envVar?.length === 2 && envVar[1]) {
-    const envDir = envVar[1].trim();
-    return joinPaths('environments', envDir);
+  const envs = readEnv(input);
+  const desiredEnv = envs.get(env);
+  return desiredEnv ? desiredEnv : '';
+}
+
+export async function getConfigDir(): Promise<string> {
+  const environment = await getEnv(Envs.ENVIRONMENT);
+  if (environment) {
+    return joinPaths('environments', environment);
   }
   return '';
 }
 
+function readEnv(input: string): Map<string, string> {
+  return new Map(
+    input.split('\n').map(value => {
+      const envVar = value.trim().split('=');
+      if (envVar?.length === 2 && envVar[1]) {
+        return [envVar[0], envVar[1]];
+      }
+      return ['', ''];
+    }),
+  );
+}
+
 async function fetchActiveEnv(): Promise<string> {
   const envResponse = await fetch('/active.env');
   return envResponse.text();

src/state/configuration/configurationAtom.ts

@@ -10,7 +10,7 @@ import { ConfigFeatureList } from '../types';
 import { apiGroupState } from '../discoverability/apiGroupsSelector';
 import { getFeatures } from './getFeatures';
 import { FetchFn } from 'shared/hooks/BackendAPI/useFetch';
-import getConfigDir from 'shared/utils/env';
+import { getConfigDir } from 'shared/utils/env';
 
 type Configuration = {
   features?: ConfigFeatureList;

src/state/navigation/extensionsAtom.ts

@@ -26,7 +26,7 @@ import pluralize from 'pluralize';
 import { useGet } from 'shared/hooks/BackendAPI/useGet';
 import { CustomResourceDefinition } from 'command-pallette/CommandPalletteUI/handlers/crHandler';
 import { createPostFn } from 'shared/hooks/BackendAPI/usePost';
-import getConfigDir from 'shared/utils/env';
+import { getConfigDir } from 'shared/utils/env';
 
 /*
 the order of the overwrting extensions

src/state/types.ts

@@ -25,7 +25,6 @@ export const configFeaturesNames = {
   EXTENSIBILITY_CUSTOM_COMPONENTS: 'EXTENSIBILITY_CUSTOM_COMPONENTS',
   EXTENSIBILITY_WIZARD: 'EXTENSIBILITY_WIZARD',
   TRACKING: 'TRACKING',
-  BACKEND_URL: 'BACKEND_URL',
   PROTECTED_RESOURCES: 'PROTECTED_RESOURCES',
   EXTERNAL_NODES: 'EXTERNAL_NODES',
   GARDENER_LOGIN: 'GARDENER_LOGIN',

src/state/utils/getBackendInfo.ts

@@ -1,13 +1,15 @@
+import getEnv, { Envs } from '../../shared/utils/env';
+
 const domain = window.location.hostname;
 
-const getBackendAddress = () => {
-  // local busola - needed for e2e tests to work locally
-  console.log(process.env);
-  const backendUrlFeat = process.env.BACKEND_URL;
-  if (backendUrlFeat) {
-    return backendUrlFeat;
+async function getBackendAddress() {
+  const backendUrl = await getEnv(Envs.BACKEND_URL);
+  console.log(backendUrl);
+  if (backendUrl) {
+    return backendUrl;
   }
 
+  // local busola - needed for e2e tests to work locally
   if (
     window.location.hostname.startsWith('localhost') &&
     window.location.port === '8080' &&
@@ -21,8 +23,11 @@ const getBackendAddress = () => {
   } else {
     return '/backend';
   }
-};
-export const getClusterConfig = () => ({
-  domain,
-  backendAddress: getBackendAddress(),
-});
+}
+
+export async function getClusterConfig() {
+  return {
+    domain,
+    backendAddress: await getBackendAddress(),
+  };
+}

start_nginx.sh

@@ -1,3 +1,4 @@
 #!/bin/sh
 echo ENVIRONMENT="${ENVIRONMENT}" > /app/core-ui/active.env
+echo BACKEND_URL="${BACKEND_URL}" >> /app/core-ui/active.env
 nginx -g 'daemon off;'

start_node.sh

@@ -1,3 +1,4 @@
 #!/bin/sh
 echo ENVIRONMENT="${ENVIRONMENT}" > /app/core-ui/active.env
+echo BACKEND_URL="${BACKEND_URL}" >> /app/core-ui/active.env
 node backend-production.js

vite.config.mts

@@ -67,7 +67,6 @@ export default defineConfig({
   },
   define: {
     'process.env.IS_DOCKER': JSON.stringify(process.env.IS_DOCKER || false),
-    'process.env.BACKEND_URL': JSON.stringify(process.env.BACKEND_URL),
   },
 });