Angular 9 followup (#3230)

* Turn on template checking Signed-off-by: michael sorens <msorens@chef.io> * Fix mismatched function signature error TS2554: Expected 0 arguments, but got 1 <input chefInput formControlName="newPassword" type="password" (keyup)="handlePasswordInput($event)" /> Signed-off-by: michael sorens <msorens@chef.io> * Fix incompatible types error TS2367: This condition will always return 'false' since the types 'CredentialTypes' and 'string' have no overlap. <ng-container *ngIf="credential.type === 'ssh'"> Signed-off-by: michael sorens <msorens@chef.io> * Cast AbstractControl to FormGroup error TS2339: Property 'controls' does not exist on type 'AbstractControl'. <div class="field" *ngIf="form.controls['end'].controls['include'].value"> Signed-off-by: michael sorens <msorens@chef.io> * Add missing trackBy function error TS2339: Property 'trackBy' does not exist on type 'SearchBarFilterBarComponent'. <span *ngFor="let filter of filters; index as i; trackBy: trackBy;"> Signed-off-by: michael sorens <msorens@chef.io> * Change symbol used in template to public error TS2341: Property 'selectedStatus$' is private and only accessible within class 'ServiceGroupsComponent'. <h3>None of the service groups returned {{ selectedStatus$ | async }}</h3> Signed-off-by: michael sorens <msorens@chef.io> * Accept Date type in datetime pipe Handful of these errors due to feeding in a data type that was not present: error TS2345: Argument of type 'Date' is not assignable to parameter of type 'string | Moment'. Run succeeded {{ nodeRun.endTime | datetime: RFC2822 }} Signed-off-by: michael sorens <msorens@chef.io> * Remove browser warning This browser console warning occurs on DataFeed page and Notifications page: core.js:12557 Can't bind to 'contrasting-background' since it isn't a known property of 'chef-page-header'. Signed-off-by: michael sorens <msorens@chef.io> * Correct invalid expression error TS2365: Operator '>' cannot be applied to types 'boolean' and 'number'. 50 <li *ngIf="inputText !== '' && delayForNoSuggestions && !filterValues.length > 0" class="no-category-items"> Signed-off-by: michael sorens <msorens@chef.io> * Add types for animation in policy-add-members (#3180) Signed-off-by: seajamied <jdegnan@chef.io> * Event feed guitar strings template error The incorrect type of parameter was being passed to the zoombutton. Signed-off-by: Lance Finfrock <lfinfrock@chef.io> * Jamie/angular 9 followup fixes 2 (#3189) * Fix status type on reporting component Signed-off-by: seajamied <jdegnan@chef.io> * Add types to reporting summary Signed-off-by: seajamied <jdegnan@chef.io> * Add disconnected group to initial model and type for disconnected services Signed-off-by: seajamied <jdegnan@chef.io> * Add stronger typing to report data service and reporting component Signed-off-by: seajamied <jdegnan@chef.io> * Inprove import and add more strong typing Signed-off-by: seajamied <jdegnan@chef.io> * Follow-on unit test fixes Signed-off-by: michael sorens <msorens@chef.io> * Fix failing job-form e2e specs Signed-off-by: Scott Christopherson <scott@chef.io> Co-authored-by: Jamie D <jamie.degnan@gmail.com> Co-authored-by: Lance Finfrock <lfinfrock@chef.io> Co-authored-by: Scott Christopherson <scott@chef.io>
chef · Mar 31, 2020 · 228e5a1 · 228e5a1
1 parent b36116d
commit 228e5a1
Show file tree

Hide file tree

Showing 26 changed files with 69 additions and 44 deletions.
diff --git a/components/automate-ui/src/app/entities/service-groups/service-groups.model.ts b/components/automate-ui/src/app/entities/service-groups/service-groups.model.ts
@@ -33,6 +33,7 @@ export interface ServiceGroupsHealthSummary {
   warning: number;
   critical: number;
   unknown: number;
+  disconnected: number;
 }
 
 export interface ServiceGroupsSuggestions {

diff --git a/components/automate-ui/src/app/entities/service-groups/service-groups.reducer.ts b/components/automate-ui/src/app/entities/service-groups/service-groups.reducer.ts
@@ -29,7 +29,8 @@ export const ServiceGroupEntityInitialState: ServiceGroupsEntityState = {
     ok: 0,
     warning: 0,
     critical: 0,
-    unknown: 0
+    unknown: 0,
+    disconnected: 0
   },
   list: [],
   selectedGroup: {
@@ -47,7 +48,8 @@ export const ServiceGroupEntityInitialState: ServiceGroupsEntityState = {
         ok: 0,
         warning: 0,
         critical: 0,
-        unknown: 0
+        unknown: 0,
+        disconnected: 0
       },
       list: [],
       status: EntityStatus.notLoaded

diff --git a/components/automate-ui/src/app/modules/license/license-lockout/license-lockout.component.ts b/components/automate-ui/src/app/modules/license/license-lockout/license-lockout.component.ts
@@ -205,7 +205,7 @@ export class LicenseLockoutComponent implements AfterViewInit {
     }
   }
 
-  private openModal() {
+  public openModal() {
     this.startListening();
     this.modalVisible = true;
     this.sessionStorage.putBoolean(this.chefSessionService.userWelcomeModalSeenKey(), true);

diff --git a/components/automate-ui/src/app/modules/policy/add-members/policy-add-members.component.ts b/components/automate-ui/src/app/modules/policy/add-members/policy-add-members.component.ts
@@ -88,6 +88,9 @@ export class PolicyAddMembersComponent implements OnInit, OnDestroy {
   public nameOrId: string;
   public ldapOrSaml = false;
 
+  // Animation
+  public triggerValue: 'void' | '*';
+
 
   constructor(
     private store: Store<NgrxStateAtom>,

diff --git a/components/automate-ui/src/app/modules/policy/details/policy-details.component.ts b/components/automate-ui/src/app/modules/policy/details/policy-details.component.ts
@@ -34,7 +34,7 @@ export class PolicyDetailsComponent implements OnInit, OnDestroy {
   private url: string;
   // Map of local user and team member IDs to URLs.
   // Will not contain LDAP, SAML, or * members.
-  private memberURLs: { [id: string]: string[] } = {};
+  public memberURLs: { [id: string]: string[] } = {};
 
   private isDestroyed: Subject<boolean> = new Subject<boolean>();
 

diff --git a/components/automate-ui/src/app/modules/token/token-list/api-token-list.component.html b/components/automate-ui/src/app/modules/token/token-list/api-token-list.component.html
@@ -1,7 +1,7 @@
 <div class="content-container">
   <div class="container token-container">
     <main>
-      <chef-page-header contrastingBackground>
+      <chef-page-header>
         <chef-heading>API Tokens</chef-heading>
         <chef-subheading>API Tokens are used to access the Chef Automate API.</chef-subheading>
       </chef-page-header>

diff --git a/components/automate-ui/src/app/modules/user/user-details/user-details.component.html b/components/automate-ui/src/app/modules/user/user-details/user-details.component.html
@@ -5,7 +5,7 @@
         <chef-breadcrumb [link]="['/settings/users']">Users</chef-breadcrumb>
         {{ userDetails.user?.name }}
       </chef-breadcrumbs>
-  
+
       <chef-page-header>
         <div class="detail-row">
           <div class="name-column">
@@ -58,7 +58,7 @@
           <chef-form-field class="password">
             <label>
               <span class="label">New Password <span aria-hidden="true">*</span></span>
-              <input chefInput formControlName="newPassword" type="password" (keyup)="handlePasswordInput($event)" />
+              <input chefInput formControlName="newPassword" type="password" (keyup)="handlePasswordInput()" />
             </label>
             <chef-error
               *ngIf="(userDetails.passwordForm.get('newPassword').hasError('required') || userDetails.passwordForm.get('newPassword').hasError('pattern')) && userDetails.passwordForm.get('newPassword').dirty">

diff --git a/...rc/app/page-components/event-feed-guitar-strings/event-feed-guitar-strings.component.html b/...rc/app/page-components/event-feed-guitar-strings/event-feed-guitar-strings.component.html
@@ -3,7 +3,7 @@
     <svg id="guitar-string-zoom-slider" width="100%" height="30">
       <ng-container *ngFor="let date of buttonDates; let i = index">
         <rect class="guitar-string-zoom-button"
-          [attr.width]="zoomButtonWidth(buttonDates)"
+          [attr.width]="zoomButtonWidth()"
           height="100%"
           [attr.x]="zoomButtonPosition(i)"
           y="0"

diff --git a/.../src/app/page-components/event-feed-guitar-strings/event-feed-guitar-strings.component.ts b/.../src/app/page-components/event-feed-guitar-strings/event-feed-guitar-strings.component.ts
@@ -581,7 +581,7 @@ export class EventFeedGuitarStringsComponent implements OnInit, OnChanges {
     });
   }
 
-  zoomButtonWidth(_length: number) {
+  zoomButtonWidth() {
     return this.sliderGrid + '%';
   }
 

diff --git a/...ts/automate-ui/src/app/page-components/job-schedule-form/job-schedule-form.component.html b/...ts/automate-ui/src/app/page-components/job-schedule-form/job-schedule-form.component.html
@@ -32,7 +32,7 @@ <h4>Set optional scan date and schedule for scans</h4>
         Set schedule
       </label>
     </div>
-    <div class="schedule-body" *ngIf="form.controls['include'].value">
+    <div class="schedule-body" *ngIf="form.get('include').value">
       <fieldset formGroupName="start">
         <label>Start</label>
         <div class="field">
@@ -67,7 +67,7 @@ <h4>Set optional scan date and schedule for scans</h4>
           <input type="checkbox" formControlName="include" />
           End
         </label>
-        <div class="field" *ngIf="form.controls['end'].controls['include'].value">
+        <div class="field" *ngIf="form.get('end.include').value">
           <chef-form-field formGroupName="datetime">
             <div class="datetime">
               <select formControlName="date">
@@ -99,7 +99,7 @@ <h4>Set optional scan date and schedule for scans</h4>
           <input type="checkbox" formControlName="include" />
           Repeat every
         </label>
-        <div class="field" *ngIf="form.controls['repeat'].controls['include'].value">
+        <div class="field" *ngIf="form.get('repeat.include').value">
           <chef-form-field>
             <input type="number" chefInput formControlName="interval" min="1" />
           </chef-form-field>

diff --git a/...omate-ui/src/app/page-components/search-bar-filter-bar/search-bar-filter-bar.component.ts b/...omate-ui/src/app/page-components/search-bar-filter-bar/search-bar-filter-bar.component.ts
@@ -23,4 +23,9 @@ export class SearchBarFilterBarComponent {
   onRemoveFilterClick(filter: any): void {
     this.filterRemoved.emit({ detail: filter});
   }
+
+  trackBy(_index: number, filter: Chicklet): string {
+    return filter.text;
+  }
+
 }
diff --git a/components/automate-ui/src/app/pages/+compliance/+credentials/credentials.state.ts b/components/automate-ui/src/app/pages/+compliance/+credentials/credentials.state.ts
@@ -22,10 +22,10 @@ interface KVData {
 }
 
 export enum CredentialTypes {
-  None = <any>'none',
-  SSH = <any>'ssh',
-  WinRM = <any>'winrm',
-  Sudo = <any>'sudo'
+  None = 'none',
+  SSH = 'ssh',
+  WinRM = 'winrm',
+  Sudo = 'sudo'
 }
 
 export interface Credential {

diff --git a/...c/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html b/...c/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html
@@ -47,7 +47,7 @@
       <li *ngIf="inputText !== '' && isLoadingSuggestions" class="suggestion-status">
           Loading...
       </li>
-      <li *ngIf="inputText !== '' && delayForNoSuggestions && !filterValues.length > 0" class="no-category-items">
+      <li *ngIf="inputText !== '' && delayForNoSuggestions && filterValues.length === 0" class="no-category-items">
         No matching result found
       </li>
       <li *ngFor="let value of filterValues; let i = index"

diff --git a/components/automate-ui/src/app/pages/+compliance/+reporting/reporting.component.spec.ts b/components/automate-ui/src/app/pages/+compliance/+reporting/reporting.component.spec.ts
@@ -16,7 +16,8 @@ import {
   SuggestionsService,
   ReportQueryService,
   ReportDataService,
-  ReportQuery
+  ReportQuery,
+  ReportingSummary
 } from '../shared/reporting';
 import { TelemetryService } from '../../../services/telemetry/telemetry.service';
 import { FeatureFlagsService } from 'app/services/feature-flags/feature-flags.service';
@@ -220,9 +221,7 @@ describe('ReportingComponent', () => {
         {type: {name: 'Platform'}, value: { id: 'ubuntu'}}
       ]
     };
-    const reportingSummaryData = {
-      'duration': 49258.00239,
-      'start_date': '2017-06-22T00:21:21Z',
+    const reportingSummaryData: ReportingSummary = {
       'stats': {
         'environments': 15,
         'nodes': 15,

diff --git a/components/automate-ui/src/app/pages/+compliance/+reporting/reporting.component.ts b/components/automate-ui/src/app/pages/+compliance/+reporting/reporting.component.ts
@@ -20,7 +20,8 @@ import {
   SuggestionsService,
   ReportDataService,
   ReportQueryService,
-  ReportQuery
+  ReportQuery,
+  ReportingSummaryStatus
 } from '../shared/reporting';
 import { LayoutFacadeService, Sidebar } from 'app/entities/layout/layout.facade';
 import { saveAs } from 'file-saver';
@@ -411,7 +412,7 @@ export class ReportingComponent implements OnInit, OnDestroy {
     this.showSummary = !this.showSummary;
   }
 
-  getIcon(status) {
+  getIcon(status: ReportingSummaryStatus): string {
     switch (status) {
       case 'failed': return 'report_problem';
       case 'passed': return 'check_circle';
@@ -421,7 +422,7 @@ export class ReportingComponent implements OnInit, OnDestroy {
     }
   }
 
-  formatSummaryPhrase(status) {
+  formatSummaryPhrase(status: ReportingSummaryStatus): string {
     switch (status) {
       case 'failed': return 'Not Compliant';
       case 'passed': return 'Compliant';

diff --git a/components/automate-ui/src/app/pages/+compliance/shared/reporting/report-data.service.ts b/components/automate-ui/src/app/pages/+compliance/shared/reporting/report-data.service.ts
@@ -4,12 +4,17 @@ import { StatsService } from './stats.service';
 import { TelemetryService } from '../../../../services/telemetry/telemetry.service';
 import { ReportQuery } from './report-query.service';
 
-interface ReportingSummary {
+export type ReportingSummaryStatus = 'failed' | 'passed' | 'waived' | 'skipped' | 'unknown';
+
+export interface ReportingSummary {
   stats: {
     nodes: any;
     profiles: any;
     controls?: any;
+    platforms: number;
+    environments: number;
   };
+  status: ReportingSummaryStatus;
 }
 
 @Injectable()

diff --git a/components/automate-ui/src/app/pages/data-feed/data-feed.component.html b/components/automate-ui/src/app/pages/data-feed/data-feed.component.html
@@ -5,7 +5,7 @@
   </div>
   <div class="container">
     <main>
-      <chef-page-header [contrasting-background]="false">
+      <chef-page-header>
         <chef-heading>Data Feeds</chef-heading>
         <chef-subheading>Data Feed for bulk client data and compliance reports.</chef-subheading>
       </chef-page-header>

diff --git a/components/automate-ui/src/app/pages/notifications/notifications.component.html b/components/automate-ui/src/app/pages/notifications/notifications.component.html
@@ -5,7 +5,7 @@
   </div>
   <div class="container">
     <main>
-      <chef-page-header [contrasting-background]="false">
+      <chef-page-header>
         <chef-heading>Notifications</chef-heading>
         <chef-subheading>Notifications for Inspec compliance scans and Chef client runs.</chef-subheading>
       </chef-page-header>

diff --git a/components/automate-ui/src/app/pages/project/rules/project-rules.component.html b/components/automate-ui/src/app/pages/project/rules/project-rules.component.html
@@ -74,7 +74,7 @@
 
             <div class="condition-item"
               [formGroupName]="i"
-              *ngFor="let condition of ruleForm.get('conditions').controls; let i = index">
+              *ngFor="let condition of conditionControls; let i = index">
 
               <chef-form-field class="attribute-field">
                 <label>
@@ -89,7 +89,7 @@
                   </span>
                 </label>
                 <chef-error
-                  *ngIf="ruleForm.get('conditions').controls[i].get('attribute').hasError('required') && ruleForm.get('conditions').controls[i].get('attribute').touched"
+                  *ngIf="conditionControls[i].get('attribute').hasError('required') && conditionControls[i].get('attribute').touched"
                 >Attribute is required.</chef-error>
               </chef-form-field>
 
@@ -105,21 +105,21 @@
                   </span>
                 </label>
                 <chef-error
-                  *ngIf="ruleForm.get('conditions').controls[i].get('operator').hasError('required') && ruleForm.get('conditions').controls[i].get('operator').touched"
+                  *ngIf="conditionControls[i].get('operator').hasError('required') && conditionControls[i].get('operator').touched"
                 >Operator is required.</chef-error>
               </chef-form-field>
 
               <chef-form-field class="attribute-field">
                 <label>
                   <span class="label">Value</span>
-                  <input chefInput formControlName="values" 
+                  <input chefInput formControlName="values"
                         [value]="condition.controls.values.value" data-cy="rule-value"
                   />
                 </label>
                 <div>
                   <chef-error
-                      *ngIf="( ruleForm.get('conditions').controls[i].get('values').hasError('required') && ruleForm.get('conditions').controls[i].get('values').touched )
-                              || ( ruleForm.get('conditions').controls[i].get('values').hasError('pattern') && ruleForm.get('conditions').controls[i].get('values').dirty )"
+                      *ngIf="( conditionControls[i].get('values').hasError('required') && conditionControls[i].get('values').touched )
+                              || ( conditionControls[i].get('values').hasError('pattern') && conditionControls[i].get('values').dirty )"
                     >Value is required.</chef-error>
                 </div>
                 <small class="help"

diff --git a/components/automate-ui/src/app/pages/project/rules/project-rules.component.ts b/components/automate-ui/src/app/pages/project/rules/project-rules.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, FormArray, Validators, AbstractControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Subject, combineLatest, Observable } from 'rxjs';
@@ -309,4 +309,8 @@ export class ProjectRulesComponent implements OnInit, OnDestroy {
     return event.key === 'Shift' || event.key === 'Tab';
   }
 
+  get conditionControls(): { [key: string]: AbstractControl } {
+    return (this.ruleForm.get('conditions') as FormGroup).controls;
+  }
+
 }
diff --git a/components/automate-ui/src/app/pages/service-groups/service-groups.component.spec.ts b/components/automate-ui/src/app/pages/service-groups/service-groups.component.spec.ts
@@ -79,7 +79,8 @@ describe('ServiceGroupsComponent', () => {
           ok: 10,
           warning: 5,
           critical: 5,
-          unknown: 1
+          unknown: 1,
+          disconnected: 0
         }));
       });
 

diff --git a/components/automate-ui/src/app/pages/service-groups/service-groups.component.ts b/components/automate-ui/src/app/pages/service-groups/service-groups.component.ts
@@ -63,7 +63,7 @@ export class ServiceGroupsComponent implements OnInit, OnDestroy {
 
   // The currently selected health status filter
   public selectedStatus = 'total';
-  private selectedStatus$: Observable<string>;
+  public selectedStatus$: Observable<string>;
 
   // The collection of allowable status
   private allowedStatus = ['ok', 'critical', 'warning', 'unknown', 'disconnected'];

diff --git a/components/automate-ui/src/app/pipes/datetime.pipe.spec.ts b/components/automate-ui/src/app/pipes/datetime.pipe.spec.ts
@@ -23,4 +23,11 @@ describe('DatetimePipe', () => {
     expect(result).toEqual('2018, April 9');
   });
 
+  it('returns a formatted string when given a Date', () => {
+    const datetime = new Date(2018, 3, 9);
+    const formatStr = 'YYYY, MMMM D';
+    const result = pipe.transform(datetime, formatStr);
+    expect(result).toEqual('2018, April 9');
+  });
+
 });
diff --git a/components/automate-ui/src/app/pipes/datetime.pipe.ts b/components/automate-ui/src/app/pipes/datetime.pipe.ts
@@ -11,7 +11,7 @@ import * as moment from 'moment';
 })
 export class DatetimePipe implements PipeTransform {
 
-  public transform(value: moment.Moment | string, formatStr: string): string {
+  public transform(value: moment.Moment | Date | string, formatStr: string): string {
     const datetime = moment.isMoment(value) ? value : moment.utc(value);
     return datetime.format(formatStr);
   }

diff --git a/components/automate-ui/tsconfig.json b/components/automate-ui/tsconfig.json
@@ -23,6 +23,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true
   },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true
+  },
   "exclude": [
     "**/node_modules/*",
     "dist/*",

diff --git a/components/chef-ui-library/src/molecules/chef-page-header/chef-page-header.tsx b/components/chef-ui-library/src/molecules/chef-page-header/chef-page-header.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Prop, h } from '@stencil/core';
+import { Component, Element, h } from '@stencil/core';
 
 /**
  * @description
@@ -57,12 +57,6 @@ import { Component, Element, Prop, h } from '@stencil/core';
   styleUrl: './chef-page-header.scss'
 })
 export class ChefPageHeader {
-  /**
-   * Toggles a white/transparent background. The background is white by default, it will
-   * be transparent if you set this to 'false'.
-   */
-  @Prop() contrastingBackground = true;
-
   @Element() el: HTMLElement;
 
   componentDidLoad() {