Update VTAdmin build script

[notfelineit]

Description

This PR:

• updates the build.sh script to reference build.env in the same directory

• ensures that the vtadmin-up.sh build scripts work with different formats of hostname

Related Issue(s)

• Bug Report: Vtadmin page does not show any data on first install in version 19 #15833

Checklist

• "Backport to:" labels have been added if this change should be back-ported to release branches
• If this change is to be back-ported to previous releases, a justification is included in the PR description
• Tests were added or are not required
• Did the new or modified tests pass consistently locally and on CI?
• Documentation was added or is not required

Deployment Notes

N/A

[vitess-bot]

Review Checklist

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

General

• Ensure that the Pull Request has a descriptive title.
• Ensure there is a link to an issue (except for internal cleanup and flaky test fixes), new features should have an RFC that documents use cases and test cases.

Tests

• Bug fixes should have at least one unit or end-to-end test, enhancement and new features should have a sufficient number of tests.

Documentation

• Apply the release notes (needs details) label if users need to know about this change.
• New features should be documented.
• There should be some code comments as to why things are implemented the way they are.
• There should be a comment at the top of each new or modified test to explain what the test does.

New flags

• Is this flag really necessary?
• Flag names must be clear and intuitive, use dashes (-), and have a clear help text.

If a workflow is added or modified:

• Each item in Jobs should be named in order to mark it as required.
• If the workflow needs to be marked as required, the maintainer team must be notified.

Backward compatibility

• Protobuf changes should be wire-compatible.
• Changes to _vt tables and RPCs need to be backward compatible.
• RPC changes should be compatible with vitess-operator
• If a flag is removed, then it should also be removed from vitess-operator and arewefastyet, if used there.
• vtctl command output order should be stable and awk-able.

[notfelineit]

Local testing

May need to test on different OSes. Here's the validations I checked:

• vtadmin-web is at http://localhost.local:14201
• vtadmin-api is at http://localhost.local:14200

Network requests show that the origin of vtadmin-web is set to http://localhost.local:14201:

UI loads:

start logs show that the vtadmin-web and vtadmin-api addresses are as expected:

➜  local git:(update-vtadmin-script) ./101_initial_cluster.sh
Starting etcd...
add zone1 CellInfo
E0503 11:31:29.479153   12428 main.go:56] node already exists: /vitess/global/cells/zone1/CellInfo
etcd is running!
Starting vtctld...
vtctld is running!
{
  "keyspace": {
    "keyspace_type": "NORMAL",
    "base_keyspace": "",
    "snapshot_time": null,
    "durability_policy": "semi_sync",
    "throttler_config": null,
    "sidecar_db_name": "_vt"
  }
}
Starting MySQL for tablet zone1-0000000100...
Resuming from existing vttablet dir:
    /Users/francesthai/planetscale/vitess/examples/local/vtdataroot/vt_0000000100
Starting MySQL for tablet zone1-0000000101...
Resuming from existing vttablet dir:
    /Users/francesthai/planetscale/vitess/examples/local/vtdataroot/vt_0000000101
Starting MySQL for tablet zone1-0000000102...
Resuming from existing vttablet dir:
    /Users/francesthai/planetscale/vitess/examples/local/vtdataroot/vt_0000000102
Waiting for mysqlctls to start...
MySQL for tablet zone1-0000000102 is running!
MySQL for tablet zone1-0000000101 is running!
MySQL for tablet zone1-0000000100 is running!
mysqlctls are running!
Starting vttablet for zone1-0000000100...
HTTP/1.1 200 OK
Date: Fri, 03 May 2024 18:31:37 GMT
Content-Type: text/html; charset=utf-8

vttablet for zone1-0000000100 is running!
Starting vttablet for zone1-0000000101...
HTTP/1.1 200 OK
Date: Fri, 03 May 2024 18:31:38 GMT
Content-Type: text/html; charset=utf-8

vttablet for zone1-0000000101 is running!
Starting vttablet for zone1-0000000102...
HTTP/1.1 200 OK
Date: Fri, 03 May 2024 18:31:39 GMT
Content-Type: text/html; charset=utf-8

vttablet for zone1-0000000102 is running!
Starting vtorc...
vtorc is running!
  - UI: http://localhost:16000
  - Logs: /Users/francesthai/planetscale/vitess/examples/local/vtdataroot/tmp/vtorc.out
  - PID: 14126


