kf1.9(centraldash): general

components/centraldashboard/.dockerignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

components/centraldashboard/Dockerfile

@@ -3,32 +3,29 @@ FROM node:16.20.2-bullseye AS build
 
 ARG kubeflowversion
 ARG commit
+
 ENV BUILD_VERSION=$kubeflowversion
 ENV BUILD_COMMIT=$commit
 ENV CHROME_BIN=/usr/bin/chromium
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 
-RUN apt update -qq && apt install -qq -y gnulib
-
 COPY . /centraldashboard
 WORKDIR /centraldashboard
 
-RUN BUILDARCH="$(dpkg --print-architecture)" &&  npm rebuild && \
-    if [ "$BUILDARCH" = "arm64" ]  ||  \
-    [ "$BUILDARCH" = "armhf" ]; then \
-    export CFLAGS=-Wno-error && \
-    export CXXFLAGS=-Wno-error;  \
-    fi && \
-    npm install && \
-    npm run build && \
-    npm prune --production
+RUN npm ci \
+ && npm run build \
+ && npm prune --production
 
 # Step 2: Packages assets for serving
 FROM node:16.20.2-alpine AS serve
 
+RUN apk add --no-cache tini
+
+USER node
+
 ENV NODE_ENV=production
-WORKDIR /app
-COPY --from=build /centraldashboard .
+WORKDIR /usr/src/app
+COPY --from=build --chown=node:node /centraldashboard .
 
 EXPOSE 8082
-ENTRYPOINT ["npm", "start"]
+ENTRYPOINT ["/sbin/tini", "--" , "npm", "start"]

components/centraldashboard/Makefile

@@ -24,20 +24,20 @@ docker-build:
 	docker build ${DOCKER_BUILD_OPTS} -t $(IMG):$(TAG) . \
 	  --build-arg kubeflowversion=$(shell git describe --abbrev=0 --tags) \
 	  --build-arg commit=$(COMMIT) \
-      --label=git-verions=$(TAG)
+      --label=git-version=$(TAG)
 	@echo Built $(IMG):$(TAG)
 
 docker-push:
 	docker push $(IMG):$(TAG)
 
 .PHONY: docker-build-multi-arch
 docker-build-multi-arch: ##  Build multi-arch docker images with docker buildx
-	docker buildx build --load --platform ${ARCH} --tag ${IMG}:${TAG} -f ${DOCKERFILE} .
+	docker buildx build --load --platform ${ARCH} --tag ${IMG}:${TAG} -f ${DOCKERFILE} . --build-arg kubeflowversion=$(shell git describe --abbrev=0 --tags) --build-arg commit=$(COMMIT) --label=git-version=$(TAG)
 
 
 .PHONY: docker-build-push-multi-arch
 docker-build-push-multi-arch: ## Build multi-arch docker images with docker buildx and push to docker registry
-	docker buildx build --platform ${ARCH} --tag ${IMG}:${TAG} --push -f ${DOCKERFILE} .
+	docker buildx build --platform ${ARCH} --tag ${IMG}:${TAG} --push -f ${DOCKERFILE} . --build-arg kubeflowversion=$(shell git describe --abbrev=0 --tags) --build-arg commit=$(COMMIT) --label=git-version=$(TAG)
 
 # Build but don't attach the latest tag. This allows manual testing/inspection of the image
 # first.

components/centraldashboard/OWNERS

@@ -1,9 +1,7 @@
 approvers:
-  - elikatsis
   - kimwnasptd
-  - StefanoFioravanzo
   - thesuperzapper
-  - yanniszark
-reviewers:
-  - avdaredevil
-  - SachinVarghese
+emeritus_approvers:
+  - elikatsis
+  - StefanoFioravanzo
+  - yanniszark

components/centraldashboard/README.md

@@ -32,24 +32,35 @@ kubectl --record deployment.apps/centraldashboard \
 
 ### Getting Started
 Make sure you have `node v16` installed along with `npm`.
