Introduce alert snackbar UI

tensorboard/webapp/BUILD

@@ -38,6 +38,7 @@ ng_module(
         "selectors.ts",
     ],
     deps = [
+        "//tensorboard/webapp/alert/store",
         "//tensorboard/webapp/app_routing/store",
         "//tensorboard/webapp/experiments/store:selectors",
         "//tensorboard/webapp/metrics/store",
@@ -74,6 +75,8 @@ ng_module(
         ":mat_icon",
         ":oss_plugins_module",
         ":reducer_config",
+        "//tensorboard/webapp/alert",
+        "//tensorboard/webapp/alert/views:alert_snackbar",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/app_routing",
         "//tensorboard/webapp/app_routing:route_registry",
@@ -106,6 +109,7 @@ ng_module(
         "app_state.ts",
     ],
     deps = [
+        "//tensorboard/webapp/alert/store:types",
         "//tensorboard/webapp/app_routing/store:types",
         "//tensorboard/webapp/core/store",
         "//tensorboard/webapp/experiments/store:types",
@@ -204,6 +208,9 @@ tensorboard_html_binary(
 tf_ng_web_test_suite(
     name = "karma_test",
     deps = [
+        "//tensorboard/webapp/alert:test_lib",
+        "//tensorboard/webapp/alert/store:test_lib",
+        "//tensorboard/webapp/alert/views:views_test",
         "//tensorboard/webapp/app_routing:app_routing_test",
         "//tensorboard/webapp/app_routing:route_config_test",
         "//tensorboard/webapp/app_routing:testing",
@@ -259,6 +266,7 @@ tf_ng_web_test_suite(
         "//tensorboard/webapp/plugins/text_v2/effects:effects_test_lib",
         "//tensorboard/webapp/plugins/text_v2/store:store_test_lib",
         "//tensorboard/webapp/reloader:test_lib",
+        "//tensorboard/webapp/routes:routes_test_lib",
         "//tensorboard/webapp/runs/data_source:runs_data_source_test",
         "//tensorboard/webapp/runs/effects:effects_test",
         "//tensorboard/webapp/runs/store:store_test",

tensorboard/webapp/alert/BUILD

@@ -0,0 +1,64 @@
+load("//tensorboard/defs:defs.bzl", "tf_ts_library")
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+package(default_visibility = ["//tensorboard:internal"])
+
+ng_module(
+    name = "alert",
+    srcs = [
+        "alert_module.ts",
+    ],
+    deps = [
+        ":alert_action",
+        "//tensorboard/webapp/alert/effects",
+        "//tensorboard/webapp/alert/store",
+        "//tensorboard/webapp/alert/store:types",
+        "//tensorboard/webapp/alert/views:alert_snackbar",
+        "@npm//@angular/core",
+        "@npm//@ngrx/effects",
+        "@npm//@ngrx/store",
+    ],
+)
+
+ng_module(
+    name = "alert_action",
+    srcs = [
+        "alert_action_module.ts",
+    ],
+    deps = [
+        ":types",
+        "@npm//@angular/core",
+        "@npm//@ngrx/store",
+    ],
+)
+
+tf_ts_library(
+    name = "types",
+    srcs = [
+        "types.ts",
+    ],
+)
+
+tf_ts_library(
+    name = "test_lib",
+    testonly = True,
+    srcs = [
+        "alert_action_test.ts",
+    ],
+    deps = [
+        ":alert_action",
+        "//tensorboard/webapp:app_state",
+        "//tensorboard/webapp/alert/actions",
+        "//tensorboard/webapp/alert/effects",
+        "//tensorboard/webapp/alert/store",
+        "//tensorboard/webapp/angular:expect_angular_core_testing",
+        "//tensorboard/webapp/angular:expect_ngrx_store_testing",
+        "@npm//@angular/common",
+        "@npm//@angular/compiler",
+        "@npm//@angular/core",
+        "@npm//@ngrx/effects",
+        "@npm//@ngrx/store",
+        "@npm//@types/jasmine",
+        "@npm//rxjs",
+    ],
+)

tensorboard/webapp/alert/actions/BUILD

@@ -0,0 +1,17 @@
+load("//tensorboard/defs:defs.bzl", "tf_ts_library")
+
+package(default_visibility = ["//tensorboard:internal"])
+
+tf_ts_library(
+    name = "actions",
+    srcs = [
+        "index.ts",
+    ],
+    visibility = [
+        "//tensorboard/webapp/alert:__subpackages__",
+    ],
+    deps = [
+        "//tensorboard/webapp/alert:types",
+        "@npm//@ngrx/store",
+    ],
+)

tensorboard/webapp/alert/actions/index.ts

@@ -0,0 +1,28 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {createAction, props} from '@ngrx/store';
+
+import {AlertReport} from '../types';
+
+/** @typehack */ import * as _typeHackModels from '@ngrx/store/src/models';
+/** @typehack */ import * as _typeHackStore from '@ngrx/store';
+
+/**
+ * Fires when an alert is to be reported.
+ */
+export const alertReported = createAction(
+  '[Alert] Alert Reported',
+  props<AlertReport>()
+);

tensorboard/webapp/alert/alert_action_module.ts

@@ -0,0 +1,119 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {
+  Inject,
+  ModuleWithProviders,
+  NgModule,
+  Optional,
+  InjectionToken,
+} from '@angular/core';
+import {Action, ActionCreator, Creator} from '@ngrx/store';
+import {AlertReport} from './types';
+
+// While this token is not used outside, it must be exported so that stricter
+// build tools may discover it during compilation.
+export const ACTION_TO_ALERT_PROVIDER = new InjectionToken<
+  ActionToAlertConfig[]
+>('[Alert] Action-To-Alert Provider');
+
+export type ActionToAlertTransformer = (action: Action) => AlertReport | null;
+
+export interface ActionToAlertConfig {
+  /**
+   * The action to listen for.
+   */
+  actionCreator: ActionCreator<string, Creator>;
+
+  /**
+   * A function that returns an alert report, or null, when the action is
+   * received.
+   */
+  alertFromAction: ActionToAlertTransformer;
+}
+
+/**
+ * An NgModule that provides alert-producing actions. These action configs are
+ * collected by AlertModule, which tracks application alerts.
+ *
+ * When the configured action fires, the AlertModule may respond.
+ *
+ * @NgModule({
+ *   imports: [
+ *     AlertActionModule.registerAlertActions([
+ *       {
+ *         action: fetchKeysFailed,
+ *         alertFromAction: () => {localizedMessage: "Keys failed to fetch."},
+ *       },
+ *       {
+ *         action: greenButtonClicked,
+ *         alertFromAction: (actionPayload) => {
+ *           if (!actionPayload.wasButtonEnabled) {
+ *             return {localizedMessage: "Green button failed."};
+ *           }
+ *           return null;
+ *         }
+ *       }
+ *     ]),
+ *   ],
+ * })
+ */
+@NgModule({})
+export class AlertActionModule {
+  /**
+   * Map from action creator type to transformer function.
+   */
+  private readonly providers = new Map<string, ActionToAlertTransformer>();
+
+  constructor(
+    @Optional()
+    @Inject(ACTION_TO_ALERT_PROVIDER)
+    providers: ActionToAlertConfig[][]
+  ) {
+    for (const configs of providers || []) {
+      for (const config of configs) {
+        if (this.providers.has(config.actionCreator.type)) {
+          throw new RangeError(
+            `"${config.actionCreator.type}" is already registered for alerts.` +
+              ' Multiple alerts for the same action is not allowed.'
+          );
+        }
+        this.providers.set(config.actionCreator.type, config.alertFromAction);
+      }
+    }
+  }
+
+  getAlertFromAction(action: Action): AlertReport | null {
+    const lambda = this.providers.get(action.type);
+    if (!lambda) {
+      return null;
+    }
+    return lambda(action);
+  }
+
+  static registerAlertActions(
+    providerFactory: () => ActionToAlertConfig[]
+  ): ModuleWithProviders<AlertActionModule> {
+    return {
+      ngModule: AlertActionModule,
+      providers: [
+        {
+          provide: ACTION_TO_ALERT_PROVIDER,
+          multi: true,
+          useFactory: providerFactory,
+        },
+      ],
+    };
+  }
+}

tensorboard/webapp/alert/alert_action_test.ts

@@ -0,0 +1,87 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {TestBed} from '@angular/core/testing';
+import {EffectsModule} from '@ngrx/effects';
+import {provideMockActions} from '@ngrx/effects/testing';
+import {Action, createAction, Store} from '@ngrx/store';
+import {MockStore, provideMockStore} from '@ngrx/store/testing';
+import {ReplaySubject} from 'rxjs';
+import {State} from '../app_state';
+import * as alertActions from './actions';
+import {AlertActionModule} from './alert_action_module';
+import {AlertEffects} from './effects';
+
+const alertActionOccurred = createAction('[Test] Action Occurred (need alert)');
+const noAlertActionOccurred = createAction('[Test] Action Occurred (no alert)');
+
+describe('alert_effects', () => {
+  let actions$: ReplaySubject<Action>;
+  let store: MockStore<Partial<State>>;
+  let recordedActions: Action[] = [];
+  let shouldReportAlert: boolean;
+
+  beforeEach(async () => {
+    shouldReportAlert = false;
+    actions$ = new ReplaySubject<Action>(1);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        AlertActionModule.registerAlertActions(() => [
+          {
+            actionCreator: alertActionOccurred,
+            alertFromAction: (action: Action) => {
+              if (shouldReportAlert) {
+                return {localizedMessage: 'alert details'};
+              }
+              return null;
+            },
+          },
+        ]),
+        EffectsModule.forFeature([AlertEffects]),
+        EffectsModule.forRoot([]),
+      ],
+      providers: [provideMockActions(actions$), provideMockStore({})],
+    }).compileComponents();
+
+    store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
+    recordedActions = [];
+    spyOn(store, 'dispatch').and.callFake((action: Action) => {
+      recordedActions.push(action);
+    });
+  });
+
+  it(`reports an alert when 'alertFromAction' returns a report`, () => {
+    shouldReportAlert = true;
+    actions$.next(alertActionOccurred);
+
+    expect(recordedActions).toEqual([
+      alertActions.alertReported({localizedMessage: 'alert details'}),
+    ]);
+  });
+
+  it(`does not alert when 'alertFromAction' returns null`, () => {
+    shouldReportAlert = false;
+    actions$.next(alertActionOccurred);
+
+    expect(recordedActions).toEqual([]);
+  });
+
+  it(`does not alert when a non-matching action is fired`, () => {
+    shouldReportAlert = true;
+    actions$.next(noAlertActionOccurred);
+
+    expect(recordedActions).toEqual([]);
+  });
+});

tensorboard/webapp/alert/alert_module.ts

@@ -0,0 +1,32 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {NgModule} from '@angular/core';
+import {EffectsModule} from '@ngrx/effects';
+import {StoreModule} from '@ngrx/store';
+import {AlertActionModule} from './alert_action_module';
+import {AlertEffects} from './effects';
+import {reducers} from './store';
+import {ALERT_FEATURE_KEY} from './store/alert_types';
+import {AlertSnackbarModule} from './views/alert_snackbar_module';
+
+@NgModule({
+  imports: [
+    AlertActionModule,
+    AlertSnackbarModule,
+    StoreModule.forFeature(ALERT_FEATURE_KEY, reducers),
+    EffectsModule.forFeature([AlertEffects]),
+  ],
+})
+export class AlertModule {}