add vtadmin docker image

[L3o-pold]

Description

Add vtadmin docker image. Add the possibility to serve the vtadmin frontend inside docker image.

For now it's using node serving binary to serve the content but it could be change to have a single-component vtadmin.

Frontend have been modified in order to be able to change env var at the run time (not only build time).

Usage in k8s looks like this:

apiVersion: v1
kind: ConfigMap
metadata:
  name: vtadmin-web-config
data:
  config.js: |
    window.env = {
    'REACT_APP_VTADMIN_API_ADDRESS': "https://my-vtadmin-endpoint.local",
    'REACT_APP_FETCH_CREDENTIALS': "omit",
    'REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS': true,
    'REACT_APP_BUGSNAG_API_KEY': "",
    'REACT_APP_DOCUMENT_TITLE': "",
    'REACT_APP_READONLY_MODE': false,
  };

apiVersion: v1
kind: ConfigMap
metadata:
  name: vtadmin-api-config
data:
  discovery.json: |
    {
        "vtctlds": [
            {
                "host": {
                    "fqdn": "vtctld:15999",
                    "hostname": "vtctld:15999"
                }
            }
        ],
        "vtgates": [
            {
                "host": {
                    "hostname": "vtgate:15999"
                }
            }
        ]
    }
  rbac.yaml: |
    rules:
      - resource: "*"
        actions:
          - "get"
          - "create"
          - "delete"
          - "put"
          - "ping"
        subjects: ["*"]
        clusters: ["*"]
      - resource: "Shard"
        actions:
          - "emergency_reparent_shard"
          - "planned_reparent_shard"
        subjects: ["*"]
        clusters:
          - "cell1"

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vtadmin
  labels:
    app.kubernetes.io/name: vtadmin
spec:
  replicas: 1
  selector:
    matchLabels:
      app.kubernetes.io/name: vtadmin
  template:
    metadata:
      labels:
        app.kubernetes.io/name: vtadmin
    spec:
      terminationGracePeriodSeconds: 30
      containers:
        - name: vtadmin
          image: vitess/vtadmin:v13.0.0-bullseye
          imagePullPolicy: IfNotPresent
          command:
            - /vt/bin/vtadmin
          args:
            - --addr=:14200
            - --http-origin=*
            - --cluster=id=cell1,name=cell1,discovery=staticfile,discovery-staticfile-path=/var/vtadmin/discovery.json,tablet-fqdn-tmpl={{ .Tablet.Hostname }}
            - --rbac
            - --rbac-config=/var/vtadmin/rbac.yaml
            - --tracer=opentracing-jaeger
            - --grpc-tracing
            - --http-tracing
            - --logtostderr
            - --alsologtostderr
          env:
            - name: GOMAXPROCS
              value: "4"
          ports:
            - containerPort: 14200
              name: tcp-api
              protocol: TCP
          resources:
            limits:
              cpu: 200m
              memory: 512Mi
            requests:
              cpu: 100m
              memory: 256Mi
          securityContext:
            runAsUser: 999
          volumeMounts:
            - mountPath: /var/vtadmin
              name: vtadmin-config
              readOnly: true
        - name: web
          image: vitess/vtadmin:v13.0.0-bullseye
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: 14201
              name: tcp-web
              protocol: TCP
          securityContext:
            runAsUser: 999
          volumeMounts:
            - mountPath: /vt/web/vtadmin/build/config/config.js
              subPath: config.js
              name: vtadmin-web-config
              readOnly: true
          resources:
            limits:
              cpu: 200m
              memory: 512Mi
            requests:
              cpu: 100m
              memory: 256Mi
      volumes:
        - name: vtadmin-api-config
          configMap:
            name: vtadmin-api-config
        - name: vtadmin-web-config
          configMap:
            name: vtadmin-web-config

Related Issue(s)

Checklist

• "Backport me!" label has been added if this change should be backported
• Tests were added or are not required
• Documentation was added or is not required

Deployment Notes

[github-actions]

Review Checklist

Hello reviewers! 👋 Please follow this checklist when reviewing this Pull Request.

General

