add clear all pins button in the pinned view container

Author: roseayeon

Diff for: tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss

@@ -26,6 +26,25 @@ mat-icon {
   margin-right: 5px;
 }
 
+.group-toolbar {
+  justify-content: space-between;
+}
+
+.left-items {
+  display: flex;
+  align-items: center;
+}
+
+.right-items {
+  button {
+    $_height: 25px;
+    font-size: 12px;
+    font-weight: normal;
+    height: $_height;
+    line-height: $_height;
+  }
+}
+
 .group-text {
   display: flex;
   align-items: baseline;

Diff for: tensorboard/webapp/metrics/views/main_view/pinned_view_component.ts

@@ -12,31 +12,44 @@ 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 {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
 import {CardObserver} from '../card_renderer/card_lazy_loader';
 import {CardIdWithMetadata} from '../metrics_view_types';
 
 @Component({
   selector: 'metrics-pinned-view-component',
   template: `
     <div class="group-toolbar">
-      <mat-icon svgIcon="keep_24px"></mat-icon>
-      <span class="group-text">
-        <span class="group-title" aria-role="heading" aria-level="3"
-          >Pinned</span
-        >
-        <span *ngIf="cardIdsWithMetadata.length > 1" class="group-card-count"
-          >{{ cardIdsWithMetadata.length }} cards</span
-        >
-        <span *ngIf="lastPinnedCardTime">
-          <span
-            *ngFor="let id of [lastPinnedCardTime]"
-            [attr.data-id]="id"
-            class="new-card-pinned"
-            >New card pinned</span
+      <div class="left-items">
+        <mat-icon svgIcon="keep_24px"></mat-icon>
+        <span class="group-text">
+          <span class="group-title" aria-role="heading" aria-level="3"
+            >Pinned</span
           >
+          <span *ngIf="cardIdsWithMetadata.length > 1" class="group-card-count"
+            >{{ cardIdsWithMetadata.length }} cards</span
+          >
+          <span *ngIf="lastPinnedCardTime">
+            <span
+              *ngFor="let id of [lastPinnedCardTime]"
+              [attr.data-id]="id"
+              class="new-card-pinned"
+              >New card pinned</span
+            >
+          </span>
         </span>
-      </span>
+      </div>
+      <div class="right-items" *ngIf="cardIdsWithMetadata.length > 0">
+        <button mat-stroked-button (click)="onClearAllPinsClicked.emit()">
+          Clear all pins
+        </button>
+      </div>
     </div>
     <metrics-card-grid
       *ngIf="cardIdsWithMetadata.length; else emptyPinnedView"
@@ -54,4 +67,5 @@ export class PinnedViewComponent {
   @Input() cardObserver!: CardObserver;
   @Input() cardIdsWithMetadata!: CardIdWithMetadata[];
   @Input() lastPinnedCardTime!: number;
+  @Output() onClearAllPinsClicked = new EventEmitter<void>();
 }

Diff for: tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts

@@ -21,6 +21,7 @@ import {DeepReadonly} from '../../../util/types';
 import {getLastPinnedCardTime, getPinnedCardsWithMetadata} from '../../store';
 import {CardObserver} from '../card_renderer/card_lazy_loader';
 import {CardIdWithMetadata} from '../metrics_view_types';
+import {metricsClearAllPinnedCards} from '../../actions';
 
 @Component({
   selector: 'metrics-pinned-view',
@@ -29,6 +30,7 @@ import {CardIdWithMetadata} from '../metrics_view_types';
       [cardIdsWithMetadata]="cardIdsWithMetadata$ | async"
       [lastPinnedCardTime]="lastPinnedCardTime$ | async"
       [cardObserver]="cardObserver"
+      (onClearAllPinsClicked)="onClearAllPinsClicked()"
     ></metrics-pinned-view-component>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -47,4 +49,8 @@ export class PinnedViewContainer {
     // pins after page load.
     skip(1)
   );
+
+  onClearAllPinsClicked() {
+    this.store.dispatch(metricsClearAllPinnedCards());
+  }
 }