remove I prefix from interfaces. minor fixes on lint errors.

Author: eterna2

frontend/.gitignore

@@ -29,4 +29,4 @@ yarn-error.log*
 coverage
 
 # vscode
-.vscode
+.vscode

frontend/.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "name": "vscode-jest-tests",
+      "request": "launch",
+      "args": [
+        "test",
+        "--env=jsdom",
+        "--runInBand"
+      ],
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts-ts",
+      "protocol": "inspector"
+    }
+  ]
+}

frontend/server/app.ts

@@ -16,11 +16,11 @@ import * as express from 'express';
 import { Application, static as StaticHandler } from 'express';
 import * as proxy from 'http-proxy-middleware';
 
-import { IConfigs } from './configs';
+import { UIConfigs } from './configs';
 import { getAddress } from './utils';
 import { getBuildMetadata, getHealthzEndpoint, getHealthzHandler } from './handlers/healthz';
 import { getArtifactsHandler } from './handlers/artifacts';
-import { getCreateTensorboardHandler, getGetTensorboardHandler } from './handlers/tensorboard';
+import { getCreateTensorboardHandler, getTensorboardHandler, deleteTensorboardHandler } from './handlers/tensorboard';
 import { getPodLogsHandler } from './handlers/pod-logs';
 import { clusterNameHandler, projectIdHandler } from './handlers/core';
 import { getAllowCustomVisualizationsHandler } from './handlers/vis';
@@ -40,72 +40,101 @@ function getRegisterHandler(app: Application, basePath: string) {
   };
 }
 
