dockerizing ui

Dockerfile

@@ -1,8 +1,12 @@
 
 FROM node:16 AS builder
 
+ARG IP
+ARG PORT
+
 WORKDIR /builder
 
+
 COPY package.json ./
 
 RUN npm config set legacy-peer-deps true
@@ -11,8 +15,14 @@ RUN npm install
 
 COPY . ./
 
-#RUN npm run build
-RUN ./deploy.sh -c
+COPY deploy.sh /deploy.sh
+
+# Replace the placeholders in the deploy script with the IP and port
+RUN sed -i "s/{{IP}}/$IP/g" /deploy.sh && \
+    sed -i "s/{{PORT}}/$PORT/g" /deploy.sh && \
+    chmod +x /deploy.sh
+
+RUN ./deploy.sh -p
 
 # Production image
 
@@ -38,5 +48,11 @@ RUN cat /tmp/nginx.conf >nginx.conf
 # RUN cat nginx.conf
 
 # ENTRYPOINT ["/bin/sh", "-c" ,"nginx -t && nginx -g daemon off;"]
+Expose 80
+#RUN npm run start
+
+# Start the deployment script and create an ssh tunnel
+#CMD ["/bin/sh", "-c", "./deploy.sh -d "]
 
 ENTRYPOINT ["nginx", "-g", "daemon off;"]
+

deploy.sh

@@ -1,5 +1,21 @@
 #!/bin/bash
-source getotps.sh
+#source getotps.sh
+
+
+export  CLUSTER_IP=$IP
+export AUTOTUNE_PORT=$PORT
+
+echo $CLUSTER_IP
+echo $AUTOTUNE_PORT
+
+
+if [[ -z "$CLUSTER_IP" ]]; then
+  source getotps.sh
+  echo "in getotps" 
+else
+  echo "CLUSTERIP is set to $CLUSTERIP"
+fi
+
 function start_gui_dev_mode() {
     if command -v npm 
     then
@@ -15,8 +31,8 @@ function start_gui_prod_mode() {
     then
         echo "npm is NOT Installed on your machine."	
     else
-	    npm run build
-        npm run start
+	 npm run build
+        #npm run start
     fi
     echo "prod m"
 }

src/app/About/About.tsx

@@ -13,11 +13,11 @@ import { RunExperiment } from '@app/RunExperiment/RunExperiment';
 const About = () => (
   <PageSection variant={PageSectionVariants.light}>
     <TextContent>
-      <Text component={TextVariants.h1}>About Kruize</Text>
+      <Text component={TextVariants.h1}  className="pf-m-redhat-font">About Kruize</Text>
     </TextContent>
 
     <br />
-    <Text component={TextVariants.h5}>
+    <Text component={TextVariants.h5}  className="pf-m-redhat-font">
       Autotune is an Autonomous Performance Tuning Tool for Kubernetes. Autotune accepts a user provided Service Level
       Objective or "slo" goal to optimize application performance. It uses Prometheus to identify "layers" of an
       application that it is monitoring and matches tunables from those layers to the user provided slo. It then runs

src/app/AppLayout/AppLayout.tsx

@@ -14,7 +14,7 @@ import { routes, IAppRoute, IAppRouteGroup } from '@app/routes';
 import HorizontalNav from '@app/HorizontalNav/HorizontalNav';
 import EnvState from '@app/ContextStore/EnvState';
 import Footer from '@app/Footer/Footer';
-import KruizeLogo from '@app/HorizontalNav/Assets/kruize_icon.png'
+import KruizeLogo from '!!url-loader!@app/Assets/images/kruize_icon.png'
 interface IAppLayout {
   children: React.ReactNode;
 }

src/app/HorizontalNav/HorizontalNav.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Popover, Nav, TextContent, Avatar, Text, TextVariants, NavItem, NavList, Flex } from '@patternfly/react-core';
-import Kubernetes_image from './Assets/Kubernetes_image.png';
-import Kruize_logo from './Assets/kruize_icon.png';
-import Avatar_image from './Assets/Avatar_image.svg';
+import Kubernetes_image from '!!url-loader!@app/Assets/images/Kubernetes_image.png';
+// import Kruize_logo from '!!url-loader!@app/assets/images/kruize_icon.png';
+import Avatar_image from '!!url-loader!@app/Assets/images/Avatar_image.svg';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import nodeContext from '@app/ContextStore/nodeContext';

src/app/app.css

@@ -25,3 +25,31 @@ body,
 .pf-c-button {
   justify-items: right;
 }
+
+@font-face {
+  font-family: 'RedHatDisplay';
+  src:  url('!!url-loader!@app/Assets/fonts/RedHatDisplay-Medium.woff') format('woff'),
+  url('!!url-loader!@app/Assets/fonts/RedHatDisplay-Medium.woff2') format('woff2');    
+  font-weight:400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'RedHatTextRegular';
+  src:   url('!!url-loader!@app/Assets/fonts/RedHatText-Regular.woff') format('woff'),
+  url('!!url-loader!@app/Assets/fonts/RedHatText-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('!!url-loader!@app/Assets/fonts/overpass-light.woff') format('woff'),
+  url('!!url-loader!@app/Assets/fonts/overpass-light.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  font-family: 'overpass';
+}

src/index.html

@@ -5,7 +5,8 @@
     <title>Kruize</title>
     <meta id="appName" name="application-name" content="Kruize">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg+xml" href="/images/favicon.png">
+    <link rel="icon" type="image/svg+xml" href="/src/app/Assets/favicon/favicon.png">
+
     <base href="/">
   </head>
 

webpack.common.js

@@ -350,17 +350,20 @@ module.exports = env => {
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, 'src', 'index.html')
+        template: path.resolve(__dirname, 'src', 'index.html'),
+        favicon: path.resolve(__dirname, 'src/app/Assets/favicon', 'favicon.png')
+
       }),
       new Dotenv({
         systemvars: true,
         silent: true
       }),
-      new CopyPlugin({
-        patterns: [
-          { from: './src/favicon.png', to: 'images' },
-        ]
-      })
+      // new CopyPlugin({
+      //   patterns: [
+      //     { from: './src/app/Assets/favicon/favicon.png', to: 'images' },
+
+      //   ]
+      // })
     ],
     resolve: {