From 4953764fe7dd429bbf30225cb368e7ffa22b9fe1 Mon Sep 17 00:00:00 2001 From: kahboom Date: Mon, 4 Mar 2024 13:46:36 +0000 Subject: [PATCH 1/2] fix(config): add support for runtime env vars in ConfigMap by using getServerSideProps fix: typo --- Dockerfile | 8 +++++--- next.config.js | 5 +++++ start.sh | 9 +++++++++ 3 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 start.sh diff --git a/Dockerfile b/Dockerfile index 41f6fed..27a7567 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,15 +1,17 @@ FROM registry.access.redhat.com/ubi9/nodejs-18@sha256:773645c3eae02529e09c04a843a0c6783de45b084b325685b043b7818c7a8bf6 as Build # COPY . . -USER root +COPY start.sh /start.sh +USER root EXPOSE 3000 RUN echo "export PATH=${PATH}:$HOME/node_modules/.bin" >> ~/.bashrc && \ npm install --ignore-scripts && \ npm run build && \ chmod -R 777 /opt/app-root/src/.npm && \ - npm cache clean --force + npm cache clean --force && \ + chmod +x /start.sh USER 1001 -CMD ["npm", "run", "start"] +CMD ["/bin/sh", "/start.sh"] LABEL \ com.redhat.component="trusted-artifact-signer-rekor-ui" \ diff --git a/next.config.js b/next.config.js index 1dc54c3..cb5499f 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,10 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + modularizeImports: { + "@patternfly/react-icons": { + transform: "@patternfly/react-icons/{{member}}", + }, + }, reactStrictMode: true, transpilePackages: ["@patternfly/react-core", "@patternfly/react-styles"], }; diff --git a/start.sh b/start.sh new file mode 100644 index 0000000..b319b61 --- /dev/null +++ b/start.sh @@ -0,0 +1,9 @@ +#!/bin/sh + +NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN=$(http://rekor-server.rekor-server.svc.cluster.local) + +# Export the NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN as an environment variable +export NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN + +# Run npm start +exec npm start From 6f2eeba4e5dfdd59d33eba0d615d41b2737e4d4a Mon Sep 17 00:00:00 2001 From: kahboom Date: Mon, 4 Mar 2024 16:45:29 +0000 Subject: [PATCH 2/2] fix: transpile patternfly icons package fix: typo in start.sh script fix: update rekor server endpoint fix: make value dynamic fix: use runtimeConfig to resolve endpoint --- .github/workflows/cronjobs.yaml | 4 ++-- Dockerfile | 14 +++++++------- next.config.js | 19 +++++++++++++------ src/pages/_document.tsx | 20 ++++++++++++++++++++ src/pages/index.tsx | 11 ++++++++++- start.sh | 9 --------- 6 files changed, 52 insertions(+), 25 deletions(-) delete mode 100644 start.sh diff --git a/.github/workflows/cronjobs.yaml b/.github/workflows/cronjobs.yaml index ef8ad77..705e0b1 100644 --- a/.github/workflows/cronjobs.yaml +++ b/.github/workflows/cronjobs.yaml @@ -3,8 +3,8 @@ on: workflow_dispatch: schedule: # Every M-F at 12:00am run this job - - cron: "0 0 * * 1-5" - + - cron: "0 0 * * 1-5" + jobs: check-image-version: uses: securesign/actions/.github/workflows/check-image-version.yaml@main diff --git a/Dockerfile b/Dockerfile index 27a7567..ab07313 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,25 +1,25 @@ FROM registry.access.redhat.com/ubi9/nodejs-18@sha256:773645c3eae02529e09c04a843a0c6783de45b084b325685b043b7818c7a8bf6 as Build # COPY . . -COPY start.sh /start.sh USER root +ENV NODE_ENV production EXPOSE 3000 RUN echo "export PATH=${PATH}:$HOME/node_modules/.bin" >> ~/.bashrc && \ npm install --ignore-scripts && \ npm run build && \ chmod -R 777 /opt/app-root/src/.npm && \ - npm cache clean --force && \ - chmod +x /start.sh + echo "NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN = ${NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN}" && \ + npm cache clean --force USER 1001 -CMD ["/bin/sh", "/start.sh"] +CMD ["node_modules/.bin/next", "start"] LABEL \ com.redhat.component="trusted-artifact-signer-rekor-ui" \ name="trusted-artifact-signer-rekor-ui" \ version="0.0.1" \ summary="User Interface for checking Rekor Entries" \ - description="Provides a user interface for checking Rekor Entries through an Node App" \ - io.k8s.description="Provides a user interface for checking Rekor Entries through an Node App" \ - io.k8s.display-name="Provides a user interface for checking Rekor Entries through an Node App" \ + description="Provides a user interface for checking Rekor Entries through a Node App" \ + io.k8s.description="Provides a user interface for checking Rekor Entries through a Node App" \ + io.k8s.display-name="Provides a user interface for checking Rekor Entries through a Node App" \ io.openshift.tags="rekor-ui, rekor, cli, rhtas, trusted, artifact, signer, sigstore" \ maintainer="trusted-artifact-signer@redhat.com" diff --git a/next.config.js b/next.config.js index cb5499f..97d9d6c 100644 --- a/next.config.js +++ b/next.config.js @@ -1,12 +1,19 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - modularizeImports: { - "@patternfly/react-icons": { - transform: "@patternfly/react-icons/{{member}}", - }, - }, reactStrictMode: true, - transpilePackages: ["@patternfly/react-core", "@patternfly/react-styles"], + publicRuntimeConfig: { + // remove private env variables + processEnv: Object.fromEntries( + Object.entries(process.env).filter(([key]) => + key.includes("NEXT_PUBLIC_"), + ), + ), + }, + transpilePackages: [ + "@patternfly/react-core", + "@patternfly/react-icons", + "@patternfly/react-styles", + ], }; module.exports = nextConfig; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 8780999..5be1ecf 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,10 +1,30 @@ import Document, { Head, Html, Main, NextScript } from "next/document"; +const nextPublicENV = Object.keys(process.env) + .filter(key => key.startsWith("NEXT_PUBLIC_")) + .reduce( + (env, key) => { + env[key] = process.env[key] ?? ""; + return env; + }, + {} as { [key: string]: string }, + ); + class AppDocument extends Document { render() { return ( +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 780813c..3426a65 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -18,7 +18,7 @@ import { import { RekorClientProvider } from "../modules/api/context"; import { Explorer } from "../modules/components/Explorer"; import { Settings } from "../modules/components/Settings"; -import { CogIcon, GithubIcon } from "@patternfly/react-icons"; +import { CogIcon } from "@patternfly/react-icons"; import Link from "next/link"; import Image from "next/image"; import NOSSRWrapper from "../modules/utils/noSSR"; @@ -112,3 +112,12 @@ const PageComponent: NextPage = () => ( ); export default PageComponent; + +export async function getServerSideProps() { + return { + props: { + NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: + process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN, + }, // will be passed to the page component as props + }; +} diff --git a/start.sh b/start.sh deleted file mode 100644 index b319b61..0000000 --- a/start.sh +++ /dev/null @@ -1,9 +0,0 @@ -#!/bin/sh - -NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN=$(http://rekor-server.rekor-server.svc.cluster.local) - -# Export the NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN as an environment variable -export NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN - -# Run npm start -exec npm start