diff --git a/ui/README.md b/ui/README.md index 13bb86cb8..98c139769 100644 --- a/ui/README.md +++ b/ui/README.md @@ -9,10 +9,10 @@ The following are needed to run the UI: -* [node](https://nodejs.org/en/blog/release/v12.21.0/) -* [npm](https://github.com/npm/cli/tree/v7.22.0) - -*It is recomended to build the UI using [yarn](https://www.npmjs.com/package/yarn)* +* [node - lts/fermium](https://nodejs.org/en/blog/release/v14.21.3/) +* [npm](https://github.com/npm/cli/tree/v6.14.18) +> If using [nvm](https://github.com/nvm-sh/nvm), simply run +> `nvm install lts/fermium` ### Install @@ -24,7 +24,7 @@ git clone git@github.com:orb-community/orb.git --no-checkout --depth 1 ${path} # however you clone the project cd ${path}/ui -yarn install +npm install ``` ### Usage @@ -32,7 +32,7 @@ yarn install A developer build from the source can be achieved using the following command: ```bash -yarn build +npm run build ``` *(Check [package.json](./package.json) file for available tasks.)* @@ -42,7 +42,7 @@ yarn build While developing, it is useful to serve UI locally and have your changes to the code having effect immediately. -The commands `yarn start` and `yarn start:withmock` will generate a dev build and serve it at `http://localhost:4200/`. +The command `npm run start` will generate a dev build and serve it at `http://localhost:4200/`. *(Note that `http://localhost:4200/` is for development use only, and is not intended to be used by the end-user.)* @@ -69,9 +69,7 @@ fs.inotify.max_user_watches=524288 See [data examples](https://github.com/orb-community/orb/wiki/Orb-UI---Entities-Data-Examples) for examples of *Orb Entities* to aid in UI design , form validation and related info. - --- - ## QA & Testing Quality Assurance & Test frameworks and scripts are still a *WORK IN PROGRESS* diff --git a/ui/package.json b/ui/package.json index d2661df79..daafae70b 100644 --- a/ui/package.json +++ b/ui/package.json @@ -21,8 +21,9 @@ "test": "ng test", "test:coverage": "rimraf coverage && npm run test -- --code-coverage", "lint": "ng lint", - "lint:fix": "ng lint orb-ui --fix", + "lint:fix": "tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'", "lint:styles": "stylelint ./src/**/*.scss", + "lint:styles:fix": "stylelint ./src/**/*.scss --fix", "lint:ci": "npm run lint && npm run lint:styles", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "ng e2e", diff --git a/ui/src/app/@core/core.module.ts b/ui/src/app/@core/core.module.ts index 7ea5a6ce7..8f8a1f888 100644 --- a/ui/src/app/@core/core.module.ts +++ b/ui/src/app/@core/core.module.ts @@ -49,8 +49,8 @@ export const NB_CORE_PROVIDERS = [ method: 'put', redirect: { success: '/auth/login', - failure: null - } + failure: null, + }, }, logout: { method: null, redirect: { success: '/', failure: '/' } }, @@ -94,7 +94,7 @@ export const NB_CORE_PROVIDERS = [ }, tos: { required: true, - } + }, }, }, }).providers, diff --git a/ui/src/app/@theme/styles/_overrides.scss b/ui/src/app/@theme/styles/_overrides.scss index 3ed4e8c5a..98553d87a 100644 --- a/ui/src/app/@theme/styles/_overrides.scss +++ b/ui/src/app/@theme/styles/_overrides.scss @@ -111,7 +111,7 @@ background: #969fb9; border-radius: 16px; } - scrollbar-color: #969fb9 #969fb980; + scrollbar-color: #969fb9 #969fb980; margin: 20px 0 !important; } @@ -274,7 +274,7 @@ } } .delete-selected { - color: #ffffff !important; + color: #ffffff !important; font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: none !important; @@ -311,10 +311,10 @@ input { } .next-button { border-radius: 16px !important; - background: #3089FC !important; + background: #3089fc !important; padding: 8px 24px !important; color: #fff !important; - border: none !important; + border: none !important; outline: none !important; font-size: 14px !important; font-weight: 600 !important; @@ -328,14 +328,14 @@ input { background: #2b3148 !important; } .cancel-back-button { - border-radius: 16px !important;; + border-radius: 16px !important; padding: 8px 24px !important; background-color: transparent !important; - color: #3089FC !important; + color: #3089fc !important; border: none !important; outline: none !important; font-size: 14px !important; - font-weight: 600 !important; + font-weight: 600 !important; transition: background-color 0.3s ease !important; margin-right: 0 !important; font-family: 'Montserrat'; diff --git a/ui/src/app/auth/components/auth.component.scss b/ui/src/app/auth/components/auth.component.scss index 6bf4c46ee..310b18736 100644 --- a/ui/src/app/auth/components/auth.component.scss +++ b/ui/src/app/auth/components/auth.component.scss @@ -1,3 +1,7 @@ +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; +@import '../../@theme/styles/themes'; + :host { $auth-layout-padding: 2.5rem; @@ -29,7 +33,7 @@ margin: auto; } -media-breakpoint-down(sm) { +@include media-breakpoint-down(sm) { nb-card { border-radius: 0; height: 100vh; @@ -39,10 +43,12 @@ media-breakpoint-down(sm) { ::ng-deep { nb-layout .layout .layout-container .content .columns nb-layout-column { padding: $auth-layout-padding; - - media-breakpoint-down(sm) { - padding: 0; } + @include media-breakpoint-down(sm) { + nb-layout .layout .layout-container .content .columns nb-layout-column { + padding: 0; + } } + } } diff --git a/ui/src/app/auth/pages/login/login.component.scss b/ui/src/app/auth/pages/login/login.component.scss index 3f009f11c..01f47cce5 100644 --- a/ui/src/app/auth/pages/login/login.component.scss +++ b/ui/src/app/auth/pages/login/login.component.scss @@ -53,7 +53,7 @@ top: 0; width: 600px; - input[type="checkbox"] { + input[type='checkbox'] { height: 2rem; padding: 0 1rem; margin-top: 0.5rem; diff --git a/ui/src/app/auth/pages/register/register.component.ts b/ui/src/app/auth/pages/register/register.component.ts index 24b15a02c..46547661f 100644 --- a/ui/src/app/auth/pages/register/register.component.ts +++ b/ui/src/app/auth/pages/register/register.component.ts @@ -59,7 +59,7 @@ export class RegisterComponent extends NbRegisterComponent implements OnInit { this.errors = this.messages = []; this.submitted = true; this.repeatedEmail = null; - + const { email, password, company } = this.user; this.authService .register(this.strategy, { @@ -87,7 +87,7 @@ export class RegisterComponent extends NbRegisterComponent implements OnInit { } } }); - + } authenticateAndRedirect(email, password) { diff --git a/ui/src/app/common/interfaces/orb/sink.interface.ts b/ui/src/app/common/interfaces/orb/sink.interface.ts index 658618577..084c7cace 100644 --- a/ui/src/app/common/interfaces/orb/sink.interface.ts +++ b/ui/src/app/common/interfaces/orb/sink.interface.ts @@ -23,7 +23,7 @@ export enum SinkStates { */ export enum SinkBackends { prometheus = 'prometheus', - otlp = 'otlphttp' + otlp = 'otlphttp', } /** diff --git a/ui/src/app/common/interfaces/orb/sink/config/otlp.config.interface.ts b/ui/src/app/common/interfaces/orb/sink/config/otlp.config.interface.ts index 4d191fce6..f3643b832 100644 --- a/ui/src/app/common/interfaces/orb/sink/config/otlp.config.interface.ts +++ b/ui/src/app/common/interfaces/orb/sink/config/otlp.config.interface.ts @@ -23,13 +23,13 @@ export interface OtlpConfig extends SinkConfig { * Username|Email(?) {string} */ username?: string; - } + }; exporter: |any| { /** * Endpoint (Otlp sinks) or Remote Host (Prometheus sink) Link {string} */ endpoint?: string; remote_host?: string; - } - -} \ No newline at end of file + }; + +} diff --git a/ui/src/app/common/services/code.editor.service.ts b/ui/src/app/common/services/code.editor.service.ts index 07a00df63..ad45681d5 100644 --- a/ui/src/app/common/services/code.editor.service.ts +++ b/ui/src/app/common/services/code.editor.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from "@angular/core"; +import { Injectable } from '@angular/core'; import * as YAML from 'yaml'; @Injectable({ @@ -29,8 +29,8 @@ export class CodeEditorService { } checkEmpty (object) { - for (let key in object) { - if (object[key] === "" || typeof object[key] === "undefined" || object[key] === null) { + for (const key in object) { + if (object[key] === '' || typeof object[key] === 'undefined' || object[key] === null) { return true; } } diff --git a/ui/src/app/common/services/dataset/dataset.policies.service.ts b/ui/src/app/common/services/dataset/dataset.policies.service.ts index 97697e5a4..78f88c959 100644 --- a/ui/src/app/common/services/dataset/dataset.policies.service.ts +++ b/ui/src/app/common/services/dataset/dataset.policies.service.ts @@ -40,7 +40,7 @@ export class DatasetPoliciesService { .get(`${environment.datasetPoliciesUrl}/${id}`) .pipe( catchError((err) => { - if (err.status !== 404 && err.error.error !== "non-existent entity") { + if (err.status !== 404 && err.error.error !== 'non-existent entity') { this.notificationsService.error( 'Failed to fetch Dataset of this Policy', `Error: ${err.status} - ${err.statusText}`, diff --git a/ui/src/app/common/services/filter.service.ts b/ui/src/app/common/services/filter.service.ts index 8d1d46701..f97cc3b45 100644 --- a/ui/src/app/common/services/filter.service.ts +++ b/ui/src/app/common/services/filter.service.ts @@ -75,7 +75,7 @@ export class FilterService { } removeFilterByParam(param: string) { - this.removeFilter(this._filters.findIndex((filter) => filter.param === param && filter.name === 'Name' && filter)); + this.removeFilter(this._filters.findIndex((f) => f.param === param && f.name === 'Name' && f)); } // make a decorator out of this? diff --git a/ui/src/app/common/services/orb.service.ts b/ui/src/app/common/services/orb.service.ts index acf5f0aa8..83307c547 100644 --- a/ui/src/app/common/services/orb.service.ts +++ b/ui/src/app/common/services/orb.service.ts @@ -74,7 +74,7 @@ export class OrbService implements OnDestroy { this.pollController$.pipe( switchMap((control) => { if (control === PollControls.RESUME) - return defer(() => timer(1, this.pollInterval)); + return defer(() => timer(1, this.pollInterval)); return EMPTY; }), ), @@ -116,12 +116,11 @@ export class OrbService implements OnDestroy { if (localStorage.getItem(pollIntervalKey)) { pollInterval = Number(localStorage.getItem(pollIntervalKey)); - } - else { + } else { pollInterval = 60000; localStorage.setItem(pollIntervalKey, pollInterval.toString()); } - + return pollInterval; } @@ -209,7 +208,7 @@ export class OrbService implements OnDestroy { : of([]); return groups$.pipe(map((groups) => ({ agent, groups, datasets }))); }), - ) + ), ); } @@ -267,8 +266,8 @@ export class OrbService implements OnDestroy { policy: { ...policy, groups, datasets }, groups, })), - ) - ); + ), + ); } getSinkView(id: string) { diff --git a/ui/src/app/pages/dashboard/dashboard.component.scss b/ui/src/app/pages/dashboard/dashboard.component.scss index af7247aa2..601e0580b 100644 --- a/ui/src/app/pages/dashboard/dashboard.component.scss +++ b/ui/src/app/pages/dashboard/dashboard.component.scss @@ -1,5 +1,5 @@ nb-card { - margin: 10px 10px !important; + margin: 10px !important; nb-card-header { text-align: center; background: #232940; diff --git a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss index 26d282f03..e52cebafa 100644 --- a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss +++ b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss @@ -219,4 +219,4 @@ nb-accordion { .input-agent-group { width: 560px; -} \ No newline at end of file +} diff --git a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss index 81b9bcd2f..e1d089dab 100644 --- a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss +++ b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss @@ -23,7 +23,7 @@ mat-chip nb-icon { font-size: 1rem; } label { - color: #969FB9; + color: #969fb9; } ngx-tag-control, ngx-tag-display { @@ -33,36 +33,34 @@ ngx-tag-control, ngx-tag-display { .review-label { font-family: 'Montserrat'; font-size: 13px; - font-weight: 400 !important; + font-weight: 400 !important; margin: 0; color: #969fb9 !important; } .language-button { border-radius: 16px; - - padding: 8px 24px; + padding: 8px 24px; color: #fff; - border: none; + border: none; outline: none; font-size: 14px; font-weight: 600; transition: background-color 0.2s ease; - margin: 8px 4px 8px 4px; + margin: 8px 4px; width: 90px; - } .div-language-button { - background-color: #24293E; + background-color: #24293e; width: fit-content; - padding: 0 4px 0 4px; + padding: 0 4px; border-radius: 25px; margin-bottom: 20px; } .true { - background: #3089FC; + background: #3089fc; } .false { - background-color: #181C2F; + background-color: #181c2f; } ::ng-deep { @@ -264,10 +262,10 @@ ngx-tag-control, ngx-tag-display { color: #969fb9 !important; } .align { - margin: 0px; + margin: 0; } .errorMessage { color: #df316f; font-size: 14px; font-weight: 600; -} \ No newline at end of file +} diff --git a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts index bc0704ce1..22e0d3994 100644 --- a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts +++ b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { NotificationsService } from 'app/common/services/notifications/notifications.service'; import { ActivatedRoute, Router } from '@angular/router'; @@ -21,7 +21,7 @@ const CONFIG = { templateUrl: './agent.policy.add.component.html', styleUrls: ['./agent.policy.add.component.scss'], }) -export class AgentPolicyAddComponent { +export class AgentPolicyAddComponent implements OnInit { strings = { stepper: STRINGS.stepper }; // #forms @@ -102,7 +102,7 @@ input: tap: default_pcap kind: collection`; - codejson = + codejson = `{ "handlers": { "modules": { @@ -137,9 +137,9 @@ kind: collection`; selectedTags: Tags; - uploadIconKey = 'upload-outline' + uploadIconKey = 'upload-outline'; - isRequesting: boolean; + isRequesting: boolean; constructor( private agentPoliciesService: AgentPoliciesService, @@ -165,7 +165,7 @@ kind: collection`; .then(() => this.updateForms()) .catch((reason) => console.warn(`Couldn't fetch ${this.agentPolicy?.backend} data. Reason: ${reason}`)); } - ngOnInit(): void { + ngOnInit() { this.selectedTags = this.agentPolicy?.tags || {}; } resizeComponents() { @@ -285,7 +285,7 @@ kind: collection`; onFileSelected(event: any) { const file: File = event.target.files[0]; const reader: FileReader = new FileReader(); - + reader.onload = (e: any) => { const fileContent = e.target.result; if (this.isJsonMode) { @@ -294,7 +294,7 @@ kind: collection`; this.codeyaml = fileContent; } }; - + reader.readAsText(file); } onSubmit() { @@ -309,9 +309,8 @@ kind: collection`; policy: policy, version: !!this.isEdit && !!this.agentPolicy.version && this.agentPolicy.version || 1, tags: this.selectedTags, - } - } - else { + }; + } else { payload = { name: this.detailsFG.controls.name.value, description: this.detailsFG.controls.description.value, @@ -338,15 +337,14 @@ kind: collection`; ); this.isRequesting = false; }, - ); + ); } canCreate() { if (this.isJsonMode) { if (this.editor.isJson(this.codejson)) { this.errorConfigMessage = ''; return true; - } - else { + } else { this.errorConfigMessage = 'Invalid JSON configuration, check syntax errors'; return false; } @@ -354,15 +352,14 @@ kind: collection`; if (this.editor.isYaml(this.codeyaml) && !this.editor.isJson(this.codeyaml)) { this.errorConfigMessage = ''; return true; - } - else { + } else { this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors'; return false; } } } refreshEditor() { - this.editorVisible = false; setTimeout(() => { this.editorVisible = true; }, 0); + this.editorVisible = false; setTimeout(() => { this.editorVisible = true; }, 0); } - + } diff --git a/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.scss b/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.scss index 87db6a24b..725ba81bb 100644 --- a/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.scss +++ b/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.scss @@ -52,5 +52,5 @@ nb-card { } span { - color: #3089fc; -} \ No newline at end of file + color: #3089fc; +} diff --git a/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.ts b/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.ts index ce767ad28..dcae99434 100644 --- a/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.ts +++ b/ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.ts @@ -8,7 +8,7 @@ import { NbDialogRef } from '@nebular/theme'; }) export class PolicyDuplicateComponent { - @Input() policy: string + @Input() policy: string; constructor( protected dialogRef: NbDialogRef, ) { @@ -22,4 +22,4 @@ export class PolicyDuplicateComponent { this.dialogRef.close(false); } -} \ No newline at end of file +} diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.scss b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.scss index 289605f05..c96f4474f 100644 --- a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.scss +++ b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.scss @@ -202,7 +202,7 @@ mat-chip-list { } } -.orb-service-{ +.orb-service- { &in { color: #6fcf97; } @@ -221,4 +221,4 @@ mat-chip-list { } input[type=checkbox] { margin-left: 10px; -} \ No newline at end of file +} diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts index e54b32e47..68d834553 100644 --- a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts +++ b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts @@ -100,7 +100,7 @@ export class AgentPolicyListComponent this.selected = []; this.policies$ = combineLatest([ this.orb.getPolicyListView(), - this.orb.getDatasetListView() + this.orb.getDatasetListView(), ]).pipe( filter(([policies, datasets]) => policies !== undefined && policies !== null && datasets !== undefined && datasets !== null), map(([policies, datasets]) => { @@ -108,7 +108,7 @@ export class AgentPolicyListComponent const dataset = datasets.filter((d) => d.valid && d.agent_policy_id === policy.id); return { ...policy, policy_usage: dataset.length > 0 ? AgentPolicyUsage.inUse : AgentPolicyUsage.notInUse }; }); - }) + }), ); this.filterOptions = [ @@ -164,7 +164,7 @@ export class AgentPolicyListComponent if (confirm) { this.duplicatePolicy(agentPolicy); } - }) + }); } duplicatePolicy(agentPolicy: any) { this.agentPoliciesService @@ -181,7 +181,7 @@ export class AgentPolicyListComponent } }); } - + ngOnDestroy(): void { if (this.policiesSubscription) { this.policiesSubscription.unsubscribe(); @@ -331,7 +331,7 @@ export class AgentPolicyListComponent }); } onOpenDeleteSelected() { - const elementName = "Policies" + const elementName = 'Policies'; const selected = this.selected; this.dialogService .open(DeleteSelectedComponent, { @@ -351,19 +351,18 @@ export class AgentPolicyListComponent deleteSelectedAgentsPolicy() { this.selected.forEach((policy) => { this.agentPoliciesService.deleteAgentPolicy(policy.id).subscribe(); - }) + }); this.notificationsService.success('All selected Policies delete requests succeeded', ''); } - public onCheckboxChange(event: any, row: any): void { + public onCheckboxChange(event: any, row: any): void { const policySelected = { id: row.id, name: row.name, usage: row.policy_usage, - } + }; if (this.getChecked(row) === false) { this.selected.push(policySelected); - } - else { + } else { for (let i = 0; i < this.selected.length; i++) { if (this.selected[i].id === row.id) { this.selected.splice(i, 1); @@ -387,7 +386,7 @@ export class AgentPolicyListComponent id: row.id, name: row.name, usage: row.policy_usage, - } + }; this.selected.push(policySelected); }); }); diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts index 814ec9526..ef57e5d91 100644 --- a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts +++ b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts @@ -86,8 +86,7 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy { this.isLoading = true; if (newPolicyId) { this.policyId = newPolicyId; - } - else { + } else { this.policyId = this.route.snapshot.paramMap.get('id'); } this.retrievePolicy(); @@ -107,7 +106,7 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy { ? this.detailsComponent?.formGroup?.status === 'VALID' : true; - let config = this.interfaceComponent?.code + const config = this.interfaceComponent?.code; let interfaceValid = false; if (this.editor.isJson(config)) { @@ -174,9 +173,9 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy { this.orb.refreshNow(); this.isRequesting = false; }, - (error) => { + (err) => { this.isRequesting = false; - } + }, ); } catch (err) { @@ -211,7 +210,7 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy { if (confirm) { this.duplicatePolicy(this.policy); } - }) + }); } duplicatePolicy(agentPolicy: any) { this.policiesService @@ -258,14 +257,14 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy { } hasChanges() { - let policyDetails = this.detailsComponent.formGroup?.value; + const policyDetails = this.detailsComponent.formGroup?.value; const tags = this.detailsComponent.selectedTags; - const description = this.policy.description ? this.policy.description : ""; - const formsDescription = policyDetails.description === null ? "" : policyDetails.description + const description = this.policy.description ? this.policy.description : ''; + const formsDescription = policyDetails.description === null ? '' : policyDetails.description; - let selectedTags = JSON.stringify(tags); - let orb_tags = JSON.stringify(this.policy.tags); + const selectedTags = JSON.stringify(tags); + const orb_tags = JSON.stringify(this.policy.tags); if (policyDetails.name !== this.policy.name || formsDescription !== description || selectedTags !== orb_tags) { return true; diff --git a/ui/src/app/pages/fleet/agents/add/agent.add.component.scss b/ui/src/app/pages/fleet/agents/add/agent.add.component.scss index e6bdcc01c..27c89c7b0 100644 --- a/ui/src/app/pages/fleet/agents/add/agent.add.component.scss +++ b/ui/src/app/pages/fleet/agents/add/agent.add.component.scss @@ -110,7 +110,7 @@ nb-card-footer { .review-label { font-family: 'Montserrat'; font-size: 13px; - font-weight: 400 !important; + font-weight: 400 !important; margin: 0; color: #969fb9 !important; } diff --git a/ui/src/app/pages/fleet/agents/key/agent.key.component.scss b/ui/src/app/pages/fleet/agents/key/agent.key.component.scss index c87226b2e..5acf7fd09 100644 --- a/ui/src/app/pages/fleet/agents/key/agent.key.component.scss +++ b/ui/src/app/pages/fleet/agents/key/agent.key.component.scss @@ -13,14 +13,14 @@ nb-card { float: right; } nb-icon { - float: right ; + float: right; } } nb-card-body { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; - margin: 0 2rem 2rem 2rem; + margin: 0 2rem 2rem; padding: 0; p { diff --git a/ui/src/app/pages/fleet/agents/key/agent.key.component.ts b/ui/src/app/pages/fleet/agents/key/agent.key.component.ts index 5310006dd..a8202f70d 100644 --- a/ui/src/app/pages/fleet/agents/key/agent.key.component.ts +++ b/ui/src/app/pages/fleet/agents/key/agent.key.component.ts @@ -89,7 +89,7 @@ orbcommunity/orb-agent run -c /usr/local/orb/agent.yaml`; } else if (target === 'command') { this.copyCommandIcon = 'checkmark-outline'; setTimeout(() => { - this.copyCommandIcon = "copy-outline"; + this.copyCommandIcon = 'copy-outline'; }, 2000); } } @@ -106,8 +106,7 @@ orbcommunity/orb-agent run -c /usr/local/orb/agent.yaml`; a.download = `${this.agent.id}.txt`; a.click(); window.URL.revokeObjectURL(url); - } - else if (commandType === 'fileConfig') { + } else if (commandType === 'fileConfig') { const blob = new Blob([this.fileConfigCommandCopy], { type: 'text/plain' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts index ffa64ffc0..8371cf2d0 100644 --- a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts +++ b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts @@ -53,7 +53,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe canResetAgents: boolean; isResetting: boolean; - + private agentsSubscription: Subscription; @@ -121,7 +121,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe version, }; }); - }) + }), ); this.columns = []; @@ -210,7 +210,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe minWidth: 150, name: 'Name', cellTemplate: this.agentNameTemplateCell, - resizeable: true, + resizeable: true, }, { prop: 'state', @@ -219,7 +219,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe canAutoResize: true, name: 'Status', cellTemplate: this.agentStateTemplateRef, - resizeable: true, + resizeable: true, }, { prop: 'policy_agg_info', @@ -228,7 +228,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe minWidth: 150, name: 'Policies', cellTemplate: this.agentPolicyStateTemplateRef, - resizeable: true, + resizeable: true, }, { prop: 'combined_tags', @@ -245,7 +245,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe .map(([key, value]) => `${key}:${value}`) .join(','), ), - resizeable: true, + resizeable: true, }, { prop: 'version', @@ -255,7 +255,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe name: 'Version', sortable: true, cellTemplate: this.agentVersionTemplateCell, - resizeable: true, + resizeable: true, }, { prop: 'ts_last_hb', @@ -265,7 +265,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe name: 'Last Activity', sortable: true, cellTemplate: this.agentLastActivityTemplateCell, - resizeable: true, + resizeable: true, }, { name: '', @@ -275,19 +275,19 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe canAutoResize: true, sortable: false, cellTemplate: this.actionsTemplateCell, - resizeable: true, + resizeable: true, }, ]; } - public onCheckboxChange(event: any, row: any): void { - let selectedAgent = { + public onCheckboxChange(event: any, row: any): void { + const selectedAgent = { id: row.id, resetable: true, name: row.name, state: row.state, - } + }; if (this.getChecked(row) === false) { let resetable = true; if (row.state === 'new' || row.state === 'offline') { @@ -349,7 +349,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe } onOpenDeleteSelected() { const selected = this.selected; - const elementName = "Agents" + const elementName = 'Agents'; this.dialogService .open(DeleteSelectedComponent, { context: { selected, elementName }, @@ -368,7 +368,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe deleteSelectedAgents() { this.selected.forEach((agent) => { this.agentService.deleteAgent(agent.id).subscribe(); - }) + }); this.notificationsService.success('All selected Agents delete requests succeeded', ''); } @@ -385,14 +385,14 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe this.resetAgents(); this.orb.refreshNow(); } - }) + }); } resetAgents() { if (!this.isResetting) { this.isResetting = true; this.selected.forEach((agent) => { this.agentService.resetAgent(agent.id).subscribe(); - }) + }); this.notifyResetSuccess(); this.selected = []; this.isResetting = false; @@ -409,7 +409,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe name: row.name, state: row.state, resetable: row.state === 'new' || row.state === 'offline' ? false : true, - } + }; this.selected.push(policySelected); }); }); diff --git a/ui/src/app/pages/fleet/agents/match/agent.match.component.ts b/ui/src/app/pages/fleet/agents/match/agent.match.component.ts index 21ffc5217..5fe48b5b5 100644 --- a/ui/src/app/pages/fleet/agents/match/agent.match.component.ts +++ b/ui/src/app/pages/fleet/agents/match/agent.match.component.ts @@ -136,13 +136,13 @@ export class AgentMatchComponent implements OnInit, AfterViewInit { const tagsList = Object.keys(tags).map(key => ({ [key]: tags[key] })); this.agentsService.getAllAgents(tagsList).subscribe( resp => { - if(!!this.policy) { + if (!!this.policy) { this.specificPolicy = true; this.agents = resp.map((agent) => { const {policy_state} = agent; const policy_agg_info = !!policy_state && policy_state[this.policy.id]?.state || AgentPolicyStates.failedToApply; return {...agent, policy_agg_info }; - }) + }); } else { this.agents = resp; } diff --git a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts index 5f8180a4f..9fea705bf 100644 --- a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts +++ b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts @@ -30,4 +30,4 @@ export class AgentResetComponent { isEnabled(): boolean { return this.validationInput === this.selected.length; } -} \ No newline at end of file +} diff --git a/ui/src/app/pages/fleet/agents/view/agent.view.component.ts b/ui/src/app/pages/fleet/agents/view/agent.view.component.ts index 26eb562f7..e0b62d7c6 100644 --- a/ui/src/app/pages/fleet/agents/view/agent.view.component.ts +++ b/ui/src/app/pages/fleet/agents/view/agent.view.component.ts @@ -38,8 +38,8 @@ export class AgentViewComponent implements OnInit, OnDestroy { agentSubscription: Subscription; - configFile = 'configFile' - default = 'default' + configFile = 'configFile'; + default = 'default'; constructor( protected agentsService: AgentsService, diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss index 89db8a024..270143948 100644 --- a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss +++ b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss @@ -136,7 +136,7 @@ mat-chip nb-icon { color: #969fb9 !important; } label { - color: #969FB9; + color: #969fb9; } ::ng-deep .orb-breadcrumb { align-items: center; @@ -279,6 +279,6 @@ mat-chip-list { .review-label { font-family: 'Montserrat'; font-size: 13px; - font-weight: 400 !important; + font-weight: 400 !important; margin: 0; } diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts index 4e20d6b83..8c1c67e64 100644 --- a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts +++ b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts @@ -265,7 +265,7 @@ export class AgentGroupListComponent } onOpenDeleteSelected() { const selected = this.selected; - const elementName = "Agent Groups" + const elementName = 'Agent Groups'; this.dialogService .open(DeleteSelectedComponent, { context: { selected, elementName }, @@ -284,7 +284,7 @@ export class AgentGroupListComponent deleteSelectedAgentGroups() { this.selected.forEach((group) => { this.agentGroupsService.deleteAgentGroup(group.id).subscribe(); - }) + }); this.notificationsService.success('All selected Groups delete requests succeeded', ''); } openDetailsModal(row: any) { @@ -308,11 +308,10 @@ export class AgentGroupListComponent closeOnEsc: true, }); } - public onCheckboxChange(event: any, row: any): void { + public onCheckboxChange(event: any, row: any): void { if (this.getChecked(row) === false) { this.selected.push(row); - } - else { + } else { for (let i = 0; i < this.selected.length; i++) { if (this.selected[i].id === row.id) { this.selected.splice(i, 1); diff --git a/ui/src/app/pages/pages-menu.ts b/ui/src/app/pages/pages-menu.ts index be3ab77b0..ca4f376f5 100644 --- a/ui/src/app/pages/pages-menu.ts +++ b/ui/src/app/pages/pages-menu.ts @@ -52,5 +52,5 @@ export const MENU_ITEMS = [ export function updateMenuItems(pageName: string) { MENU_ITEMS.forEach(item => { item.selected = item.title === pageName; - }) + }); } diff --git a/ui/src/app/pages/profile/profile.component.scss b/ui/src/app/pages/profile/profile.component.scss index b2a1e5952..7112e9ff1 100644 --- a/ui/src/app/pages/profile/profile.component.scss +++ b/ui/src/app/pages/profile/profile.component.scss @@ -59,58 +59,58 @@ h4 { } } .header-subtitle { - color: #969FB9; + color: #969fb9; font-family: Montserrat; font-size: 14px; font-style: normal; - font-weight: 400; + font-weight: 400; margin: 0; } .account-information-card { width: 500px !important; height: fit-content; } -.circle { +.circle { width: 42px; - height: 42px; - border-radius: 50%; + height: 42px; + border-radius: 50%; } -.info-container { +.info-container { display: flex; - align-items: center; + align-items: center; position: relative; } .user-name-title { - color: var(--Lilac-gray, #969FB9); + color: var(--Lilac-gray, #969fb9); font-size: 14px; font-style: normal; font-weight: 500; line-height: 18px; - letter-spacing: -0.5px; + letter-spacing: -0.5px; margin-bottom: 5px; } .user-name { - color: var(--White, #FFF); + color: var(--White, #fff); font-size: 14px; font-weight: 500; line-height: 18px; - letter-spacing: -0.5px; + letter-spacing: -0.5px; } .edit-button { - color: #3089FC; + color: #3089fc; background-color: transparent; border: none; outline: none; font-size: 14px; font-style: normal; - font-weight: 600; + font-weight: 600; transition: background-color 0.3s ease !important; transition: color 0.3s ease !important; border-radius: 16px; padding: 5px 10px; } .edit-button:disabled { - color: #969FB9 + color: #969fb9; } .edit-button-work { @extend .edit-button; @@ -136,19 +136,18 @@ nb-card { border-radius: 8px !important; color: #969fb9 !important; padding: 0.5rem 1rem !important; - font-weight: 600 !important; - font-size: 15px !important; - + font-weight: 600 !important; + font-size: 15px !important; } nb-card-body { margin: 0 !important; - background-color: #2B3148 !important; + background-color: #2b3148 !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; } } label { - color: #969FB9; + color: #969fb9; } .float-right { float: right; @@ -158,7 +157,7 @@ input { } .input-password { margin-bottom: 20px; - background-color: #313E5D !important; + background-color: #313e5d !important; border: none; border-radius: 2px; } diff --git a/ui/src/app/pages/profile/profile.component.ts b/ui/src/app/pages/profile/profile.component.ts index b69e0e366..0516ea4a5 100644 --- a/ui/src/app/pages/profile/profile.component.ts +++ b/ui/src/app/pages/profile/profile.component.ts @@ -31,14 +31,14 @@ export class ProfileComponent implements OnInit { showPassword2 = false; showPassword3 = false; - availableTimers = [15, 30, 60] + availableTimers = [15, 30, 60]; selectedTimer: Number; editMode = { work: false, profileName: false, password: false, - } + }; isPasswordValidSize: boolean; isPasswordValidMatch: boolean; @@ -49,13 +49,13 @@ export class ProfileComponent implements OnInit { private usersService: UsersService, private notificationsService: NotificationsService, private orb: OrbService, - ) { + ) { this.oldPasswordInput = ''; this.newPasswordInput = ''; this.confirmPasswordInput = ''; this.selectedTimer = this.getPollInterval(); } - + ngOnInit(): void { this.retrieveUserInfo(); } @@ -86,7 +86,7 @@ export class ProfileComponent implements OnInit { company: company, }, }; - + this.usersService.editUser(userReq).subscribe( resp => { this.notificationsService.success('User successfully edited', ''); @@ -96,10 +96,10 @@ export class ProfileComponent implements OnInit { }, error => { this.isRequesting = false; - } + }, ); } - + canChangePassword(): boolean { this.isPasswordValidSize = this.newPasswordInput.length >= this.ngxAdminMinPasswordSize; this.isPasswordValidMatch = this.newPasswordInput === this.confirmPasswordInput; @@ -125,7 +125,7 @@ export class ProfileComponent implements OnInit { }, error => { this.isRequesting = false; - } + }, ); } toggleEdit(name: string) { diff --git a/ui/src/app/pages/sinks/add/sink-add.component.scss b/ui/src/app/pages/sinks/add/sink-add.component.scss index d988b3e98..74ba37b65 100644 --- a/ui/src/app/pages/sinks/add/sink-add.component.scss +++ b/ui/src/app/pages/sinks/add/sink-add.component.scss @@ -3,7 +3,7 @@ button { margin: 0 3px; float: left; color: #fff !important; - font-family: "Montserrat", sans-serif; + font-family: 'Montserrat', sans-serif; font-weight: 500; text-transform: none !important; } @@ -18,7 +18,7 @@ button { } .sink-cancel { - background-color: #3089fc !important; + background-color: #3089fc !important; } @@ -64,4 +64,4 @@ button { } } } - \ No newline at end of file + diff --git a/ui/src/app/pages/sinks/add/sink-add.component.ts b/ui/src/app/pages/sinks/add/sink-add.component.ts index 82c088f50..3d11b55fe 100644 --- a/ui/src/app/pages/sinks/add/sink-add.component.ts +++ b/ui/src/app/pages/sinks/add/sink-add.component.ts @@ -27,8 +27,8 @@ export class SinkAddComponent { sinkBackend: any; - isRequesting: boolean; - + isRequesting: boolean; + constructor( private sinksService: SinksService, private notificationsService: NotificationsService, @@ -43,10 +43,10 @@ export class SinkAddComponent { const detailsValid = this.createMode ? this.detailsComponent?.formGroup?.status === 'VALID' : true; - + const configSink = this.configComponent?.code; let config; - + if (this.editor.isJson(configSink)) { config = JSON.parse(configSink); } else if (this.editor.isYaml(configSink)) { @@ -54,8 +54,11 @@ export class SinkAddComponent { } else { return false; } - - return !this.editor.checkEmpty(config.authentication) && !this.editor.checkEmpty(config.exporter) && detailsValid && !this.checkString(config); + + return !this.editor.checkEmpty(config.authentication) + && !this.editor.checkEmpty(config.exporter) + && detailsValid + && !this.checkString(config); } checkString(config: any): boolean { if (typeof config.authentication.password !== 'string' || typeof config.authentication.username !== 'string') { @@ -71,7 +74,7 @@ export class SinkAddComponent { const configSink = this.configComponent.code; const details = { ...sinkDetails }; - + let payload = {}; const config = YAML.parse(configSink); diff --git a/ui/src/app/pages/sinks/details/sink.details.component.ts b/ui/src/app/pages/sinks/details/sink.details.component.ts index 28c66ed29..272a4d159 100644 --- a/ui/src/app/pages/sinks/details/sink.details.component.ts +++ b/ui/src/app/pages/sinks/details/sink.details.component.ts @@ -27,7 +27,7 @@ export class SinkDetailsComponent implements OnInit { protected router: Router, ) { !this.sink.tags ? this.sink.tags = {} : null; - this.exporterField = ""; + this.exporterField = ''; } onOpenEdit(sink: any) { @@ -45,6 +45,6 @@ export class SinkDetailsComponent implements OnInit { } ngOnInit() { const exporter = this.sink.config.exporter; - this.exporterField = exporter.remote_host !== undefined ? "Remote Host URL" : "Endpoint URL"; + this.exporterField = exporter.remote_host !== undefined ? 'Remote Host URL' : 'Endpoint URL'; } } diff --git a/ui/src/app/pages/sinks/list/sink.list.component.scss b/ui/src/app/pages/sinks/list/sink.list.component.scss index 25a0c8de2..aa602bc8f 100644 --- a/ui/src/app/pages/sinks/list/sink.list.component.scss +++ b/ui/src/app/pages/sinks/list/sink.list.component.scss @@ -149,7 +149,7 @@ tr div p { color: #df316f; } &idle { - color: #f2994a; + color: #f2994a; } } diff --git a/ui/src/app/pages/sinks/list/sink.list.component.ts b/ui/src/app/pages/sinks/list/sink.list.component.ts index 2d122f679..cb18d5225 100644 --- a/ui/src/app/pages/sinks/list/sink.list.component.ts +++ b/ui/src/app/pages/sinks/list/sink.list.component.ts @@ -271,7 +271,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes } onOpenDeleteSelected() { const selected = this.selected; - const elementName = "Sinks" + const elementName = 'Sinks'; this.dialogService .open(DeleteSelectedComponent, { context: { selected, elementName }, @@ -290,7 +290,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes deleteSelectedSinks() { this.selected.forEach((sink) => { this.sinkService.deleteSink(sink.id).subscribe(); - }) + }); this.notificationsService.success('All selected Sinks delete requests succeeded', ''); } openDetailsModal(row: any) { @@ -309,16 +309,15 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes filterByInactive = (sink) => sink.state === 'inactive'; - public onCheckboxChange(event: any, row: any): void { + public onCheckboxChange(event: any, row: any): void { const sinkSelected = { id: row.id, name: row.name, state: row.state, - } + }; if (this.getChecked(row) === false) { this.selected.push(sinkSelected); - } - else { + } else { for (let i = 0; i < this.selected.length; i++) { if (this.selected[i].id === row.id) { this.selected.splice(i, 1); @@ -341,7 +340,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes id: row.id, name: row.name, state: row.state, - } + }; this.selected.push(sinkSelected); }); }); diff --git a/ui/src/app/pages/sinks/view/sink.view.component.scss b/ui/src/app/pages/sinks/view/sink.view.component.scss index 8c018adb6..022674aca 100644 --- a/ui/src/app/pages/sinks/view/sink.view.component.scss +++ b/ui/src/app/pages/sinks/view/sink.view.component.scss @@ -3,7 +3,7 @@ button { &.policy-duplicate { color: #fff !important; - font-family: "Montserrat", sans-serif; + font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: none !important; @@ -18,7 +18,7 @@ button { &.policy-save { color: #fff !important; - font-family: "Montserrat", sans-serif; + font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: none !important; @@ -33,7 +33,7 @@ button { &.policy-discard { color: #fff !important; - font-family: "Montserrat", sans-serif; + font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: none !important; @@ -117,7 +117,7 @@ h4 { color: #df316f; } &idle { - color: #f2994a; + color: #f2994a; } } diff --git a/ui/src/app/pages/sinks/view/sink.view.component.spec.ts b/ui/src/app/pages/sinks/view/sink.view.component.spec.ts index b1b7437e0..e4c6bad9e 100644 --- a/ui/src/app/pages/sinks/view/sink.view.component.spec.ts +++ b/ui/src/app/pages/sinks/view/sink.view.component.spec.ts @@ -8,7 +8,7 @@ describe('SinkViewComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SinkViewComponent ] + declarations: [ SinkViewComponent ], }) .compileComponents(); })); diff --git a/ui/src/app/pages/sinks/view/sink.view.component.ts b/ui/src/app/pages/sinks/view/sink.view.component.ts index 60c95ed97..9b03f100a 100644 --- a/ui/src/app/pages/sinks/view/sink.view.component.ts +++ b/ui/src/app/pages/sinks/view/sink.view.component.ts @@ -17,11 +17,11 @@ import { OrbService } from 'app/common/services/orb.service'; @Component({ selector: 'ngx-sink-view', templateUrl: './sink.view.component.html', - styleUrls: ['./sink.view.component.scss'] + styleUrls: ['./sink.view.component.scss'], }) export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { strings = STRINGS; - + isLoading = false; sink: Sink; @@ -33,11 +33,11 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { lastUpdate: Date | null = null; sinkStates = SinkStates; - + editMode = { details: false, config: false, - } + }; isRequesting: boolean; @@ -54,7 +54,7 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { private dialogService: NbDialogService, private router: Router, private orb: OrbService, - ) { + ) { this.isRequesting = false; } @@ -121,9 +121,9 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { const sinkDetails = this.detailsComponent.formGroup?.value; const tags = this.detailsComponent.selectedTags; const configSink = this.configComponent.code; - + const details = { ...sinkDetails, tags }; - + try { let payload: any; if (this.editMode.config && !this.editMode.details) { @@ -161,7 +161,7 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { this.isLoading = false; this.cdr.markForCheck(); this.lastUpdate = new Date(); - }) + }); } ngOnDestroy(): void { @@ -192,8 +192,8 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { hasChanges() { const sinkDetails = this.detailsComponent.formGroup?.value; const tags = this.detailsComponent.selectedTags; - let selectedTags = JSON.stringify(tags); - let orb_tags = this.sink.tags ? JSON.stringify(this.sink.tags) : "{}"; + const selectedTags = JSON.stringify(tags); + const orb_tags = this.sink.tags ? JSON.stringify(this.sink.tags) : '{}'; if (sinkDetails.name !== this.sink.name || sinkDetails?.description !== this.sink?.description || selectedTags !== orb_tags) { return true; diff --git a/ui/src/app/shared/components/delete/delete.selected.component.scss b/ui/src/app/shared/components/delete/delete.selected.component.scss index 021637002..321d58fcf 100644 --- a/ui/src/app/shared/components/delete/delete.selected.component.scss +++ b/ui/src/app/shared/components/delete/delete.selected.component.scss @@ -66,7 +66,7 @@ nb-card { color: #969fb9; } &warning { - color: #f2dc4a; + color: #f2dc4a; } } .element-list { diff --git a/ui/src/app/shared/components/filter/filter.component.ts b/ui/src/app/shared/components/filter/filter.component.ts index 6956a127e..374a06d45 100644 --- a/ui/src/app/shared/components/filter/filter.component.ts +++ b/ui/src/app/shared/components/filter/filter.component.ts @@ -1,4 +1,4 @@ -import { Component, HostListener, Input } from '@angular/core'; +import { Component, HostListener, Input, OnInit } from '@angular/core'; import { MatSelectChange } from '@angular/material/select'; import { FilterOption, @@ -14,7 +14,7 @@ import { map, tap } from 'rxjs/operators'; templateUrl: './filter.component.html', styleUrls: ['./filter.component.scss'], }) -export class FilterComponent { +export class FilterComponent implements OnInit { @Input() availableFilters!: FilterOption[]; @@ -38,7 +38,7 @@ export class FilterComponent { this.activeFilters$ = filter.getFilters().pipe(map((filters) => filters)); this.searchText = ''; } - + ngOnInit() { this.availableFilters = this.availableFilters.filter(filter => filter.name !== 'Name'); } @@ -53,7 +53,7 @@ export class FilterComponent { param: this.searchText, type: FilterTypes.Input, filter: filterString, - } + }; this.filter.addFilter(filterOptions); } this.lastSearchText = this.searchText; diff --git a/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.ts b/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.ts index d271cd183..0a8d71800 100644 --- a/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.ts +++ b/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.ts @@ -15,7 +15,7 @@ export class AgentBackendsComponent implements OnInit { identify(index, item) { return item.id; } - + constructor( protected notificationService: NotificationsService, ) { diff --git a/ui/src/app/shared/components/orb/agent/agent-information/agent-information.component.ts b/ui/src/app/shared/components/orb/agent/agent-information/agent-information.component.ts index 5189d0412..9ff753f05 100644 --- a/ui/src/app/shared/components/orb/agent/agent-information/agent-information.component.ts +++ b/ui/src/app/shared/components/orb/agent/agent-information/agent-information.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Agent, AgentStates } from 'app/common/interfaces/orb/agent.interface'; import { Tags } from 'app/common/interfaces/orb/tag'; @@ -11,7 +11,7 @@ import { OrbService } from 'app/common/services/orb.service'; templateUrl: './agent-information.component.html', styleUrls: ['./agent-information.component.scss'], }) -export class AgentInformationComponent implements OnInit { +export class AgentInformationComponent implements OnInit, OnChanges { @Input() agent: Agent; isResetting: boolean; @@ -33,7 +33,7 @@ export class AgentInformationComponent implements OnInit { protected agentsService: AgentsService, protected notificationService: NotificationsService, private fb: FormBuilder, - private orb: OrbService + private orb: OrbService, ) { this.isResetting = false; this.isRequesting = false; @@ -74,7 +74,7 @@ export class AgentInformationComponent implements OnInit { this.selectedTags = this.agent?.orb_tags || {}; } } - + resetAgent() { if (!this.isResetting) { this.isResetting = true; @@ -99,8 +99,7 @@ export class AgentInformationComponent implements OnInit { this.editMode = value; if (this.editMode) { this.orb.pausePolling(); - } - else { + } else { this.orb.startPolling(); } this.updateForm(); @@ -117,7 +116,7 @@ export class AgentInformationComponent implements OnInit { const payload = { name: name, orb_tags: { ...this.selectedTags }, - } + }; this.agentsService.editAgent({ ...payload, id: this.agent.id }).subscribe(() => { this.notificationService.success('Agent successfully updated', ''); this.orb.refreshNow(); @@ -132,8 +131,8 @@ export class AgentInformationComponent implements OnInit { hasChanges() { const name = this.formGroup.controls.name.value; - let selectedTags = JSON.stringify(this.selectedTags); - let orb_tags = JSON.stringify(this.agent.orb_tags); + const selectedTags = JSON.stringify(this.selectedTags); + const orb_tags = JSON.stringify(this.agent.orb_tags); if (this.agent.name !== name || selectedTags !== orb_tags) { return true; diff --git a/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.scss b/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.scss index f7e5733f8..ab67ce597 100644 --- a/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.scss +++ b/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.scss @@ -192,7 +192,6 @@ nb-list-item { line-height: 1; max-width: 360px !important; white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; } // nb-accordion-item-header { @@ -201,9 +200,9 @@ nb-list-item { .scroll { max-height: 20em; } -.field{ +.field { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - min-width: 5ch; + min-width: 5rem; } diff --git a/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.ts b/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.ts index f08be0122..6c7f5bb98 100644 --- a/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.ts +++ b/ui/src/app/shared/components/orb/agent/agent-policies-datasets/agent-policies-datasets.component.ts @@ -55,18 +55,18 @@ export class AgentPoliciesDatasetsComponent implements OnInit, OnChanges { return item.id; } - ngOnInit(): void { + ngOnInit(): void { this.getAmountRunningPolicies(); } - + getAmountRunningPolicies() { this.policies.forEach(element => { - if (element.state == 'running') { + if (element.state === 'running') { this.amountRunningPolicies++; } - }); + }); } - + ngOnChanges(changes: SimpleChanges): void { if (changes.agent) { const policiesStates = this.agent?.last_hb_data?.policy_state; diff --git a/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.scss b/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.scss index 30db639dc..831954453 100644 --- a/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.scss +++ b/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.scss @@ -24,7 +24,7 @@ nb-card { margin: 0; } nb-icon { - float: right ; + float: right; } } @@ -32,7 +32,7 @@ nb-card { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; margin: 0 !important; - padding: 0 1rem 0 1rem; + padding: 0 1rem; background-color: #1c2339 !important; label { diff --git a/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.ts b/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.ts index 45ce6f5ea..ffc9ce535 100644 --- a/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.ts +++ b/ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.ts @@ -1,11 +1,11 @@ -import { Component, Input, OnInit } from "@angular/core"; -import { AvailableOS } from "app/common/services/agents/agents.service"; -import { Agent, AgentStates } from "app/common/interfaces/orb/agent.interface"; +import { Component, Input, OnInit } from '@angular/core'; +import { AvailableOS } from 'app/common/services/agents/agents.service'; +import { Agent, AgentStates } from 'app/common/interfaces/orb/agent.interface'; @Component({ - selector: "ngx-agent-provisioning", - templateUrl: "./agent-provisioning.component.html", - styleUrls: ["./agent-provisioning.component.scss"], + selector: 'ngx-agent-provisioning', + templateUrl: './agent-provisioning.component.html', + styleUrls: ['./agent-provisioning.component.scss'], }) export class AgentProvisioningComponent implements OnInit { @@ -28,18 +28,16 @@ export class AgentProvisioningComponent implements OnInit { provisioningTypeMode = { default: false, configFile: false, - } + }; constructor() { - this.copyCommandIcon = "copy-outline"; + this.copyCommandIcon = 'copy-outline'; } ngOnInit(): void { - console.log(this.provisioningType); if (this.provisioningType === 'default') { this.provisioningTypeMode.default = true; - } - else if (this.provisioningType === 'configFile') { + } else if (this.provisioningType === 'configFile') { this.provisioningTypeMode.configFile = true; } @@ -47,10 +45,10 @@ export class AgentProvisioningComponent implements OnInit { } toggleIcon(target) { - if (target === "command") { - this.copyCommandIcon = "checkmark-outline"; + if (target === 'command') { + this.copyCommandIcon = 'checkmark-outline'; setTimeout(() => { - this.copyCommandIcon = "copy-outline"; + this.copyCommandIcon = 'copy-outline'; }, 2000); } } diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss index 2c95e3663..bd413f131 100644 --- a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss +++ b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss @@ -91,7 +91,7 @@ nb-card { } } -mat-nav-list{ +mat-nav-list { display: flex !important; flex-direction: row; flex-wrap: nowrap !important; @@ -129,4 +129,4 @@ mat-nav-list{ to { transform: translateX(-80%); } -} \ No newline at end of file +} diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts index c845beb39..d534d5de6 100644 --- a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts +++ b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts @@ -147,8 +147,8 @@ export class PolicyDatasetsComponent } } getTableHeight() { - const rowHeight = 50; - const headerHeight = 50; + const rowHeight = 50; + const headerHeight = 50; return (this.datasets.length * rowHeight) + headerHeight + 'px'; } onCreateDataset() { @@ -250,5 +250,5 @@ export class PolicyDatasetsComponent closeOnEsc: true, }); } - + } diff --git a/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.scss b/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.scss index 970f42bad..864c3da0f 100644 --- a/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.scss +++ b/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.scss @@ -30,8 +30,8 @@ nb-card { } } .italic { - font-style: italic; - font-size: 0.9rem; + font-style: italic; + font-size: 0.9rem; color: #d9deee; } .summary-accent { diff --git a/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.ts b/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.ts index bd96f3558..013d917aa 100644 --- a/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.ts +++ b/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.ts @@ -86,8 +86,7 @@ export class PolicyDetailsComponent implements OnInit, OnChanges { this.editMode = value; if (this.editMode || this.interfaceEditMode) { this.orb.pausePolling(); - } - else { + } else { this.orb.startPolling(); } this.updateForm(); diff --git a/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss b/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss index 752cd7091..18fc107bb 100644 --- a/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss +++ b/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss @@ -177,7 +177,7 @@ nb-card { border: none !important; border-radius: 8px !important; display: grid; - padding: 0 10px 0 10px; + padding: 0 10px; background-color: #1c2339; .item-body { diff --git a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts index 3e2fc2709..090a01995 100644 --- a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts +++ b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts @@ -80,11 +80,11 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange const model = editorInstance.getModel(); editorInstance.layout(); return model ? model.getLineCount() : 0; - + } return 0; } - + ngOnInit(): void { this.code = this.policy.policy_data || JSON.stringify(this.policy.policy, null, 2); } @@ -113,8 +113,7 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange this.editMode = edit; if (this.editMode || this.detailsEditMode) { this.orb.pausePolling(); - } - else { + } else { this.orb.startPolling(); } this.editorOptions = { ...this.editorOptions, readOnly: !edit }; @@ -125,12 +124,12 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange onFileSelected(event: any) { const file: File = event.target.files[0]; const reader: FileReader = new FileReader(); - + reader.onload = (e: any) => { const fileContent = e.target.result; this.code = fileContent; }; - + reader.readAsText(file); } } diff --git a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.spec.ts b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.spec.ts index 9ffa7cd11..9da64fdd6 100644 --- a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.spec.ts +++ b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.spec.ts @@ -8,7 +8,7 @@ describe('SinkConfigComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SinkConfigComponent ] + declarations: [ SinkConfigComponent ], }) .compileComponents(); })); diff --git a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts index ce30aa4b3..77dd6beda 100644 --- a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts +++ b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts @@ -8,7 +8,7 @@ import { OrbService } from 'app/common/services/orb.service'; @Component({ selector: 'ngx-sink-config', templateUrl: './sink-config.component.html', - styleUrls: ['./sink-config.component.scss'] + styleUrls: ['./sink-config.component.scss'], }) export class SinkConfigComponent implements OnInit, OnChanges { @@ -23,7 +23,7 @@ export class SinkConfigComponent implements OnInit, OnChanges { @Input() sinkBackend: string; - + @Output() editModeChange: EventEmitter; @@ -77,43 +77,42 @@ export class SinkConfigComponent implements OnInit, OnChanges { constructor( private fb: FormBuilder, private orb: OrbService, - ) { - this.isYaml = true; + ) { + this.isYaml = true; this.sink = {}; this.editMode = false; this.editModeChange = new EventEmitter(); this.detailsEditMode = false; this.updateForm(); this.sinkConfigSchemaPrometheus = { - "authentication" : { - "type": "basicauth", - "password": "", - "username": "", + 'authentication' : { + 'type': 'basicauth', + 'password': '', + 'username': '', }, - "exporter" : { - "remote_host": "", + 'exporter' : { + 'remote_host': '', }, - "opentelemetry": "enabled", - } + 'opentelemetry': 'enabled', + }; this.sinkConfigSchemaOtlp = { - "authentication" : { - "type": "basicauth", - "password": "", - "username": "", + 'authentication' : { + 'type': 'basicauth', + 'password': '', + 'username': '', }, - "exporter" : { - "endpoint": "", + 'exporter' : { + 'endpoint': '', }, - "opentelemetry": "enabled", - } + 'opentelemetry': 'enabled', + }; } ngOnInit(): void { if (this.createMode) { this.toggleEdit(true); this.code = YAML.stringify(this.sinkConfigSchemaOtlp); - } - else { + } else { // if (this.sink.config_data && this.sink.format === 'yaml') { // this.isYaml = true; const parsedCode = YAML.parse(JSON.stringify(this.sink.config)); @@ -143,7 +142,7 @@ ngOnChanges(changes: SimpleChanges) { const sinkConfigSchema = this.sinkBackend === SinkBackends.prometheus ? this.sinkConfigSchemaPrometheus : this.sinkConfigSchemaOtlp; - + this.code = this.isYaml ? YAML.stringify(sinkConfigSchema, null) : JSON.stringify(sinkConfigSchema, null, 2); @@ -173,8 +172,7 @@ updateForm() { this.editMode = edit; if ((this.editMode || this.detailsEditMode) && !this.createMode) { this.orb.pausePolling(); - } - else { + } else { this.orb.startPolling(); } this.editorOptions = { ...this.editorOptions, readOnly: !edit }; @@ -187,11 +185,10 @@ updateForm() { if (this.isYaml) { const parsedCode = YAML.parse(this.code); this.code = YAML.stringify(parsedCode); - } - else { + } else { const parsedConfig = YAML.parse(this.code); this.code = JSON.stringify(parsedConfig, null, 2); } } - + } diff --git a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss index f5826be91..123863dba 100644 --- a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss +++ b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss @@ -24,7 +24,7 @@ input { color: #df316f; } &idle { - color: #f2994a; + color: #f2994a; } } .ns1red { @@ -54,7 +54,7 @@ nb-card { } } .italic { - font-style: italic; - font-size: 0.9rem; + font-style: italic; + font-size: 0.9rem; color: #d9deee; } diff --git a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.spec.ts b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.spec.ts index a9ede211d..1de3f89a7 100644 --- a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.spec.ts +++ b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.spec.ts @@ -8,7 +8,7 @@ describe('SinkDetailsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SinkDetailsComponent ] + declarations: [ SinkDetailsComponent ], }) .compileComponents(); })); diff --git a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.ts b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.ts index f778e651c..d872b90a8 100644 --- a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.ts +++ b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.ts @@ -10,7 +10,7 @@ import { SinksService } from 'app/common/services/sinks/sinks.service'; @Component({ selector: 'ngx-sink-details', templateUrl: './sink-details.component.html', - styleUrls: ['./sink-details.component.scss'] + styleUrls: ['./sink-details.component.scss'], }) export class SinkDetailsComponent implements OnInit, OnChanges { @@ -47,7 +47,7 @@ export class SinkDetailsComponent implements OnInit, OnChanges { private fb: FormBuilder, private sinksService: SinksService, private orb: OrbService, - ) { + ) { this.sink = {}; this.createMode = false; this.editMode = false; @@ -59,7 +59,7 @@ export class SinkDetailsComponent implements OnInit, OnChanges { Promise.all([this.getSinkBackends()]).then((responses) => { const backends = responses[0]; this.sinkTypesList = backends.map(entry => entry.backend); - }) + }); } ngOnInit(): void { @@ -92,11 +92,10 @@ export class SinkDetailsComponent implements OnInit, OnChanges { description: [description], }); this.selectedTags = {...tags} || {}; - } - else if (this.createMode) { + } else if (this.createMode) { const { name, description, backend, tags } = this.sink; - + this.formGroup = this.fb.group({ name: [name, [Validators.required, Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_-]*$'), Validators.maxLength(64)]], description: [description, [Validators.maxLength(64)]], @@ -104,8 +103,7 @@ export class SinkDetailsComponent implements OnInit, OnChanges { }); this.selectedTags = { ...tags }; - } - else { + } else { this.formGroup = this.fb.group({ name: null, description: null, @@ -118,8 +116,7 @@ export class SinkDetailsComponent implements OnInit, OnChanges { this.editMode = value; if (this.editMode || this.configEditMode) { this.orb.pausePolling(); - } - else { + } else { this.orb.startPolling(); } this.updateForm(); @@ -127,17 +124,15 @@ export class SinkDetailsComponent implements OnInit, OnChanges { } getMode() { - if(this.editMode == true) { + if (this.editMode === true) { this.mode = 'edit'; - } - else if (this.createMode == true) { + } else if (this.createMode === true) { this.mode = 'create'; - } - else { + } else { this.mode = 'read'; } } - + getSinkBackends() { return new Promise(resolve => { this.sinksService.getSinkBackends().subscribe(backends => { diff --git a/ui/src/app/shared/components/orb/tag-control/tag-control.component.scss b/ui/src/app/shared/components/orb/tag-control/tag-control.component.scss index c55079c9b..19175b341 100644 --- a/ui/src/app/shared/components/orb/tag-control/tag-control.component.scss +++ b/ui/src/app/shared/components/orb/tag-control/tag-control.component.scss @@ -19,7 +19,7 @@ mat-chip nb-icon { border: none !important; background: #1e2941 !important; } -.add-button:disabled{ +.add-button:disabled { background-color: transparent !important; } .two-dot { diff --git a/ui/tslint.json b/ui/tslint.json index f64dba908..e31c452a7 100644 --- a/ui/tslint.json +++ b/ui/tslint.json @@ -62,7 +62,6 @@ "no-switch-case-fall-through": true, "no-trailing-whitespace": true, "no-unnecessary-initializer": true, - "no-use-before-declare": true, "no-var-keyword": true, "object-literal-sort-keys": false, "one-line": [ @@ -96,7 +95,6 @@ "variable-declaration": "nospace" } ], - "typeof-compare": true, "unified-signatures": true, "variable-name": false, "whitespace": [ @@ -135,7 +133,6 @@ "use-lifecycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, - "directive-class-suffix": true, - "no-unused-variable": true + "directive-class-suffix": true } }