Adding managed kubernetes support

* supporting public npm and docker repos
* building linux/amd64 containers
* deploying containers to remote registry
* parameterized helm chart for deployment

.dockerignore

@@ -5,3 +5,5 @@ web
 .gitignore
 .dockerignore
 Dockerfile
+.vscode
+deployment

.npmrc

@@ -1,2 +0,0 @@
-registry=https://artifactory.oci.oraclecorp.com/api/npm/global-dev-npm/
-@os:registry=https://artifacthub-phx.oci.oraclecorp.com/api/npm/os-npm-release/

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM docker-remote.artifactory.oci.oraclecorp.com/oraclelinux:8
+FROM container-registry.oracle.com/os/oraclelinux:8
 
 RUN dnf upgrade -y && \
     dnf module enable nodejs:16 -y && \

deployment/deployment.yaml

@@ -1,19 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: occ-fw-ui-deployment
-spec:
-  selector:
-    matchLabels:
-      app: occ-fw-ui
-  replicas: 1
-  template:
-    metadata:
-      labels:
-        app: occ-fw-ui
-    spec:
-      containers:
-        - name: occ-fw-ui
-          image: occ-fw-ui:1.0.3
-          ports:
-          - containerPort: 8000

deployment/helm-chart/.helmignore

@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

deployment/helm-chart/Chart.yaml

@@ -0,0 +1,24 @@
+apiVersion: v2
+name: occ-fw-ui
+description: A Helm chart for Kubernetes
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.
+#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 0.1.0
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+# It is recommended to use it with quotes.
+appVersion: "1.16.0"

deployment/helm-chart/templates/deployment.yaml

@@ -0,0 +1,21 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ .Values.appName }}-deployment
+spec:
+  selector:
+    matchLabels:
+      app: {{ .Values.appName }}
+  replicas: 1
+  template:
+    metadata:
+      labels:
+        app: {{ .Values.appName }}
+    spec:
+      containers:
+        - name: {{ .Values.appName }}
+          image: {{ .Values.imageRegistry }}/{{ .Values.appName }}:{{ .Values.appVersion }}
+          ports:
+          - containerPort: 8000
+      imagePullSecrets:
+        - name: {{ .Values.imagePullSecret }}

deployment/ingress.yaml → deployment/helm-chart/templates/ingress.yaml

@@ -1,30 +1,30 @@
 ---
 # Middleware
-# Strip prefix /overview
 apiVersion: traefik.containo.us/v1alpha1
 kind: Middleware
 metadata:
-  name: occ-fw-ui-path-strip-mw
+  name: {{ .Values.appName }}-middleware-strip
 spec:
   stripPrefix:
     forceSlash: false
     prefixes:
-      - /occ/ui
+      - {{ .Values.pathPrefix }}
 ---
 # IngressRoute
 apiVersion: traefik.containo.us/v1alpha1
 kind: IngressRoute
 metadata:
-  name: occ-ui-ingress-route
+  name: {{ .Values.appName }}-ingress-route
 spec:
   entryPoints:
     - websecure
+  tls: {}
   routes:
     - kind: Rule
-      match: PathPrefix(`/occ/ui/`)
+      match: PathPrefix(`{{ .Values.pathPrefix }}`)
       middlewares:
-        - name: occ-fw-ui-path-strip-mw
+        - name: {{ .Values.appName }}-middleware-strip
       services:
         - kind: Service
-          name: occ-fw-ui-service
+          name: {{ .Values.appName }}-service
           port: 80

deployment/service.yaml → deployment/helm-chart/templates/service.yaml

@@ -1,10 +1,10 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: occ-fw-ui-service
+  name: {{ .Values.appName }}-service
 spec:
   selector:
-    app: occ-fw-ui
+    app: {{ .Values.appName }}
   ports:
     - protocol: TCP
       port: 80

deployment/helm-chart/values.yaml

@@ -0,0 +1,9 @@
+# Default values for helm-chart.
+# This is a YAML-formatted file.
+# Declare variables to be passed into your templates.
+
+appName: "occ-fw-ui"
+appVersion: 1.0.0
+imageRegistry: "iad.ocir.io/cesdev"
+imagePullSecret: ocirsecret
+pathPrefix: "/occ/ui/"

deployment/scripts/ocir-login.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+readarray -d / -t registry <<< $1
+
+oci --profile DEFAULT raw-request --http-method GET --target-uri https://$registry/20180419/docker/token \
+| jq -r '.data.token' \
+| docker login -u BEARER_TOKEN --password-stdin iad.ocir.io

package.json

