Merge pull request #16933 from openshift-cherrypick-robot/cherry-pick-16491-to-enterprise-4.2

[enterprise-4.2] Added Customizing the web console topics

_topic_map.yml

@@ -185,6 +185,8 @@ Topics:
   File: web-console
 - Name: Configuring the web console
   File: configuring-web-console
+- Name: Customizing the web console
+  File: customizing-the-web-console  
 - Name: Disabling the web console
   File: disabling-web-console
 ---

modules/adding-a-custom-logo.adoc

@@ -0,0 +1,57 @@
+// Module included in the following assemblies:
+//
+// * web-console/customizing-the-web-console.adoc
+
+[id="adding-a-custom-logo_{context}"]
+= Adding a custom logo
+
+.Prerequisites
+
+* Create a file of the logo that you want to use. The logo can be a GIF, JPG, PNG,
+or SVG file and is constrained to a `max-height` of `60px`.
+
+.Procedure
+
+. Import your logo file into a ConfigMap in the `openshift-config` namespace:
++
+----
+$ oc create configmap console-custom-logo --from-file ~/path/to/console-custom-logo.png -n openshift-config
+----
+
+. Edit the web console's Operator configuration to include `customLogoFile`:
++
+----
+$ oc apply -f <file>
+----
++
+----
+apiVersion: operator.openshift.io/v1
+kind: Console
+metadata:
+   name: cluster
+spec:
+   customization:
+      customLogoFile:
+         name: console-custom-logo
+         key: console-custom-logo.png
+----
++
+Once the Operator configuration is updated, it will sync the custom logo
+ConfigMap into the console namespace, mount it to the console pod, and redeploy.
+
+. Check for success. If there are any issues, the console cluster operator will
+report `Degraded`, and the console Operator configuration will also report
+`CustomLogoDegraded`, but with reasons like `KeyOrFilenameInvalid` or
+`NoImageProvided`.
++
+To check the `clusteroperator`, run:
++
+----
+$ oc get clusteroperator console -o yaml
+----
++
+To check the console Operator configuration, run:
++
+----
+$ oc get console.operator.openshift.io -o yaml
+----

modules/adding-custom-notification-banners.adoc

@@ -0,0 +1,66 @@
+// Module included in the following assemblies:
+//
+// * web-console/customizing-the-web-console.adoc
+
+[id="creating-custom-notification-banners_{context}"]
+= Creating custom notification banners
+
+.Procedure
+
+. From *Administration* -> *Custom Resource Definitions*, click on
+*ConsoleNotification*.
+
+. Click *YAML* and edit the file:
++
+----
+
+// ConsoleNotification is the extension for configuring OpenShift web console notifications.
+type ConsoleNotification struct {
+	metav1.TypeMeta `json:",inline"`
+	// Standard object's metadata.
+	metav1.ObjectMeta `json:"metadata,omitempty"`
+	Spec              ConsoleNotificationSpec `json:"spec"`
+}
+
+// ConsoleNotificationSpec is the desired console notification configuration.
+type ConsoleNotificationSpec struct {
+	// text is the visible text of the notification.
+	Text string `json:"text"`
+	// location is the location of the notification in the console.
+	// +optional
+	Location ConsoleNotificationLocation `json:"location,omitempty"`
+	// link is an object that holds notification link details.
+	// +optional
+	Link *Link `json:"link,omitempty"`
+	// color is the color of the text for the notification as CSS data type color.
+	// +optional
+	Color string `json:"color,omitempty"`
+	// backgroundColor is the color of the background for the notification as CSS data type color.
+	// +optional
+	BackgroundColor string `json:"backgroundColor,omitempty"`
+}
+
+// ConsoleNotificationLocationSelector is a set of possible notification targets
+// to which a notification may be appended.
+type ConsoleNotificationLocation string
+
+const (
+	// BannerTop indicates that the notification should appear at the top of the console.
+	BannerTop ConsoleNotificationLocation = "BannerTop"
+	// BannerBottom indicates that the notification should appear at the bottom of the console.
+	BannerBottom ConsoleNotificationLocation = "BannerBottom"
+	// BannerTopBottom indicates that the notification should appear both at the top and at the bottom of the console.
+	BannerTopBottom ConsoleNotificationLocation = "BannerTopBottom"
+)
+
+// +k8s:deepcopy-gen:interfaces=k8s.io/apimachinery/pkg/runtime.Object
+
+type ConsoleNotificationList struct {
+	metav1.TypeMeta `json:",inline"`
+	// Standard object's metadata.
+	metav1.ListMeta `json:"metadata"`
+	Items           []ConsoleNotification `json:"items"`
+}
+----
+
+. Click the *Save* button to apply your changes.