• Ensure that the Pull Request has a descriptive title.
• If this is a change that users need to know about, please apply the release notes (needs details) label so that merging is blocked unless the summary release notes document is included.
• If a new flag is being introduced, review whether it is really needed. The flag names should be clear and intuitive (as far as possible), and the flag's help should be descriptive.
• If a workflow is added or modified, each items in Jobs should be named in order to mark it as required. If the workflow should be required, the GitHub Admin should be notified.

Bug fixes

• There should be at least one unit or end-to-end test.
• The Pull Request description should either include a link to an issue that describes the bug OR an actual description of the bug and how to reproduce, along with a description of the fix.

Non-trivial changes

• There should be some code comments as to why things are implemented the way they are.

New/Existing features

• Should be documented, either by modifying the existing documentation or creating new documentation.
• New features should have a link to a feature request issue or an RFC that documents the use cases, corner cases and test cases.

Backward compatibility

• Protobuf changes should be wire-compatible.
• Changes to _vt tables and RPCs need to be backward compatible.
• vtctl command output order should be stable and awk-able.

[ajm188]

it seems to me that all the test failures are due to the process.env => env change. have you tried debugging locally?

as for the linter, you can npm lint:fix (or something similar, it's in the readme!)

[L3o-pold]

yeah I saw where it was failing but no idea on how to fix it yet.

[notfelineit]

Hey @L3o-pold, have you tried making this a function instead of a var like so:

export const env = () => NodeJS.ProcessEnv = { ...window.env, ...process.env };

I'll take a deeper look at your PR as well, that's just a javascript-y hunch 😃

What shows up here: https://github.com/vitessio/vitess/pull/10543/files#diff-f416f8984539bc33ec2516f3ffecb14ee9450f3e8e3582fabba942308eeb0b0fR30 when you run? (or is it that vtadmin won't spin up at all?)

EDIT
We shouldn't assign to NodeJS.ProcessEnv actually - I thought that was a type and not an object?

[L3o-pold]

My PR runs but I didn't try with the REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS env var set to true.

[ajm188]

the problem is that window.env is not of type NodeJS.ProcessEnv, do we need that variable, or can we type coerce it somehow so everything plays nice?

in any case, once we get that working, you're going to want to update the before/after mock infra (see http.test.ts for an example, which is explicitly mocking process.env, so you'll want to sub in your util function there instead)

[L3o-pold]

The goal of using window.env is to be able to edit environment variable as REACT_APP_VTADMIN_API_ADDRESS on the runtime.

With this you can build a vtadmin dist version and allow people to edit those var when running the frontend.

For example building a Vtadmin docker image and let users specify their own REACT_APP_VTADMIN_API_ADDRESS when running it.

[notfelineit]

@L3o-pold Ah my eyes totally missed that. It doesn't look right assigning to NodeJs.ProcessEnv. Are we able to access the variables we need simply by exporting an env var?

const env = {...window.env, ...process.env}

Additionally, how would you feel about using cookies instead? We've had success on private forks setting cookies for env variables and then doing something like (pseudo-y code):

const fetchEnvVar = (env_var: string) => {
    return process.env[env_var]  || Cookies.get(env_var)
}

Would either of those work?

[L3o-pold]

@ajm188 did a trick for fixing the CI. IMO cookie is ok only if we plan of adding an UI to edit those settings live.
For now (with this PR), users need to play with sed in order to edit this settings during the runtime, but if we plan to replace serve dependency with go it could also be done directly in the binary I think.

[ajm188]

@notfelineit this[1] totally would have worked, but there are tests for the error handler that mutate the process.env to make some assertions

[1] "this" meaning your suggestion here

Are we able to access the variables we need simply by exporting an env var?

const env = {...window.env, ...process.env}

[notfelineit]

@ajm188 could you link to the tests mutating process.env? That sounds like funny test behavior 🤔

[deepthi]

Since vtadmin is its own image, the example usage in the description needs to be changed to reflect that.
Have you verified that the example config actually works with a vtadmin image built with this PR?

[deepthi]

This is looking good to me. It looks like all feedback has been addressed

• no changes to bootstrap images
• no changes to lite images
• distro (bullseye in the example) is not hard-coded, it is passed to the release script
• working example (confirmed with PR author via slack) in the description

If anyone finds problems with this after we merge it, we can fix it forward.