-
+Initial setup
 1. Clone the repository and change directories to `components/centraldashboard`
 2. Run `make build-local`. This will install all of the project dependencies and
    prepare your system for development.
-3. To start a development environment, run `npm run dev`. It can then be accessed at `localhost:8080`.
-    - This runs [webpack](https://webpack.js.org/) over the front-end code in
-      the [public](./public) folder and starts the
-      [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) at
-      http://localhost:8081.
-    - You will also need to run `kubectl port-forward services/profiles-kfam -n kubeflow 8081`. This is to access the KFAM component.
-    - It also starts the Express API server at http://localhost:8082. Requests
-      from the front-end starting with `/api` are proxied to the Express
-      server. All other requests are handled by the front-end server which
-      mirrors the production configuration.
-4. - To access the Jupyter Web App run: `kubectl port-forward -n kubeflow svc/jupyter-web-app-service 8085:80`.
-    - To access Pipeline Web App run: `kubectl port-forward -n kubeflow svc/ml-pipeline-ui 8087:80`.`
-
-    This forwards requests to Kubernetes services from `http://localhost:service-proxy-port`. See the [webpack config file](https://github.com/kubeflow/kubeflow/blob/master/components/centraldashboard/webpack.config.js) for more details.
+
+Steps
+1. We STRONGLY recommend using [nvm](https://github.com/nvm-sh/nvm):
+     - Uninstall any Homebrew versions with `brew uninstall node` (or `node@XX`)
+     - Install `nvm` with `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash`
+     - Install node `16` with `nvm install 16`
+     - Use node `16` with `nvm use 16`
+     - Set node `16` as the default with `nvm alias default 16`
+2. Run `cd components/centraldashboard`
+3. Run `npm install` to install npm dependencies
+4. Run `npm run dev` to start the development server, this will:
+    - Run [webpack](https://webpack.js.org/) over the front-end code in the [public](./public) folder
+    - Run [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) at http://localhost:8081
+    - Run the Express API server at http://localhost:8082
+    - Proxy requests from the front-end starting with `/api` to the Express server. 
+    - All other requests are handled by the front-end server which mirrors the production configuration.
+5. Run port-forwards:
+    - Kubeflow Access Management API: `kubectl port-forward -n kubeflow svc/profiles-kfam 8081:8081`
+    - Kubeflow Notebooks: `kubectl port-forward -n kubeflow svc/jupyter-web-app-service 8085:80`
+    - Kubeflow Pipelines: `kubectl port-forward -n kubeflow svc/ml-pipeline-ui 8087:80`
+    - See [`webpack.config.js`](https://github.com/kubeflow/kubeflow/blob/master/components/centraldashboard/webpack.config.js) for more details.
+6. Open your browser to `http://localhost:8080` to see the dashboard:
+    - You will need to inject your requests with a `kubeflow-userid` header
+    - You can do this in Chrome by using the [Header Editor](https://chromewebstore.google.com/detail/eningockdidmgiojffjmkdblpjocbhgh) extension
+    - For example, set the `kubeflow-userid` header to `[email protected]`
 
 ### Server Components
 
@@ -61,8 +72,8 @@ Server side code resides in the [app](./app) directory. The server uses
 Client side code resides in the [public](./public) directory. Client components
 are written using the [Polymer 3](https://polymer-library.polymer-project.org/3.0/docs/about_30)
 web components library. All Polymer components should be written under the
-[public/components](./public/components) directory. You may use the [inline style](https://polymer-library.polymer-project.org/3.0/docs/first-element/step-2) for creating your Shadow DOM, or seperate your
-CSS and HTML in seperate files. We currently support [Pug](https://pugjs.org/api/getting-started.html)
+[public/components](./public/components) directory. You may use the [inline style](https://polymer-library.polymer-project.org/3.0/docs/first-element/step-2) for creating your Shadow DOM, or separate your
+CSS and HTML in separate files. We currently support [Pug](https://pugjs.org/api/getting-started.html)
 templating for external markup. See [main-page.js](public/components/main-page.js)
 for an example.
 

components/centraldashboard/config/centraldashboard-config.yaml

@@ -3,7 +3,7 @@ data:
   defaultLanguage: "en"
   settings: |-
     {
-      DASHBOARD_FORCE_IFRAME: true
+      "DASHBOARD_FORCE_IFRAME": true
     }
   links: |-
     {
@@ -101,4 +101,4 @@ data:
 kind: ConfigMap
 metadata:
   name: centraldashboard-config
-  namespace: kubeflow
+  namespace: kubeflow

components/centraldashboard/manifests/base/configmap.yaml

@@ -6,128 +6,113 @@ data:
     }
   links: |-
     {
-      "menuLinks": [
-        {
-          "type": "item",
-          "link": "/jupyter/",
-          "text": "Notebooks",
-          "icon": "book"
-        },
-        {
-          "type": "item",
-          "link": "/tensorboards/",
-          "text": "Tensorboards",
-          "icon": "assessment"
-        },
-        {
-          "type": "item",
-          "link": "/volumes/",
-          "text": "Volumes",
-          "icon": "device:storage"
-        },
-        {
-          "type": "item",
-          "link": "/models/",
-          "text": "Endpoints",
-          "icon": "kubeflow:models"
-        },
-        {
-          "type": "item",
-          "link": "/katib/",
-          "text": "Experiments (AutoML)",
-          "icon": "kubeflow:katib"
-        },
-        {
-          "type": "item",
-          "text": "Experiments (KFP)",
-          "link": "/pipeline/#/experiments",
-          "icon": "done-all"
-        },
-        {
-          "type": "item",
-          "link": "/pipeline/#/pipelines",
-          "text": "Pipelines",
-          "icon": "kubeflow:pipeline-centered"
-        },
-        {
-          "type": "item",
-          "link": "/pipeline/#/runs",
-          "text": "Runs",
-          "icon": "maps:directions-run"
-        },
-        {
-          "type": "item",
-          "link": "/pipeline/#/recurringruns",
-          "text": "Recurring Runs",
-          "icon": "device:access-alarm"
-        },
-        {
-          "type": "item",
-          "link": "/pipeline/#/artifacts",
-          "text": "Artifacts",
-          "icon": "editor:bubble-chart"
-        },
-        {
-          "type": "item",
-          "link": "/pipeline/#/executions",
-          "text": "Executions",
-          "icon": "av:play-arrow"
-        }
-      ],
-      "externalLinks": [ ],
-        "quickLinks": [
-          {
-            "text": "Upload a pipeline",
-            "desc": "Pipelines",
-            "link": "/pipeline/"
-          },
-          {
-            "text": "View all pipeline runs",
-            "desc": "Pipelines",
-            "link": "/pipeline/#/runs"
-          },
-          {
-            "text": "Create a new Notebook server",
-            "desc": "Notebook Servers",
-            "link": "/jupyter/new?namespace=kubeflow"
-          },
-          {
-            "text": "View Katib Experiments",
-            "desc": "Katib",
-            "link": "/katib/"
-          }
+        "menuLinks": [
+            {
+                "icon": "book",
+                "link": "/jupyter/",
+                "text": "Notebooks",
+                "type": "item"
+            },
+            {
+                "icon": "assessment",
+                "link": "/tensorboards/",
+                "text": "TensorBoards",
+                "type": "item"
+            },
+            {
+                "icon": "device:storage",
+                "link": "/volumes/",
+                "text": "Volumes",
+                "type": "item"
+            },
+            {
+                "icon": "kubeflow:katib",
+                "link": "/katib/",
+                "text": "Katib Experiments",
+                "type": "item"
+            },
+            {
+                "icon": "kubeflow:pipeline-centered",
+                "items": [
+                    {
+                        "link": "/pipeline/#/pipelines",
+                        "text": "Pipelines",
+                        "type": "item"
+                    },
+                    {
+                        "link": "/pipeline/#/experiments",
+                        "text": "Experiments",
+                        "type": "item"
+                    },
+                    {
+                        "link": "/pipeline/#/runs",
+                        "text": "Runs",
+                        "type": "item"
+                    },
+                    {
+                        "link": "/pipeline/#/recurringruns",
+                        "text": "Recurring Runs",
+                        "type": "item"
+                    },
+                    {
+                        "link": "/pipeline/#/artifacts",
+                        "text": "Artifacts",
+                        "type": "item"
+                    },
+                    {
+                        "link": "/pipeline/#/executions",
+                        "text": "Executions",
+                        "type": "item"
+                    }
+                ],
+                "text": "Pipelines",
+                "type": "section"
+            }
         ],
+        "externalLinks": [],
         "documentationItems": [
-          {
-            "text": "Getting Started with Kubeflow",
-            "desc": "Get your machine-learning workflow up and running on Kubeflow",
-            "link": "https://www.kubeflow.org/docs/started/getting-started/"
-          },
-          {
-            "text": "MiniKF",
-            "desc": "A fast and easy way to deploy Kubeflow locally",
-            "link": "https://www.kubeflow.org/docs/distributions/minikf/"
-          },
-          {
-            "text": "Microk8s for Kubeflow",
-            "desc": "Quickly get Kubeflow running locally on native hypervisors",
-            "link": "https://www.kubeflow.org/docs/distributions/microk8s/kubeflow-on-microk8s/"
-          },
-          {
-            "text": "Kubeflow on GCP",
-            "desc": "Running Kubeflow on Kubernetes Engine and Google Cloud Platform",
-            "link": "https://www.kubeflow.org/docs/gke/"
-          },
-          {
-            "text": "Kubeflow on AWS",
-            "desc": "Running Kubeflow on Elastic Container Service and Amazon Web Services",
-            "link": "https://www.kubeflow.org/docs/aws/"
-          },
-          {
-            "text": "Requirements for Kubeflow",
-            "desc": "Get more detailed information about using Kubeflow and its components",
-            "link": "https://www.kubeflow.org/docs/started/requirements/"
-          }
+            {
+                "desc": "The Kubeflow website",
+                "link": "https://www.kubeflow.org/",
+                "text": "Kubeflow Website"
+            },
+            {
+                "desc": "Documentation for Kubeflow Pipelines",
+                "link": "https://www.kubeflow.org/docs/components/pipelines/",
+                "text": "Kubeflow Pipelines Documentation"
+            },
+            {
+                "desc": "Documentation for Kubeflow Notebooks",
+                "link": "https://www.kubeflow.org/docs/components/notebooks/",
+                "text": "Kubeflow Notebooks Documentation"
+            },
+            {
+                "desc": "Documentation for Kubeflow Training Operator",
+                "link": "https://www.kubeflow.org/docs/components/training/",
+                "text": "Kubeflow Training Operator Documentation"
+            },
+            {
+                "desc": "Documentation for Katib",
+                "link": "https://www.kubeflow.org/docs/components/katib/",
+                "text": "Katib Documentation"
+            }
+        ],
+        "quickLinks": [
+            {
+                "desc": "Kubeflow Notebooks",
+                "link": "/jupyter/new",
+                "text": "Create a new Notebook"
+            },
+            {
+                "desc": "Kubeflow Pipelines",
+                "link": "/pipeline/#/pipelines",
+                "text": "Upload a Pipeline"
+            },
+            {
+                "desc": "Pipelines",
+                "link": "/pipeline/#/runs",
+                "text": "View Pipeline Runs"
+            }
         ]
     }
 kind: ConfigMap