Skip to content

Commit 033f601

Browse files
PeterYurkovichzhuje
PeterYurkovich
authored and
zhuje
committed
feat: add incluster development of UI plugin using devspace
1 parent fb0e3eb commit 033f601

6 files changed

Lines changed: 123 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,6 @@ web/dist/
66
web/node_modules/
77
web/coverage/
88
yarn-error.log
9+
10+
# Ignore DevSpace cache and log folder
11+
.devspace/

‎Dockerfile.devspace‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
FROM registry.redhat.io/ubi9/go-toolset:latest AS go-builder
2+
3+
WORKDIR /opt/app-root
4+
5+
USER 0
6+
RUN chgrp -R 0 /opt/app-root
7+
RUN chmod -R g+rw /opt/app-root
8+
9+
RUN mkdir /.devspace
10+
RUN chgrp -R 0 /.devspace
11+
RUN chmod -R g+rw /.devspace
12+
13+
ENV HUSKY=0
14+
15+
COPY Makefile Makefile
16+
COPY go.mod go.mod
17+
COPY go.sum go.sum
18+
19+
RUN make install-backend
20+
21+
COPY cmd/ cmd/
22+
COPY pkg/ pkg/
23+
24+
RUN make build-backend
25+
26+
ENTRYPOINT ["make", "start-devspace-backend"]

‎Makefile‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ deploy: test-frontend ## Build and push image, reinstall on cluster using helm.
6363
PUSH=1 scripts/build-image.sh
6464
helm install troubleshooting-panel-console-plugin charts/openshift-console-plugin -n troubleshooting-panel-console-plugin --create-namespace --set plugin.image=$(IMAGE)
6565

66+
.PHONY: start-devspace-backend
67+
start-devspace-backend:
68+
/opt/app-root/plugin-backend -port=9443 -cert=/var/serving-cert/tls.crt -key=/var/serving-cert/tls.key -plugin-config-path=/etc/plugin/config.yaml -static-path=/opt/app-root/web/dist -config-path=/opt/app-root/web/dist
69+
6670
## Code generation
6771
gen-client: web/src/korrel8r/client
6872

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,22 @@ best practice is to prefix your CSS classnames with your plugin name to avoid
190190
conflicts. Please don't disable these rules without understanding how they can
191191
break console styles!
192192

193+
### Running using Devspace
194+
195+
Install the [devspace](https://www.devspace.sh/docs/getting-started/installation) cli.
196+
197+
1. Install the frontend dependencies running `make install-frontend`.
198+
2. Start the frontend `make start-frontend`.
199+
3. Deploy the troubleshooting panel using COO/ObO.
200+
4. Select the namespace you want to deploy in using `devspace use namespace {NAMESPACE}`, make sure to set the namespace where the plugin has been deployed.
201+
5. In a different terminal start the devspace sync `devspace dev`.
202+
203+
When running the `devspace dev` command, the pipeline will run the `scale_down_coo` function to prevent COO from fighting over control of the pod. After COO has been scaled down, devspace will "take over" the troubleshooting-panel-console-plugin pod, grabbing all of the certificates and backend binary and configuration to run in the devspace pod.
204+
205+
After the pod has been "taken over" Devspace begins a sync process which will mirror changes from you local `./web/dist` folder into the `/opt/app-root/web/dist` folder in the devspace pod. You can then make changes to your frontend files locally which will trigger the locally running webpack dev server to rebuild the `./web/dist` folder, which will trigger Devspace to re-synced. You can then reload your console webpage to see your local changes running in the cluster.
206+
207+
After development you can run `devspace purge` to cleanup and then call the `scale_up_coo` pipeline.
208+
193209
### Local Development Troubleshooting
194210
1. Disable cache. Select 'disable cache' in your browser's DevTools > Network > 'disable cache'. Or use private/incognito mode in your browser.
195211
2. Enable higher log verbosity by setting `-log-level=trace` when starting the plugin backend. For more options to set log level see [logrus documentation](https://github.com/sirupsen/logrus?tab=readme-ov-file#level-logging).

‎devspace.yaml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
version: v2beta1
2+
name: troubleshooting-panel-console-plugin
3+
4+
functions:
5+
scale_down_coo: |-
6+
kubectl scale --replicas=0 -n ${DEVSPACE_NAMESPACE} deployment/observability-operator
7+
scale_up_coo: |-
8+
kubectl scale --replicas=1 -n ${DEVSPACE_NAMESPACE} deployment/observability-operator
9+
# This is a list of `pipelines` that DevSpace can execute (you can define your own)
10+
pipelines:
11+
# This is the pipeline for the main command: `devspace dev` (or `devspace run-pipeline dev`)
12+
dev:
13+
run: |-
14+
scale_down_coo # 3. Scale down COO so it doesn't fight over the troubleshooting-panel
15+
start_dev app # 5. Start dev mode "app" (see "dev" section)
16+
purge:
17+
run: |-
18+
stop_dev --all
19+
scale_up_coo
20+
21+
# This is a list of `dev` containers that are based on the containers created by your deployments
22+
dev:
23+
app:
24+
# Search for the container that runs this image
25+
labelSelector:
26+
# Use the instance selector that COO adds
27+
app.kubernetes.io/instance: troubleshooting-panel
28+
# Replace the container image with this dev-optimized image (allows to skip image building during development)
29+
devImage: quay.io/openshift-observability-ui/troubleshooting-panel-console-plugin:devspace
30+
# Sync files between the local filesystem and the development container
31+
sync:
32+
- path: ./web/dist:/opt/app-root/web/dist
33+
startContainer: true
34+
command: ["make"]
35+
args: ["start-devspace-backend"]
36+
# Inject a lightweight SSH server into the container (so your IDE can connect to the remote dev env)
37+
ssh:
38+
enabled: true

‎devspace_start.sh‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
#!/bin/bash
2+
set +e # Continue on errors
3+
4+
export NODE_ENV=development
5+
npm install
6+
7+
COLOR_BLUE="\033[0;94m"
8+
COLOR_GREEN="\033[0;92m"
9+
COLOR_RESET="\033[0m"
10+
11+
# Print useful output for user
12+
echo -e "${COLOR_BLUE}
13+
%########%
14+
%###########% ____ _____
15+
%#########% | _ \ ___ __ __ / ___/ ____ ____ ____ ___
16+
%#########% | | | | / _ \\\\\ \ / / \___ \ | _ \ / _ | / __// _ \\
17+
%#############% | |_| |( __/ \ V / ____) )| |_) )( (_| |( (__( __/
18+
%#############% |____/ \___| \_/ \____/ | __/ \__,_| \___\\\\\___|
19+
%###############% |_|
20+
%###########%${COLOR_RESET}
21+
Welcome to your development container!
22+
This is how you can work with it:
23+
- Files will be synchronized between your local machine and this container
24+
- Some ports will be forwarded, so you can access this container via localhost
25+
- Run \`${COLOR_GREEN}npm start${COLOR_RESET}\` to start the application
26+
"
27+
28+
# Set terminal prompt
29+
export PS1="\[${COLOR_BLUE}\]devspace\[${COLOR_RESET}\] ./\W \[${COLOR_BLUE}\]\\$\[${COLOR_RESET}\] "
30+
if [ -z "$BASH" ]; then export PS1="$ "; fi
31+
32+
# Include project's bin/ folder in PATH
33+
export PATH="./bin:$PATH"
34+
35+
# Open shell
36+
bash --norc

0 commit comments

Comments
 (0)