ci: frontend run lint instead of test

main
Johnson 2 years ago
parent ce501e36bf
commit bc828f8538

@ -20,7 +20,9 @@ jobs:
go-version: 1.18
- name: Go Test
run: go test -v ./...
run: |
go vet ./...
go test -v ./...
- name: Notify of test failure
if: failure()

@ -53,7 +53,7 @@ module.exports = {
'@angular-eslint/no-forward-ref': 'off',
'@angular-eslint/no-host-metadata-property': 'off',
'@angular-eslint/no-lifecycle-call': 'off',
'@angular-eslint/no-pipe-impure': 'error',
'@angular-eslint/no-pipe-impure': 'off',
'@angular-eslint/prefer-output-readonly': 'error',
'@angular-eslint/use-component-selector': 'off',
'@angular-eslint/use-component-view-encapsulation': 'off',

@ -19,7 +19,7 @@ const LANG = {
ng: ngLang,
zorro: zorroLang,
date: dateLang,
delon: delonLang,
delon: delonLang
};
// register angular
import { registerLocaleData } from '@angular/common';
@ -28,7 +28,7 @@ const LANG_PROVIDES = [
{ provide: LOCALE_ID, useValue: LANG.abbr },
{ provide: NZ_I18N, useValue: LANG.zorro },
{ provide: NZ_DATE_LOCALE, useValue: LANG.date },
{ provide: DELON_LOCALE, useValue: LANG.delon },
{ provide: DELON_LOCALE, useValue: LANG.delon }
];
// #endregion
@ -37,7 +37,6 @@ import { JsonSchemaModule } from '@shared';
const FORM_MODULES = [JsonSchemaModule];
// #endregion
// #region Http Interceptors
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { DefaultInterceptor } from '@core';
@ -83,9 +82,7 @@ import { SharedModule } from './shared/shared.module';
import { STWidgetModule } from './shared/st-widget/st-widget.module';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
@ -105,8 +102,8 @@ import { STWidgetModule } from './shared/st-widget/st-widget.module';
...LANG_PROVIDES,
...INTERCEPTOR_PROVIDES,
...APPINIT_PROVIDES,
{ provide: API_BASE_URL, useFactory: getRemoteServiceBaseUrl },
{ provide: API_BASE_URL, useFactory: getRemoteServiceBaseUrl }
],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}

@ -1,13 +1,12 @@
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { throwIfAlreadyLoaded } from './module-import-guard';
import { throwIfAlreadyLoaded } from './module-import-guard';
@NgModule({
providers: [
]
providers: []
})
export class CoreModule {
constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
}

@ -1,4 +1,3 @@
export * from './module-import-guard';
export * from './net/default.interceptor';
export * from './startup/startup.service';

