feat: customize nav bar background color (#7387)

Signed-off-by: krrrr38 <k.kaizu38@gmail.com>

api/jsonschema/schema.json

@@ -5454,6 +5454,9 @@
           },
           "title": "which modals to show",
           "type": "object"
+        },
+        "navColor": {
+          "type": "string"
         }
       },
       "type": "object"

api/openapi-spec/swagger.json

@@ -9717,6 +9717,9 @@
           "additionalProperties": {
             "type": "boolean"
           }
+        },
+        "navColor": {
+          "type": "string"
         }
       }
     },

config/config.go

@@ -126,6 +126,9 @@ type Config struct {
 	Images map[string]Image `json:"images,omitempty"`
 
 	RetentionPolicy *RetentionPolicy `json:"retentionPolicy,omitempty"`
+
+	// NavColor is an ui navigation bar background color
+	NavColor string `json:"navColor,omitempty"`
 }
 
 func (c Config) GetContainerRuntimeExecutor(labels labels.Labels) (string, error) {

docs/workflow-controller-configmap.yaml

@@ -38,7 +38,7 @@ data:
   nodeEvents: |
     enabled: true
 
-  # uncomment flowing lines if workflow controller runs in a different k8s cluster with the
+  # uncomment following lines if workflow controller runs in a different k8s cluster with the
   # workflow workloads, or needs to communicate with the k8s apiserver using an out-of-cluster
   # kubeconfig secret
   # kubeConfig:
@@ -74,6 +74,9 @@ data:
       scope: chat
       url: http://my-chat
 
+  # uncomment following lines if you want to change navigation bar background color
+  # navColor: red
+
   # artifactRepository defines the default location to be used as the artifact repository for
   # container artifacts.
   artifactRepository: |

pkg/apiclient/info/info.proto

@@ -14,6 +14,7 @@ message InfoResponse {
     repeated git.luolix.top.argoproj.argo_workflows.v3.pkg.apis.workflow.v1alpha1.Link links = 2;
     // which modals to show
     map<string,bool> modals = 3;
+    string navColor = 4;
 }
 
 message GetVersionRequest {

sdks/java/client/docs/IoArgoprojWorkflowV1alpha1InfoResponse.md

@@ -10,6 +10,7 @@ Name | Type | Description | Notes
 **links** | [**List<IoArgoprojWorkflowV1alpha1Link>**](IoArgoprojWorkflowV1alpha1Link.md) |  |  [optional]
 **managedNamespace** | **String** |  |  [optional]
 **modals** | **Map<String, Boolean>** |  |  [optional]
+**navColor** | **String** |  |  [optional]
 
 
 

server/apiserver/argoserver.go

@@ -200,7 +200,7 @@ func (as *argoServer) Run(ctx context.Context, port int, browserOpenFunc func(st
 	artifactRepositories := artifactrepositories.New(as.clients.Kubernetes, as.managedNamespace, &config.ArtifactRepository)
 	artifactServer := artifacts.NewArtifactServer(as.gatekeeper, hydrator.New(offloadRepo), wfArchive, instanceIDService, artifactRepositories)
 	eventServer := event.NewController(instanceIDService, eventRecorderManager, as.eventQueueSize, as.eventWorkerCount, as.eventAsyncDispatch)
-	grpcServer := as.newGRPCServer(instanceIDService, offloadRepo, wfArchive, eventServer, config.Links)
+	grpcServer := as.newGRPCServer(instanceIDService, offloadRepo, wfArchive, eventServer, config.Links, config.NavColor)
 	httpServer := as.newHTTPServer(ctx, port, artifactServer)
 
 	// Start listener
@@ -247,7 +247,7 @@ func (as *argoServer) Run(ctx context.Context, port int, browserOpenFunc func(st
 	<-as.stopCh
 }
 
-func (as *argoServer) newGRPCServer(instanceIDService instanceid.Service, offloadNodeStatusRepo sqldb.OffloadNodeStatusRepo, wfArchive sqldb.WorkflowArchive, eventServer *event.Controller, links []*v1alpha1.Link) *grpc.Server {
+func (as *argoServer) newGRPCServer(instanceIDService instanceid.Service, offloadNodeStatusRepo sqldb.OffloadNodeStatusRepo, wfArchive sqldb.WorkflowArchive, eventServer *event.Controller, links []*v1alpha1.Link, navColor string) *grpc.Server {
 	serverLog := log.NewEntry(log.StandardLogger())
 
 	// "Prometheus histograms are a great way to measure latency distributions of your RPCs. However, since it is bad practice to have metrics of high cardinality the latency monitoring metrics are disabled by default. To enable them please call the following in your server initialization code:"
@@ -278,7 +278,7 @@ func (as *argoServer) newGRPCServer(instanceIDService instanceid.Service, offloa
 
 	grpcServer := grpc.NewServer(sOpts...)
 
-	infopkg.RegisterInfoServiceServer(grpcServer, info.NewInfoServer(as.managedNamespace, links))
+	infopkg.RegisterInfoServiceServer(grpcServer, info.NewInfoServer(as.managedNamespace, links, navColor))
 	eventpkg.RegisterEventServiceServer(grpcServer, eventServer)
 	eventsourcepkg.RegisterEventSourceServiceServer(grpcServer, eventsource.NewEventSourceServer())
 	pipelinepkg.RegisterPipelineServiceServer(grpcServer, pipeline.NewPipelineServer())

server/info/info_server.go

@@ -13,6 +13,7 @@ import (
 type infoServer struct {
 	managedNamespace string
 	links            []*wfv1.Link
+	navColor         string
 }
 
 func (i *infoServer) GetUserInfo(ctx context.Context, _ *infopkg.GetUserInfoRequest) (*infopkg.GetUserInfoResponse, error) {
@@ -40,6 +41,7 @@ func (i *infoServer) GetInfo(context.Context, *infopkg.GetInfoRequest) (*infopkg
 		ManagedNamespace: i.managedNamespace,
 		Links:            i.links,
 		Modals:           modals,
+		NavColor:         i.navColor,
 	}, nil
 }
 
@@ -48,6 +50,6 @@ func (i *infoServer) GetVersion(context.Context, *infopkg.GetVersionRequest) (*w
 	return &version, nil
 }
 
-func NewInfoServer(managedNamespace string, links []*wfv1.Link) infopkg.InfoServiceServer {
-	return &infoServer{managedNamespace, links}
+func NewInfoServer(managedNamespace string, links []*wfv1.Link, navColor string) infopkg.InfoServiceServer {
+	return &infoServer{managedNamespace, links, navColor}
 }

server/info/info_server_test.go

@@ -7,6 +7,7 @@ import (
 	"github.com/stretchr/testify/assert"
 	"gopkg.in/square/go-jose.v2/jwt"
 
+	wfv1 "github.com/argoproj/argo-workflows/v3/pkg/apis/workflow/v1alpha1"
 	"github.com/argoproj/argo-workflows/v3/server/auth"
 	"github.com/argoproj/argo-workflows/v3/server/auth/types"
 )
@@ -24,3 +25,31 @@ func Test_infoServer_GetUserInfo(t *testing.T) {
 		assert.Equal(t, "my-sa", info.ServiceAccountName)
 	}
 }
+
+func Test_infoServer_GetInfo(t *testing.T) {
+	t.Run("Ful Fields", func(t *testing.T) {
+		i := &infoServer{
+			managedNamespace: "argo",
+			links: []*wfv1.Link{
+				{Name: "link-name", Scope: "scope", URL: "https://example.com"},
+			},
+			navColor: "red",
+		}
+		info, err := i.GetInfo(context.TODO(), nil)
+		if assert.NoError(t, err) {
+			assert.Equal(t, "argo", info.ManagedNamespace)
+			assert.Equal(t, "link-name", info.Links[0].Name)
+			assert.Equal(t, "red", info.NavColor)
+		}
+	})
+
+	t.Run("Min Fields", func(t *testing.T) {
+		i := &infoServer{}
+		info, err := i.GetInfo(context.TODO(), nil)
+		if assert.NoError(t, err) {
+			assert.Equal(t, "", info.ManagedNamespace)
+			assert.Equal(t, 0, len(info.Links))
+			assert.Equal(t, "", info.NavColor)
+		}
+	})
+}

ui/src/app/app-router.tsx

@@ -52,6 +52,7 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
     const [modals, setModals] = useState<{string: boolean}>();
     const [version, setVersion] = useState<Version>();
     const [namespace, setNamespace] = useState<string>();
+    const [navBarBackgroundColor, setNavBarBackgroundColor] = useState<string>();
     const setError = (error: Error) => {
         notificationsManager.show({
             content: 'Failed to load version/info ' + error,
@@ -70,6 +71,7 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
                 Utils.managedNamespace = info.managedNamespace;
                 setNamespace(Utils.currentNamespace);
                 setModals(info.modals);
+                setNavBarBackgroundColor(info.navColor);
             })
             .then(() => services.info.getVersion())
             .then(setVersion)
@@ -84,6 +86,7 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
                 <Switch>
                     <Route path={uiUrl('widgets')} component={Widgets} />
                     <Layout
+                        navBarStyle={{backgroundColor: navBarBackgroundColor}}
                         navItems={[
                             {
                                 title: 'Workflows',

ui/src/models/info.ts

@@ -8,6 +8,7 @@ export interface Info {
     modals: {string: boolean};
     managedNamespace?: string;
     links?: Link[];
+    navColor?: string;
 }
 
 export interface Version {