= How to add custom catalog categories inside openshift

This is a guide to add custom `Catalog Categories` into an Openshift cluster.

https://github.com/devonfw/devonfw-shop-floor/tree/master/dsf4openshift/openshift-cluster-setup/initial-setup/customizeOpenshift/scripts[Here] we can find a catalog-categories.js example to use the devonfw catalog categories.

== Create a scrip to add custom langauges and custom catalog categories

=== Custom language

For this example, we are going add a new language into the languages category. To do that we must create a script and we named as catalog-categories.js
[source,Javascript]
----
// Find the Languages category.
var category = _.find(window.OPENSHIFT_CONSTANTS.SERVICE_CATALOG_CATEGORIES,
                      { id: 'languages' });
// Add Go as a new subcategory under Languages.
category.subCategories.splice(2,0,{ // Insert at the third spot.
  // Required. Must be unique.
  id: "devonfw-languages",
  // Required.
  label: "devonfw",
  // Optional. If specified, defines a unique icon for this item.
  icon: "devonfw-logo-language",
  // Required. Items matching any tag will appear in this subcategory.
  tags: [
    "devonfw",
    "devonfw-angular",
    "devonfw-java"
  ]
});
----

=== Custom category

For this example, we are going add a new category into the category tab. To do that we must create a script and we named as catalog-categories.js
[source,Javascript]
----
// Add a Featured category as the first category tab.
window.OPENSHIFT_CONSTANTS.SERVICE_CATALOG_CATEGORIES.unshift({
  // Required. Must be unique.
  id: "devonfw-featured",
  // Required
  label: "devonfw",
  subCategories: [
    {
      // Required. Must be unique.
      id: "devonfw-languages",
      // Required.
      label: "devonfw",
      // Optional. If specified, defines a unique icon for this item.
      icon: "devonfw-logo-language",
      // Required. Items matching any tag will appear in this subcategory.
      tags: [
        "devonfw",
        "devonfw-angular",
        "devonfw-java"
      ]
    }
  ]
});
----

== Use our own javascript inside openshift

To do that, we need to enter in openshift as an admin and use the next command:

[source,Shell]
----
$ oc login
$ oc edit configmap/webconsole-config -n openshift-web-console
----

After this, we can see in our shell the webconsole-config.yaml, we only need to navigate until *extensions* and add the url for our own `javascript` in the *scriptURLs* section.

*IMPORTANT: Scripts and stylesheets must be served with the correct content type or they will not be run by the browser. Scripts must be served with Content-Type: application/javascript.*

In git repositories, the content type of raw is text/plain. You can use https://rawgit.com/[rawgit] to convert a raw from a git repository to the correct content type.

Example:

[source,YAML]
----
webconsole-config.yaml: |
  [...]
    extensions:
      scriptURLs:
        - https://cdn.rawgit.com/devonfw/devonfw-shop-floor/master/dsf4openshift/openshift-cluster-setup/initial-setup/customizeOpenshift/scripts/catalog-categories.js
  [...]
----