@@ -1,21 +1,20 @@
 {
   "name": "occ-fw-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An Oracle JavaScript Extension Toolkit(JET) web app",
+  "config": {
+    "registry": "iad.ocir.io/cesdev"
+  },
   "scripts": {
     "start": "ojet serve",
-    "start:container": "npm run build:container && docker run --rm -d -p 8000:8000 $npm_package_name:$npm_package_version",
+    "start:container": "npm run build:container && docker run --rm -d -p 8000:8000 $npm_package_config_registry/$npm_package_name:$npm_package_version",
     "build": "ojet build",
-    "build:container": "docker build -t $npm_package_name:$npm_package_version .",
-    "release": "ojet build --release",
-    "deploy": "npm run build:container && kubectl apply -f deployment"
+    "build:container": "docker build -t $npm_package_config_registry/$npm_package_name:$npm_package_version .",
+    "deploy": "npm run deploy:container && helm upgrade --install $npm_package_name --set appName=$npm_package_name --set appVersion=$npm_package_version --set imageRegistry=$npm_package_config_registry ./deployment/helm-chart",
+    "deploy:container": "npm run build:container && ./deployment/scripts/ocir-login.sh $npm_package_config_registry && docker push $npm_package_config_registry/$npm_package_name:$npm_package_version"
   },
   "dependencies": {
-    "@oracle/oraclejet": "~13.0.0",
-    "@reduxjs/toolkit": "^1.8.5",
-    "react": "npm:@preact/compat@^17.1.1",
-    "react-dom": "npm:@preact/compat@^17.1.1",
-    "react-redux": "^8.0.2"
+    "@oracle/oraclejet": "13.0.3"
   },
   "devDependencies": {
     "@oracle/ojet-cli": "^13.0.0",
@@ -42,6 +41,9 @@
     "webpack-merge": "5.8.0",
     "yargs-parser": "13.1.2"
   },
+  "overrides": {
+    "preact": "10.7.2"
+  },
   "engines": {
     "node": ">=16"
   },

src/components/app.tsx

@@ -1,11 +1,9 @@
 import { registerCustomElement } from "ojs/ojvcomponent";
 import { FunctionComponent } from "preact";
 import { useEffect } from "preact/hooks";
-import { Provider } from "react-redux";
 import { Footer } from "./footer";
 import { Header } from "./header";
 import { Content } from "./content/index";
-import { store } from "../state/store";
 import { useLogin } from "../hooks/useLogin";
 import Context = require("ojs/ojcontext");
 
@@ -22,7 +20,6 @@ const AppComponent: FunctionComponent<Props> = ({ appName = "OCC" }) => {
   }, []);
 
   return (
-    <Provider store={store}>
       <div id="appContainer" class="oj-web-applayout-page">
         <Header
           appName={appName}
@@ -33,7 +30,6 @@ const AppComponent: FunctionComponent<Props> = ({ appName = "OCC" }) => {
         <Content pluginUrl={userLogin ? "https://localhost:8001" : ""} />
         <Footer />
       </div>
-    </Provider>
   );
 };
 

src/state/counterReducer.ts

@@ -1,24 +0,0 @@
-import { createAction, createReducer } from '@reduxjs/toolkit'
-
-export interface CounterState {
-  value: number
-}
-
-export const increment = createAction('counter/increment')
-export const decrement = createAction('counter/decrement')
-export const incrementByAmount = createAction<number>('counter/incrementByAmount')
-
-const initialState = { value: 0 } as CounterState
-
-export const counterReducer = createReducer(initialState, (builder) => {
-  builder
-    .addCase(increment, (state, action) => {
-      state.value++
-    })
-    .addCase(decrement, (state, action) => {
-      state.value--
-    })
-    .addCase(incrementByAmount, (state, action) => {
-      state.value += action.payload
-    })
-});

src/state/store.ts

@@ -1,15 +0,0 @@
-import { configureStore, Store } from "@reduxjs/toolkit"
-
-import { counterReducer } from "./counterReducer";
-
-
-const reducer = {
-    counter: counterReducer
-}
-
-export const store = configureStore({
-    reducer,
-    devTools: process.env.NODE_ENV !== "production"
-});
-
-export type State = ReturnType<typeof store.getState>;

tsconfig.json

@@ -26,15 +26,6 @@
       ],
       "oj-c/*": [
         "./node_modules/@oracle/oraclejet-core-pack/oj-c/types/*"
-      ],
-      "preact": [
-        "./node_modules/@oracle/oraclejet/dist/js/libs/preact"
-      ],
-      "react": [
-        "./node_modules/preact/compat/src/index.d.ts"
-      ],
-      "react-dom": [
-        "./node_modules/preact/compat/src/index.d.ts"
       ]
     },
     "declaration": true,