@ -12,12 +12,11 @@ import { Router } from '@angular/router';
import { ALAIN_I18N_TOKEN, _HttpClient } from '@delon/theme';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { Observable, of, throwError } from 'rxjs';
import { catchError, mergeMap, } from 'rxjs/operators';
import { catchError, mergeMap } from 'rxjs/operators';
@Injectable()
export class DefaultInterceptor implements HttpInterceptor {
constructor(private injector: Injector) {
}
constructor(private injector: Injector) {}
private get notification(): NzNotificationService {
return this.injector.get(NzNotificationService);
@ -42,7 +41,7 @@ export class DefaultInterceptor implements HttpInterceptor {
default:
console.log(ev);
if (ev instanceof HttpErrorResponse) {
this.blobToText(ev.error).subscribe((resp) => {
this.blobToText(ev.error).subscribe(resp => {
this.notification.error(ev.statusText, `${resp}\n${ev.url}`, { nzDuration: 15000 });
});
return throwError(ev);
@ -82,7 +81,7 @@ export class DefaultInterceptor implements HttpInterceptor {
return new Observable<string>((observer: any) => {
if (blob instanceof Blob) {
let reader = new FileReader();
reader.onload = (event) => {
reader.onload = event => {
observer.next((<any>event.target).result);
observer.complete();
};

@ -1,14 +1,14 @@
import { Injectable } from '@angular/core';
import { MenuService, SettingsService, TitleService } from '@delon/theme';
import { ACLService } from '@delon/acl';
import { Observable, zip, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { MenuService, SettingsService, TitleService } from '@delon/theme';
import type { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzIconService } from 'ng-zorro-antd/icon';
import { Observable, zip, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { AccountServiceProxy, ServiceProxy } from 'src/app/shared/service-proxies/service-proxies';
import { ICONS } from '../../../style-icons';
import { ICONS_AUTO } from '../../../style-icons-auto';
import { AccountServiceProxy, ServiceProxy } from 'src/app/shared/service-proxies/service-proxies';
/**
* Used for application startup
@ -23,7 +23,7 @@ export class StartupService {
private aclService: ACLService,
private titleService: TitleService,
private accountService: AccountServiceProxy,
private readonly serviceProxy: ServiceProxy,
private readonly serviceProxy: ServiceProxy
) {
iconSrv.addIcon(...ICONS_AUTO, ...ICONS);
}

@ -22,7 +22,7 @@ const alainConfig: AlainConfig = {
login_url: '/passport/login',
token_send_key: 'Authorization',
token_send_template: 'Bearer ${token}',
ignores: [/\/login/, /assets\//, /passport\//, /\/version/,],
ignores: [/\/login/, /assets\//, /passport\//, /\/version/]
}
};

@ -22,12 +22,12 @@ import { environment } from '@env/environment';
<setting-drawer *ngIf="showSettingDrawer"></setting-drawer>
<theme-btn></theme-btn>
`,
`
})
export class LayoutBasicComponent {
options: LayoutDefaultOptions = {
logoExpanded: `./assets/logo-full.png`,
logoCollapsed: `./assets/logo.png`,
logoCollapsed: `./assets/logo.png`
};
searchToggleStatus = false;
showSettingDrawer = !environment.production;
@ -35,5 +35,5 @@ export class LayoutBasicComponent {
return this.settings.user;
}
constructor(private settings: SettingsService) { }
constructor(private settings: SettingsService) {}
}

@ -22,9 +22,15 @@ import { SettingsService, User } from '@delon/theme';
</div>
</div>
</nz-dropdown-menu>
<nz-modal [(nzVisible)]="aboutVisible" nzTitle="About" nzCancelDisabled="true" (nzOnCancel)="aboutVisible=false" (nzOnOk)="aboutVisible=false">
<nz-modal
[(nzVisible)]="aboutVisible"
nzTitle="About"
nzCancelDisabled="true"
(nzOnCancel)="aboutVisible = false"
(nzOnOk)="aboutVisible = false"
>
<ng-container *nzModalContent>
<p>Version: {{version}}</p>
<p>Version: {{ version }}</p>
</ng-container>
</nz-modal>
`,
@ -37,7 +43,7 @@ export class HeaderUserComponent {
aboutVisible = false;
version: string = '';
constructor(private settings: SettingsService, private router: Router, @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) { }
constructor(private settings: SettingsService, private router: Router, @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {}
about(): void {
this.aboutVisible = true;

@ -28,18 +28,11 @@ import { LayoutBlankComponent } from './blank/blank.component';
const COMPONENTS = [LayoutBasicComponent, LayoutBlankComponent];
const HEADERCOMPONENTS = [
HeaderSearchComponent,
HeaderFullScreenComponent,
HeaderClearStorageComponent,
HeaderUserComponent,
];
const HEADERCOMPONENTS = [HeaderSearchComponent, HeaderFullScreenComponent, HeaderClearStorageComponent, HeaderUserComponent];
// passport
import { LayoutPassportComponent } from './passport/passport.component';
const PASSPORT = [
LayoutPassportComponent
];
const PASSPORT = [LayoutPassportComponent];
@NgModule({
imports: [
@ -60,9 +53,9 @@ const PASSPORT = [
NzBadgeModule,
NzAvatarModule,
NzIconModule,
NzModalModule,
NzModalModule
],
declarations: [...COMPONENTS, ...HEADERCOMPONENTS, ...PASSPORT],
exports: [...COMPONENTS, ...PASSPORT],
exports: [...COMPONENTS, ...PASSPORT]
})
export class LayoutModule { }
export class LayoutModule {}

@ -2,14 +2,14 @@
<div class="wrap">
<div class="top">
<div class="head">
<img class="logo" src="./assets/logo-color.png">
<img class="logo" src="./assets/logo-color.png" />
<p class="title">Go Micro Dashboard</p>
</div>
</div>
<router-outlet></router-outlet>
<global-footer>
<a href="https://github.com/xpunch" target="_blank">X Punch</a>
<p>{{version}}</p>
<p>{{ version }}</p>
</global-footer>
</div>
</div>
</div>

@ -52,8 +52,8 @@
}
.logo {
height: 96px;
margin-right: 16px;
margin-top: 64px;
margin-right: 16px;
margin-bottom: 16px;
}
.title {

@ -8,7 +8,7 @@ import { ServiceProxy } from 'src/app/shared/service-proxies/service-proxies';
styleUrls: ['./passport.component.less']
})
export class LayoutPassportComponent implements OnInit {
constructor(@Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService, private readonly service: ServiceProxy) { }
constructor(@Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService, private readonly service: ServiceProxy) {}
version: string = '';

@ -1,83 +1,105 @@
<page-header [title]="'Call'" [breadcrumb]="breadcrumb" [action]="action">
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Call</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float:right;" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Call</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float: right" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
</page-header>
<div nz-row>
<div nz-col nzSpan="12" class="p-sm">
<form nz-form (ngSubmit)="call()" role="form">
<nz-form-item>
<nz-form-control nzErrorTip="Select service">
<nz-select nzShowSearch name="service" nzPlaceHolder="Select service" [(ngModel)]="selectedService"
(ngModelChange)="serviceChanged($event)">
<nz-option *ngFor="let s of services" [nzValue]="s" [nzLabel]="s.name">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="selectedService">
<nz-form-control>
<nz-select nzShowSearch name="version" nzPlaceHolder="Select version" [(ngModel)]="version"
(ngModelChange)="versionChanged($event)">
<nz-option *ngFor="let v of selectedService.versions" [nzValue]="v" [nzLabel]="v">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="endpoints">
<nz-form-control>
<nz-select nzShowSearch name="endpoint" nzPlaceHolder="Select endpoint"
[(ngModel)]="selectedEndpoint" (ngModelChange)="endpointChanged($event)">
<nz-option *ngFor="let e of endpoints" [nzValue]="e" [nzLabel]="e.name">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<textarea nz-input name="request" placeholder="Request payload" [ngModel]="request|json"
[nzAutosize]="{ minRows: 5, maxRows: 20 }" (ngModelChange)="requestChanged($event)"></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
Timeout(Seconds)
<nz-input-number name="timeout" nzPlaceHolder="timeout" [(ngModel)]="timeout" [nzMin]="1"
[nzMax]="60" [nzStep]="1"></nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
Call
</button>
</nz-form-item>
</form>
</div>
<div nz-col nzSpan="12" class="p-sm">
<nz-card nzTitle="Response" [nzExtra]="actions">
<p style="overflow-wrap: break-word;white-space: break-spaces;">{{response|json}}</p>
</nz-card>
<ng-template #actions>
<nz-space nzSize="middle">
<a *nzSpaceItem (click)="copyToClipboard(response)">
<i nz-icon nzType="copy" nzTheme="outline"></i>
</a>
<a *nzSpaceItem (click)="response={}">
<i nz-icon nzType="clear" nzTheme="outline"></i>
</a>
</nz-space>
</ng-template>
</div>
</div>
<div nz-col nzSpan="12" class="p-sm">
<form nz-form (ngSubmit)="call()" role="form">
<nz-form-item>
<nz-form-control nzErrorTip="Select service">
<nz-select
nzShowSearch
name="service"
nzPlaceHolder="Select service"
[(ngModel)]="selectedService"
(ngModelChange)="serviceChanged($event)"
>
<nz-option *ngFor="let s of services" [nzValue]="s" [nzLabel]="s.name"> </nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="selectedService">
<nz-form-control>
<nz-select
nzShowSearch
name="version"
nzPlaceHolder="Select version"
[(ngModel)]="version"
(ngModelChange)="versionChanged($event)"
>
<nz-option *ngFor="let v of selectedService.versions" [nzValue]="v" [nzLabel]="v"> </nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="endpoints">
<nz-form-control>
<nz-select
nzShowSearch
name="endpoint"
nzPlaceHolder="Select endpoint"
[(ngModel)]="selectedEndpoint"
(ngModelChange)="endpointChanged($event)"
>
<nz-option *ngFor="let e of endpoints" [nzValue]="e" [nzLabel]="e.name"> </nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<textarea
nz-input
name="request"
placeholder="Request payload"
[ngModel]="request | json"
[nzAutosize]="{ minRows: 5, maxRows: 20 }"
(ngModelChange)="requestChanged($event)"
></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
Timeout(Seconds)
<nz-input-number
name="timeout"
nzPlaceHolder="timeout"
[(ngModel)]="timeout"
[nzMin]="1"
[nzMax]="60"
[nzStep]="1"
></nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock> Call </button>
</nz-form-item>
</form>
</div>
<div nz-col nzSpan="12" class="p-sm">
<nz-card nzTitle="Response" [nzExtra]="actions">
<p style="overflow-wrap: break-word; white-space: break-spaces">{{ response | json }}</p>
</nz-card>
<ng-template #actions>
<nz-space nzSize="middle">
<a *nzSpaceItem (click)="copyToClipboard(response)">
<i nz-icon nzType="copy" nzTheme="outline"></i>
</a>
<a *nzSpaceItem (click)="response = {}">
<i nz-icon nzType="clear" nzTheme="outline"></i>
</a>
</nz-space>
</ng-template>
</div>
</div>

@ -1,12 +1,19 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { finalize } from 'rxjs/operators';
import { ClipboardService } from 'ngx-clipboard';
import { NzMessageService } from 'ng-zorro-antd/message';
import { CallRequest, ClientServiceProxy, RegistryEndpoint, RegistryServiceProxy, RegistryServiceSummary, RegistryValue } from 'src/app/shared/service-proxies/service-proxies';
import { ClipboardService } from 'ngx-clipboard';
import { finalize } from 'rxjs/operators';
import {
CallRequest,
ClientServiceProxy,
RegistryEndpoint,
RegistryServiceProxy,
RegistryServiceSummary,
RegistryValue
} from 'src/app/shared/service-proxies/service-proxies';
interface RequestPayload {
[key: string]: any
[key: string]: any;
}
@Component({
selector: 'micro-client-call',
@ -27,13 +34,13 @@ export class ClientCallComponent implements OnInit {
endpoints: RegistryEndpoint[] = [];
selectedEndpoint: RegistryEndpoint | undefined = undefined;
constructor(private readonly route: ActivatedRoute,
constructor(
private readonly route: ActivatedRoute,
private readonly clientService: ClientServiceProxy,
private readonly clipboardService: ClipboardService,
private readonly messageService: NzMessageService,
private readonly registryService: RegistryServiceProxy,
) {
}
private readonly registryService: RegistryServiceProxy
) {}
ngOnInit(): void {
var service = this.route.snapshot.queryParams['service'];
@ -56,25 +63,28 @@ export class ClientCallComponent implements OnInit {
this.selectedEndpoint = undefined;
this.services = [];
this.response = undefined;
this.registryService.getServices().pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
this.services = resp.services;
if (!this.service || !resp.services.length) {
return
}
resp.services.forEach(s => {
if (s.name == this.service) {
this.selectedService = s;
if (!this.version) {
this.version = s.versions ? s.versions[0] : '';
}
this.registryService
.getServices()
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
this.services = resp.services;
if (!this.service || !resp.services.length) {
return;
}
resp.services.forEach(s => {
if (s.name == this.service) {
this.selectedService = s;
if (!this.version) {
this.version = s.versions ? s.versions[0] : '';
}
}
});
this.loadEndpoints();
});
this.loadEndpoints();
});
}
call() {
@ -85,15 +95,18 @@ export class ClientCallComponent implements OnInit {
version: this.version,
endpoint: this.endpoint,
request: JSON.stringify(this.request),
timeout: this.timeout,
});
this.clientService.call(input).pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
this.response = resp;
timeout: this.timeout
});
this.clientService
.call(input)
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
this.response = resp;
});
}
serviceChanged(service: RegistryServiceSummary) {
@ -117,10 +130,10 @@ export class ClientCallComponent implements OnInit {
}
loadEndpointReuqest(endpoint: RegistryEndpoint) {
var previousRequest = localStorage.getItem(endpoint.name + '.call');
var previousRequest = localStorage.getItem(`${endpoint.name}.call`);
if (previousRequest) {
try {
this.request = eval('(' + previousRequest + ')');
this.request = eval(`(${previousRequest})`);
} catch (e) {
// SyntaxError
}
@ -131,8 +144,8 @@ export class ClientCallComponent implements OnInit {
requestChanged(request: string) {
try {
this.request = eval('(' + request + ')');
localStorage.setItem(this.endpoint + '.call', JSON.stringify(this.request));
this.request = eval(`(${request})`);
localStorage.setItem(`${this.endpoint}.call`, JSON.stringify(this.request));
} catch (e) {
// SyntaxError
}
@ -145,7 +158,7 @@ export class ClientCallComponent implements OnInit {
private loadEndpoints() {
if (!this.service) {
return
return;
}
this.endpoints = [];
this.request = undefined;
@ -173,7 +186,7 @@ export class ClientCallComponent implements OnInit {
if (request && request.values) {
request.values.forEach(v => {
if (!v.name || v.name === 'MessageState' || v.name === 'int32' || v.name === 'unknownFields') {
return
return;
}
let value: any;
switch (v.type) {
@ -190,8 +203,8 @@ export class ClientCallComponent implements OnInit {
break;
case 'float64':
case 'float32':
value = 0.00;
break
value = 0.0;
break;
case 'bool':
value = false;
break;
@ -208,8 +221,8 @@ export class ClientCallComponent implements OnInit {
}
}
payload[v.name] = value;
})
});
}
this.request = payload;
}
}
}

@ -1,76 +1,92 @@
<page-header [title]="'Publish'" [breadcrumb]="breadcrumb" [action]="action">
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Publish</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float:right;" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Publish</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float: right" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
</page-header>
<div nz-row>
<div nz-col nzSpan="12" class="p-sm">
<form nz-form (ngSubmit)="publish()" role="form">
<nz-form-item>
<nz-form-control nzErrorTip="Select service">
<nz-select nzShowSearch name="service" nzPlaceHolder="Select service" [(ngModel)]="selectedService"
(ngModelChange)="serviceChanged($event)">
<nz-option *ngFor="let s of services" [nzValue]="s" [nzLabel]="s.name">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="selectedService&&selectedService.versions">
<nz-form-control>
<nz-select nzShowSearch name="version" nzPlaceHolder="Select version" [(ngModel)]="version"
(ngModelChange)="versionChanged($event)">
<nz-option *ngFor="let v of selectedService.versions" [nzValue]="v" [nzLabel]="v">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="endpoints">
<nz-form-control>
<nz-select nzShowSearch name="topic" nzPlaceHolder="Select topic" [(ngModel)]="selectedEndpoint"
(ngModelChange)="endpointChanged($event)">
<nz-option *ngFor="let e of endpoints" [nzValue]="e" [nzLabel]="e.name">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<textarea nz-input name="request" placeholder="Request payload" [ngModel]="request|json"
[nzAutosize]="{ minRows: 5, maxRows: 20 }" (ngModelChange)="requestChanged($event)"></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
Publish
</button>
</nz-form-item>
</form>
</div>
<div nz-col nzSpan="12" class="p-sm">
<nz-card nzTitle="Response" [nzExtra]="actions">
<p style="overflow-wrap: break-word;white-space: break-spaces;">{{response|json}}</p>
</nz-card>
<ng-template #actions>
<nz-space nzSize="middle">
<a *nzSpaceItem (click)="copyToClipboard(response)">
<i nz-icon nzType="copy" nzTheme="outline"></i>
</a>
<a *nzSpaceItem (click)="response={}">
<i nz-icon nzType="clear" nzTheme="outline"></i>
</a>
</nz-space>
</ng-template>
</div>
</div>
<div nz-col nzSpan="12" class="p-sm">
<form nz-form (ngSubmit)="publish()" role="form">
<nz-form-item>
<nz-form-control nzErrorTip="Select service">
<nz-select
nzShowSearch
name="service"
nzPlaceHolder="Select service"
[(ngModel)]="selectedService"
(ngModelChange)="serviceChanged($event)"
>
<nz-option *ngFor="let s of services" [nzValue]="s" [nzLabel]="s.name"> </nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="selectedService && selectedService.versions">
<nz-form-control>
<nz-select
nzShowSearch
name="version"
nzPlaceHolder="Select version"
[(ngModel)]="version"
(ngModelChange)="versionChanged($event)"
>
<nz-option *ngFor="let v of selectedService.versions" [nzValue]="v" [nzLabel]="v"> </nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="endpoints">
<nz-form-control>
<nz-select
nzShowSearch
name="topic"
nzPlaceHolder="Select topic"
[(ngModel)]="selectedEndpoint"
(ngModelChange)="endpointChanged($event)"
>
<nz-option *ngFor="let e of endpoints" [nzValue]="e" [nzLabel]="e.name"> </nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<textarea
nz-input
name="request"
placeholder="Request payload"
[ngModel]="request | json"
[nzAutosize]="{ minRows: 5, maxRows: 20 }"
(ngModelChange)="requestChanged($event)"
></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock> Publish </button>
</nz-form-item>
</form>
</div>
<div nz-col nzSpan="12" class="p-sm">
<nz-card nzTitle="Response" [nzExtra]="actions">
<p style="overflow-wrap: break-word; white-space: break-spaces">{{ response | json }}</p>
</nz-card>
<ng-template #actions>
<nz-space nzSize="middle">
<a *nzSpaceItem (click)="copyToClipboard(response)">
<i nz-icon nzType="copy" nzTheme="outline"></i>
</a>
<a *nzSpaceItem (click)="response = {}">
<i nz-icon nzType="clear" nzTheme="outline"></i>
</a>
</nz-space>
</ng-template>
</div>
</div>

@ -1,12 +1,19 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { finalize } from 'rxjs/operators';
import { ClipboardService } from 'ngx-clipboard';
import { NzMessageService } from 'ng-zorro-antd/message';
import { ClientServiceProxy, PublishRequest, RegistryEndpoint, RegistryServiceProxy, RegistryServiceSummary, RegistryValue } from 'src/app/shared/service-proxies/service-proxies';
import { ClipboardService } from 'ngx-clipboard';
import { finalize } from 'rxjs/operators';
import {
ClientServiceProxy,
PublishRequest,
RegistryEndpoint,
RegistryServiceProxy,
RegistryServiceSummary,
RegistryValue
} from 'src/app/shared/service-proxies/service-proxies';
interface RequestPayload {
[key: string]: any
[key: string]: any;
}
@Component({
selector: 'micro-client-publish',
@ -27,13 +34,13 @@ export class ClientPublishComponent implements OnInit {
endpoints: RegistryEndpoint[] = [];
selectedEndpoint: RegistryEndpoint | undefined = undefined;
constructor(private readonly route: ActivatedRoute,
constructor(
private readonly route: ActivatedRoute,
private readonly clientService: ClientServiceProxy,
private readonly clipboardService: ClipboardService,
private readonly messageService: NzMessageService,
private readonly registryService: RegistryServiceProxy,
) {
}
private readonly registryService: RegistryServiceProxy
) {}
ngOnInit(): void {
var service = this.route.snapshot.queryParams['service'];
@ -56,25 +63,28 @@ export class ClientPublishComponent implements OnInit {
this.selectedEndpoint = undefined;
this.services = [];
this.response = undefined;
this.registryService.getServices().pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
this.services = resp.services;
if (!this.service || !resp.services.length) {
return
}
resp.services.forEach(s => {
if (s.name == this.service) {
this.selectedService = s;
if (!this.version) {
this.version = s.versions ? s.versions[0] : '';
}
this.registryService
.getServices()
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
this.services = resp.services;
if (!this.service || !resp.services.length) {
return;
}
resp.services.forEach(s => {
if (s.name == this.service) {
this.selectedService = s;
if (!this.version) {
this.version = s.versions ? s.versions[0] : '';
}
}
});
this.loadEndpoints();
});
this.loadEndpoints();
});
}
publish() {
@ -82,15 +92,18 @@ export class ClientPublishComponent implements OnInit {
this.response = undefined;
var input = new PublishRequest({
topic: this.topic,
message: JSON.stringify(this.request),
});
this.clientService.publish(input).pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
this.response = resp;
message: JSON.stringify(this.request)
});
this.clientService
.publish(input)
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
this.response = resp;
});
}
serviceChanged(service: RegistryServiceSummary) {
@ -114,10 +127,10 @@ export class ClientPublishComponent implements OnInit {
}
loadEndpointReuqest(endpoint: RegistryEndpoint) {
var previousRequest = localStorage.getItem(endpoint.name + '.publish');
var previousRequest = localStorage.getItem(`${endpoint.name}.publish`);
if (previousRequest) {
try {
this.request = eval('(' + previousRequest + ')');
this.request = eval(`(${previousRequest})`);
} catch (e) {
// SyntaxError
}
@ -128,8 +141,8 @@ export class ClientPublishComponent implements OnInit {
requestChanged(request: string) {
try {
this.request = eval('(' + request + ')');
localStorage.setItem(this.topic + '.publish', JSON.stringify(this.request));
this.request = eval(`(${request})`);
localStorage.setItem(`${this.topic}.publish`, JSON.stringify(this.request));
} catch (e) {
// SyntaxError
}
@ -142,7 +155,7 @@ export class ClientPublishComponent implements OnInit {
private loadEndpoints() {
if (!this.service) {
return
return;
}
this.endpoints = [];
this.request = undefined;
@ -170,7 +183,7 @@ export class ClientPublishComponent implements OnInit {
if (request && request.values) {
request.values.forEach(v => {
if (!v.name || v.name === 'MessageState' || v.name === 'int32' || v.name === 'unknownFields') {
return
return;
}
let value: any;
switch (v.type) {
@ -187,8 +200,8 @@ export class ClientPublishComponent implements OnInit {
break;
case 'float64':
case 'float32':
value = 0.00;
break
value = 0.0;
break;
case 'bool':
value = false;
break;
@ -201,8 +214,8 @@ export class ClientPublishComponent implements OnInit {
}
}
payload[v.name] = value;
})
});
}
this.request = payload;
}
}
}

@ -1,26 +1,30 @@
<page-header [breadcrumb]="breadcrumb" [action]="action">
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>Dashboard</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float:right;" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>Dashboard</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float: right" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
</page-header>
<nz-card [nzHoverable]="true" [nzBordered]="false">
<sv-container size="large" title="Registry">
<sv label="Type">{{ registryType }}</sv>
<sv label="Addrs">{{ registryAddrs }}</sv>
</sv-container>
<sv-container size="large" title="Registry">
<sv label="Type">{{ registryType }}</sv>
<sv label="Addrs">{{ registryAddrs }}</sv>
</sv-container>
</nz-card>
<nz-card [nzHoverable]="true" [nzBordered]="false" (click)="goto('/services')">
<sv-container size="large" title="Services">
<sv label="Services"><a (click)="goto('/services')">{{ servicesCount }}</a></sv>
<sv label="Nodes"><a (click)="goto('/services')">{{ nodesCount }}</a></sv>
</sv-container>
</nz-card>
<sv-container size="large" title="Services">
<sv label="Services"
><a (click)="goto('/services')">{{ servicesCount }}</a></sv
>
<sv label="Nodes"
><a (click)="goto('/services')">{{ nodesCount }}</a></sv
>
</sv-container>
</nz-card>

@ -15,9 +15,7 @@ export class DashboardComponent implements OnInit {
servicesCount: number;
nodesCount: number;
constructor(private readonly router: Router,
private statisticsService: StatisticsServiceProxy,
) {
constructor(private readonly router: Router, private statisticsService: StatisticsServiceProxy) {
this.loading = false;
this.registryType = '';
this.registryAddrs = [];
@ -31,28 +29,31 @@ export class DashboardComponent implements OnInit {
load() {
this.loading = true;
this.statisticsService.getSummary().pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
if (resp.registry) {
if (resp.registry.type) {
this.registryType = resp.registry.type;
this.statisticsService
.getSummary()
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
if (resp.registry) {
if (resp.registry.type) {
this.registryType = resp.registry.type;
}
if (resp.registry.addrs) {
this.registryAddrs = resp.registry.addrs;
}
}
if (resp.registry.addrs) {
this.registryAddrs = resp.registry.addrs;
if (resp.services) {
if (resp.services.count) {
this.servicesCount = resp.services.count;
}
if (resp.services.nodes_count) {
this.nodesCount = resp.services.nodes_count;
}
}
}
if (resp.services) {
if (resp.services.count) {
this.servicesCount = resp.services.count;
}
if (resp.services.nodes_count) {
this.nodesCount = resp.services.nodes_count;
}
}
});
});
}
goto(url: string) {

@ -20,8 +20,6 @@
</nz-col>
</nz-form-item>
<nz-form-item>
<button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
Login
</button>
<button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock> Login </button>
</nz-form-item>
</form>
</form>

@ -25,7 +25,7 @@ export class UserLoginComponent {
@Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService,
private startupSrv: StartupService,
private cdr: ChangeDetectorRef,
private accountService: AccountServiceProxy,
private accountService: AccountServiceProxy
) {
this.form = fb.group({
username: [null, [Validators.required]],
@ -73,14 +73,17 @@ export class UserLoginComponent {
this.loading = true;
this.cdr.detectChanges();
this.accountService.login(new LoginRequest({ username: this.username.value, password: this.password.value }))
.pipe(finalize(() => {
this.loading = false;
this.cdr.detectChanges();
}))
this.accountService
.login(new LoginRequest({ username: this.username.value, password: this.password.value }))
.pipe(
finalize(() => {
this.loading = false;
this.cdr.detectChanges();
})
)
.subscribe(resp => {
if (!resp.token) {
this.error = "login failed";
this.error = 'login failed';
this.cdr.detectChanges();
return;
}

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SimpleGuard } from '@delon/auth';
import { environment } from '@env/environment';
// layout
import { LayoutBasicComponent } from '../layout/basic/basic.component';
import { LayoutPassportComponent } from '../layout/passport/passport.component';
@ -11,8 +12,8 @@ import { ClientPublishComponent } from './client/publish.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// passport pages
import { UserLoginComponent } from './passport/login/login.component';
import { ServicesListComponent } from './services/list.component';
import { ServiceDetailComponent } from './services/detail.component';
import { ServicesListComponent } from './services/list.component';
import { ServiceNodesComponent } from './services/nodes.component';
const routes: Routes = [
@ -28,29 +29,26 @@ const routes: Routes = [
{ path: 'service/nodes', component: ServiceNodesComponent },
{ path: 'client/call', component: ClientCallComponent, data: { title: 'Call', titleI18n: 'call' } },
{ path: 'client/publish', component: ClientPublishComponent, data: { title: 'Call', titleI18n: 'call' } },
{ path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) },
{ path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) }
]
},
{
path: 'passport',
component: LayoutPassportComponent,
children: [
{ path: 'login', component: UserLoginComponent, data: { title: 'Login', titleI18n: 'login' } },
]
children: [{ path: 'login', component: UserLoginComponent, data: { title: 'Login', titleI18n: 'login' } }]
},
{ path: '**', redirectTo: 'exception/404' },
{ path: '**', redirectTo: 'exception/404' }
];
@NgModule({
imports: [
RouterModule.forRoot(
routes, {
RouterModule.forRoot(routes, {
useHash: environment.useHash,
// NOTICE: If you use `reuse-tab` component and turn on keepingScroll you can set to `disabled`
// Pls refer to https://ng-alain.com/components/reuse-tab
scrollPositionRestoration: 'top',
}
)],
exports: [RouterModule],
scrollPositionRestoration: 'top'
})
],
exports: [RouterModule]
})
export class RouteRoutingModule { }
export class RouteRoutingModule {}

@ -1,14 +1,14 @@
import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared';
import { ClientCallComponent } from './client/call.component';
import { ClientPublishComponent } from './client/publish.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserLoginComponent } from './passport/login/login.component';
import { RouteRoutingModule } from './routes-routing.module';
import { ServicesListComponent } from './services/list.component';
import { ServiceDetailComponent } from './services/detail.component';
import { ServicesListComponent } from './services/list.component';
import { ServiceNodesComponent } from './services/nodes.component';
import { ClientCallComponent } from './client/call.component';
import { ClientPublishComponent } from './client/publish.component';
const COMPONENTS: Array<Type<void>> = [
DashboardComponent,
@ -17,11 +17,11 @@ const COMPONENTS: Array<Type<void>> = [
ServiceDetailComponent,
ServiceNodesComponent,
ClientCallComponent,
ClientPublishComponent,
ClientPublishComponent
];
@NgModule({
imports: [SharedModule, RouteRoutingModule],
declarations: COMPONENTS,
declarations: COMPONENTS
})
export class RoutesModule { }
export class RoutesModule {}

@ -1,101 +1,93 @@
<page-header [title]="name" [breadcrumb]="breadcrumb" [action]="action">
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Service Detail</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float:right;" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Service Detail</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float: right" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
</page-header>
<nz-collapse>
<nz-collapse-panel *ngFor="let service of services" [nzHeader]="service.version" nzActive="true">
<nz-table #nodeTable *ngIf="service.nodes" [nzData]="service.nodes" [nzFrontPagination]="false"
[nzBordered]="true">
<thead>
<tr>
<th>Id</th>
<th>Address</th>
<th>Metadata</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nodeTable.data">
<td>{{data.id}}</td>
<td>{{data.address}}</td>
<td>{{data.metadata|json}}</td>
</tr>
</tbody>
<nz-collapse-panel *ngFor="let service of services" [nzHeader]="service.version" nzActive="true">
<nz-table #nodeTable *ngIf="service.nodes" [nzData]="service.nodes" [nzFrontPagination]="false" [nzBordered]="true">
<thead>
<tr>
<th>Id</th>
<th>Address</th>
<th>Metadata</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nodeTable.data">
<td>{{ data.id }}</td>
<td>{{ data.address }}</td>
<td>{{ data.metadata | json }}</td>
</tr>
</tbody>
</nz-table>
<nz-collapse nzGhost *ngIf="service.handlers">
<nz-collapse-panel [nzHeader]="'Handlers (' + service.handlers.length + ')'" nzExpandedIcon="double-right" nzActive="true">
<nz-table #handlerTable [nzData]="service.handlers" [nzFrontPagination]="false" [nzBordered]="true">
<thead>
<tr>
<th>Name</th>
<th>Request</th>
<th>Response</th>
<th>Metadata</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of handlerTable.data">
<td>
{{ data.name }}
<a (click)="gotoCall(service.name, service.version, data.name)"> Call </a>
</td>
<td>
<pre class="json">{{ data.request | endpoint }}</pre>
</td>
<td>
<pre class="json">{{ data.response | endpoint }}</pre>
</td>
<td>{{ data.metadata | json }}</td>
</tr>
</tbody>
</nz-table>
<nz-collapse nzGhost *ngIf="service.handlers">
<nz-collapse-panel [nzHeader]="'Handlers ('+service.handlers.length+')'" nzExpandedIcon="double-right"
nzActive="true">
<nz-table #handlerTable [nzData]="service.handlers" [nzFrontPagination]="false" [nzBordered]="true">
<thead>
<tr>
<th>Name</th>
<th>Request</th>
<th>Response</th>
<th>Metadata</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of handlerTable.data">
<td>
{{data.name}}
<a (click)="gotoCall(service.name, service.version, data.name)">
Call
</a>
</td>
<td>
<pre class="json">{{data.request|endpoint}}</pre>
</td>
<td>
<pre class="json">{{data.response|endpoint}}</pre>
</td>
<td>{{data.metadata|json}}</td>
</tr>
</tbody>
</nz-table>
</nz-collapse-panel>
</nz-collapse>
<nz-collapse nzGhost *ngIf="service.subscribers">
<nz-collapse-panel [nzHeader]="'Subscribers ('+service.subscribers.length+')'" nzExpandedIcon="double-right"
nzActive="true">
<nz-table #subscriberTable [nzData]="service.subscribers" [nzFrontPagination]="false"
[nzBordered]="true">
<thead>
<tr>
<th>Topic</th>
<th>Payload</th>
<th>Metadata</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of subscriberTable.data">
<td>
{{data.name}}
<a (click)="gotoPublish(service.name, service.version, data.name)">
Publish
</a>
</td>
<td>
<pre class="json">{{data.request|endpoint}}</pre>
</td>
<td>{{data.metadata|json}}</td>
</tr>
</tbody>
</nz-table>
</nz-collapse-panel>
</nz-collapse>
</nz-collapse-panel>
</nz-collapse-panel>
</nz-collapse>
<nz-collapse nzGhost *ngIf="service.subscribers">
<nz-collapse-panel [nzHeader]="'Subscribers (' + service.subscribers.length + ')'" nzExpandedIcon="double-right" nzActive="true">
<nz-table #subscriberTable [nzData]="service.subscribers" [nzFrontPagination]="false" [nzBordered]="true">
<thead>
<tr>
<th>Topic</th>
<th>Payload</th>
<th>Metadata</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of subscriberTable.data">
<td>
{{ data.name }}
<a (click)="gotoPublish(service.name, service.version, data.name)"> Publish </a>
</td>
<td>
<pre class="json">{{ data.request | endpoint }}</pre>
</td>
<td>{{ data.metadata | json }}</td>
</tr>
</tbody>
</nz-table>
</nz-collapse-panel>
</nz-collapse>
</nz-collapse-panel>
</nz-collapse>
<nz-back-top></nz-back-top>
<nz-back-top></nz-back-top>

@ -14,11 +14,11 @@ export class ServiceDetailComponent implements OnInit {
version: string | null = null;
services: RegistryService[] = [];
constructor(private readonly route: ActivatedRoute,
constructor(
private readonly route: ActivatedRoute,
private readonly router: Router,
private readonly registryService: RegistryServiceProxy,
) {
}
private readonly registryService: RegistryServiceProxy
) {}
ngOnInit(): void {
var name = this.route.snapshot.queryParams['name'];
@ -34,27 +34,30 @@ export class ServiceDetailComponent implements OnInit {
load() {
this.loading = true;
this.registryService.getServiceDetail(this.name, this.version).pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
if (resp.services) {
this.services = resp.services;
}
});
this.registryService
.getServiceDetail(this.name, this.version)
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
if (resp.services) {
this.services = resp.services;
}
});
}
gotoCall(service: string, version: string, endpoint: string) {
let navigationExtras: NavigationExtras = {
queryParams: { 'service': service, 'version': version, 'endpoint': endpoint }
queryParams: { service: service, version: version, endpoint: endpoint }
};
this.router.navigate(['/client/call'], navigationExtras);
}
gotoPublish(service: string, version: string, topic: string) {
let navigationExtras: NavigationExtras = {
queryParams: { 'service': service, 'version': version, 'topic': topic }
queryParams: { service: service, version: version, topic: topic }
};
this.router.navigate(['/client/publish'], navigationExtras);
}

@ -1,25 +1,27 @@
<page-header [breadcrumb]="breadcrumb" [action]="action">
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Services</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float:right;" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Services</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float: right" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
</page-header>
<nz-list nzItemLayout="horizontal" style="background-color: #fff;" [nzLoading]="loading" nzBordered>
<nz-list-item *ngFor="let service of services" nzNoFlex>
<a (click)="gotoServiceDetail(service.name, undefined)">{{ service.name }}</a>
<span *ngFor="let version of service.versions" style="margin-left:8px;">
<nz-tag *ngIf="version" [nzColor]="'green'"><a (click)="gotoServiceDetail(service.name, version)">{{ version }}</a></nz-tag>
</span>
</nz-list-item>
<nz-list-empty *ngIf="!services||!services.length"></nz-list-empty>
<nz-list nzItemLayout="horizontal" style="background-color: #fff" [nzLoading]="loading" nzBordered>
<nz-list-item *ngFor="let service of services" nzNoFlex>
<a (click)="gotoServiceDetail(service.name, undefined)">{{ service.name }}</a>
<span *ngFor="let version of service.versions" style="margin-left: 8px">
<nz-tag *ngIf="version" [nzColor]="'green'"
><a (click)="gotoServiceDetail(service.name, version)">{{ version }}</a></nz-tag
>
</span>
</nz-list-item>
<nz-list-empty *ngIf="!services || !services.length"></nz-list-empty>
</nz-list>
<nz-back-top></nz-back-top>
<nz-back-top></nz-back-top>

@ -4,39 +4,40 @@ import { finalize } from 'rxjs/operators';
import { RegistryServiceSummary, RegistryServiceProxy } from 'src/app/shared/service-proxies/service-proxies';
@Component({
selector: 'micro-services',
templateUrl: './list.component.html',
changeDetection: ChangeDetectionStrategy.Default
selector: 'micro-services',
templateUrl: './list.component.html',
changeDetection: ChangeDetectionStrategy.Default
})
export class ServicesListComponent implements OnInit {
loading: boolean = false;
services: RegistryServiceSummary[] = [];
loading: boolean = false;
services: RegistryServiceSummary[] = [];
constructor(private readonly router: Router,
private registryService: RegistryServiceProxy,) {
}
constructor(private readonly router: Router, private registryService: RegistryServiceProxy) {}
ngOnInit() {
this.load();
}
ngOnInit() {
this.load();
}
load() {
this.loading = true;
this.registryService.getServices().pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
if (resp.services) {
this.services = resp.services;
}
});
}
load() {
this.loading = true;
this.registryService
.getServices()
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
if (resp.services) {
this.services = resp.services;
}
});
}
gotoServiceDetail(name: any, version: any) {
let navigationExtras: NavigationExtras = {
queryParams: { 'name': name, 'version': version }
};
this.router.navigate(['/service/detail'], navigationExtras);
}
gotoServiceDetail(name: any, version: any) {
let navigationExtras: NavigationExtras = {
queryParams: { name: name, version: version }
};
this.router.navigate(['/service/detail'], navigationExtras);
}
}

@ -1,54 +1,75 @@
<page-header [breadcrumb]="breadcrumb" [action]="action">
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Nodes</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float:right;" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
<ng-template #breadcrumb>
<nz-breadcrumb>
<nz-breadcrumb-item>
<a href="#/dashboard">Dashboard</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a href="#/services">Services</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>Nodes</nz-breadcrumb-item>
</nz-breadcrumb>
</ng-template>
<ng-template #action>
<button nz-button nzType="primary" style="float: right" (click)="load()" [nzLoading]="loading">Refresh</button>
</ng-template>
</page-header>
<nz-collapse nzGhost>
<nz-collapse-panel *ngFor="let service of services" [nzHeader]="service.name" nzActive="true">
<nz-table #nodeTable *ngIf="service.nodes" nzExpandedIcon="double-right" [nzData]="service.nodes"
[nzFrontPagination]="false" [nzBordered]="true">
<thead>
<tr>
<th>Id</th>
<th>Version</th>
<th>Address</th>
<th>Metadata</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nodeTable.data">
<td nz-tooltip [nzTooltipTitle]="data.tip">
<i *ngIf="data.valid!==undefined&&!data.valid" nz-icon [nzType]="'close-circle'"
[nzTheme]="'twotone'" [nzTwotoneColor]="'#eb2f96'"></i>
<i *ngIf="data.valid!==undefined&&data.valid" nz-icon [nzType]="'check-circle'"
[nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
{{data.id}}
</td>
<td>{{data.version}}</td>
<td>{{data.address}} </td>
<td>{{data.metadata|json}}</td>
<td>
<button nz-button nzType="primary" [nzLoading]="data.loading"
[disabled]="!data.metadata['server']||data.metadata['server']=='http'"
(click)="healthCheck(service.name, data)">Health</button>
</td>
</tr>
</tbody>
</nz-table>
</nz-collapse-panel>
<nz-collapse-panel *ngFor="let service of services" [nzHeader]="service.name" nzActive="true">
<nz-table
#nodeTable
*ngIf="service.nodes"
nzExpandedIcon="double-right"
[nzData]="service.nodes"
[nzFrontPagination]="false"
[nzBordered]="true"
>
<thead>
<tr>
<th>Id</th>
<th>Version</th>
<th>Address</th>
<th>Metadata</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nodeTable.data">
<td nz-tooltip [nzTooltipTitle]="data.tip">
<i
*ngIf="data.valid !== undefined && !data.valid"
nz-icon
[nzType]="'close-circle'"
[nzTheme]="'twotone'"
[nzTwotoneColor]="'#eb2f96'"
></i>
<i
*ngIf="data.valid !== undefined && data.valid"
nz-icon
[nzType]="'check-circle'"
[nzTheme]="'twotone'"
[nzTwotoneColor]="'#52c41a'"
></i>
{{ data.id }}
</td>
<td>{{ data.version }}</td>
<td>{{ data.address }} </td>
<td>{{ data.metadata | json }}</td>
<td>
<button
nz-button
nzType="primary"
[nzLoading]="data.loading"
[disabled]="!data.metadata['server'] || data.metadata['server'] == 'http'"
(click)="healthCheck(service.name, data)"
>Health</button
>
</td>
</tr>
</tbody>
</nz-table>
</nz-collapse-panel>
</nz-collapse>
<nz-back-top></nz-back-top>
<nz-back-top></nz-back-top>

@ -14,10 +14,7 @@ export class ServiceNodesComponent implements OnInit {
version: string | null = null;
services: any;
constructor(private readonly registryService: RegistryServiceProxy,
private readonly clientService: ClientServiceProxy,
) {
}
constructor(private readonly registryService: RegistryServiceProxy, private readonly clientService: ClientServiceProxy) {}
ngOnInit(): void {
this.load();
@ -25,15 +22,18 @@ export class ServiceNodesComponent implements OnInit {
load() {
this.loading = true;
this.registryService.getNodes().pipe(
finalize(() => {
this.loading = false;
})
).subscribe(resp => {
if (resp.services) {
this.services = resp.services;
}
});
this.registryService
.getNodes()
.pipe(
finalize(() => {
this.loading = false;
})
)
.subscribe(resp => {
if (resp.services) {
this.services = resp.services;
}
});
}
healthCheck(service: any, data: any) {
@ -41,23 +41,26 @@ export class ServiceNodesComponent implements OnInit {
var input = new HealthCheckRequest({
service: service,
address: data.address,
version: data.version,
version: data.version
});
this.clientService.healthCheck(input).pipe(
finalize(() => {
data.loading = false;
})
).subscribe(resp => {
if (resp && resp.success) {
data.valid = true;
data.tip = `Status: ${resp.status}`;
} else {
console.log(resp);
data.valid = false;
if (resp.error) {
data.tip = resp.error.detail ? resp.error.detail : JSON.stringify(resp.error);
this.clientService
.healthCheck(input)
.pipe(
finalize(() => {
data.loading = false;
})
)
.subscribe(resp => {
if (resp && resp.success) {
data.valid = true;
data.tip = `Status: ${resp.status}`;
} else {
console.log(resp);
data.valid = false;
if (resp.error) {
data.tip = resp.error.detail ? resp.error.detail : JSON.stringify(resp.error);
}
}
}
});
});
}
}

@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'endpoint',
pure: false,
pure: false
})
export class EndpointPipe implements PipeTransform {
transform(d: any, args?: any[]): string {

@ -4,12 +4,8 @@ import { NgModule } from '@angular/core';
import { EndpointPipe } from './endpoint.pipe';
@NgModule({
declarations: [
EndpointPipe,
],
declarations: [EndpointPipe],
imports: [CommonModule],
exports: [
EndpointPipe,
],
exports: [EndpointPipe]
})
export class PipesModule { }
export class PipesModule {}

@ -8,8 +8,7 @@ import * as ApiServiceProxies from './service-proxies';
ApiServiceProxies.ClientServiceProxy,
ApiServiceProxies.RegistryServiceProxy,
ApiServiceProxies.StatisticsServiceProxy,
ApiServiceProxies.ServiceProxy,
ApiServiceProxies.ServiceProxy
]
})
export class ServiceProxyModule {
}
export class ServiceProxyModule {}

@ -1,8 +1,11 @@
import { NzAlertModule } from 'ng-zorro-antd/alert';
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
import { NzBackTopModule } from 'ng-zorro-antd/back-top';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzDrawerModule } from 'ng-zorro-antd/drawer';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzFormModule } from 'ng-zorro-antd/form';
@ -10,22 +13,19 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import { NzListModule } from 'ng-zorro-antd/list';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { NzPopoverModule } from 'ng-zorro-antd/popover';
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzSpaceModule } from 'ng-zorro-antd/space';
import { NzSpinModule } from 'ng-zorro-antd/spin';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzListModule } from 'ng-zorro-antd/list';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzBackTopModule } from 'ng-zorro-antd/back-top';
import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzSpaceModule } from 'ng-zorro-antd/space';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
export const SHARED_ZORRO_MODULES = [
NzFormModule,
@ -55,5 +55,5 @@ export const SHARED_ZORRO_MODULES = [
NzBackTopModule,
NzPageHeaderModule,
NzCollapseModule,
NzSpaceModule,
NzSpaceModule
];

@ -1,20 +1,19 @@
import { NgModule, Type } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgModule, Type } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AlainThemeModule } from '@delon/theme';
import { DelonACLModule } from '@delon/acl';
import { DelonFormModule } from '@delon/form';
import { AlainThemeModule } from '@delon/theme';
import { ClipboardModule } from 'ngx-clipboard';
import { EndpointPipe } from './pipes/endpoint.pipe';
import { ServiceProxyModule } from './service-proxies/service-proxy.module';
import { SHARED_DELON_MODULES } from './shared-delon.module';
import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
import { ServiceProxyModule } from './service-proxies/service-proxy.module';
import { EndpointPipe } from './pipes/endpoint.pipe';
// #region third libs
import { ClipboardModule } from 'ngx-clipboard';
const THIRDMODULES: Array<Type<void>> = [ClipboardModule];
// #endregion
@ -61,7 +60,7 @@ const DIRECTIVES: Array<Type<void>> = [];
...THIRDMODULES,
// your components
...COMPONENTS,
...DIRECTIVES,
...DIRECTIVES
]
})
export class SharedModule { }
export class SharedModule {}

@ -58,8 +58,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS

@ -56,7 +56,7 @@ import {
InfoCircleOutline,
ApartmentOutline,
CheckCircleTwoTone,
CloseCircleTwoTone,
CloseCircleTwoTone
} from '@ant-design/icons-angular/icons';
export const ICONS_AUTO = [
@ -112,5 +112,5 @@ export const ICONS_AUTO = [
InfoCircleOutline,
ApartmentOutline,
CheckCircleTwoTone,
CloseCircleTwoTone,
CloseCircleTwoTone
];

Loading…
Cancel
Save