├── src
    ├── assets
    │   └── .gitkeep
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── app
    │   ├── enum
    │   │   ├── status.enum.ts
    │   │   └── data-state.enum.ts
    │   ├── interface
    │   │   ├── app-state.ts
    │   │   ├── server.ts
    │   │   └── custom-response.ts
    │   ├── app.module.ts
    │   ├── service
    │   │   ├── notification.service.ts
    │   │   └── server.service.ts
    │   ├── notification.module.ts
    │   ├── app.component.css
    │   ├── app.component.ts
    │   └── app.component.html
    ├── main.ts
    ├── test.ts
    ├── index.html
    ├── polyfills.ts
    └── styles.css
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.app.json
├── tsconfig.spec.json
├── .browserslistrc
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
├── karma.conf.js
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getarrays/serverapp/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/enum/status.enum.ts:
--------------------------------------------------------------------------------
1 | export enum Status {
2 |     ALL = 'ALL', SERVER_UP = 'SERVER_UP', SERVER_DOWN = 'SERVER_DOWN'
3 | }


--------------------------------------------------------------------------------
/src/app/enum/data-state.enum.ts:
--------------------------------------------------------------------------------
1 | export enum DataState {
2 |     LOADING_STATE = 'LOADING_STATE', LOADED_STATE = 'LOADED_STATE', ERROR_STATE = 'ERROR_STATE'
3 | }


--------------------------------------------------------------------------------
/src/app/interface/app-state.ts:
--------------------------------------------------------------------------------
1 | import { DataState } from "../enum/data-state.enum";
2 | 
3 | export interface AppState<T> {
4 |     dataState: DataState;
5 |     appData?: T;
6 |     error?: string;
7 | }


