This plugin is used to add the Troubleshooting Panel to view Korrel8r data. It is currently under construction and shows a new tab under observe.
The user guide describes the panel from a user perspective, this README is for developers.
Before you can deploy your plugin on a cluster, you must build an image and push it to an image registry.
Build the image:
docker build -t quay.io/my-repository/troubleshooting-panel-console-plugin:latest -f Dockerfile.dev .
[!NOTE] On some systems with a low
ulimit nofile
limit you may need to increase the number of open files per thread to allow for thenpm ci
to run correctly by adding--ulimit nofile=10000:10000 -t
to the command.
Run the image:
docker run -it --rm -d -p 9001:80 quay.io/my-repository/troubleshooting-panel-console-plugin:latest
Push the image:
docker push quay.io/my-repository/troubleshooting-panel-console-plugin:latest
[!NOTE] If you have a Mac with Apple silicon, you will need to add the flag
--platform=linux/amd64
when building the image to target the correct platform to run in-cluster.
A Helm chart is available to deploy the plugin to an OpenShift environment.
The following Helm parameters are required:
plugin.image
: The location of the image containing the plugin that was previously pushed
Additional parameters can be specified if desired. Consult the chart values file for the full set of supported parameters.
Install the chart using the name of the plugin as the Helm release name into a new namespace or an existing namespace as specified by the plugin_console-plugin-template
parameter and providing the location of the image within the plugin.image
parameter by using the following command:
helm upgrade -i troubleshooting-panel-console-plugin charts/openshift-console-plugin -n troubleshooting-panel-console-plugin --create-namespace --set plugin.image=quay.io/my-repository/troubleshooting-panel-console-plugin:latest
The development server of the troubleshooting panel can either be ran as a nodejs server to get hot reloading of the frontend or a go server to serve the files as they will be in production.
In one terminal window, run:
make install-frontend
make start-frontend
The plugin HTTP server runs on port 9002 with CORS enabled.In one terminal window, run:
make build-frontend
make start-backend
Or for hot reloading of the go backend you can use gowgow run ./cmd/plugin-backend.go -port='9002' -config-path='./web/dist' -static-path='./web/dist'
Gow will restart when any changes are saved to go files in any subdirectories.In another terminal window: Clone https://github.com/openshift/monitoring-plugin into a new directory. Then run:
yarn install
yarn run start
The plugin HTTP server runs on port 9001 with CORS enabled.The following steps are suggested for setting up Korrel8r within your cluster to test the plugin. These steps are accurate as of the time of writing, and both Korrel8r and this plugin are subject to change.
/hack/openshift
make operators
make resources
korrel8r
namespace in your cluster
a. If installing in 4.15 or later, there is a permission issue which can be tracked here: https://issues.redhat.com/browse/OU-304. To solve this follow the instructions detailed in the docskubectl label ns/korrel8r pod-security.kubernetes.io/enforce=privileged --overwrite
kubectl label ns/korrel8r pod-security.kubernetes.io/warn=privileged --overwrite
korrel8r
namespace with the name korrel8r
In order to test the plugin with the Korrel8r data, you need to port forward to the korrel8r pod. In a another terminal window, run:
make start-forward
The port forward runs on port localhost:9005 and forwards to the korrel8r pod. Defaults to a name of korrel8r in the namespace of korrel8r, but KORREL8R_NAME and KORREL8R_NAMESPACE variables can be set to adjust the location.In another terminal window, run:
oc login
(requires oc and an OpenShift cluster)npm run start-console
(requires Docker or podman 3.2.0+)This will run the OpenShift console in a container connected to the cluster you've logged into. Navigate to http://localhost:9000/observe/alerts and select an alert to see the running plugin.
If you are using podman on a Mac with Apple silicon, npm run start-console
might fail since it runs an amd64 image. You can workaround the problem with
qemu-user-static by running
these commands:
podman machine ssh
sudo -i
rpm-ostree install qemu-user-static
systemctl reboot
You can use the useTranslation
hook with the plugin__troubleshooting-panel-console-plugin
with this namespace as follows:
const Header: React.FC = () => {
const { t } = useTranslation("plugin__troubleshooting-panel-console-plugin");
return <h1>{t("Hello, World!")}</h1>;
};
For labels in console-extensions.json
, you can use the format
%plugin__troubleshooting-panel-console-plugin~My Label%
. Console will replace the value with
the message for the current language from the plugin__troubleshooting-panel-console-plugin
namespace. For example:
{
"type": "console.navigation/href",
"properties": {
"id": "troubleshooting-panel",
"name": "%plugin__troubleshooting-panel-console-plugin~Korrel8r%",
"href": "/observe/korrel8r",
"perspective": "admin",
"section": "observe"
}
}
Running npm run i18n
updates the JSON files in the locales
folder of the
plugin template when adding or changing messages.
This project adds prettier, eslint, and stylelint. Linting can be run with
npm run lint
.
The stylelint config disallows hex colors since these cause problems with dark mode (starting in OpenShift console 4.11). You should use the PatternFly global CSS variables for colors instead.
The stylelint config also disallows naked element selectors like table
and
.pf-
or .co-
prefixed classes. This prevents plugins from accidentally
overwriting default console styles, breaking the layout of existing pages. The
best practice is to prefix your CSS classnames with your plugin name to avoid
conflicts. Please don't disable these rules without understanding how they can
break console styles!
-log-level=trace
when starting the plugin backend. For more options to set log level see logrus documentation.