feat: ArgoRollouts dashboard now supporting rootpath

pkg/kubectl-argo-rollouts/cmd/dashboard/dashboard.go

@@ -9,6 +9,7 @@ import (
 )
 
 func NewCmdDashboard(o *options.ArgoRolloutsOptions) *cobra.Command {
+	var rootPath string
 	var cmd = &cobra.Command{
 		Use:   "dashboard",
 		Short: "Start UI dashboard",
@@ -22,6 +23,7 @@ func NewCmdDashboard(o *options.ArgoRolloutsOptions) *cobra.Command {
 				KubeClientset:     kubeclientset,
 				RolloutsClientset: rolloutclientset,
 				DynamicClientset:  o.DynamicClientset(),
+				RootPath:          rootPath,
 			}
 
 			for {
@@ -33,6 +35,7 @@ func NewCmdDashboard(o *options.ArgoRolloutsOptions) *cobra.Command {
 			}
 		},
 	}
+	cmd.Flags().StringVar(&rootPath, "rootPath", "rollouts", "renders the ui url with rootPath prefixed")
 
 	return cmd
 }

server/server.go

@@ -1,13 +1,14 @@
 package server
 
 import (
+	"bufio"
 	"context"
 	"embed"
 	"fmt"
-	"io/fs"
 	"net"
 	"net/http"
 	"os"
+	"regexp"
 	"strings"
 	"time"
 
@@ -61,6 +62,7 @@ type ServerOptions struct {
 	RolloutsClientset rolloutclientset.Interface
 	DynamicClientset  dynamic.Interface
 	Namespace         string
+	RootPath          string
 }
 
 const (
@@ -91,6 +93,35 @@ func (fs *spaFileSystem) Open(name string) (http.File, error) {
 	return f, err
 }
 
+//This function helps in changing base href to point to rootpath as basepath, we are making modification in only server/static/index.html file
+func withRootPath(rootpath string) {
+	inputFile, inputError := os.Open("./server/static/index.html")
+	if inputError != nil {
+		log.Error("An error occurred on opening the inputfile\n" +
+			"Does the file exist?\n" +
+			"Have you got access to it?\n")
+		panic(inputError) // exit on error
+	}
+	defer inputFile.Close()
+	inputReader := bufio.NewReader(inputFile)
+	inputString, _ := inputReader.ReadString('\n')
+	re := regexp.MustCompile(`<base href="/[^/]*/*"/>`)
+	var temp = re.ReplaceAllString(inputString, "<base href=\"/"+rootpath+"/\"/>") // href="/root/"
+
+	outputFile, _ := os.OpenFile("./server/static/index.html", os.O_TRUNC|os.O_WRONLY, 0666)
+	defer outputFile.Close()
+	outputWriter := bufio.NewWriter(outputFile)
+	outputWriter.WriteString(temp)
+	outputWriter.Flush()
+
+	//To make ui/dist/index.html file consistent with server/static/index.html
+	outputFileDist, _ := os.OpenFile("./ui/dist/app/index.html", os.O_TRUNC|os.O_WRONLY, 0666)
+	defer outputFileDist.Close()
+	outputWriterDist := bufio.NewWriter(outputFileDist)
+	outputWriterDist.WriteString(temp)
+	outputWriterDist.Flush()
+}
+
 func (s *ArgoRolloutsServer) newHTTPServer(ctx context.Context, port int) *http.Server {
 	mux := http.NewServeMux()
 	endpoint := fmt.Sprintf("0.0.0.0:%d", port)
@@ -122,14 +153,11 @@ func (s *ArgoRolloutsServer) newHTTPServer(ctx context.Context, port int) *http.
 
 	var handler http.Handler = gwmux
 
-	ui, err := fs.Sub(static, "static")
-	if err != nil {
-		log.Error("Could not load UI static files")
-		panic(err)
-	}
+	withRootPath(s.Options.RootPath)
 
 	mux.Handle("/api/", handler)
-	mux.Handle("/", http.FileServer(&spaFileSystem{http.FS(ui)}))
+
+	mux.Handle("/"+s.Options.RootPath+"/", http.StripPrefix("/"+s.Options.RootPath+"/", http.FileServer(http.Dir("./server/static"))))
 
 	return &httpS
 }

ui/src/app/App.tsx

@@ -3,7 +3,7 @@ import {Header} from './components/header/header';
 import {createBrowserHistory} from 'history';
 import * as React from 'react';
 import {Key, KeybindingContext, KeybindingProvider} from 'react-keyhooks';
-import {Redirect, Route, Router, Switch} from 'react-router-dom';
+import {Route, Router, Switch} from 'react-router-dom';
 import './App.scss';
 import {NamespaceContext, RolloutAPI} from './shared/context/api';
 import {Modal} from './components/modal/modal';
@@ -90,11 +90,9 @@ const App = () => {
                     <KeybindingProvider>
                         <Router history={history}>
                             <Switch>
-                                <Redirect exact={true} path='/' to='/rollouts' />
-
                                 <Page
                                     exact
-                                    path='/rollouts'
+                                    path='/'
                                     component={<RolloutsList />}
                                     shortcuts={[
                                         {key: '/', description: 'Search'},
@@ -105,8 +103,6 @@ const App = () => {
                                     changeNamespace={changeNamespace}
                                 />
                                 <Page path='/rollout/:name' component={<Rollout />} changeNamespace={changeNamespace} />
-
-                                <Redirect path='*' to='/' />
                             </Switch>
                         </Router>
                     </KeybindingProvider>
@@ -116,4 +112,4 @@ const App = () => {
     );
 };
 
-export default App;
+export default App;

ui/src/app/components/header/header.tsx

@@ -55,7 +55,7 @@ export const Header = (props: {pageHasShortcuts: boolean; changeNamespace: (val:
                             onChange={(el) => setNsInput(el.target.value)}
                             onItemClick={(val) => {
                                 props.changeNamespace(val ? val : nsInput);
-                                history.push(`/rollouts`);
+                                history.push(`/`);
                             }}
                             value={nsInput}
                         />
@@ -65,4 +65,4 @@ export const Header = (props: {pageHasShortcuts: boolean; changeNamespace: (val:
             </div>
         </GenericHeader>
     );
-};
+};