Add option for custom branding

openshift · Apr 5, 2019 · 9eff536 · 9eff536
1 parent 118ba89
commit 9eff536
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 44 deletions.
diff --git a/cmd/bridge/main.go b/cmd/bridge/main.go
@@ -84,6 +84,8 @@ func main() {
 
 	fDexAPIHost := fs.String("dex-api-host", "", "Target host and port of the Dex API service.")
 	fBranding := fs.String("branding", "okd", "Console branding for the masthead logo and title. One of okd, openshift, ocp, online, dedicated, or azure. Defaults to okd.")
+	fCustomProductName := fs.String("custom-product-name", "", "Custom product name for console branding.")
+	fCustomLogoImage := fs.String("custom-logo-image", "", "Custom product image for console branding.")
 	fDocumentationBaseURL := fs.String("documentation-base-url", "", "The base URL for documentation links.")
 	fGoogleTagManagerID := fs.String("google-tag-manager-id", "", "Google Tag Manager ID. External analytics are disabled if this is not set.")
 
@@ -152,13 +154,18 @@ func main() {
 		flagFatalf("branding", "value must be one of okd, openshift, ocp, online, dedicated, or azure")
 	}
 
+	customProductName := *fCustomProductName
+	customLogoImage := *fCustomLogoImage
+
 	srv := &server.Server{
 		PublicDir:            *fPublicDir,
 		TectonicVersion:      *fTectonicVersion,
 		BaseURL:              baseURL,
 		LogoutRedirect:       logoutRedirect,
 		TectonicCACertFile:   caCertFilePath,
 		Branding:             branding,
+		CustomProductName:    customProductName,
+		CustomLogoImage:      customLogoImage,
 		DocumentationBaseURL: documentationBaseURL,
 		GoogleTagManagerID:   *fGoogleTagManagerID,
 		LoadTestFactor:       *fLoadTestFactor,

diff --git a/frontend/public/components/about-modal.jsx b/frontend/public/components/about-modal.jsx
@@ -29,6 +29,7 @@ class AboutModal_ extends React.Component {
     const {isOpen, closeAboutModal} = this.props;
     const {kubernetesVersion} = this.state;
     const details = getBrandingDetails();
+    const customBranding = window.SERVER_FLAGS.customLogoImage || window.SERVER_FLAGS.customProductName;
 
     return (
       <PfAboutModal
@@ -38,8 +39,8 @@ class AboutModal_ extends React.Component {
         brandImageSrc={details.logoImg}
         brandImageAlt={details.productName}
       >
-        <p>OpenShift is Red Hat&apos;s container application platform that allows developers to quickly develop, host,
-          and scale applications in a cloud environment.</p>
+        {!customBranding && <p>OpenShift is Red Hat&apos;s container application platform that allows developers to quickly develop, host,
+          and scale applications in a cloud environment.</p>}
         <br />
         <TextContent>
           <TextList component="dl">

diff --git a/frontend/public/components/masthead.jsx b/frontend/public/components/masthead.jsx
@@ -39,6 +39,12 @@ export const getBrandingDetails = () => {
       logoImg = okdLogoImg;
       productName = 'OKD';
   }
+  if (window.SERVER_FLAGS.customLogoImage) {
+    logoImg = window.SERVER_FLAGS.customLogoImage;
+  }
+  if (window.SERVER_FLAGS.customProductName) {
+    productName = window.SERVER_FLAGS.customProductName;
+  }
   return { logoImg, productName };
 };
 

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -5,43 +5,48 @@
     <base href="[[ .BasePath ]]">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    [[ if eq .Branding "okd" ]]
-    <title>OKD</title>
-    <meta name="application-name" content="OKD">
-    [[ end ]]
-    [[ if eq .Branding "openshift" ]]
-    <title>Red Hat OpenShift</title>
-    <meta name="application-name" content="Red Hat OpenShift">
-    [[ end ]]
-    [[ if eq .Branding "ocp" ]]
-    <title>Red Hat OpenShift Container Platform</title>
-    <meta name="application-name" content="Red Hat OpenShift Container Platform">
-    [[ end ]]
-    [[ if eq .Branding "online" ]]
-    <title>Red Hat OpenShift Online</title>
-    <meta name="application-name" content="Red Hat OpenShift Online">
-    [[ end ]]
-    [[ if eq .Branding "dedicated" ]]
-    <title>Red Hat OpenShift Dedicated</title>
-    <meta name="application-name" content="Red Hat OpenShift Dedicated">
-    [[ end ]]
-    [[ if eq .Branding "azure" ]]
-    <title>Azure Red Hat OpenShift</title>
-    <meta name="application-name" content="Azure Red Hat OpenShift">
-    [[ end ]]
-
-    [[ if eq .Branding "okd" ]]
-    <link rel="shortcut icon" href="<%= require('./imgs/okd-favicon.png') %>">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%= require('./imgs/okd-apple-touch-icon-precomposed.png') %>">
-    <link rel="mask-icon" href="<%= require('./imgs/okd-mask-icon.svg') %>" color="#DB242F">
-    <meta name="msapplication-TileColor" content="#000000">
-    <meta name="msapplication-TileImage" content="<%= require('./imgs/okd-mstile-144x144.png') %>">
+    [[ if .CustomProductName ]]
+      <title>[[ .CustomProductName ]]</title>
+      <meta name="application-name" content="[[ .CustomProductName ]]">
     [[ else ]]
-    <link rel="shortcut icon" href="<%= require('./imgs/openshift-favicon.png') %>">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%= require('./imgs/openshift-apple-touch-icon-precomposed.png') %>">
-    <link rel="mask-icon" href="<%= require('./imgs/openshift-mask-icon.svg') %>" color="#DB242F">
-    <meta name="msapplication-TileColor" content="#000000">
-    <meta name="msapplication-TileImage" content="<%= require('./imgs/openshift-mstile-144x144.png') %>">
+      [[ if eq .Branding "okd" ]]
+      <title>OKD</title>
+      <meta name="application-name" content="OKD">
+      [[ end ]]
+      [[ if eq .Branding "openshift" ]]
+      <title>Red Hat OpenShift</title>
+      <meta name="application-name" content="Red Hat OpenShift">
+      [[ end ]]
+      [[ if eq .Branding "ocp" ]]
+      <title>Red Hat OpenShift Container Platform</title>
+      <meta name="application-name" content="Red Hat OpenShift Container Platform">
+      [[ end ]]
+      [[ if eq .Branding "online" ]]
+      <title>Red Hat OpenShift Online</title>
+      <meta name="application-name" content="Red Hat OpenShift Online">
+      [[ end ]]
+      [[ if eq .Branding "dedicated" ]]
+      <title>Red Hat OpenShift Dedicated</title>
+      <meta name="application-name" content="Red Hat OpenShift Dedicated">
+      [[ end ]]
+      [[ if eq .Branding "azure" ]]
+      <title>Azure Red Hat OpenShift</title>
+      <meta name="application-name" content="Azure Red Hat OpenShift">
+      [[ end ]]
+
+      [[ if eq .Branding "okd" ]]
+      <link rel="shortcut icon" href="<%= require('./imgs/okd-favicon.png') %>">
+      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%= require('./imgs/okd-apple-touch-icon-precomposed.png') %>">
+      <link rel="mask-icon" href="<%= require('./imgs/okd-mask-icon.svg') %>" color="#DB242F">
+      <meta name="msapplication-TileColor" content="#000000">
+      <meta name="msapplication-TileImage" content="<%= require('./imgs/okd-mstile-144x144.png') %>">
+      [[ else ]]
+      <link rel="shortcut icon" href="<%= require('./imgs/openshift-favicon.png') %>">
+      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%= require('./imgs/openshift-apple-touch-icon-precomposed.png') %>">
+      <link rel="mask-icon" href="<%= require('./imgs/openshift-mask-icon.svg') %>" color="#DB242F">
+      <meta name="msapplication-TileColor" content="#000000">
+      <meta name="msapplication-TileImage" content="<%= require('./imgs/openshift-mstile-144x144.png') %>">
+      [[ end ]]
     [[ end ]]
 
     <meta name="description" content="">

diff --git a/frontend/public/style/_overrides.scss b/frontend/public/style/_overrides.scss
@@ -263,6 +263,12 @@ tags-input .autocomplete .suggestion-item em {
   }
 }
 
+// so custom logos don't grow wider than logo area
+.pf-c-brand,
+.pf-c-page__header-brand-link {
+  max-width: 190px !important;
+}
+
 .pf-c-dropdown__menu {
   list-style: none;
 }

diff --git a/server/server.go b/server/server.go
@@ -54,6 +54,8 @@ type jsGlobals struct {
 	PrometheusTenancyBaseURL string `json:"prometheusTenancyBaseURL"`
 	AlertManagerBaseURL      string `json:"alertManagerBaseURL"`
 	Branding                 string `json:"branding"`
+	CustomProductName        string `json:"customProductName"`
+	CustomLogoImage          string `json:"customLogoImage"`
 	DocumentationBaseURL     string `json:"documentationBaseURL"`
 	GoogleTagManagerID       string `json:"googleTagManagerID"`
 	LoadTestFactor           int    `json:"loadTestFactor"`
@@ -72,6 +74,8 @@ type Server struct {
 	KubeAPIServerURL     string
 	DocumentationBaseURL *url.URL
 	Branding             string
+	CustomProductName    string
+	CustomLogoImage      string
 	GoogleTagManagerID   string
 	LoadTestFactor       int
 	DexClient            api.DexClient
@@ -108,13 +112,17 @@ func (s *Server) HTTPHandler() http.Handler {
 
 	fn := func(loginInfo auth.LoginJSON, successURL string, w http.ResponseWriter) {
 		jsg := struct {
-			auth.LoginJSON  `json:",inline"`
-			LoginSuccessURL string `json:"loginSuccessURL"`
-			Branding        string `json:"branding"`
+			auth.LoginJSON     `json:",inline"`
+			LoginSuccessURL    string `json:"loginSuccessURL"`
+			Branding           string `json:"branding"`
+			CustomProductName  string `json:"customProductName"`
+			CustomLogoImage    string `json:"customLogoImage"`
 		}{
-			LoginJSON:       loginInfo,
-			LoginSuccessURL: successURL,
-			Branding:        s.Branding,
+			LoginJSON:          loginInfo,
+			LoginSuccessURL:    successURL,
+			Branding:           s.Branding,
+			CustomProductName:  s.CustomProductName,
+			CustomLogoImage:    s.CustomLogoImage,
 		}
 
 		tpl := template.New(tokenizerPageTemplateName)
@@ -254,6 +262,8 @@ func (s *Server) indexHandler(w http.ResponseWriter, r *http.Request) {
 		LogoutRedirect:       s.LogoutRedirect.String(),
 		KubeAPIServerURL:     s.KubeAPIServerURL,
 		Branding:             s.Branding,
+		CustomProductName:    s.CustomProductName,
+		CustomLogoImage:      s.CustomLogoImage,
 		DocumentationBaseURL: s.DocumentationBaseURL.String(),
 		GoogleTagManagerID:   s.GoogleTagManagerID,
 		LoadTestFactor:       s.LoadTestFactor,