--------------------------------------------------------------------------------
/src/app/interface/server.ts:
--------------------------------------------------------------------------------
 1 | import { Status } from "../enum/status.enum";
 2 | 
 3 | export interface Server {
 4 |     id: number;
 5 |     ipAddress: string;
 6 |     name: string;
 7 |     memory: string;
 8 |     type: string;
 9 |     imageUrl: string;
10 |     status: Status;
11 | }


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   async navigateTo(): Promise<unknown> {
 5 |     return browser.get(browser.baseUrl);
 6 |   }
 7 | 
 8 |   async getTitleText(): Promise<string> {
 9 |     return element(by.css('app-root .content span')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/interface/custom-response.ts:
--------------------------------------------------------------------------------
 1 | import { Server } from "./server";
 2 | 
 3 | export interface CustomResponse {
 4 |     timeStamp: Date;
 5 |     statusCode: number;
 6 |     status: string;
 7 |     reason: string;
 8 |     message: string;
 9 |     developerMessage: string;
10 |     data: { servers?: Server[], server?: Server };
11 | }


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "../tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "../out-tsc/e2e",
 6 |     "module": "commonjs",
 7 |     "target": "es2018",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 3 | import { NgModule } from '@angular/core';
 4 | import { HttpClientModule } from '@angular/common/http';
 5 | import { AppComponent } from './app.component';
 6 | import { FormsModule } from '@angular/forms';
 7 | import { NotificationModule } from './notification.module';
 8 | 
 9 | @NgModule({
10 |   declarations: [
11 |     AppComponent
12 |   ],
13 |   imports: [
14 |     BrowserModule,
15 |     BrowserAnimationsModule,
16 |     HttpClientModule,
17 |     FormsModule,
18 |     NotificationModule
19 |   ],
20 |   providers: [],
21 |   bootstrap: [AppComponent]
22 | })
23 | export class AppModule { }
24 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', async () => {
12 |     await page.navigateTo();
13 |     expect(await page.getTitleText()).toEqual('serverapp app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": false,
 9 |     "noImplicitReturns": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "sourceMap": true,
12 |     "declaration": false,
13 |     "downlevelIteration": true,
14 |     "experimentalDecorators": true,
15 |     "moduleResolution": "node",
16 |     "importHelpers": true,
17 |     "target": "es2015",
18 |     "module": "es2020",
19 |     "lib": [
20 |       "es2018",
21 |       "dom"
22 |     ]
23 |   },
24 |   "angularCompilerOptions": {
25 |     "strictInjectionParameters": true,
26 |     "strictInputAccessModifiers": true,
27 |     "strictTemplates": true
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Serverapp</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 |   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Overpass">
10 |   <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> -->
11 |   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
12 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
13 | </head>
14 | <body>
15 |   <app-root></app-root>
16 | 
17 |   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
18 |   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
19 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   SELENIUM_PROMISE_MANAGER: false,
20 |   baseUrl: 'http://localhost:4200/',
21 |   framework: 'jasmine',
22 |   jasmineNodeOpts: {
23 |     showColors: true,
24 |     defaultTimeoutInterval: 30000,
25 |     print: function() {}
26 |   },
27 |   onPrepare() {
28 |     require('ts-node').register({
29 |       project: require('path').join(__dirname, './tsconfig.json')
30 |     });
31 |     jasmine.getEnv().addReporter(new SpecReporter({
32 |       spec: {
33 |         displayStacktrace: StacktraceOption.PRETTY
34 |       }
35 |     }));
36 |   }
37 | };


--------------------------------------------------------------------------------
/src/app/service/notification.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { NotifierService } from 'angular-notifier';
 3 | 
 4 | @Injectable({ providedIn: 'root' })
 5 | export class NotificationService {
 6 |   private readonly notifier: NotifierService;
 7 | 
 8 |   constructor(notifierService: NotifierService) {
 9 |     this.notifier = notifierService;
10 |   }
11 | 
12 |   onDefault(message: string): void {
13 |     this.notifier.notify(Type.DEFAULT, message);
14 |   }
15 | 
16 |   onSuccess(message: string): void {
17 |     this.notifier.notify(Type.SUCCESS, message);
18 |   }
19 | 
20 |   onInfo(message: string): void {
21 |     this.notifier.notify(Type.INFO, message);
22 |   }
23 | 
24 |   onWarning(message: string): void {
25 |     this.notifier.notify(Type.WARNING, message);
26 |   }
27 | 
28 |   onError(message: string): void {
29 |     this.notifier.notify(Type.ERROR, message);
30 |   }
31 | }
32 | 
33 | enum Type { 
34 |   DEFAULT = 'default', 
35 |   INFO = 'info', 
36 |   SUCCESS = 'success', 
37 |   WARNING = 'warning', 
38 |   ERROR = 'error'
39 | };
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Serverapp
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.3.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | 


--------------------------------------------------------------------------------
/src/app/notification.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { NotifierModule, NotifierOptions } from 'angular-notifier';
 3 | 
 4 | const customNotifierOptions: NotifierOptions = {
 5 |   position: {
 6 |       horizontal: {
 7 |           position: 'left',
 8 |           distance: 150
 9 |       },
10 |       vertical: {
11 |           position: 'bottom',
12 |           distance: 12,
13 |           gap: 10
14 |       }
15 |   },
16 |   theme: 'material',
17 |   behaviour: {
18 |       autoHide: 5000,
19 |       onClick: 'hide',
20 |       onMouseover: 'pauseAutoHide',
21 |       showDismissButton: true,
22 |       stacking: 4
23 |   },
24 |   animations: {
25 |       enabled: true,
26 |       show: {
27 |           preset: 'slide',
28 |           speed: 300,
29 |           easing: 'ease'
30 |       },
31 |       hide: {
32 |           preset: 'fade',
33 |           speed: 300,
34 |           easing: 'ease',
35 |           offset: 50
36 |       },
37 |       shift: {
38 |           speed: 300,
39 |           easing: 'ease'
40 |       },
41 |       overlap: 150
42 |   }
43 | };
44 | 
45 | @NgModule({
46 |   imports: [ NotifierModule.withConfig(customNotifierOptions) ],
47 |   exports: [ NotifierModule ]
48 | })
49 | export class NotificationModule {}
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "serverapp",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~11.0.3",
15 |     "@angular/common": "~11.0.3",
16 |     "@angular/compiler": "~11.0.3",
17 |     "@angular/core": "~11.0.3",
18 |     "@angular/forms": "~11.0.3",
19 |     "@angular/platform-browser": "~11.0.3",
20 |     "@angular/platform-browser-dynamic": "~11.0.3",
21 |     "@angular/router": "~11.0.3",
22 |     "angular-notifier": "^9.1.0",
23 |     "rxjs": "~6.6.0",
24 |     "tslib": "^2.0.0",
25 |     "zone.js": "~0.10.2"
26 |   },
27 |   "devDependencies": {
28 |     "@angular-devkit/build-angular": "~0.1100.3",
29 |     "@angular/cli": "~11.0.3",
30 |     "@angular/compiler-cli": "~11.0.3",
31 |     "@types/jasmine": "~3.6.0",
32 |     "@types/node": "^12.11.1",
33 |     "codelyzer": "^6.0.0",
34 |     "jasmine-core": "~3.6.0",
35 |     "jasmine-spec-reporter": "~5.0.0",
36 |     "karma": "~5.1.0",
37 |     "karma-chrome-launcher": "~3.1.0",
38 |     "karma-coverage": "~2.0.3",
39 |     "karma-jasmine": "~4.0.0",
40 |     "karma-jasmine-html-reporter": "^1.5.0",
41 |     "protractor": "~7.0.0",
42 |     "ts-node": "~8.3.0",
43 |     "tslint": "~6.1.0",
44 |     "typescript": "~4.0.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/serverapp'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/src/app/service/server.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable, throwError } from 'rxjs';
 4 | import { tap, catchError } from 'rxjs/operators';
 5 | import { Status } from '../enum/status.enum';
 6 | import { CustomResponse } from '../interface/custom-response';
 7 | import { Server } from '../interface/server';
 8 | 
 9 | @Injectable({ providedIn: 'root' })
10 | export class ServerService {
11 |   private readonly apiUrl = 'http://localhost:8080';
12 | 
13 |   constructor(private http: HttpClient) { }
14 | 
15 |   servers$ = <Observable<CustomResponse>>
16 |     this.http.get<CustomResponse>(`${this.apiUrl}/server/list`)
17 |       .pipe(
18 |         tap(console.log),
19 |         catchError(this.handleError)
20 |       );
21 | 
22 |   save$ = (server: Server) => <Observable<CustomResponse>>
23 |     this.http.post<CustomResponse>(`${this.apiUrl}/server/save`, server)
24 |       .pipe(
25 |         tap(console.log),
26 |         catchError(this.handleError)
27 |       );
28 | 
29 |   ping$ = (ipAddress: string) => <Observable<CustomResponse>>
30 |     this.http.get<CustomResponse>(`${this.apiUrl}/server/ping/${ipAddress}`)
31 |       .pipe(
32 |         tap(console.log),
33 |         catchError(this.handleError)
34 |       );
35 | 
36 |   filter$ = (status: Status, response: CustomResponse) => <Observable<CustomResponse>>
37 |     new Observable<CustomResponse>(
38 |       suscriber => {
39 |         console.log(response);
40 |         suscriber.next(
41 |           status === Status.ALL ? { ...response, message: `Servers filtered by ${status} status` } :
42 |             {
43 |               ...response,
44 |               message: response.data.servers
45 |                 .filter(server => server.status === status).length > 0 ? `Servers filtered by 
46 |           ${status === Status.SERVER_UP ? 'SERVER UP'
47 |                 : 'SERVER DOWN'} status` : `No servers of ${status} found`,
48 |               data: {
49 |                 servers: response.data.servers
50 |                   .filter(server => server.status === status)
51 |               }
52 |             }
53 |         );
54 |         suscriber.complete();
55 |       }
56 |     )
57 |       .pipe(
58 |         tap(console.log),
59 |         catchError(this.handleError)
60 |       );
61 | 
62 |   delete$ = (serverId: number) => <Observable<CustomResponse>>
63 |     this.http.delete<CustomResponse>(`${this.apiUrl}/server/delete/${serverId}`)
64 |       .pipe(
65 |         tap(console.log),
66 |         catchError(this.handleError)
67 |       );
68 | 
69 | 
70 |   private handleError(error: HttpErrorResponse): Observable<never> {
71 |     console.log(error);
72 |     return throwError(`An error occurred - Error code: ${error.status}`);
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rulesDirectory": [
  4 |     "codelyzer"
  5 |   ],
  6 |   "rules": {
  7 |     "align": {
  8 |       "options": [
  9 |         "parameters",
 10 |         "statements"
 11 |       ]
 12 |     },
 13 |     "array-type": false,
 14 |     "arrow-return-shorthand": true,
 15 |     "curly": true,
 16 |     "deprecation": {
 17 |       "severity": "warning"
 18 |     },
 19 |     "eofline": true,
 20 |     "import-blacklist": [
 21 |       true,
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": {
 26 |       "options": [
 27 |         "spaces"
 28 |       ]
 29 |     },
 30 |     "max-classes-per-file": false,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-console": [
 47 |       true,
 48 |       "debug",
 49 |       "info",
 50 |       "time",
 51 |       "timeEnd",
 52 |       "trace"
 53 |     ],
 54 |     "no-empty": false,
 55 |     "no-inferrable-types": [
 56 |       true,
 57 |       "ignore-params"
 58 |     ],
 59 |     "no-non-null-assertion": true,
 60 |     "no-redundant-jsdoc": true,
 61 |     "no-switch-case-fall-through": true,
 62 |     "no-var-requires": false,
 63 |     "object-literal-key-quotes": [
 64 |       true,
 65 |       "as-needed"
 66 |     ],
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "semicolon": {
 72 |       "options": [
 73 |         "always"
 74 |       ]
 75 |     },
 76 |     "space-before-function-paren": {
 77 |       "options": {
 78 |         "anonymous": "never",
 79 |         "asyncArrow": "always",
 80 |         "constructor": "never",
 81 |         "method": "never",
 82 |         "named": "never"
 83 |       }
 84 |     },
 85 |     "typedef": [
 86 |       true,
 87 |       "call-signature"
 88 |     ],
 89 |     "typedef-whitespace": {
 90 |       "options": [
 91 |         {
 92 |           "call-signature": "nospace",
 93 |           "index-signature": "nospace",
 94 |           "parameter": "nospace",
 95 |           "property-declaration": "nospace",
 96 |           "variable-declaration": "nospace"
 97 |         },
 98 |         {
 99 |           "call-signature": "onespace",
100 |           "index-signature": "onespace",
101 |           "parameter": "onespace",
102 |           "property-declaration": "onespace",
103 |           "variable-declaration": "onespace"
104 |         }
105 |       ]
106 |     },
107 |     "variable-name": {
108 |       "options": [
109 |         "ban-keywords",
110 |         "check-format",
111 |         "allow-pascal-case"
112 |       ]
113 |     },
114 |     "whitespace": {
115 |       "options": [
116 |         "check-branch",
117 |         "check-decl",
118 |         "check-operator",
119 |         "check-separator",
120 |         "check-type",
121 |         "check-typecast"
122 |       ]
123 |     },
124 |     "component-class-suffix": true,
125 |     "contextual-lifecycle": true,
126 |     "directive-class-suffix": true,
127 |     "no-conflicting-lifecycle": true,
128 |     "no-host-metadata-property": true,
129 |     "no-input-rename": true,
130 |     "no-inputs-metadata-property": true,
131 |     "no-output-native": true,
132 |     "no-output-on-prefix": true,
133 |     "no-output-rename": true,
134 |     "no-outputs-metadata-property": true,
135 |     "template-banana-in-box": true,
136 |     "template-no-negated-async": true,
137 |     "use-lifecycle-interface": true,
138 |     "use-pipe-transform-interface": true,
139 |     "directive-selector": [
140 |       true,
141 |       "attribute",
142 |       "app",
143 |       "camelCase"
144 |     ],
145 |     "component-selector": [
146 |       true,
147 |       "element",
148 |       "app",
149 |       "kebab-case"
150 |     ]
151 |   }
152 | }
153 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "serverapp": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:application": {
 10 |           "strict": true
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/serverapp",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "tsconfig.app.json",
 25 |             "aot": true,
 26 |             "assets": [
 27 |               "src/favicon.ico",
 28 |               "src/assets"
 29 |             ],
 30 |             "styles": [
 31 |               "src/styles.css"
 32 |             ],
 33 |             "scripts": []
 34 |           },
 35 |           "configurations": {
 36 |             "production": {
 37 |               "fileReplacements": [
 38 |                 {
 39 |                   "replace": "src/environments/environment.ts",
 40 |                   "with": "src/environments/environment.prod.ts"
 41 |                 }
 42 |               ],
 43 |               "optimization": true,
 44 |               "outputHashing": "all",
 45 |               "sourceMap": false,
 46 |               "namedChunks": false,
 47 |               "extractLicenses": true,
 48 |               "vendorChunk": false,
 49 |               "buildOptimizer": true,
 50 |               "budgets": [
 51 |                 {
 52 |                   "type": "initial",
 53 |                   "maximumWarning": "500kb",
 54 |                   "maximumError": "1mb"
 55 |                 },
 56 |                 {
 57 |                   "type": "anyComponentStyle",
 58 |                   "maximumWarning": "2kb",
 59 |                   "maximumError": "4kb"
 60 |                 }
 61 |               ]
 62 |             }
 63 |           }
 64 |         },
 65 |         "serve": {
 66 |           "builder": "@angular-devkit/build-angular:dev-server",
 67 |           "options": {
 68 |             "browserTarget": "serverapp:build"
 69 |           },
 70 |           "configurations": {
 71 |             "production": {
 72 |               "browserTarget": "serverapp:build:production"
 73 |             }
 74 |           }
 75 |         },
 76 |         "extract-i18n": {
 77 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 78 |           "options": {
 79 |             "browserTarget": "serverapp:build"
 80 |           }
 81 |         },
 82 |         "test": {
 83 |           "builder": "@angular-devkit/build-angular:karma",
 84 |           "options": {
 85 |             "main": "src/test.ts",
 86 |             "polyfills": "src/polyfills.ts",
 87 |             "tsConfig": "tsconfig.spec.json",
 88 |             "karmaConfig": "karma.conf.js",
 89 |             "assets": [
 90 |               "src/favicon.ico",
 91 |               "src/assets"
 92 |             ],
 93 |             "styles": [
 94 |               "src/styles.css"
 95 |             ],
 96 |             "scripts": []
 97 |           }
 98 |         },
 99 |         "lint": {
100 |           "builder": "@angular-devkit/build-angular:tslint",
101 |           "options": {
102 |             "tsConfig": [
103 |               "tsconfig.app.json",
104 |               "tsconfig.spec.json",
105 |               "e2e/tsconfig.json"
106 |             ],
107 |             "exclude": [
108 |               "**/node_modules/**"
109 |             ]
110 |           }
111 |         },
112 |         "e2e": {
113 |           "builder": "@angular-devkit/build-angular:protractor",
114 |           "options": {
115 |             "protractorConfig": "e2e/protractor.conf.js",
116 |             "devServerTarget": "serverapp:serve"
117 |           },
118 |           "configurations": {
119 |             "production": {
120 |               "devServerTarget": "serverapp:serve:production"
121 |             }
122 |           }
123 |         }
124 |       }
125 |     }
126 |   },
127 |   "defaultProject": "serverapp",
128 |   "cli": {
129 |     "analytics": "7c36a25f-86d7-4c67-a0b4-425241824ee7"
130 |   }
131 | }


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
  1 | /* You can add global styles to this file, and also import other style files */
  2 | @import url('http://netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
  3 | @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
  4 | @import '~angular-notifier/styles';
  5 | 
  6 | body{
  7 |     background: #edf1f5;
  8 |     margin-top:20px;
  9 | }
 10 | .card {
 11 |     position: relative;
 12 |     display: flex;
 13 |     flex-direction: column;
 14 |     min-width: 0;
 15 |     word-wrap: break-word;
 16 |     background-color: #fff;
 17 |     background-clip: border-box;
 18 |     border: 0 solid transparent;
 19 |     border-radius: 0;
 20 | }
 21 | .card {
 22 |     margin-bottom: 30px;
 23 | }
 24 | .card-body {
 25 |     flex: 1 1 auto;
 26 |     padding: 1.57rem;
 27 | }
 28 | 
 29 |  .note-has-grid .nav-link {
 30 |      padding: .5rem
 31 |  }
 32 | 
 33 |  .note-has-grid .single-note-item .card {
 34 |      border-radius: 10px
 35 |  }
 36 | 
 37 |  .note-has-grid .single-note-item .favourite-note {
 38 |      cursor: pointer
 39 |  }
 40 | 
 41 |  .note-has-grid .single-note-item .side-stick {
 42 |      position: absolute;
 43 |      width: 3px;
 44 |      height: 35px;
 45 |      left: 0;
 46 |      background-color: rgba(82, 95, 127, .5)
 47 |  }
 48 | 
 49 |  .note-has-grid .single-note-item .category-dropdown.dropdown-toggle:after {
 50 |      display: none
 51 |  }
 52 | 
 53 |  .note-has-grid .single-note-item .category [class*=category-] {
 54 |      height: 15px;
 55 |      width: 15px;
 56 |      display: none
 57 |  }
 58 | 
 59 |  .note-has-grid .single-note-item .category [class*=category-]::after {
 60 |      content: "\f0d7";
 61 |      font: normal normal normal 14px/1 FontAwesome;
 62 |      font-size: 12px;
 63 |      color: #fff;
 64 |      position: absolute
 65 |  }
 66 | 
 67 |  .note-has-grid .single-note-item .category .category-business {
 68 |      background-color: rgba(44, 208, 126, .5);
 69 |      border: 2px solid #2cd07e
 70 |  }
 71 | 
 72 |  .note-has-grid .single-note-item .category .category-social {
 73 |      background-color: rgba(44, 171, 227, .5);
 74 |      border: 2px solid #2cabe3
 75 |  }
 76 | 
 77 |  .note-has-grid .single-note-item .category .category-important {
 78 |      background-color: rgba(255, 80, 80, .5);
 79 |      border: 2px solid #ff5050
 80 |  }
 81 | 
 82 |  .note-has-grid .single-note-item.all-category .point {
 83 |      color: rgba(82, 95, 127, .5)
 84 |  }
 85 | 
 86 |  .note-has-grid .single-note-item.note-business .point {
 87 |      color: rgba(44, 208, 126, .5)
 88 |  }
 89 | 
 90 |  .note-has-grid .single-note-item.note-business .side-stick {
 91 |      background-color: #2cd07e80
 92 |  }
 93 | 
 94 |  .note-has-grid .single-note-item.note-business .category .category-business {
 95 |      display: inline-block
 96 |  }
 97 | 
 98 |  .note-has-grid .single-note-item.note-favourite .favourite-note {
 99 |      color: #ffc107
100 |  }
101 | 
102 |  .note-has-grid .single-note-item.note-social .point {
103 |      color: rgba(44, 171, 227, .5)
104 |  }
105 | 
106 |  .note-has-grid .single-note-item.note-social .side-stick {
107 |      background-color: #2cabe380
108 |  }
109 | 
110 |  .note-has-grid .single-note-item.note-social .category .category-social {
111 |      display: inline-block
112 |  }
113 | 
114 |  .note-has-grid .single-note-item.note-important .point {
115 |      color: rgba(255, 80, 80, .5)
116 |  }
117 | 
118 |  .note-has-grid .single-note-item.note-important .side-stick {
119 |      background-color: #ff505080
120 |  }
121 | 
122 |  .note-has-grid .single-note-item.note-important .category .category-important {
123 |      display: inline-block
124 |  }
125 | 
126 |  .note-has-grid .single-note-item.all-category .more-options,
127 |  .note-has-grid .single-note-item.all-category.note-favourite .more-options {
128 |      display: block
129 |  }
130 | 
131 |  .note-has-grid .single-note-item.all-category.note-business .more-options,
132 |  .note-has-grid .single-note-item.all-category.note-favourite.note-business .more-options,
133 |  .note-has-grid .single-note-item.all-category.note-favourite.note-important .more-options,
134 |  .note-has-grid .single-note-item.all-category.note-favourite.note-social .more-options,
135 |  .note-has-grid .single-note-item.all-category.note-important .more-options,
136 |  .note-has-grid .single-note-item.all-category.note-social .more-options {
137 |      display: none
138 |  }
139 | 
140 |  @media (max-width:767.98px) {
141 |      .note-has-grid .single-note-item {
142 |          max-width: 100%
143 |      }
144 |  }
145 | 
146 |  @media (max-width:991.98px) {
147 |      .note-has-grid .single-note-item {
148 |          max-width: 216px
149 |      }
150 |  }


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     color: #566787;
  3 |     background: #f5f5f5;
  4 |     font-family: 'Overpass', serif;
  5 |     font-size: 13px;
  6 | }
  7 | 
  8 | .table-responsive {
  9 |     margin: 30px 0;
 10 | }
 11 | 
 12 | .table-wrapper {
 13 |     background: #fff;
 14 |     padding: 20px 25px;
 15 |     border-radius: 3px;
 16 |     min-width: 1000px;
 17 |     box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 18 | }
 19 | 
 20 | .table-title {
 21 |     padding-bottom: 15px;
 22 |     background: #074c68;
 23 |     color: #fff;
 24 |     padding: 16px 30px;
 25 |     min-width: 100%;
 26 |     margin: -20px -25px 10px;
 27 |     border-radius: 3px 3px 0 0;
 28 | }
 29 | 
 30 | .table-title h2 {
 31 |     margin: 5px 0 0;
 32 |     font-size: 24px;
 33 | }
 34 | 
 35 | .table-title .btn-group {
 36 |     float: right;
 37 | }
 38 | 
 39 | .table-title .btn {
 40 |     color: #fff;
 41 |     float: right;
 42 |     font-size: 13px;
 43 |     border: none;
 44 |     min-width: 50px;
 45 |     border-radius: 2px;
 46 |     border: none;
 47 |     outline: none !important;
 48 |     margin-left: 10px;
 49 | }
 50 | 
 51 | .table-title .btn i {
 52 |     float: left;
 53 |     font-size: 21px;
 54 |     margin-right: 5px;
 55 | }
 56 | 
 57 | .table-title .btn span {
 58 |     float: left;
 59 |     margin-top: 2px;
 60 | }
 61 | 
 62 | table.table tr th,
 63 | table.table tr td {
 64 |     border-color: #e9e9e9;
 65 |     padding: 12px 15px;
 66 |     vertical-align: middle;
 67 | }
 68 | 
 69 | table.table tr th:first-child {
 70 |     width: 60px;
 71 | }
 72 | 
 73 | table.table tr th:last-child {
 74 |     width: 100px;
 75 | }
 76 | 
 77 | table.table-striped tbody tr:nth-of-type(odd) {
 78 |     background-color: #fcfcfc;
 79 | }
 80 | 
 81 | table.table-striped.table-hover tbody tr:hover {
 82 |     background: #f5f5f5;
 83 | }
 84 | 
 85 | table.table th i {
 86 |     font-size: 13px;
 87 |     margin: 0 5px;
 88 |     cursor: pointer;
 89 | }
 90 | 
 91 | table.table td:last-child i {
 92 |     opacity: 0.9;
 93 |     font-size: 22px;
 94 |     margin: 0 5px;
 95 | }
 96 | 
 97 | table.table td a {
 98 |     font-weight: bold;
 99 |     color: #566787;
100 |     display: inline-block;
101 |     text-decoration: none;
102 |     outline: none !important;
103 | }
104 | 
105 | table.table td a:hover {
106 |     color: #2196F3;
107 | }
108 | 
109 | table.table td a.edit {
110 |     color: #FFC107;
111 | }
112 | 
113 | table.table td a.delete {
114 |     color: #F44336;
115 | }
116 | 
117 | table.table td i {
118 |     font-size: 30px;
119 | }
120 | 
121 | table.table .avatar {
122 |     border-radius: 50%;
123 |     vertical-align: middle;
124 |     margin-right: 10px;
125 | }
126 | 
127 | .pagination {
128 |     float: right;
129 |     margin: 0 0 5px;
130 | }
131 | 
132 | .pagination li a {
133 |     border: none;
134 |     font-size: 13px;
135 |     min-width: 30px;
136 |     min-height: 30px;
137 |     color: #999;
138 |     margin: 0 2px;
139 |     line-height: 30px;
140 |     border-radius: 2px !important;
141 |     text-align: center;
142 |     padding: 0 6px;
143 | }
144 | 
145 | .pagination li a:hover {
146 |     color: #666;
147 | }
148 | 
149 | .pagination li.active a,
150 | .pagination li.active a.page-link {
151 |     background: #03A9F4;
152 | }
153 | 
154 | .pagination li.active a:hover {
155 |     background: #0397d6;
156 | }
157 | 
158 | .pagination li.disabled i {
159 |     color: #ccc;
160 | }
161 | 
162 | .pagination li i {
163 |     font-size: 16px;
164 |     padding-top: 6px
165 | }
166 | 
167 | .hint-text {
168 |     float: left;
169 |     margin-top: 10px;
170 |     font-size: 13px;
171 | }
172 | 
173 | /* Custom checkbox */
174 | .custom-checkbox {
175 |     position: relative;
176 | }
177 | 
178 | .custom-checkbox input[type="checkbox"] {
179 |     opacity: 0;
180 |     position: absolute;
181 |     margin: 5px 0 0 3px;
182 |     z-index: 9;
183 | }
184 | 
185 | .custom-checkbox label:before {
186 |     width: 18px;
187 |     height: 18px;
188 | }
189 | 
190 | .custom-checkbox label:before {
191 |     content: '';
192 |     margin-right: 10px;
193 |     display: inline-block;
194 |     vertical-align: text-top;
195 |     background: white;
196 |     border: 1px solid #bbb;
197 |     border-radius: 2px;
198 |     box-sizing: border-box;
199 |     z-index: 2;
200 | }
201 | 
202 | .custom-checkbox input[type="checkbox"]:checked+label:after {
203 |     content: '';
204 |     position: absolute;
205 |     left: 6px;
206 |     top: 3px;
207 |     width: 6px;
208 |     height: 11px;
209 |     border: solid #000;
210 |     border-width: 0 3px 3px 0;
211 |     transform: inherit;
212 |     z-index: 3;
213 |     transform: rotateZ(45deg);
214 | }
215 | 
216 | .custom-checkbox input[type="checkbox"]:checked+label:before {
217 |     border-color: #03A9F4;
218 |     background: #03A9F4;
219 | }
220 | 
221 | .custom-checkbox input[type="checkbox"]:checked+label:after {
222 |     border-color: #fff;
223 | }
224 | 
225 | .custom-checkbox input[type="checkbox"]:disabled+label:before {
226 |     color: #b8b8b8;
227 |     cursor: auto;
228 |     box-shadow: none;
229 |     background: #ddd;
230 | }
231 | 
232 | /* Modal styles */
233 | .modal .modal-dialog {
234 |     max-width: 400px;
235 | }
236 | 
237 | .modal .modal-header,
238 | .modal .modal-body,
239 | .modal .modal-footer {
240 |     padding: 20px 30px;
241 | }
242 | 
243 | .modal .modal-content {
244 |     border-radius: 3px;
245 |     font-size: 14px;
246 | }
247 | 
248 | .modal .modal-footer {
249 |     background: #ecf0f1;
250 |     border-radius: 0 0 3px 3px;
251 | }
252 | 
253 | .modal .modal-title {
254 |     display: inline-block;
255 | }
256 | 
257 | .modal .form-control {
258 |     border-radius: 2px;
259 |     box-shadow: none;
260 |     border-color: #dddddd;
261 | }
262 | 
263 | .modal textarea.form-control {
264 |     resize: vertical;
265 | }
266 | 
267 | .modal .btn {
268 |     border-radius: 2px;
269 |     min-width: 100px;
270 | }
271 | 
272 | .modal form label {
273 |     font-weight: normal;
274 | }
275 | .pointer {
276 |     cursor: pointer;
277 | }


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
  1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
  2 | import { NgForm } from '@angular/forms';
  3 | import { BehaviorSubject, Observable, of } from 'rxjs';
  4 | import { catchError, map, startWith } from 'rxjs/operators';
  5 | import { DataState } from './enum/data-state.enum';
  6 | import { Status } from './enum/status.enum';
  7 | import { AppState } from './interface/app-state';
  8 | import { CustomResponse } from './interface/custom-response';
  9 | import { Server } from './interface/server';
 10 | import { NotificationService } from './service/notification.service';
 11 | import { ServerService } from './service/server.service';
 12 | 
 13 | @Component({
 14 |   selector: 'app-root',
 15 |   templateUrl: './app.component.html',
 16 |   styleUrls: ['./app.component.css'],
 17 |   changeDetection: ChangeDetectionStrategy.OnPush
 18 | })
 19 | export class AppComponent implements OnInit {
 20 |   appState$: Observable<AppState<CustomResponse>>;
 21 |   readonly DataState = DataState;
 22 |   readonly Status = Status;
 23 |   private filterSubject = new BehaviorSubject<string>('');
 24 |   private dataSubject = new BehaviorSubject<CustomResponse>(null);
 25 |   filterStatus$ = this.filterSubject.asObservable();
 26 |   private isLoading = new BehaviorSubject<boolean>(false);
 27 |   isLoading$ = this.isLoading.asObservable();
 28 | 
 29 | 
 30 |   constructor(private serverService: ServerService, private notifier: NotificationService) { }
 31 | 
 32 |   ngOnInit(): void {
 33 |     this.appState$ = this.serverService.servers$
 34 |       .pipe(
 35 |         map(response => {
 36 |           this.notifier.onDefault(response.message);
 37 |           this.dataSubject.next(response);
 38 |           return { dataState: DataState.LOADED_STATE, appData: { ...response, data: { servers: response.data.servers.reverse() } } }
 39 |         }),
 40 |         startWith({ dataState: DataState.LOADING_STATE }),
 41 |         catchError((error: string) => {
 42 |           this.notifier.onError(error);
 43 |           return of({ dataState: DataState.ERROR_STATE, error });
 44 |         })
 45 |       );
 46 |   }
 47 | 
 48 |   pingServer(ipAddress: string): void {
 49 |     this.filterSubject.next(ipAddress);
 50 |     this.appState$ = this.serverService.ping$(ipAddress)
 51 |       .pipe(
 52 |         map(response => {
 53 |           const index = this.dataSubject.value.data.servers.findIndex(server =>  server.id === response.data.server.id);
 54 |           this.dataSubject.value.data.servers[index] = response.data.server;
 55 |           this.notifier.onDefault(response.message);
 56 |           this.filterSubject.next('');
 57 |           return { dataState: DataState.LOADED_STATE, appData: this.dataSubject.value }
 58 |         }),
 59 |         startWith({ dataState: DataState.LOADED_STATE, appData: this.dataSubject.value }),
 60 |         catchError((error: string) => {
 61 |           this.filterSubject.next('');
 62 |           this.notifier.onError(error);
 63 |           return of({ dataState: DataState.ERROR_STATE, error });
 64 |         })
 65 |       );
 66 |   }
 67 | 
 68 |   saveServer(serverForm: NgForm): void {
 69 |     this.isLoading.next(true);
 70 |     this.appState$ = this.serverService.save$(serverForm.value as Server)
 71 |       .pipe(
 72 |         map(response => {
 73 |           this.dataSubject.next(
 74 |             {...response, data: { servers: [response.data.server, ...this.dataSubject.value.data.servers] } }
 75 |           );
 76 |           this.notifier.onDefault(response.message);
 77 |           document.getElementById('closeModal').click();
 78 |           this.isLoading.next(false);
 79 |           serverForm.resetForm({ status: this.Status.SERVER_DOWN });
 80 |           return { dataState: DataState.LOADED_STATE, appData: this.dataSubject.value }
 81 |         }),
 82 |         startWith({ dataState: DataState.LOADED_STATE, appData: this.dataSubject.value }),
 83 |         catchError((error: string) => {
 84 |           this.isLoading.next(false);
 85 |           this.notifier.onError(error);
 86 |           return of({ dataState: DataState.ERROR_STATE, error });
 87 |         })
 88 |       );
 89 | }
 90 | 
 91 |   filterServers(status: Status): void {
 92 |     this.appState$ = this.serverService.filter$(status, this.dataSubject.value)
 93 |       .pipe(
 94 |         map(response => {
 95 |           this.notifier.onDefault(response.message);
 96 |           return { dataState: DataState.LOADED_STATE, appData: response };
 97 |         }),
 98 |         startWith({ dataState: DataState.LOADED_STATE, appData: this.dataSubject.value }),
 99 |         catchError((error: string) => {
100 |           this.notifier.onError(error);
101 |           return of({ dataState: DataState.ERROR_STATE, error });
102 |         })
103 |       );
104 |   }
105 | 
106 |   deleteServer(server: Server): void {
107 |     this.appState$ = this.serverService.delete$(server.id)
108 |       .pipe(
109 |         map(response => {
110 |           this.dataSubject.next(
111 |             { ...response, data: 
112 |               { servers: this.dataSubject.value.data.servers.filter(s => s.id !== server.id)} }
113 |           );
114 |           this.notifier.onDefault(response.message);
115 |           return { dataState: DataState.LOADED_STATE, appData: this.dataSubject.value }
116 |         }),
117 |         startWith({ dataState: DataState.LOADED_STATE, appData: this.dataSubject.value }),
118 |         catchError((error: string) => {
119 |           this.notifier.onError(error);
120 |           return of({ dataState: DataState.ERROR_STATE, error });
121 |         })
122 |       );
123 |   }
124 | 
125 |   printReport(): void {
126 |     this.notifier.onDefault('Report downloaded');
127 |     // window.print();
128 |     let dataType = 'application/vnd.ms-excel.sheet.macroEnabled.12';
129 |     let tableSelect = document.getElementById('servers');
130 |     let tableHtml = tableSelect.outerHTML.replace(/ /g, '%20');
131 |     let downloadLink = document.createElement('a');
132 |     document.body.appendChild(downloadLink);
133 |     downloadLink.href = 'data:' + dataType + ', ' + tableHtml;
134 |     downloadLink.download = 'server-report.xls';
135 |     downloadLink.click();
136 |     document.body.removeChild(downloadLink);
137 |   }
138 | }
139 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
  1 | <!-- <div>{{ appState$ | async | json }}</div> -->
  2 | <div class="container-xl">
  3 |   <div class="table-responsive">
  4 |       <div class="table-wrapper">
  5 |           <div class="table-title">
  6 |               <div class="row">
  7 |                   <div class="col-sm-6">
  8 |                       <h2>Manage Servers</h2>
  9 |                   </div>
 10 |                   <div class="col-sm-6">
 11 |                       <button (click)="printReport()" type="button" class="btn btn-primary">Print Report</button>
 12 | 
 13 |                       <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal">
 14 |                           <i class="material-icons">&#xE147;</i>
 15 |                           <span>New Server</span>
 16 |                       </a>
 17 | 
 18 |                       <span>
 19 |                           <select (ngModelChange)="filterServers($event)" name="status" ngModel="ALL"  
 20 |                               class="btn btn-info" style="height: 32.91px;">
 21 |                               <option value="ALL">ALL</option>
 22 |                               <option value="SERVER_UP">SERVER UP</option>
 23 |                               <option value="SERVER_DOWN">SERVER DOWN</option>
 24 |                           </select>
 25 |                       </span>
 26 |                   </div>
 27 |               </div>
 28 |           </div> <br>
 29 |           <ng-container *ngIf="(appState$ | async) as appState" [ngSwitch]="appState.dataState">
 30 |               <ng-container *ngSwitchCase="DataState.LOADING_STATE">
 31 |                   <div class="col-md-12 single-note-item text-center">
 32 |                       <div class="spinner-border text-info" role="status"></div>
 33 |                   </div>
 34 |               </ng-container>
 35 |               <ng-container *ngSwitchCase="DataState.LOADED_STATE">
 36 |                   <table class="table table-striped table-hover" id="servers">
 37 |                       <thead>
 38 |                           <tr>
 39 |                               <th>Image</th>
 40 |                               <th>IP Address</th>
 41 |                               <th>Name</th>
 42 |                               <th>Memory</th>
 43 |                               <th>Type</th>
 44 |                               <th>Status</th>
 45 |                               <th>Ping</th>
 46 |                               <th>Actions</th>
 47 |                           </tr>
 48 |                       </thead>
 49 |                       <tbody *ngFor="let server of appState.appData.data.servers; let i = index" >
 50 |                           <tr>
 51 |                               <td> <img [src]="server.imageUrl" [alt]="server.name" width="40" height="40"></td>
 52 |                               <td>{{ server.ipAddress }}</td>
 53 |                               <td>{{ server.name }}</td>
 54 |                               <td>{{ server.memory }}</td>
 55 |                               <td>{{ server.type }}</td>
 56 |                               <td>
 57 |                                   <span class="badge" 
 58 |                                   [ngClass]="[server.status === Status.SERVER_UP ? ' badge-success' : ' badge-danger']">
 59 |                                     {{ server.status === Status.SERVER_UP ? 'SERVER UP' : 'SERVER DOWN' }}
 60 |                                   </span>
 61 |                               </td>
 62 |                               <td>
 63 |                                   <a (click)="pingServer(server.ipAddress)" style="cursor: pointer;">
 64 |                                       <i *ngIf="(filterStatus$ | async) === '' || (filterStatus$ | async) !== server.ipAddress"
 65 |                                           class="material-icons" title="Ping server">&#xe328;</i>
 66 |                                       <i *ngIf="(filterStatus$ | async) === server.ipAddress"
 67 |                                           class="fa fa-spinner fa-spin" style="font-size:24px"></i>
 68 |                                   </a>
 69 |                               </td>
 70 |                               <td>
 71 |                                   <a (click)="deleteServer(server)" class="delete" data-toggle="modal"
 72 |                                       style="cursor: pointer;"><i class="material-icons" data-toggle="tooltip"
 73 |                                           title="Delete">&#xE872;</i></a>
 74 |                               </td>
 75 |                       </tbody>
 76 |                   </table>
 77 |               </ng-container>
 78 |               <ng-container *ngSwitchCase="DataState.ERROR_STATE">
 79 |                   <div class="alert-danger">
 80 |                       {{ appState.error }}
 81 |                   </div>
 82 |               </ng-container>
 83 |           </ng-container>
 84 |       </div>
 85 |   </div>
 86 | </div>
 87 | 
 88 | <!-- Add server Modal HTML -->
 89 | <div id="addEmployeeModal" class="modal fade">
 90 |   <div class="modal-dialog">
 91 |       <div class="modal-content">
 92 |           <form #serverForm="ngForm" (ngSubmit)="saveServer(serverForm)">
 93 |               <div class="modal-header">
 94 |                   <h4 class="modal-title">Add Server</h4>
 95 |                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 96 |               </div>
 97 |               <div class="modal-body">
 98 |                   <div class="form-group">
 99 |                       <label>IP</label>
