Skip to content

Commit 1474df0

Browse files
JamesHollyerdna2github
JamesHollyer
authored and
dna2github
committed
Feature Helper: add route and build page (tensorflow#5760)
* Feature Helper: add route and build page * fix lint issues * fix BUILD lint issues * CR * BUILD lint * CR2 * BUILD lint
1 parent 3111b4b commit 1474df0

File tree

10 files changed

+176
-0
lines changed

10 files changed

+176
-0
lines changed

‎tensorboard/webapp/app_routing/internal_utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ export function getDeepLinkGroup(routeKind: RouteKind): DeepLinkGroup | null {
179179
return DeepLinkGroup.DASHBOARD;
180180
case RouteKind.UNKNOWN:
181181
case RouteKind.NOT_SET:
182+
case RouteKind.FLAGS:
182183
return null;
183184
}
184185
}

‎tensorboard/webapp/app_routing/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export enum RouteKind {
3535
// Temporary enum values until we can remove special cases in core_effects to
3636
// handle TensorBoard applications with no routes defined.
3737
NOT_SET,
38+
FLAGS,
3839
}
3940

4041
export const DEFAULT_EXPERIMENT_ID = 'defaultExperimentId';

‎tensorboard/webapp/feature_flag/views/BUILD‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
load("//tensorboard/defs:defs.bzl", "tf_ng_module", "tf_sass_binary")
2+
3+
package(default_visibility = ["//tensorboard:internal"])
4+
5+
licenses(["notice"])
6+
7+
tf_sass_binary(
8+
name = "style",
9+
src = "feature_flag_page_style.scss",
10+
deps = ["//tensorboard/webapp:angular_material_sass_deps"],
11+
)
12+
13+
tf_ng_module(
14+
name = "views",
15+
srcs = [
16+
"feature_flag_module.ts",
17+
"feature_flag_page_component.ts",
18+
"feature_flag_page_container.ts",
19+
],
20+
assets = [
21+
":style",
22+
"feature_flag_page.ng.html",
23+
],
24+
deps = [
25+
"//tensorboard/webapp:app_state",
26+
"//tensorboard/webapp/angular:expect_angular_material_checkbox",
27+
"//tensorboard/webapp/feature_flag/store",
28+
"//tensorboard/webapp/feature_flag/store:types",
29+
"@npm//@angular/common",
30+
"@npm//@angular/core",
31+
"@npm//@ngrx/store",
32+
],
33+
)

‎tensorboard/webapp/feature_flag/views/feature_flag_module.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.
14+
==============================================================================*/
15+
import {CommonModule} from '@angular/common';
16+
import {NgModule} from '@angular/core';
17+
import {MatCheckboxModule} from '@angular/material/checkbox';
18+
import {FeatureFlagPageComponent} from './feature_flag_page_component';
19+
import {FeatureFlagPageContainer} from './feature_flag_page_container';
20+
21+
/**
22+
* Provides the wrapper component that renders the main dashboard page.
23+
*/
24+
@NgModule({
25+
declarations: [FeatureFlagPageComponent, FeatureFlagPageContainer],
26+
imports: [CommonModule, MatCheckboxModule],
27+
exports: [FeatureFlagPageContainer],
28+
entryComponents: [FeatureFlagPageContainer],
29+
})
30+
export class FeatureFlagPageModule {}

‎tensorboard/webapp/feature_flag/views/feature_flag_page.ng.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
@license
3+
Copyright 2022 The TensorFlow Authors. All Rights Reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<div>
19+
<table>
20+
<ng-container *ngFor="let flag of getFlagKeys();">
21+
<tr>
22+
<mat-checkbox
23+
[checked]="featureFlags[flag]"
24+
(change)="flagChanged(flag)"
25+
>Enabled</mat-checkbox
26+
>
27+
{{flag}}
28+
</tr>
29+
</ng-container>
30+
</table>
31+
</div>

‎tensorboard/webapp/feature_flag/views/feature_flag_page_component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.
14+
==============================================================================*/
15+
import {Component, Input} from '@angular/core';
16+
import {FeatureFlagState} from '../store/feature_flag_types';
17+
@Component({
18+
selector: 'feature-flag-page-component',
19+
templateUrl: `feature_flag_page.ng.html`,
20+
})
21+
export class FeatureFlagPageComponent {
22+
@Input() featureFlags!: FeatureFlagState;
23+
24+
getFlagKeys(): string[] {
25+
return Object.keys(this.featureFlags);
26+
}
27+
28+
flagChanged(flag: string) {
29+
// TODO: dispatch action which stores new flag states and updates state.
30+
}
31+
}

‎tensorboard/webapp/feature_flag/views/feature_flag_page_container.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.
14+
==============================================================================*/
15+
import {Component} from '@angular/core';
16+
import {Store} from '@ngrx/store';
17+
import {State} from '../../app_state';
18+
import {getFeatureFlags} from '../store/feature_flag_selectors';
19+
@Component({
20+
selector: 'feature-flag-page',
21+
template: `<feature-flag-page-component
22+
[featureFlags]="featureFlags$ | async"
23+
></feature-flag-page-component>`,
24+
})
25+
export class FeatureFlagPageContainer {
26+
constructor(private readonly store: Store<State>) {}
27+
readonly featureFlags$ = this.store.select(getFeatureFlags);
28+
}

‎tensorboard/webapp/feature_flag/views/feature_flag_page_style.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.
14+
==============================================================================*/

‎tensorboard/webapp/routes/BUILD‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ tf_ts_library(
1313
":dashboard_deeplink_provider",
1414
"//tensorboard/webapp/app_routing:route_config",
1515
"//tensorboard/webapp/app_routing:types",
16+
"//tensorboard/webapp/feature_flag/views",
1617
"//tensorboard/webapp/tb_wrapper",
1718
"@npm//@angular/core",
1819
],

‎tensorboard/webapp/routes/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ limitations under the License.
1515
import {Component, Type} from '@angular/core';
1616
import {RouteDef} from '../app_routing/route_config_types';
1717
import {RouteKind} from '../app_routing/types';
18+
import {FeatureFlagPageContainer} from '../feature_flag/views/feature_flag_page_container';
1819
import {TensorBoardWrapperComponent} from '../tb_wrapper/tb_wrapper_component';
1920
import {DashboardDeepLinkProvider} from './dashboard_deeplink_provider';
2021

@@ -27,5 +28,10 @@ export function routesFactory(): RouteDef[] {
2728
defaultRoute: true,
2829
deepLinkProvider: new DashboardDeepLinkProvider(),
2930
},
31+
{
32+
routeKind: RouteKind.FLAGS,
33+
path: '/flags/',
34+
ngComponent: FeatureFlagPageContainer as Type<Component>,
35+
},
3036
];
3137
}

0 commit comments

Comments
 (0)