modules/creating-custom-links.adoc

@@ -0,0 +1,68 @@
+// Module included in the following assemblies:
+//
+// * web-console/customizing-the-web-console.adoc
+
+[id="creating-custom-links_{context}"]
+= Creating custom links in the web console
+
+.Procedure
+
+. From *Administration* -> *Custom Resource Definitions*, click on
+*ConsoleLink*.
+
+. Click *YAML* and edit the file:
++
+----
+// ConsoleLink is an extension for customizing OpenShift web console links.
+type ConsoleLink struct {
+	metav1.TypeMeta `json:",inline"`
+	// Standard object's metadata.
+	metav1.ObjectMeta `json:"metadata,omitempty"`
+	Spec              ConsoleLinkSpec `json:"spec"`
+}
+
+// ConsoleLinkSpec is the desired console link configuration.
+type ConsoleLinkSpec struct {
+	Link `json:",inline"`
+	// location determines which location in the console the link will be appended to.
+	Location ConsoleLinkLocation `json:"location"`
+	// applicationMenu holds information about section and icon used for the link in the
+	// application menu, and it is applicable only when location is set to ApplicationMenu.
+	//
+	// +optional
+	ApplicationMenu *ApplicationMenuSpec `json:"applicationMenu,omitempty"`
+}
+
+// ApplicationMenuSpec is the specification of the desired section and icon used for the link in the application menu.
+type ApplicationMenuSpec struct {
+	// section is the section of the application menu in which the link should appear.
+	Section string `json:"section"`
+	// imageUrl is the URL for the icon used in front of the link in the application menu.
+	// The URL must be an HTTPS URL or a Data URI. The image should be square and will be shown at 24x24 pixels.
+	// +optional
+	ImageURL string `json:"imageURL,omitempty"`
+}
+
+// ConsoleLinkLocationSelector is a set of possible menu targets to which a link may be appended.
+type ConsoleLinkLocation string
+
+const (
+	// HelpMenu indicates that the link should appear in the help menu in the console.
+	HelpMenu ConsoleLinkLocation = "HelpMenu"
+	// UserMenu indicates that the link should appear in the user menu in the console.
+	UserMenu ConsoleLinkLocation = "UserMenu"
+	// ApplicationMenu indicates that the link should appear inside the application menu of the console.
+	ApplicationMenu ConsoleLinkLocation = "ApplicationMenu"
+)
+
+// +k8s:deepcopy-gen:interfaces=k8s.io/apimachinery/pkg/runtime.Object
+
+type ConsoleLinkList struct {
+	metav1.TypeMeta `json:",inline"`
+	// Standard object's metadata.
+	metav1.ListMeta `json:"metadata"`
+	Items           []ConsoleLink `json:"items"`
+}
+----
+
+. Click the *Save* button to apply your changes.

modules/customizing-cli-downloads.adoc

@@ -0,0 +1,20 @@
+// Module included in the following assemblies:
+//
+// * web-console/customizing-the-web-console.adoc
+
+[id="creating-custom-CLI-downloads_{context}"]
+= Customizing CLI downloads
+
+You can configure links for downloading the CLI with custom link text and URLs,
+which can point directly to file packages or to an external page that provides
+the packages.
+
+.Procedure
+
+. Navigate to *Administration* -> *Custom Resource Definitions*.
+
+. Select *ConsoleCLIDownload* from the list of Custom Resource Definitions (CRDs).
+
+. Click the *YAML* tab, and then make your edits.
+
+. Click the *Save* button.

web-console/customizing-the-web-console.adoc

@@ -0,0 +1,18 @@
+[id="customizing-web-console"]
+= Customizing the web console in {product-title}
+include::modules/common-attributes.adoc[]
+:context: customizing-web-console
+toc::[]
+
+You can customize the {product-title} web console to set a custom logo, links,
+notifications, and command line downloads. This is especially helpful if you
+need to tailor the web console to meet specific corporate or government
+requirements.
+
+include::modules/adding-a-custom-logo.adoc[leveloffset=+1]
+
+include::modules/creating-custom-links.adoc[leveloffset=+1]
+
+include::modules/adding-custom-notification-banners.adoc[leveloffset=+1]
+
+include::modules/customizing-cli-downloads.adoc[leveloffset=+1]