Merge pull request #81 from GSI-Xapiens-CSIRO/main

Merge Main to Xapiens

README.md

@@ -1 +1,54 @@
 # BGSI-GeneticAnalysisSupportPlatformIndonesia-GASPI
+
+## AMI Details for AWS based deployment
+
+```
+al2023-ami-2023.6.20241212.0-kernel-6.1-x86_64
+```
+
+## Setting up environment in EC2 (Amazon Linux 2023)
+
+Install necessary tools
+
+```bash
+RUN dnf update -y
+RUN dnf install -y git docker
+```
+
+Start docker deamon and build the container
+
+```bash
+sudo service docker start
+sudo usermod -a -G docker ec2-user
+sudo docker build --build-arg PLATFORM=linux/amd64 -t gaspi .devcontainer
+```
+
+Start the container
+
+```bash
+sudo docker run --init --rm --privileged \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  -v `pwd`:`pwd` \
+  -w `pwd` \
+  --platform linux/x86_64 \
+  -it gaspi:latest \
+  /bin/bash
+```
+
+## Clone Source Code
+
+```bash
+git clone https://github.com/GSI-Xapiens-CSIRO/BGSI-GeneticAnalysisSupportPlatformIndonesia-GASPI.git
+git submodule init
+git submodule update
+```
+
+## Initialisation
+
+Please run `init.sh` scripts in `svep` and `sbeacon` directories. Then run `pnpm install` from `webgui/webapp` directory.
+
+## Deployment
+
+```bash
+terraform apply
+```

cognito/cognito.tf

@@ -32,6 +32,16 @@ resource "aws_cognito_user_pool" "gaspi_user_pool" {
     mutable                  = false
     required                 = false
   }
+
+  schema {
+    name                     = "identity_id"
+    attribute_data_type      = "String"
+    developer_only_attribute = false
+    mutable                  = true
+    required                 = false
+
+    string_attribute_constraints {}
+  }
 }
 
 resource "aws_cognito_user_pool_client" "gaspi_user_pool_client" {

webgui/webapp/src/app/app.component.ts

@@ -89,12 +89,6 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     this.isCollapsed = this.el.nativeElement.offsetWidth < 1200;
-    // TODO - check if this is really necessary
-    // this prevents users from reloading and landing on same page even when they are logged in
-    // route security is enabled by the authguards
-    (async () => {
-      await this.auth.refresh();
-    })();
   }
 
   @HostListener('window:resize', ['event'])

webgui/webapp/src/app/app.config.ts

@@ -4,6 +4,8 @@ import {
   DetachedRouteHandle,
   RouteReuseStrategy,
   provideRouter,
+  withPreloading,
+  PreloadAllModules,
 } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -64,7 +66,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideRouter(routes),
+    provideRouter(routes, withPreloading(PreloadAllModules)),
     provideAnimations(),
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,

webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.html

