From 79dd7f218ffc2877092388a5ef0e5aa189d6cd20 Mon Sep 17 00:00:00 2001 From: Ashley Hardin Date: Tue, 3 Sep 2019 17:37:05 -0400 Subject: [PATCH] Added Customizing the web console topics --- _topic_map.yml | 2 + modules/adding-a-custom-logo.adoc | 57 ++++++++++++++++ .../adding-custom-notification-banners.adoc | 66 ++++++++++++++++++ modules/creating-custom-links.adoc | 68 +++++++++++++++++++ modules/customizing-cli-downloads.adoc | 20 ++++++ web-console/customizing-the-web-console.adoc | 18 +++++ 6 files changed, 231 insertions(+) create mode 100644 modules/adding-a-custom-logo.adoc create mode 100644 modules/adding-custom-notification-banners.adoc create mode 100644 modules/creating-custom-links.adoc create mode 100644 modules/customizing-cli-downloads.adoc create mode 100644 web-console/customizing-the-web-console.adoc diff --git a/_topic_map.yml b/_topic_map.yml index aef58606e8..8356d9fc81 100644 --- a/_topic_map.yml +++ b/_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 --- diff --git a/modules/adding-a-custom-logo.adoc b/modules/adding-a-custom-logo.adoc new file mode 100644 index 0000000000..8e5cca2644 --- /dev/null +++ b/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 +---- ++ +---- +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 +---- diff --git a/modules/adding-custom-notification-banners.adoc b/modules/adding-custom-notification-banners.adoc new file mode 100644 index 0000000000..c21292003b --- /dev/null +++ b/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. diff --git a/modules/creating-custom-links.adoc b/modules/creating-custom-links.adoc new file mode 100644 index 0000000000..574c787d66 --- /dev/null +++ b/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. diff --git a/modules/customizing-cli-downloads.adoc b/modules/customizing-cli-downloads.adoc new file mode 100644 index 0000000000..abfb062aee --- /dev/null +++ b/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. diff --git a/web-console/customizing-the-web-console.adoc b/web-console/customizing-the-web-console.adoc new file mode 100644 index 0000000000..a3c9de4661 --- /dev/null +++ b/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]