[DebuggerV2] Add basic ng impl of actions, store, data_source & new Alerts view

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/BUILD

@@ -1,6 +1,7 @@
 package(default_visibility = ["//tensorboard:internal"])
 
 load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("//tensorboard/defs:defs.bzl", "tf_ng_web_test_suite", "tf_ts_library")
 
 licenses(["notice"])  # Apache 2.0
 
@@ -19,9 +20,50 @@ ng_module(
         "debugger_component.ng.html",
     ],
     deps = [
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/actions",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/data_source",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/effects",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive",
+        "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@ngrx/effects",
         "@npm//@ngrx/store",
         "@npm//rxjs",
     ],
 )
+
+tf_ts_library(
+    name = "test_lib",
+    testonly = True,
+    srcs = [
+        "debugger_container_test.ts",
+    ],
+    tsconfig = "//:tsconfig-test",
+    deps = [
+        ":debugger_v2",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/actions",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:types",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive",
+        "//tensorboard/webapp/angular:expect_angular_core_testing",
+        "@npm//@angular/common",
+        "@npm//@angular/compiler",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "@npm//@ngrx/store",
+        "@npm//@types/jasmine",
+    ],
+)
+
+tf_ng_web_test_suite(
+    name = "karma_test",
+    deps = [
+        ":test_lib",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/effects:debugger_effects_test_lib",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:debugger_store_test_lib",
+    ],
+)

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/actions/BUILD

@@ -0,0 +1,17 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("//tensorboard/defs:defs.bzl", "tf_ts_library")
+
+licenses(["notice"])  # Apache 2.
+
+tf_ts_library(
+    name = "actions",
+    srcs = [
+        "debugger_actions.ts",
+        "index.ts",
+    ],
+    deps = [
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:types",
+        "@npm//@ngrx/store",
+    ],
+)

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/actions/debugger_actions.ts

@@ -0,0 +1,49 @@
+/* Copyright 2019 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 {DebuggerRunListing} from '../store/debugger_types';
+
+// HACK: Below import is for type inference.
+// https://github.com/bazelbuild/rules_nodejs/issues/1013
+/** @typehack */ import * as _typeHackModels from '@ngrx/store/src/models';
+
+/**
+ * Actions for Debugger V2.
+ */
+
+/**
+ * Actions for the Debugger Component.
+ */
+export const debuggerLoaded = createAction('[Debugger] Debugger Loaded');
+
+export const debuggerRunsRequested = createAction(
+  '[Debugger] Debugger Runs Requested'
+);
+
+export const debuggerRunsLoaded = createAction(
+  '[Debugger] Debugger Runs Loaded',
+  props<{runs: DebuggerRunListing}>()
+);
+
+export const debuggerRunsRequestFailed = createAction(
+  '[Debugger] Debugger Runs Request Failed'
+);
+
+/**
+ * Actions for the Alerts Component.
+ */
+export const alertsViewLoaded = createAction('[Debugger] Alerts View Loaded');

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/actions/index.ts

@@ -0,0 +1,16 @@
+/* Copyright 2019 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.
+==============================================================================*/
+
+export * from './debugger_actions';

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/data_source/BUILD

@@ -0,0 +1,17 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "data_source",
+    srcs = [
+        "tfdbg2_data_source.ts",
+        "tfdbg2_data_source_module.ts",
+    ],
+    deps = [
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:types",
+        "//tensorboard/webapp/angular:expect_angular_common_http",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+    ],
+)

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/data_source/tfdbg2_data_source.ts

@@ -0,0 +1,39 @@
+/* Copyright 2019 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 {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {DebuggerRunListing} from '../store/debugger_types';
+
+/** @typehack */ import * as _typeHackRxjs from 'rxjs';
+
+export abstract class Tfdbg2DataSource {
+  abstract fetchRuns(): Observable<DebuggerRunListing>;
+}
+
+@Injectable()
+export class Tfdbg2HttpServerDataSource implements Tfdbg2DataSource {
+  private readonly httpPathPrefix = 'data/plugin/debugger-v2';
+
+  constructor(private http: HttpClient) {}
+
+  fetchRuns() {
+    // TODO(cais): Once the backend uses an DataProvider that unifies tfdbg and
+    // non-tfdbg plugins, switch to using `tf_backend.runStore.refresh()`.
+    return this.http.get<DebuggerRunListing>(this.httpPathPrefix + '/runs');
+  }
+
+  // TODO(cais): Implement fetchEnvironments().
+}

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/data_source/tfdbg2_data_source_module.ts

@@ -0,0 +1,23 @@
+/* Copyright 2019 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 {HttpClientModule} from '@angular/common/http';
+import {Tfdbg2HttpServerDataSource} from './tfdbg2_data_source';
+
+@NgModule({
+  imports: [HttpClientModule],
+  providers: [Tfdbg2HttpServerDataSource],
+})
+export class Tfdbg2ServerDataSourceModule {}

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.ng.html

@@ -16,6 +16,11 @@
 -->
 
 <div>
-  <!-- TODO(cais): Use ngSwitch on the active/inactive state. -->
-  <tf-debugger-v2-inactive></tf-debugger-v2-inactive>
+  <tf-debugger-v2-inactive
+    *ngIf="runIds.length === 0; else dataAvailable"
+  ></tf-debugger-v2-inactive>
+  <ng-template #dataAvailable>
+    <tf-debugger-v2-alerts></tf-debugger-v2-alerts>
+    <!-- TODO(cais): Add more elements, such as timeline, graph, source code, etc.-->
+  </ng-template>
 </div>

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.ts

@@ -12,11 +12,18 @@ 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 {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {DebuggerRunListing} from './store/debugger_types';
 
 @Component({
   selector: 'debugger-component',
   templateUrl: './debugger_component.ng.html',
   styleUrls: ['./debugger_component.css'],
 })
-export class DebuggerComponent {}
+export class DebuggerComponent {
+  @Input()
+  runs: DebuggerRunListing = {};
+
+  @Input()
+  runIds: string[] = [];
+}

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container.ts

@@ -12,20 +12,39 @@ 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 {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
+import {Component, OnInit} from '@angular/core';
+import {createSelector, select, Store} from '@ngrx/store';
+import {DebuggerRunListing, State} from './store/debugger_types';
 
-/** @typehack */ import * as _typeHackRxjs from 'rxjs';
+import {debuggerLoaded} from './actions';
+import {getDebuggerRunListing} from './store';
 
-// TODO(cais): Move to a separate file.
-export interface State {}
+/** @typehack */ import * as _typeHackRxjs from 'rxjs';
 
 @Component({
   selector: 'tf-debugger-v2',
   template: `
-    <debugger-component></debugger-component>
+    <debugger-component
+      [runs]="runs$ | async"
+      [runIds]="runsIds$ | async"
+    ></debugger-component>
   `,
 })
-export class DebuggerContainer {
+export class DebuggerContainer implements OnInit {
+  readonly runs$ = this.store.pipe(select(getDebuggerRunListing));
+
+  readonly runsIds$ = this.store.pipe(
+    select(
+      createSelector(
+        getDebuggerRunListing,
+        (runs): string[] => Object.keys(runs)
+      )
+    )
+  );
+
   constructor(private readonly store: Store<State>) {}
+
+  ngOnInit(): void {
+    this.store.dispatch(debuggerLoaded());
+  }
 }