New VSchema object:
{
  "sharded": false,
  "vindexes": {},
  "tables": {
    "corder": {
      "type": "",
      "column_vindexes": [],
      "auto_increment": null,
      "columns": [],
      "pinned": "",
      "column_list_authoritative": false,
      "source": ""
    },
    "customer": {
      "type": "",
      "column_vindexes": [],
      "auto_increment": null,
      "columns": [],
      "pinned": "",
      "column_list_authoritative": false,
      "source": ""
    },
    "product": {
      "type": "",
      "column_vindexes": [],
      "auto_increment": null,
      "columns": [],
      "pinned": "",
      "column_list_authoritative": false,
      "source": ""
    }
  },
  "require_explicit_routing": false,
  "foreign_key_mode": "unspecified",
  "multi_tenant_spec": null
}
If this is not what you expected, check the input data (as JSON parsing will skip unexpected fields).
Starting vtgate...
vtgate is up!
Access vtgate at http://localhost.local:15001/debug/status
vtadmin-api http-origin set to "http://localhost.local:14201"
vtadmin-api is running!
  - API: http://localhost.local:14200
  - Logs: /Users/francesthai/planetscale/vitess/examples/local/vtdataroot/tmp/vtadmin-api.out
  - PID: 14248

Building vtadmin-web...
~/planetscale/vitess ~/planetscale/vitess/examples/local
~/planetscale/vitess/examples/local

Installing nvm...

nvm is already installed!

Configuring Node.js 20.12.2

v20.12.2 is already installed.
Now using node v20.12.2 (npm v10.6.0)

Setting VITE_VTADMIN_API_ADDRESS to "http://localhost.local:14200"

> [email protected] build
> vite build

vite v4.5.3 building for production...
transforming (1) index.html=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.2.0

YOUR TYPESCRIPT VERSION: 5.4.5

Please only submit bug reports when using the officially supported version.

=============
node_modules/@protobufjs/inquire/index.js (12:18) Use of eval in "node_modules/@protobufjs/inquire/index.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 1238 modules transformed.
build/assets/chevronUp-3d6782a5.svg              0.18 kB │ gzip:   0.16 kB
build/assets/chevronDown-02f94e73.svg            0.19 kB │ gzip:   0.16 kB
build/assets/download-8ef290b4.svg               0.21 kB │ gzip:   0.18 kB
build/assets/delete-a9184ef9.svg                 0.23 kB │ gzip:   0.18 kB
build/assets/info-2617ee9d.svg                   0.34 kB │ gzip:   0.23 kB
build/assets/circleAdd-cfd7e5db.svg              0.35 kB │ gzip:   0.23 kB
build/assets/alertFail-8056b6e4.svg              0.35 kB │ gzip:   0.23 kB
build/assets/checkSuccess-f8fd1dbb.svg           0.36 kB │ gzip:   0.23 kB
build/assets/search-3261bac7.svg                 0.41 kB │ gzip:   0.26 kB
build/assets/question-a67b2492.svg               0.46 kB │ gzip:   0.28 kB
build/assets/runQuery-edfab4ed.svg               0.49 kB │ gzip:   0.28 kB
build/assets/open-405dd348.svg                   0.49 kB │ gzip:   0.33 kB
build/index.html                                 0.90 kB │ gzip:   0.48 kB
build/assets/bug-5b6edb54.svg                    0.99 kB │ gzip:   0.54 kB
build/assets/topology-0032b65e.svg               1.62 kB │ gzip:   0.83 kB
build/assets/NotoMono-Regular-41fd7ccc.ttf     107.85 kB
build/assets/NotoSans-Regular-c8cff31f.ttf     313.14 kB
build/assets/NotoSans-SemiBold-43207822.ttf    313.72 kB
build/assets/NotoSans-Bold-c6a598dd.ttf        313.79 kB
build/assets/index-10400842.css                 73.63 kB │ gzip:  14.48 kB
build/assets/index-ed2c3038.js               3,333.75 kB │ gzip: 546.87 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 14.18s
vtadmin-web is running!
  - Browser: http://localhost.local:14201
  - Logs: /Users/francesthai/planetscale/vitess/examples/local/vtdataroot/tmp/vtadmin-web.out
  - PID: 15109

[notfelineit]

I might as well fix the typescript warning in this PR too 😄 Also will need to simulate different hostname/etc. setups to make sure this works for all. actually will separate those changes, so these can be backported

[notfelineit]

Ok, tested on my second macbook with a default hostname. It didn't work initially but does after the hostname changes. Some api-side changes may be necessary (always lowercase given http origin) as a final nail-in-the-coffin.

[frouioui]

Confirmed on my Mac and it works too! Thank you 🙇🏻

[frouioui]

ahh that was the issue?

[notfelineit]

Yes! 😄 CORS is case sensitive and I think mac OS comes with a default hostname that is capitalized!

[frouioui]

LGTM, thank you!