fix: minor ui issues (#261)

bcgov-nr · Sep 12, 2024 · 2bc9866 · 2bc9866
1 parent d22a8f1
commit 2bc9866
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 134 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -12,16 +12,16 @@
  "private": true,
  "license": "Apache-2.0",
  "dependencies": {
- "@angular/animations": "^18.2.3",
- "@angular/cdk": "^18.2.3",
- "@angular/common": "^18.2.3",
- "@angular/compiler": "^18.2.3",
- "@angular/core": "^18.2.3",
- "@angular/forms": "^18.2.3",
- "@angular/material": "^18.2.3",
- "@angular/platform-browser": "^18.2.3",
- "@angular/platform-browser-dynamic": "^18.2.3",
- "@angular/router": "^18.2.3",
+ "@angular/animations": "^18.2.4",
+ "@angular/cdk": "^18.2.4",
+ "@angular/common": "^18.2.4",
+ "@angular/compiler": "^18.2.4",
+ "@angular/core": "^18.2.4",
+ "@angular/forms": "^18.2.4",
+ "@angular/material": "^18.2.4",
+ "@angular/platform-browser": "^18.2.4",
+ "@angular/platform-browser-dynamic": "^18.2.4",
+ "@angular/router": "^18.2.4",
  "@bcgov/bc-sans": "^2.1.0",
  "class-validator": "^0.14.1",
  "echarts": "^5.5.1",
@@ -39,7 +39,7 @@
  "devDependencies": {
  "@angular-devkit/build-angular": "^18.2.4",
  "@angular/cli": "^18.2.4",
- "@angular/compiler-cli": "^18.2.3",
+ "@angular/compiler-cli": "^18.2.4",
  "@types/jasmine": "^5.1.4",
  "@types/url-regex-safe": "^1.0.2",
  "@types/uuid": "^10.0.0",

diff --git a/ui/src/app/browse/collection-table/collection-table.component.ts b/ui/src/app/browse/collection-table/collection-table.component.ts
@@ -147,7 +147,10 @@ export class CollectionTableComponent
  ngAfterViewInit() {
  // console.log('ngAfterViewInit');
  this.sort.sortChange.asObservable().subscribe({
- next: (v) => this.sort$.next(v),
+ next: (v) => {
+ this.pageIndexReset();
+ this.sort$.next(v);
+ },
  });
  }
 
@@ -282,6 +285,8 @@ export class CollectionTableComponent
  this.sortSnapshot.active = sort.active;
  this.sortSnapshot.direction = sort.direction;
  });
+ this.tagsControl.valueChanges.subscribe(() => this.pageIndexReset());
+ this.textControl.valueChanges.subscribe(() => this.pageIndexReset());
 
  const params = this.route.snapshot.params;
  if (params['index'] && params['size']) {
@@ -345,22 +350,29 @@ export class CollectionTableComponent
  }
 
  onFilterChange(change: MatSelectChange) {
- this.pageIndex = 0;
+ this.pageIndexReset();
  this.showFilter$.next(change.value);
  this.preferences.set('browseConnectionFilter', change.value);
  }
 
  onCollectionChange(change: MatSelectChange) {
  this.collection$.next(change.value);
 
- this.pageIndex = 0;
+ this.pageIndexReset();
  this.preferences.set('browseCollectionDefault', this.collectionSnapshot);
  this.sort$.next({ active: '', direction: '' });
 
  this.clearAndRefresh();
  }
 
+ pageIndexReset() {
+ this.pageIndex = 0;
+ this.page$.next({ index: this.pageIndex, size: this.pageSize });
+ }
+
  handlePageEvent(event: PageEvent) {
+ this.pageIndex = event.pageIndex;
+ this.pageSize = event.pageSize;
  this.page$.next({ index: event.pageIndex, size: event.pageSize });
  }
 
@@ -384,6 +396,7 @@ export class CollectionTableComponent
  }
 
  clearAndRefresh() {
+ this.pageIndexReset();
  this.textControl.setValue('');
  this.tagsControl.setValue([]);
  this.refresh();

diff --git a/ui/src/app/browse/service-instances/service-instances.component.html b/ui/src/app/browse/service-instances/service-instances.component.html
@@ -13,8 +13,16 @@
 </div>
 }
 
+@if(loading) {
+ <mat-spinner></mat-spinner>
+}
+@if (!loading) {
 <mat-card>
  <mat-card-content>
+
+ @if (details.serviceInstance.length == 0) {
+ <p class="no-instances">No instances found</p>
+ }
  @for(env of envs; track env.id; let last = $last) {
  @if (envDetailsMap && envDetailsMap[env.name]) {
  <div class="environment-subtitle">Environment</div>
@@ -41,3 +49,4 @@
  }
  </mat-card-content>
 </mat-card>
+}