@@ -1,11 +1,10 @@
-<div>
-  <h1 mat-dialog-title>
-    Select a <em>{{ _.startCase(data.scope) }}</em> entry
-  </h1>
+<!-- prettier-ignore -->
+<h1 mat-dialog-title>Select a <em>{{ _.startCase(data.scope) }}</em> entry</h1>
+@if (data.projects.length > 0) {
   <app-component-spinner [loading]="loading"></app-component-spinner>
   <div mat-dialog-content>
     <div class="bui-filter-selection-table">
-      <table mat-table [dataSource]="entries">
+      <table mat-table [dataSource]="dataSourceEntries">
         @for (column of displayedColumnsEntries; track column) {
           <ng-container [matColumnDef]="column">
             <th
@@ -24,15 +23,12 @@ <h1 mat-dialog-title>
                     ) {
                       <pre>{{ element[column] }}</pre>
                     } @else {
-                      #showJSON;|
-                    }
-                    <ng-template #showJSON>
                       <ngx-json-viewer
                         style="text-wrap: nowrap"
                         [expanded]="false"
                         [json]="element[column]"
                       ></ngx-json-viewer>
-                    </ng-template>
+                    }
                   </div>
                 }
                 @case ("selected") {
@@ -55,12 +51,13 @@ <h1 mat-dialog-title>
       <br />
     </div>
     <mat-paginator
+      [style.display]="dataSourceEntries.data.length ? '' : 'none'"
       #paginator
       [pageSizeOptions]="[10, 50, 100]"
       [length]="total"
       page
     ></mat-paginator>
-    @if (!entries.length && !loading) {
+    @if (!dataSourceEntries.data.length && !loading) {
       <p>No entries available in the selected scope</p>
     }
     <div>
@@ -75,4 +72,16 @@ <h1 mat-dialog-title>
       <button mat-raised-button color="primary" (click)="done()">Done</button>
     </div>
   </div>
-</div>
+} @else {
+  <div mat-dialog-content>
+    <p>Please select some projects.</p>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="cancel()"
+      style="margin-right: 10px"
+    >
+      Cancel
+    </button>
+  </div>
+}

webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.ts

@@ -57,19 +57,21 @@ export class EntryIdSelectionDialogComponent {
   protected skip = 0;
   protected limit = 0;
   protected total = 0;
-  protected entries: any = [];
   protected dataSourceEntries = new MatTableDataSource<any>([]);
   protected displayedColumnsEntries: string[] = [];
   protected selected: string | null = null;
 
   constructor(
     public dialogRef: MatDialogRef<EntryIdSelectionDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA) public data: { scope: string; projects: string[] },
     private qs: QueryService,
     private cd: ChangeDetectorRef,
   ) {}
 
   ngAfterViewInit(): void {
+    if (this.data.projects.length === 0) {
+      return;
+    }
     this.paginator.page
       .pipe(
         startWith({}),
@@ -79,6 +81,7 @@ export class EntryIdSelectionDialogComponent {
           this.limit = this.paginator.pageSize;
           return this.qs
             .fetch(this.data.scope, {
+              projects: this.data.projects,
               query: {
                 filters: [],
                 requestedGranularity: 'record',
@@ -109,7 +112,7 @@ export class EntryIdSelectionDialogComponent {
           ? results.response.collections
           : results.response.resultSets[0].results;
 
-        if (this.entries.length && _.isEmpty(resultsArray)) {
+        if (this.dataSourceEntries.data.length && _.isEmpty(resultsArray)) {
           this.paginator.pageIndex -= 1;
           console.log('page out of bounds');
         } else {
@@ -121,7 +124,7 @@ export class EntryIdSelectionDialogComponent {
             idName,
             ..._.filter(_.keys(resultsArray[0]), (item) => item != idName),
           ];
-          this.entries = resultsArray;
+          this.dataSourceEntries = new MatTableDataSource(resultsArray);
         }
       });
   }

webgui/webapp/src/app/components/filter-editor/filter-editor.component.html

@@ -61,12 +61,12 @@
     <mat-label>Filter Value</mat-label>
     <input matInput formControlName="value" required />
   </mat-form-field>
-  <div class="flex md:justify-end">
+  <div class="flex md:justify-end items-center h-[56px]">
     <button
       type="button"
       (click)="removeFilterClicked.emit()"
-      mat-fab
-      color="primary"
+      mat-mini-fab
+      color="warn"
     >
       <mat-icon>delete</mat-icon>
     </button>

webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html

@@ -1,8 +1,6 @@
-<div>
-  <h1 mat-dialog-title>
-    Select <em>{{ _.startCase(data.type) }}</em> filters for
-    <em>{{ _.startCase(data.scope) }}</em>
-  </h1>
+<!-- prettier-ignore -->
+<h1 mat-dialog-title>Select <em>{{ _.startCase(data.type) }}</em> filters for <em>{{ _.startCase(data.scope) }}</em></h1>
+@if (data.projects.length > 0) {
   <app-component-spinner [loading]="loading"></app-component-spinner>
   <div mat-dialog-content>
     <mat-form-field>
@@ -64,4 +62,16 @@ <h1 mat-dialog-title>
       <button mat-raised-button color="primary" (click)="done()">Done</button>
     </div>
   </div>
-</div>
+} @else {
+  <div mat-dialog-content>
+    <p>Please select some projects.</p>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="cancel()"
+      style="margin-right: 10px"
+    >
+      Cancel
+    </button>
+  </div>
+}

webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.ts

@@ -89,17 +89,21 @@ export class FilterSelectionDialogComponent implements AfterViewInit {
   protected dataSourceFilters = new MatTableDataSource<any>([]);
   protected displayedColumnsFilters = ['selected', 'id', 'label', 'type'];
   protected selected: { [key: string]: any } = {};
-  protected filter = '';
+  protected filter: string = '';
 
   constructor(
     public dialogRef: MatDialogRef<FilterSelectionDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA)
+    public data: { scope: string; projects: string[]; type: string },
     private fs: FilterService,
     private cd: ChangeDetectorRef,
     private sb: MatSnackBar,
   ) {}
 
   ngAfterViewInit(): void {
+    if (this.data.projects.length === 0) {
+      return;
+    }
     this.paginatorFilters.page
       .pipe(
         startWith({}),
@@ -111,6 +115,7 @@ export class FilterSelectionDialogComponent implements AfterViewInit {
             .fetch_by_scope(this.data.scope, {
               skip: this.limit * this.paginatorFilters.pageIndex,
               limit: this.limit,
+              projects: this.data.projects.join(','),
             })
             .pipe(catchError(() => of(null)));
         }),

webgui/webapp/src/app/pages/admin-page/components/admin-user-click-dialog/admin-user-click-dialog.component.ts

@@ -74,6 +74,7 @@ export class AdminUserClickDialogComponent implements OnInit {
   ) {
     this.form = this.fb.group({
       administrators: [false],
+      managers: [false],
       quotaSize: ['', [Validators.required, Validators.min(0)]],
       quotaQueryCount: ['', [Validators.required, Validators.min(0)]],
     });
@@ -204,7 +205,7 @@ export class AdminUserClickDialogComponent implements OnInit {
   }
 
   updateUser() {
-    const groups = _.pick(this.form.value, ['administrators']);
+    const groups = _.pick(this.form.value, ['administrators', 'managers']);
     return this.as
       .updateUsersGroups(this.data.email, groups)
       .pipe(catchError(() => of(null)));

webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html

@@ -0,0 +1,67 @@
+<div class="flex flex-row justify-between w-full items-center">
+  <h2 class="flex">Folders tracked under users</h2>
+  <button
+    mat-mini-fab
+    color="primary"
+    class="flex items-center"
+    (click)="list()"
+  >
+    <mat-icon>refresh</mat-icon>
+  </button>
+</div>
+<p>These folders are held by active users.</p>
+<table mat-table [dataSource]="dataSource">
+  <!-- Given Name Column -->
+  <ng-container matColumnDef="given_name">
+    <th mat-header-cell *matHeaderCellDef>Given Name</th>
+    <td mat-cell *matCellDef="let element">{{ element.given_name }}</td>
+  </ng-container>
+
+  <!-- Family Name Column -->
+  <ng-container matColumnDef="family_name">
+    <th mat-header-cell *matHeaderCellDef>Family Name</th>
+    <td mat-cell *matCellDef="let element">{{ element.family_name }}</td>
+  </ng-container>
+
+  <!-- Email Column -->
+  <ng-container matColumnDef="email">
+    <th mat-header-cell *matHeaderCellDef>Email</th>
+    <td mat-cell *matCellDef="let element">{{ element.email }}</td>
+  </ng-container>
+
+  <!-- Actions Column -->
+  <ng-container matColumnDef="action">
+    <th mat-header-cell *matHeaderCellDef>Action</th>
+    <td mat-cell *matCellDef="let element">
+      <button
+        mat-mini-fab
+        color="warn"
+        (click)="deleteFolder(element['custom:identity_id'])"
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>
+
+@if (inactiveIdentities.length) {
+  <h2>Folders not tracked under users</h2>
+  <p>
+    These folders either belong to past users and currently does not belong to
+    anyone.
+  </p>
+
+  <div class="flex flex-col space-y-1">
+    @for (identity of inactiveIdentities; track identity) {
+      <div class="flex flex-row space-x-2 items-center">
+        <button mat-mini-fab color="warn" (click)="deleteFolder(identity)">
+          <mat-icon>delete</mat-icon>
+        </button>
+        <div class="flex font-semibold">{{ identity }}</div>
+      </div>
+    }
+  </div>
+}