Merge remote-tracking branch 'other/add-vtadmin-docker-image' into ad…

…d-vtadmin-docker-image Signed-off-by: Léopold Jacquot <[email protected]>
vitessio · Jun 23, 2022 · 95e6be9 · 95e6be9
2 parents ed78100 + d8ca36a
commit 95e6be9
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 10 deletions.
diff --git a/web/vtadmin/src/api/http.ts b/web/vtadmin/src/api/http.ts
@@ -41,7 +41,7 @@ export const vtfetch = async (endpoint: string, options: RequestInit = {}): Prom
             throw new Error(`Cannot execute write request in read-only mode: ${options.method} ${endpoint}`);
         }
 
-        const url = `${env.REACT_APP_VTADMIN_API_ADDRESS}${endpoint}`;
+        const url = `${env().REACT_APP_VTADMIN_API_ADDRESS}${endpoint}`;
         const opts = { ...vtfetchOpts(), ...options };
 
         let response = null;
@@ -86,7 +86,7 @@ export const vtfetch = async (endpoint: string, options: RequestInit = {}): Prom
 };
 
 export const vtfetchOpts = (): RequestInit => {
-    const credentials = env.REACT_APP_FETCH_CREDENTIALS;
+    const credentials = env().REACT_APP_FETCH_CREDENTIALS;
     if (credentials && credentials !== 'omit' && credentials !== 'same-origin' && credentials !== 'include') {
         throw Error(
             `Invalid fetch credentials property: ${credentials}. Must be undefined or one of omit, same-origin, include`
@@ -383,7 +383,7 @@ export interface TabletDebugVarsResponse {
 }
 
 export const fetchExperimentalTabletDebugVars = async (params: FetchTabletParams): Promise<TabletDebugVarsResponse> => {
-    if (!env.REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS) {
+    if (!env().REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS) {
         return Promise.resolve({ params });
     }
 

diff --git a/web/vtadmin/src/components/routes/Settings.tsx b/web/vtadmin/src/components/routes/Settings.tsx
@@ -27,7 +27,7 @@ export const Settings = () => {
                 <h1 className="mt-8">Settings</h1>
 
                 <h2 className="mt-12 mb-8">Environment variables</h2>
-                <pre>{JSON.stringify(env, null, 2)}</pre>
+                <pre>{JSON.stringify(env(), null, 2)}</pre>
 
                 {process.env.NODE_ENV !== 'production' && (
                     <>

diff --git a/web/vtadmin/src/components/routes/tablet/Tablet.tsx b/web/vtadmin/src/components/routes/tablet/Tablet.tsx
@@ -126,7 +126,7 @@ export const Tablet = () => {
                         <div>
                             <Code code={JSON.stringify(tablet, null, 2)} />
 
-                            {env.REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS && (
+                            {env().REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS && (
                                 <Code code={JSON.stringify(debugVars, null, 2)} />
                             )}
                         </div>

diff --git a/web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx b/web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
@@ -107,7 +107,7 @@ export const WorkflowStreams = ({ clusterID, keyspace, name }: Props) => {
 
     return (
         <div className="mt-12 mb-16">
-            {env.REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS && (
+            {env().REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS && (
                 <>
                     <h3 className="my-8">Stream VReplication Lag</h3>
                     <WorkflowStreamsLagChart clusterID={clusterID} keyspace={keyspace} workflowName={name} />

diff --git a/web/vtadmin/src/errors/errorHandler.ts b/web/vtadmin/src/errors/errorHandler.ts
@@ -64,7 +64,7 @@ export const notify = (error: Error, metadata?: object) => {
  * leaking sensitive environment variables, like API keys.
  */
 const sanitizeEnv = () =>
-    pick(env, [
+    pick(env(), [
         'REACT_APP_BUILD_BRANCH',
         'REACT_APP_BUILD_SHA',
         'REACT_APP_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS',

diff --git a/web/vtadmin/src/react-app-env.d.ts b/web/vtadmin/src/react-app-env.d.ts
@@ -44,5 +44,5 @@ declare namespace NodeJS {
 }
 
 interface Window {
-    env: any;
+    env: NodeJS.ProcessEnv;
 }
diff --git a/web/vtadmin/src/util/env.ts b/web/vtadmin/src/util/env.ts
@@ -13,9 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export var env: NodeJS.ProcessEnv = { ...window.env, ...process.env };
+
+export const env: ()=> NodeJS.ProcessEnv = () => { 
+    return {...window.env, ...process.env };
+};
 
 // process.env variables are always strings, hence this tiny helper function
 // to transmute it into a boolean. It is a function, rather than a constant,
 // to support dynamic updates to process.env in tests.
-export const isReadOnlyMode = (): boolean => env.REACT_APP_READONLY_MODE === 'true';
+export const isReadOnlyMode = (): boolean => env().REACT_APP_READONLY_MODE === 'true';