From cec972a11f6ff969f4f99c25647545439db38275 Mon Sep 17 00:00:00 2001 From: usbharu <64310155+usbharu@users.noreply.github.com> Date: Thu, 14 Mar 2024 12:48:42 +0900 Subject: [PATCH] =?UTF-8?q?unos-fe:=20ui=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- unos-fe/angular.json | 8 +- unos-fe/src/app/app.component.html | 335 ------------------ unos-fe/src/app/app.config.ts | 3 +- unos-fe/src/app/app.routes.ts | 6 +- unos-fe/src/app/index/index.component.css | 0 unos-fe/src/app/index/index.component.html | 3 + unos-fe/src/app/index/index.component.spec.ts | 23 ++ unos-fe/src/app/index/index.component.ts | 15 + .../metrics-count/metrics-count.component.css | 58 +++ .../metrics-count.component.html | 9 + .../metrics-count.component.spec.ts | 23 ++ .../metrics-count/metrics-count.component.ts | 14 + .../metrics-list/metrics-list.component.css | 0 .../metrics-list/metrics-list.component.html | 5 + .../metrics-list.component.spec.ts | 23 ++ .../metrics-list/metrics-list.component.ts | 20 ++ .../services/fetch-metrics.service.ts | 26 +- .../watchdog-top/watchdog-top.component.css | 9 + .../watchdog-top/watchdog-top.component.html | 28 +- .../watchdog-top/watchdog-top.component.ts | 4 + .../environments/environment.development.ts | 4 + unos-fe/src/environments/environment.ts | 4 + 22 files changed, 248 insertions(+), 372 deletions(-) create mode 100644 unos-fe/src/app/index/index.component.css create mode 100644 unos-fe/src/app/index/index.component.html create mode 100644 unos-fe/src/app/index/index.component.spec.ts create mode 100644 unos-fe/src/app/index/index.component.ts create mode 100644 unos-fe/src/app/watchdog/metrics-count/metrics-count.component.css create mode 100644 unos-fe/src/app/watchdog/metrics-count/metrics-count.component.html create mode 100644 unos-fe/src/app/watchdog/metrics-count/metrics-count.component.spec.ts create mode 100644 unos-fe/src/app/watchdog/metrics-count/metrics-count.component.ts create mode 100644 unos-fe/src/app/watchdog/metrics-list/metrics-list.component.css create mode 100644 unos-fe/src/app/watchdog/metrics-list/metrics-list.component.html create mode 100644 unos-fe/src/app/watchdog/metrics-list/metrics-list.component.spec.ts create mode 100644 unos-fe/src/app/watchdog/metrics-list/metrics-list.component.ts create mode 100644 unos-fe/src/environments/environment.development.ts create mode 100644 unos-fe/src/environments/environment.ts diff --git a/unos-fe/angular.json b/unos-fe/angular.json index 422cecc..cd9b5f1 100644 --- a/unos-fe/angular.json +++ b/unos-fe/angular.json @@ -48,7 +48,13 @@ "development": { "optimization": false, "extractLicenses": false, - "sourceMap": true + "sourceMap": true, + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.development.ts" + } + ] } }, "defaultConfiguration": "production" diff --git a/unos-fe/src/app/app.component.html b/unos-fe/src/app/app.component.html index 36093e1..67e7bd4 100644 --- a/unos-fe/src/app/app.component.html +++ b/unos-fe/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - diff --git a/unos-fe/src/app/app.config.ts b/unos-fe/src/app/app.config.ts index 6c6ef60..29946da 100644 --- a/unos-fe/src/app/app.config.ts +++ b/unos-fe/src/app/app.config.ts @@ -2,7 +2,8 @@ import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; +import {provideHttpClient, withFetch} from "@angular/common/http"; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes)] + providers: [provideRouter(routes),provideHttpClient(withFetch())] }; diff --git a/unos-fe/src/app/app.routes.ts b/unos-fe/src/app/app.routes.ts index b303f5c..b0050ea 100644 --- a/unos-fe/src/app/app.routes.ts +++ b/unos-fe/src/app/app.routes.ts @@ -1,7 +1,9 @@ import { Routes } from '@angular/router'; import {WatchdogTopComponent} from "./watchdog/watchdog-top/watchdog-top.component"; -import {AppComponent} from "./app.component"; +import {IndexComponent} from "./index/index.component"; export const routes: Routes = [ - { path: 'watchdog',component: WatchdogTopComponent } + { path: 'watchdog',component: WatchdogTopComponent }, + {path: '',component:IndexComponent}, + {path: '**',redirectTo:"/"} ]; diff --git a/unos-fe/src/app/index/index.component.css b/unos-fe/src/app/index/index.component.css new file mode 100644 index 0000000..e69de29 diff --git a/unos-fe/src/app/index/index.component.html b/unos-fe/src/app/index/index.component.html new file mode 100644 index 0000000..073d127 --- /dev/null +++ b/unos-fe/src/app/index/index.component.html @@ -0,0 +1,3 @@ +

おかえりăȘさい

+ +WatchDog diff --git a/unos-fe/src/app/index/index.component.spec.ts b/unos-fe/src/app/index/index.component.spec.ts new file mode 100644 index 0000000..7e4c59e --- /dev/null +++ b/unos-fe/src/app/index/index.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IndexComponent } from './index.component'; + +describe('InexComponent', () => { + let component: IndexComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [IndexComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(IndexComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/unos-fe/src/app/index/index.component.ts b/unos-fe/src/app/index/index.component.ts new file mode 100644 index 0000000..ae399d2 --- /dev/null +++ b/unos-fe/src/app/index/index.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import {RouterLink} from "@angular/router"; + +@Component({ + selector: 'app-index', + standalone: true, + imports: [ + RouterLink + ], + templateUrl: './index.component.html', + styleUrl: './index.component.css' +}) +export class IndexComponent { + +} diff --git a/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.css b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.css new file mode 100644 index 0000000..43b575a --- /dev/null +++ b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.css @@ -0,0 +1,58 @@ +.metrics-count { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + border: 1px solid #676767; + width: 100%; +} + +.metric { + display: flex; +} + +.metric div{ + padding: 10px; + border: 1px solid #676767; +} + +.metric-status{ + min-width: 150px; + width: 100%; +} + +.metric-value { + width: 100%; + text-align: right; +} + +@media (min-width: 700px) { + .metric-status { + width: 30%; + } +} + +@media (max-width: 700px) { + .metric{ + flex-wrap: wrap; + } + + .metric-status{ + text-align: center; + } +} + +.metric-status-ok{ + background: #9effa7; +} + +.metric-status-ng { + background: #fff79b; +} + +.metric-status-dead{ + background: #ff9680; +} + +.metric-status-unknown{ + background: aquamarine; +} diff --git a/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.html b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.html new file mode 100644 index 0000000..6088e49 --- /dev/null +++ b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.html @@ -0,0 +1,9 @@ +
+
+
OK
{{ count.OK || 0 }}
+
+ +
NOT GOOD
{{ count.NOT_GOOD || 0 }}
+
DEAD
{{ count.DEAD || 0 }}
+
UNKNOWN
{{ count.UNKNOWN || 0 }}
+
diff --git a/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.spec.ts b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.spec.ts new file mode 100644 index 0000000..95c77d1 --- /dev/null +++ b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MetricsCountComponent } from './metrics-count.component'; + +describe('MetricsCountComponent', () => { + let component: MetricsCountComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MetricsCountComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MetricsCountComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.ts b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.ts new file mode 100644 index 0000000..5184a41 --- /dev/null +++ b/unos-fe/src/app/watchdog/metrics-count/metrics-count.component.ts @@ -0,0 +1,14 @@ +import {Component, Input} from '@angular/core'; +import {StatusIntMap} from "../models/StatusIntMap"; + +@Component({ + selector: 'app-metrics-count', + standalone: true, + imports: [], + templateUrl: './metrics-count.component.html', + styleUrl: './metrics-count.component.css' +}) +export class MetricsCountComponent { + @Input() + count!: StatusIntMap; +} diff --git a/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.css b/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.css new file mode 100644 index 0000000..e69de29 diff --git a/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.html b/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.html new file mode 100644 index 0000000..093703c --- /dev/null +++ b/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.html @@ -0,0 +1,5 @@ +

{{name}} {{count || 0}}

+ +
+ +
diff --git a/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.spec.ts b/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.spec.ts new file mode 100644 index 0000000..c39db19 --- /dev/null +++ b/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MetricsListComponent } from './metrics-list.component'; + +describe('MetricsListComponent', () => { + let component: MetricsListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MetricsListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MetricsListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.ts b/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.ts new file mode 100644 index 0000000..ff581a1 --- /dev/null +++ b/unos-fe/src/app/watchdog/metrics-list/metrics-list.component.ts @@ -0,0 +1,20 @@ +import {Component, Input} from '@angular/core'; +import {Metric} from "../models/Metric"; +import {NgForOf} from "@angular/common"; +import {MetricListItemComponent} from "../metric-list-item/metric-list-item.component"; + +@Component({ + selector: 'app-metrics-list', + standalone: true, + imports: [ + NgForOf, + MetricListItemComponent + ], + templateUrl: './metrics-list.component.html', + styleUrl: './metrics-list.component.css' +}) +export class MetricsListComponent { + @Input() count?: number + @Input() metrics!:Metric[] + @Input() name!:string +} diff --git a/unos-fe/src/app/watchdog/services/fetch-metrics.service.ts b/unos-fe/src/app/watchdog/services/fetch-metrics.service.ts index 0e0db47..9760cbf 100644 --- a/unos-fe/src/app/watchdog/services/fetch-metrics.service.ts +++ b/unos-fe/src/app/watchdog/services/fetch-metrics.service.ts @@ -4,17 +4,21 @@ import {HttpClient} from "@angular/common/http"; import {Metric} from "../models/Metric"; import {map} from 'rxjs/operators'; import {StatusIntMap} from "../models/StatusIntMap"; +import {environment} from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class FetchMetricsService { + baseUrl:string + constructor(private http: HttpClient) { + this.baseUrl = environment.baseUrl } - private fetchMetrics(url:string):Observable{ - return this.http.get(url, + private fetchMetrics(url: string): Observable { + return this.http.get(this.baseUrl+url, {responseType: 'text'}).pipe(map(value => JSON.parse(value, (key, value) => { if (key === 'timestamp') { @@ -26,22 +30,22 @@ export class FetchMetricsService { } getDead(): Observable { - return this.fetchMetrics("http://localhost:4200/api/v1/metrics/dead"); + return this.fetchMetrics("/api/v1/metrics/dead"); } - getOk():Observable{ - return this.fetchMetrics("http://localhost:4200/api/v1/metrics/ok") + getOk(): Observable { + return this.fetchMetrics("/api/v1/metrics/ok") } - getUnknown():Observable { - return this.fetchMetrics("http://localhost:4200/api/v1/metrics/unknown") + getUnknown(): Observable { + return this.fetchMetrics("/api/v1/metrics/unknown") } - getNotGood():Observable { - return this.fetchMetrics("http://localhost:4200/api/v1/metrics/not-good") + getNotGood(): Observable { + return this.fetchMetrics("/api/v1/metrics/not-good") } - getCount():Observable{ - return this.http.get("http://localhost:4200/api/v1/metrics") + getCount(): Observable { + return this.http.get("/api/v1/metrics") } } diff --git a/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.css b/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.css index e69de29..9326197 100644 --- a/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.css +++ b/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.css @@ -0,0 +1,9 @@ +.metrics-list-container{ + display: flex; + flex-wrap: wrap; +} + +.metrics-list-container app-metrics-list{ + width: 100%; + max-width: 700px; +} diff --git a/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.html b/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.html index 4ab87f0..d8072a2 100644 --- a/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.html +++ b/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.html @@ -1,26 +1,10 @@

Watch Dog

-
-

OK {{count.OK || 0}}

-

NOT GOOD {{count.NOT_GOOD || 0 }}

-

DEAD {{count.DEAD || 0 }}

-

UNKNOWN {{count.UNKNOWN || 0}}

-
+ - -

OK {{count.OK}}

-
- -
-

NOT GOOD {{count.NOT_GOOD}}

-
- -
-

DEAD {{count.DEAD}}

-
- -
-

UNKNOWN {{count.UNKNOWN}}

-
- +
+ + + +
diff --git a/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.ts b/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.ts index d1891f0..95c1b8c 100644 --- a/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.ts +++ b/unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.ts @@ -6,6 +6,8 @@ import {RouterOutlet} from "@angular/router"; import {HttpClientModule} from "@angular/common/http"; import {StatusIntMap} from "../models/StatusIntMap"; import {MetricListItemComponent} from "../metric-list-item/metric-list-item.component"; +import {MetricsCountComponent} from "../metrics-count/metrics-count.component"; +import {MetricsListComponent} from "../metrics-list/metrics-list.component"; @Component({ selector: 'app-watchdog-top', @@ -15,6 +17,8 @@ import {MetricListItemComponent} from "../metric-list-item/metric-list-item.comp RouterOutlet, HttpClientModule, MetricListItemComponent, + MetricsCountComponent, + MetricsListComponent, ], providers:[ FetchMetricsService diff --git a/unos-fe/src/environments/environment.development.ts b/unos-fe/src/environments/environment.development.ts new file mode 100644 index 0000000..01fac98 --- /dev/null +++ b/unos-fe/src/environments/environment.development.ts @@ -0,0 +1,4 @@ +export const environment = { + production: false, + baseUrl:"http://localhost:4200" +}; diff --git a/unos-fe/src/environments/environment.ts b/unos-fe/src/environments/environment.ts new file mode 100644 index 0000000..ce1f2d7 --- /dev/null +++ b/unos-fe/src/environments/environment.ts @@ -0,0 +1,4 @@ +export const environment = { + production:true, + baseUrl:"" +};