refactor: update readme and fix linting errors (#2708)

* updated README
* fix missing imports and @include
* updated tslint.json: remove deprecated/reduntant rules
* update lint:fix
* fix scss linting
* add task for fixing scss lint

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,15 +24,15 @@ git clone [email protected]:orb-community/orb.git --no-checkout --depth 1 ${path}
 
 # however you clone the project
 cd ${path}/ui
-yarn install
+npm install
 ```
 
 ### Usage
 
 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*  

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",

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,

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';

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;
+      }
     }
+
   }
 }

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;

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) {

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',
 }
 
 /**

ui/src/app/common/interfaces/orb/sink/config/otlp.config.interface.ts

@@ -23,13 +23,13 @@ export interface OtlpConfig extends SinkConfig<string> {
         *  Username|Email(?) {string}
         */
         username?: string;
-    }
+    };
     exporter: |any| {
         /**
         *  Endpoint (Otlp sinks) or Remote Host (Prometheus sink) Link {string}
         */
         endpoint?: string;
         remote_host?: string;
-    }
-    
-}
+    };
+
+}

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;
             }
         }

ui/src/app/common/services/dataset/dataset.policies.service.ts

@@ -40,7 +40,7 @@ export class DatasetPoliciesService {
       .get<Dataset>(`${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}`,

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?

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) {

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;

ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss

@@ -219,4 +219,4 @@ nb-accordion {
 
 .input-agent-group {
   width: 560px;
-}
+}

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;
-}
+}