100 |                       <input type="text" ngModel name="ipAddress" class="form-control" required>
101 |                   </div>
102 |                   <div class="form-group">
103 |                       <label>Name</label>
104 |                       <input type="text" ngModel name="name" class="form-control" required>
105 |                   </div>
106 |                   <div class="row">
107 |                       <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
108 |                           <div class="form-group">
109 |                               <label>Memory</label>
110 |                               <input type="text" ngModel name="memory" class="form-control" required>
111 |                           </div>
112 |                       </div>
113 |                       <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
114 |                           <div class="form-group">
115 |                               <label>Type</label>
116 |                               <input type="text" ngModel name="type" class="form-control" required>
117 |                           </div>
118 |                       </div>
119 |                   </div>
120 |                   <div class="form-group">
121 |                       <label>Status</label>
122 |                       <select name="status" ngModel="SERVER_DOWN" class="form-control" name="status" required>
123 |                           <option value="SERVER_UP">SERVER UP</option>
124 |                           <option value="SERVER_DOWN">SERVER DOWN</option>
125 |                       </select>
126 |                   </div>
127 |               </div>
128 |               <div class="modal-footer">
129 |                   <button type="button" class="btn btn-warning" id="closeModal" data-dismiss="modal">
130 |                       Cancel
131 |                   </button>
132 |                   <button type="submit" [disabled]="serverForm.invalid || (isLoading$ | async)"
133 |                       class="btn btn-success">
134 |                       <i *ngIf="isLoading$ | async" class="fas fa-spinner fa-spin"></i>
135 |                       <span *ngIf="isLoading$ | async">Saving...</span>
136 |                       <span *ngIf="!(isLoading$ | async)">Add</span>
137 |                   </button>
138 |               </div>
139 |           </form>
140 |       </div>
141 |   </div>
142 | </div>
143 | <notifier-container></notifier-container>


--------------------------------------------------------------------------------