+/**
+ * UIServer wraps around a express application to:
+ * - proxy requests to ml-pipeline api server
+ * - retrieve artifacts from the various backend
+ * - create and retrieve new viewer instances
+ * - serve static front-end resources (i.e. react app)
+ */
 export class UIServer {
   app: Application;
   httpServer?: Server;
 
-  constructor(public readonly options: IConfigs) {
+  constructor(public readonly options: UIConfigs) {
     this.app = createUIServer(options);
   }
 
+  /**
+   * Starts the http server.
+   * @param port optionally overwrite the provided port to listen to.
+   */
   start(port?: number | string) {
+    if (!!this.httpServer) {
+      throw new Error('UIServer already started.');
+    }
     port = port || this.options.server.port;
     this.httpServer = this.app.listen(port, () => {
       console.log('Server listening at http://localhost:' + port);
     });
     return this.httpServer;
   }
 
+  /**
+   * Stops the http server.
+   */
   close() {
-    return this.httpServer && this.httpServer.close();
+    if (!!this.httpServer) {
+      this.httpServer.close();
+    }
+    this.httpServer = undefined;
+    return this;
   }
 }
 
-function createUIServer(options: IConfigs) {
+function createUIServer(options: UIConfigs) {
   const currDir = path.resolve(__dirname);
   const basePath = options.server.basePath;
-  const apiVersion = options.server.apiVersion;
+  const apiVersionPrefix = options.server.apiVersionPrefix;
   const apiServerAddress = getAddress(options.pipeline);
   const envoyServiceAddress = getAddress(options.metadata.envoyService);
 
   const app: Application = express();
   const registerHandler = getRegisterHandler(app, basePath);
 
-  app.use(function(req, _, next) {
+  /** log to stdout */
+  app.use((req, _, next) => {
     console.info(req.method + ' ' + req.originalUrl);
     next();
   });
 
+  /** Healthz */
   registerHandler(
     app.get,
-    `/${apiVersion}/healthz`,
+    `/${apiVersionPrefix}/healthz`,
     getHealthzHandler({
-      healthzEndpoint: getHealthzEndpoint(apiServerAddress, options.server.apiVersion),
+      healthzEndpoint: getHealthzEndpoint(apiServerAddress, apiVersionPrefix),
       healthzStats: getBuildMetadata(currDir),
     }),
   );
 
+  /** Artifact */
   registerHandler(app.get, '/artifacts/get', getArtifactsHandler(options.artifacts));
 
-  registerHandler(app.get, '/apps/tensorboard', getGetTensorboardHandler());
+  /** Tensorboard viewer */
+  registerHandler(app.get, '/apps/tensorboard', getTensorboardHandler);
+  registerHandler(app.delete, '/apps/tensorboard', deleteTensorboardHandler);
   registerHandler(
     app.post,
     '/apps/tensorboard',
     getCreateTensorboardHandler(options.viewer.tensorboard.podTemplateSpec),
   );
 
+  /** Pod logs */
   registerHandler(app.get, '/k8s/pod/logs', getPodLogsHandler(options.argo, options.artifacts));
 
+  /** Cluster (GKS only) */
   registerHandler(app.get, '/system/cluster-name', clusterNameHandler);
   registerHandler(app.get, '/system/project-id', projectIdHandler);
 
+  /** Visualization */
   registerHandler(
     app.get,
     '/visualizations/allowed',
     getAllowCustomVisualizationsHandler(options.visualizations.allowCustomVisualizations),
   );
 
-  // Proxy metadata requests to the Envoy instance which will handle routing to the metadata gRPC server
+  /** Proxy metadata requests to the Envoy instance which will handle routing to the metadata gRPC server */
   app.all(
     '/ml_metadata.*',
     proxy({
@@ -119,11 +148,12 @@ function createUIServer(options: IConfigs) {
 
   // Order matters here, since both handlers can match any proxied request with a referer,
   // and we prioritize the basepath-friendly handler
-  proxyMiddleware(app, `${basePath}/${apiVersion}`);
-  proxyMiddleware(app, `/${apiVersion}`);
+  proxyMiddleware(app, `${basePath}/${apiVersionPrefix}`);
+  proxyMiddleware(app, `/${apiVersionPrefix}`);
 
+  /** Proxy to ml-pipeline api server */
   app.all(
-    `/${apiVersion}/*`,
+    `/${apiVersionPrefix}/*`,
     proxy({
       changeOrigin: true,
       onProxyReq: proxyReq => {
@@ -132,29 +162,33 @@ function createUIServer(options: IConfigs) {
       target: apiServerAddress,
     }),
   );
-
   app.all(
-    `${basePath}/${apiVersion}/*`,
+    `${basePath}/${apiVersionPrefix}/*`,
     proxy({
       changeOrigin: true,
       onProxyReq: proxyReq => {
         console.log('Proxied request: ', (proxyReq as any).path);
       },
-      pathRewrite: path =>
-        path.startsWith(basePath) ? path.substr(basePath.length, path.length) : path,
+      pathRewrite: pathStr =>
+        pathStr.startsWith(basePath) ? pathStr.substr(basePath.length, pathStr.length) : pathStr,
       target: apiServerAddress,
     }),
   );
 
-  // These pathes can be matched by static handler. Putting them before it to
-  // override behavior for index html.
+  /**
+   * Modify index.html.
+   * These pathes can be matched by static handler. Putting them before it to
+   * override behavior for index html.
+   */
   const indexHtmlHandler = getIndexHTMLHandler(options.server);
   registerHandler(app.get, '/', indexHtmlHandler);
   registerHandler(app.get, '/index.html', indexHtmlHandler);
 
+  /** Static resource (i.e. react app) */
   app.use(basePath, StaticHandler(options.server.staticDir));
   app.use(StaticHandler(options.server.staticDir));
 
+  /** Fallback to index.html */
   app.get('*', indexHtmlHandler);
 
   return app;

frontend/server/aws-helper.ts

@@ -13,8 +13,8 @@
 // limitations under the License.
 import fetch from 'node-fetch';
 
-/** IAWSMetadataCredentials describes the credentials provided by aws metadata store. */
-export interface IAWSMetadataCredentials {
+/** AWSMetadataCredentials describes the credentials provided by aws metadata store. */
+export interface AWSMetadataCredentials {
   Code: string;
   LastUpdated: string;
   Type: string;
@@ -39,7 +39,9 @@ async function getIAMInstanceProfile(): Promise<string | undefined> {
     }
     return;
   } catch (error) {
-    console.error(`Unable to fetch credentials from AWS metadata store: ${error}`);
+    console.error(
+      `Unable to fetch credentials from AWS metadata store (${metadataUrl}/iam/security-credentials/): ${error}`,
+    );
     return;
   }
 }
@@ -49,7 +51,7 @@ async function getIAMInstanceProfile(): Promise<string | undefined> {
  */
 class AWSInstanceProfileCredentials {
   _iamProfile?: string;
-  _credentials?: IAWSMetadataCredentials;
+  _credentials?: AWSMetadataCredentials;
   _expiration: number = 0;
 
   /** reset all caches */
@@ -64,7 +66,13 @@ class AWSInstanceProfileCredentials {
    * EC2 Instance profile
    */
   async profile() {
-    this._iamProfile = this._iamProfile || (await getIAMInstanceProfile());
+    if (!this._iamProfile) {
+      try {
+        this._iamProfile = await getIAMInstanceProfile();
+      } catch (err) {
+        console.error(err);
+      }
+    }
     return this._iamProfile;
   }
 
@@ -80,10 +88,12 @@ class AWSInstanceProfileCredentials {
     }
   }
 
-  async _fetchCredentials(): Promise<IAWSMetadataCredentials | undefined> {
+  async _fetchCredentials(): Promise<AWSMetadataCredentials | undefined> {
     try {
-      const resp = await fetch(`${metadataUrl}/iam/security-credentials/${await this.profile()}`);
-      return resp.json();
+      const profile = await this.profile();
+      const resp = await fetch(`${metadataUrl}/iam/security-credentials/${profile}`);
+      const credentials = await resp.json();
+      return credentials;
     } catch (error) {
       console.error(`Unable to fetch credentials from AWS metadata store: ${error}`);
       return;
@@ -93,13 +103,15 @@ class AWSInstanceProfileCredentials {
   /**
    * Get the AWS metadata store session credentials.
    */
-  async getCredentials(): Promise<IAWSMetadataCredentials> {
+  async getCredentials(): Promise<AWSMetadataCredentials> {
     // query for credentials if going to expire or no credentials yet
     if (Date.now() + 10 >= this._expiration || !this._credentials) {
       this._credentials = await this._fetchCredentials();
-      if (this._credentials && this._credentials.Expiration)
+      if (this._credentials && this._credentials.Expiration) {
         this._expiration = new Date(this._credentials.Expiration).getTime();
-      else this._expiration = -1; // always retry
+      } else {
+        this._expiration = -1; // always retry
+      }
     }
     return this._credentials;
   }