gCubeSystem
/
information-system-gui
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added java and typescript code to manage resource instances' table via 

service (...work in progress...). Material Table restored.
This commit is contained in:
Maria Teresa Paratore 2023-10-24 17:59:09 +02:00
parent 1eaf8aa78c
commit ac3755c41b
21 changed files with 404 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/HostingNodeTypeDTO.java Normal file
View File

@ -0,0 +1,26 @@
package org.gcube.fullstackapps.informationsystemmonitor.service.dto;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class HostingNodeTypeDTO {
private String id;
private String name;
private HostingNodeTypeDTO[] children;
/*
*
type:string;
name: string;
id: string;
status: string;
lastmod: string;
memavailable: string;
hdspace: string;
*/
}

18
src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/ResourceImplDTO.java Normal file
View File

@ -0,0 +1,18 @@
package org.gcube.fullstackapps.informationsystemmonitor.service.dto;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResourceImplDTO {
private String id;
private String name;
private String status;
private String lastMod;
private String avMemory;
private String hdSpace;
}

33
src/main/java/org/gcube/fullstackapps/informationsystemmonitor/web/rest/InformationSystemResource.java
View File

@ -1,5 +1,7 @@
package org.gcube.fullstackapps.informationsystemmonitor.web.rest;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
@ -9,6 +11,7 @@ import javax.annotation.Nullable;
import org.gcube.com.fasterxml.jackson.databind.ObjectMapper;
import org.gcube.fullstackapps.informationsystemmonitor.config.TokenManager;
import org.gcube.fullstackapps.informationsystemmonitor.service.InformationSystemService;
import org.gcube.fullstackapps.informationsystemmonitor.service.dto.ResourceImplDTO;
import org.gcube.fullstackapps.informationsystemmonitor.service.dto.ResourceTypeDTO;
import org.gcube.informationsystem.contexts.reference.entities.Context;
import org.gcube.informationsystem.model.reference.entities.Resource;
@ -127,22 +130,30 @@ public class InformationSystemResource {
@GetMapping("/resourceinstances")
public ResponseEntity<String> resourceInstances(@RequestParam @Nullable String currentContext, @RequestParam String resourceType) {
log.debug("Request resource instances");
List<ResourceImplDTO> instanceDtos = new ArrayList<ResourceImplDTO>();
Format dateFormatter = new SimpleDateFormat("dd-MMM-yyyy");
try {
informationSystemService.setUma(createUmaToken(currentContext));
List<Resource> resIntances = informationSystemService.getResourceInstances(resourceType);
/*
for(Type t : resTypes) {
t.getID();
t.getName();
}
*/
/*
informationSystemService.setUma(umaToken);
List<Type> resTypes = informationSystemService.getResourceTypes(currentContext);
*/
String sc = ElementMapper.marshal(resIntances);
Iterator<Resource> resIt = resIntances.iterator();
//dateFormatter.format(res.getMetadata().getLastUpdateTime())
while (resIt.hasNext()) {
Resource res = resIt.next();
//TODO: RIEMPIRE I CAMPI IN MODO SIGNIFICATIVO
ResourceImplDTO dto = new ResourceImplDTO(res.getID().toString(),
res.getExpectedtype(),
res.getTypeName(),
"-",
"-",
"-");
instanceDtos.add(dto);
}
ObjectMapper objectMapper = new ObjectMapper();
String sc = objectMapper.writeValueAsString(instanceDtos);
return ResponseEntity.ok().body(sc);
} catch (Exception e) {
log.error(e.getLocalizedMessage(), e);
return ResponseEntity.noContent()

4
src/main/webapp/app/app.module.ts
View File

@ -25,12 +25,11 @@ import { FooterComponent } from './layouts/footer/footer.component';
import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component';
import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive';
import { ErrorComponent } from './layouts/error/error.component';
import { SortableDirective } from './table-nodes/sortable.directive';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RawjsonPaneComponent } from './rawjson-pane/rawjson-pane.component';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RestypeTreeComponent } from './restype-tree/restype-tree.component';
import { TableScreenComponent } from './table-screen/table-screen.component';
@NgModule({
imports: [
@ -44,7 +43,6 @@ import { RestypeTreeComponent } from './restype-tree/restype-tree.component';
HttpClientModule,
NgxWebstorageModule.forRoot({ prefix: 'jhi', separator: '-', caseSensitive: true }),
TranslationModule,
SortableDirective,
NgbModule,
RawjsonPaneComponent,
ClipboardModule,

12
src/main/webapp/app/home/home.component.html
View File

@ -33,7 +33,7 @@
</div>
<div>
<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" >
<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" ></div>
<div class="col-md-9 mt-2">
<form [formGroup]="chooseContextForm">
@ -60,15 +60,7 @@
</button>
</form>
</div>
<div class="my-3">
<jhi-table-nodes></jhi-table-nodes>
</div>
<div>
<jhi-rawjson-pane></jhi-rawjson-pane>
</div>
</div>
<jhi-table-screen></jhi-table-screen>
</div>
</div>

6
src/main/webapp/app/home/home.module.ts
View File

@ -5,25 +5,25 @@ import { SharedModule } from 'app/shared/shared.module';
import { HOME_ROUTE } from './home.route';
import { HomeComponent } from './home.component';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { TableNodesModule } from 'app/table-nodes/table-nodes.module';
import { RscTreeModule } from 'app/rsc-tree/rsc-tree.module';
import { RawjsonPaneComponent } from 'app/rawjson-pane/rawjson-pane.component';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { MatTabsModule } from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSelectFilterModule } from 'mat-select-filter';
import { TableScreenModule } from 'app/table-screen/table-screen.module';
@NgModule({
imports: [SharedModule,
RouterModule.forChild([HOME_ROUTE]),
NgbDropdownModule,
TableNodesModule,
RscTreeModule,
RawjsonPaneComponent,
ClipboardModule,
MatTabsModule,
BrowserAnimationsModule,
MatSelectFilterModule
MatSelectFilterModule,
TableScreenModule
],
declarations: [HomeComponent],
schemas:[CUSTOM_ELEMENTS_SCHEMA]

4
src/main/webapp/app/services/hnodes.ts
View File

@ -1,6 +1,6 @@
import { IHostingnode } from './i-hostinngnode';
import { IResImpl } from './i-res-impl';
export const HNODES: IHostingnode[] = [{
export const HNODES: IResImpl[] = [{
"type": "Hosting Node",
"id": "id-ckan",
"name": "ckan-d-d4s.d4science.org",

2
src/main/webapp/app/services/i-hostinngnode.ts → src/main/webapp/app/services/i-res-impl.ts
View File

@ -1,4 +1,4 @@
export interface IHostingnode {
export interface IResImpl {
type:string;
name: string;
id: string;

44
src/main/webapp/app/services/hnodes-loader.service.ts → src/main/webapp/app/services/resimpl-table-loader.service.old.txt
View File

@ -2,16 +2,15 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/adjacent-overload-signatures */
import { Injectable, PipeTransform } from '@angular/core';
import { Inject, Injectable, PipeTransform } from '@angular/core';
import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
import { IHostingnode } from './i-hostinngnode';
import { DecimalPipe } from '@angular/common';
import { debounceTime, delay, switchMap, tap } from 'rxjs/operators';
import { SortColumn, SortDirection } from 'app/table-nodes/sortable.directive';
import { HNODES } from './hnodes';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { appProperties } from 'app/config/app-properties';
import { IResource } from './i-resource';
//import { HNODES } from './hnodes';
import { ResourcesImplService } from './resources-impl.service';
import { IContextNode } from './i-context-node';
@ -54,12 +53,7 @@ function matches(hnode: IHostingnode, term: string, pipe: PipeTransform){
@Injectable({providedIn: 'root'})
export class HnodesLoaderService {
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
};
export class ResimplTableLoaderService {
private _loading$ = new BehaviorSubject<boolean>(true);
private _search$ = new Subject<void>();
private _hnodes$ = new BehaviorSubject<IHostingnode[]>([]);
@ -73,10 +67,7 @@ export class HnodesLoaderService {
sortDirection: '',
};
constructor(private pipe: DecimalPipe, private http: HttpClient/*, private currentContext: string, private resourceType: string*/) {
constructor(private pipe: DecimalPipe, private myService: ResourcesImplService) {
this._search$
.pipe(
tap(() => this._loading$.next(true)),
@ -92,15 +83,7 @@ export class HnodesLoaderService {
this._search$.next();
}
//TODO: qui va messo parametro per paginazione
fetchAll(ctx:string, type:string): Observable<IHostingnode[]> {
const SERVICE_URL = appProperties.BASEURL_API+'/is/resourceinstances';
let queryParams = new HttpParams();
queryParams = queryParams.append("currentContext",ctx).append("resourceType",type);
return this.http.get<IHostingnode[]>(SERVICE_URL,{params:queryParams});
}
/*
get hnodes$() {
return this._hnodes$.asObservable();
}
@ -110,6 +93,7 @@ export class HnodesLoaderService {
get loading$() {
return this._loading$.asObservable();
}
*/
get page() {
return this._tnode.page;
}
@ -141,13 +125,16 @@ export class HnodesLoaderService {
this._search$.next();
}
private _search(/*ctx:string, type:string, pageresults*/): Observable<SearchResult> {
//TODO: la paginazione va aggiustata e passata come parametro al servizio
private _search(myService:ResourcesImplService, context:string, resourceType:string): Observable<SearchResult> {
const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._tnode;
//risorse ritornate dal servizio
const fetchedResources:Observable<IHostingnode[]> = myService.fetchAll(context,resourceType);
// 1. sort
const hnodes = this.fetchAll("", 'HostingNode');
let nodes = sort(HNODES, sortColumn, sortDirection);
// return this.http.get<IContextNode[]>('http://localhost:3002/is/allcontexttree');
let nodes = sort(fetchedResources, sortColumn, sortDirection);
// 2. filter
nodes = nodes.filter((hnode) => matches(hnode, searchTerm, this.pipe));
const total = nodes.length;
@ -156,4 +143,5 @@ export class HnodesLoaderService {
nodes = nodes.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
return of({ nodes, total });
}
}

29
src/main/webapp/app/services/resources-impl.service.ts Normal file
View File

@ -0,0 +1,29 @@
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { IResImpl } from './i-res-impl';
import { appProperties } from 'app/config/app-properties';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ResourcesImplService {
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
};
constructor(private http: HttpClient) { }
//TODO: qui va messo parametro per paginazione
fetchAll(ctx:string, type:string): Observable<IResImpl[]> {
const SERVICE_URL = appProperties.BASEURL_API+'/is/resourceinstances';
let queryParams = new HttpParams();
queryParams = queryParams.append("currentContext",ctx).append("resourceType",type);
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return this.http.get<IResImpl[]>(SERVICE_URL,{params:queryParams});
}
}

6
src/main/webapp/app/services/resources-loader.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IHostingnode } from './i-hostinngnode';
import { IResource } from './i-resource';
import { IResImpl } from './i-res-impl';
@Injectable({
providedIn: 'root',
@ -19,8 +19,8 @@ export class ResourcesLoaderService {
//TODO: pipe per gestione errori
*/
getHostingNodes(): Observable<IHostingnode[]> {
return this.http.get<IHostingnode[]>('http://localhost:3002/is/hostingnodes/all');
getHostingNodes(): Observable<IResImpl[]> {
return this.http.get<IResImpl[]>('http://localhost:3002/is/hostingnodes/all');
}
getResourcesByContext(): Observable<IResource[]> {

7
src/main/webapp/app/shared/shared.module.ts
View File

@ -15,11 +15,12 @@ import { ItemCountComponent } from './pagination/item-count.component';
import { FilterComponent } from './filter/filter.component';
import { ContextTransformPipe } from './pipe/contexttransform.pipe';
import { NgbPagination, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
import { SortableDirective } from 'app/table-nodes/sortable.directive';
//import { SortableDirective } from 'app/table-nodes/sortable.directive';
import { MaterialModule } from './material/material.module';
@NgModule({
imports: [SharedLibsModule,SortableDirective],
//imports: [SharedLibsModule,SortableDirective],
imports: [SharedLibsModule],
declarations: [
FindLanguageFromKeyPipe,
TranslateDirective,
@ -53,7 +54,7 @@ import { MaterialModule } from './material/material.module';
ContextTransformPipe,
NgbPagination,
NgbTypeahead,
SortableDirective,
/*SortableDirective,*/
MaterialModule
],
})

38
src/main/webapp/app/table-nodes/sortable.directive.ts
View File

@ -1,38 +0,0 @@
/* eslint-disable @angular-eslint/directive-selector */
/* eslint-disable @angular-eslint/no-host-metadata-property */
import { Directive, EventEmitter, Input, Output } from '@angular/core';
import { IHostingnode } from 'app/services/i-hostinngnode';
//import { Country } from './country';
export type SortColumn = keyof IHostingnode | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: { [key: string]: SortDirection } = { asc: 'desc', desc: '', '': 'asc' };
export interface SortEvent {
column: SortColumn;
direction: SortDirection;
}
@Directive({
selector: 'th[sortable]',
standalone: true,
host: {
'[class.asc]': 'direction === "asc"',
'[class.desc]': 'direction === "desc"',
'(click)': 'rotate()',
},
})
//export class NgbdSortableHeader
export class SortableDirective {
@Input() sortable: SortColumn = '';
@Input() direction: SortDirection = '';
@Output() sort = new EventEmitter<SortEvent>();
rotate():void {
this.direction = rotate[this.direction];
this.sort.emit({ column: this.sortable, direction: this.direction });
}
}

49
src/main/webapp/app/table-nodes/table-nodes.component.html
View File

@ -1,49 +0,0 @@
<form>
<div class="mb-3 row">
<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Filter by name or UUID:</label>
<div class="col-xs-3 col-sm-auto">
<input type="text" id="table-complete-search"
[(ngModel)]="service.searchTerm"
class="form-control"
name="searchTerm"
/>
</div>
<span class="col col-form-label" *ngIf="service.loading$ | async">Loading...</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<!--<th scope="col" sortable="type" (sort)="onSort($event)">Type</th>-->
<th scope="col" sortable="id" (sort)="onSort($event)">UUID</th>
<th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
<th scope="col" sortable="status" (sort)="onSort($event)">Status</th>
<th scope="col" sortable="lastmod" (sort)="onSort($event)">Last Modified</th>
<th scope="col" sortable="memavailable">Available Memory</th>
<th scope="col" sortable="hdspace" (sort)="onSort($event)">HD Space</th>
<th scope="col" ></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hnode of hnodes$ | async">
<td><ngb-highlight [result]="hnode.id" [term]="service.searchTerm"></ngb-highlight></td>
<td><ngb-highlight [result]="hnode.name" [term]="service.searchTerm"></ngb-highlight></td>
<td><ngb-highlight [result]="hnode.status"></ngb-highlight></td>
<td><ngb-highlight [result]="hnode.lastmod"></ngb-highlight></td>
<td><ngb-highlight [result]="hnode.memavailable"></ngb-highlight></td>
<td><ngb-highlight [result]="hnode.hdspace"></ngb-highlight></td>
<td><button mat-button color="primary" (click)="addTab(hnode.id)"><mat-icon>visibility</mat-icon></button></td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
</ngb-pagination>
<select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
<option [ngValue]="2">2 items per page</option>
<option [ngValue]="4">4 items per page</option>
<option [ngValue]="6">6 items per page</option>
</select>
</div>
</form>

20
src/main/webapp/app/table-nodes/table-nodes.component.scss
View File

@ -1,20 +0,0 @@
@import "~bootstrap-icons/font/bootstrap-icons.css";
th[sortable] {
cursor: pointer;
user-select: none;
-webkit-user-select: none
}
th[sortable].desc:before,th[sortable].asc:before {
content: "^";
display: block;
float: left;
margin-left: 10px;
margin-right: 10px
}
th[sortable].desc:before {
transform: rotate(180deg);
-ms-transform: rotate(180deg)
}

108
src/main/webapp/app/table-nodes/table-nodes.component.ts
View File

@ -1,108 +0,0 @@
import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { IHostingnode } from 'app/services/i-hostinngnode';
import { HnodesLoaderService } from 'app/services/hnodes-loader.service';
import { DecimalPipe, NgIf } from '@angular/common';
import { Observable } from 'rxjs';
import { SortableDirective, SortEvent } from './sortable.directive';
import { MatTab, MatTabGroup } from '@angular/material/tabs';
import { ITabbedEntity } from 'app/i-tabbed-entity';
/*
Tabella con paginazione, ordinamento e ricerca - dati presi da servizio
PARAMETRI: currCtx, resType (e poi anche # risultati per pagina)
*/
@Component({
selector: 'jhi-table-nodes',
templateUrl: './table-nodes.component.html',
styleUrls: ['./table-nodes.component.scss'],
providers: [/*{provide: 'currentContext', useValue: 'currCtx'},
{provide: 'resourceType', useValue: 'resType'},*/
HnodesLoaderService, DecimalPipe],
})
export class TableNodesComponent{
//per tabbed view
@ViewChild(MatTab)
public tabGroup: MatTabGroup | any;
public tabNodes: QueryList<MatTab> | any;
public closedTabs = [];
public tabs: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }];
selectedIdx = 0;
chosenIds: string[] = [];
////////// fine tabbed view(MatTab)
hnodes$: Observable<IHostingnode[]>;
total$: Observable<number>;
@ViewChildren(SortableDirective) headers: QueryList<SortableDirective>|any;
constructor(public service: HnodesLoaderService) {
this.hnodes$ = service.hnodes$;
this.total$ = service.total$;
}
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
onSort({ column, direction }: SortEvent) {
// resetting other headers
this.headers.forEach((header: { sortable: string; direction: string; }) => {
if (header.sortable !== column) {
header.direction = '';
}
});
this.service.sortColumn = column;
this.service.sortDirection = direction;
}
/*
addTab(id:string):void{
alert("id?..."+id);
}
*/
// per tabbed pane (versione con aggiunta dinamica)
removeTab(index: number): void {
this.tabs.splice(index, 1);
}
addTab(itemId: string): void {
if (!this.chosenIds.includes(itemId)) {
const newItem = {
id: itemId,
title: itemId.substring(0, 20) + '...',
//TODO: content a regime è la stringa JSON
content: itemId,
type: 0,
};
this.selectedIdx++;
this.chosenIds.push(itemId);
this.tabs.push(newItem);
}
}
closeTab(index: number): void {
/*
console.debug('---------');
console.debug(index);
console.debug('---IDs:');
console.debug(this.chosenIds);
console.debug(this.tabs[index].id);
console.debug('++++++++++');
*/
const x = this.chosenIds.indexOf(this.tabs[index].id);
if (x !== -1) {
this.chosenIds.splice(x, 1);
}
// this.closedTabs.push(index);
this.tabGroup.selectedIndex = this.tabs.length - 1;
//this.chosenIds.indexOf();
this.tabs.splice(index, 1);
}
}

16
src/main/webapp/app/table-nodes/table-nodes.module.ts
View File

@ -1,16 +0,0 @@
import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from 'app/shared/shared.module';
import { TableNodesComponent } from './table-nodes.component';
@NgModule({
declarations: [TableNodesComponent],
imports: [
CommonModule,
SharedModule
],
exports: [TableNodesComponent]
})
export class TableNodesModule { }

80
src/main/webapp/app/table-screen/table-screen.component.html Normal file
View File

@ -0,0 +1,80 @@
<div class="col-md-9 mt-2">
<div class="p-3">
<mat-form-field>
<mat-label>Search by UUID</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="UUID" #input />
</mat-form-field>
<div class="mat-elevation-z4">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header color="primary">Name</th>
<td mat-cell *matCellDef="let item">{{ item.name }}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let item">{{ item.id }}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let item">{{ item.status }}</td>
</ng-container>
<ng-container matColumnDef="lastmod">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Last Modified</th>
<td mat-cell *matCellDef="let item">{{ item.lastmod }}</td>
</ng-container>
<ng-container matColumnDef="memavailable">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Available Memory</th>
<td mat-cell *matCellDef="let item">{{ item.memavailable }}</td>
</ng-container>
<ng-container matColumnDef="hdspace">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>HD Space</th>
<td mat-cell *matCellDef="let item">{{ item.hdspace }}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Actions</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary" (click)="addTab(this.item.id)"><mat-icon>visibility</mat-icon></button>
</td>
</ng-container>
<!-- rows visualization -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<!-- Rows shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{ input.value }}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons> </mat-paginator>
</div>
</div>
<div class="p-3">
<mat-tab-group [selectedIndex]="selectedIdx">
<ng-container *ngFor="let tab of tabs; let index = index">
<mat-tab>
<!--stile linguetta tab begin-->
<ng-template mat-tab-label>
<div class="col" style="margin-left: 20px">{{ tab.title }}</div>
<button *ngIf="tab.title !== 'JSON View'" style="color: black" mat-icon-button (click)="closeTab(index)">
<mat-icon>close</mat-icon>
</button>
</ng-template>
<!--stile linguetta tab close-->
<div *ngIf="tab.title !== 'JSON View'; else mainTabMsg">
<jhi-rawjson-pane [chosenId]="tab.id"></jhi-rawjson-pane>
</div>
<ng-template #mainTabMsg>
<h2>JSON raw data will show here</h2>
</ng-template>
</mat-tab>
</ng-container>
</mat-tab-group>
</div>
</div>

34
src/main/webapp/app/table-screen/table-screen.component.scss Normal file
View File

@ -0,0 +1,34 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
/*
.mat-row {
width: 32px;
text-align: left;
font-weight: bold;
}
.mat-mdc-header-cell {
font-weight: bold;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
cursor: pointer;
}
.mat-mdc-row:hover .mat-mdc-cell {
border-color: currentColor;
}
*/
.mat-mdc-form-field {
font-size: 14px;
width: 100%;
}
th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
padding:18px;
}
.mat-header-cell {
font-size: 18px;
font-weight: 800;
}

137
src/main/webapp/app/table-screen/table-screen.component.ts Normal file
View File

@ -0,0 +1,137 @@
/* eslint-disable no-console */
import {
Component,
Output,
EventEmitter,
OnInit,
ViewChild,
AfterViewInit,
OnChanges,
SimpleChanges,
Input,
QueryList,
} from '@angular/core';
import { ResourcesLoaderService } from 'app/services/resources-loader.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort} from '@angular/material/sort';
import { IContextNode } from 'app/services/i-context-node';
import { MatPaginator} from '@angular/material/paginator';
import { MatTab, MatTabGroup } from '@angular/material/tabs';
import { ITabbedEntity } from 'app/i-tabbed-entity';
import { IResImpl } from 'app/services/i-res-impl';
import { ResourcesImplService } from 'app/services/resources-impl.service';
@Component({
selector: 'jhi-table-screen',
templateUrl: './table-screen.component.html',
styleUrls: ['./table-screen.component.scss'],
providers: [ResourcesLoaderService],
})
export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
//NB 'actions' CI DEVE ESSERE, altrimenti la tabella non viene visualizzata
displayedColumns: string[] = ['name', 'id', 'status', 'lastmod', 'memavailable', 'hdspace', 'actions'];
dataFromService: IResImpl[];
dataSource = new MatTableDataSource();
tableDetail: IResImpl;
//TODO: questo è un tipo
@Input() myCtx: IContextNode; //fetching event from parent
@Output() jsonEmitter = new EventEmitter<IResImpl>();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
//per tabbed view
@ViewChild(MatTab)
public tabGroup: MatTabGroup | any;
public tabNodes: QueryList<MatTab> | any;
public closedTabs = [];
public tabs: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }];
selectedIdx = 0;
chosenIds: string[] = [];
////////// fine tabbed view
constructor(private myDataService: ResourcesImplService) {
this.myCtx = {} as IContextNode;
this.tableDetail = {} as IResImpl;
this.dataFromService = [];
this.sort = new MatSort();
this.paginator = {} as MatPaginator;
}
ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
ngOnInit(): void {
this.myDataService.fetchAll('','HostingNode').subscribe(res => {
this.dataFromService = res;
this.dataSource.data = res;
});
}
ngOnChanges(changes: SimpleChanges): void {
// console.log('---NELLA ONCHANGES...' + this.myCtx.name);
for (const propName in changes) {
if (propName === 'myCtx') {
const param = changes[propName];
//TODO: questo è un tipo
this.myCtx = <IContextNode>param.currentValue;
//controllo che l'oggetto non sia vuoto
if (Object.keys(this.myCtx).length !== 0) {
//mt qui va passato il parametro ResourceType (preso dall'albero) al rest
this.myDataService.fetchAll('','HostingNode').subscribe(res => {
this.dataFromService = res;
this.dataSource.data = res;
});
}
}
}
}
applyFilter(event: Event): void {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
// per tabbed pane (versione con aggiunta dinamica)
removeTab(index: number): void {
this.tabs.splice(index, 1);
}
addTab(itemId: string): void {
if (!this.chosenIds.includes(itemId)) {
const newItem = {
id: itemId,
title: itemId.substring(0, 20) + '...',
//TODO: content a regime è la stringa JSON
content: itemId,
type: 0,
};
this.selectedIdx++;
this.chosenIds.push(itemId);
this.tabs.push(newItem);
}
}
closeTab(index: number): void {
console.debug('---------');
console.debug(index);
console.debug('---IDs:');
console.debug(this.chosenIds);
console.debug(this.tabs[index].id);
console.debug('++++++++++');
const x = this.chosenIds.indexOf(this.tabs[index].id);
if (x !== -1) {
this.chosenIds.splice(x, 1);
}
// this.closedTabs.push(index);
this.tabGroup.selectedIndex = this.tabs.length - 1;
//this.chosenIds.indexOf();
this.tabs.splice(index, 1);
}
}

24
src/main/webapp/app/table-screen/table-screen.module.ts Normal file
View File

@ -0,0 +1,24 @@
import { NgModule } from '@angular/core';
import { SharedModule } from 'app/shared/shared.module';
import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
import { MatSortModule } from '@angular/material/sort';
import { TableScreenComponent } from './table-screen.component';
import { MatPaginatorModule } from '@angular/material/paginator';
import { RawjsonPaneComponent } from 'app/rawjson-pane/rawjson-pane.component';
@NgModule({
imports: [
SharedModule,MatTableModule,MatIconModule,MatSortModule,MatPaginatorModule,RawjsonPaneComponent
],
declarations:[TableScreenComponent],
entryComponents: [TableScreenComponent],
exports: [TableScreenComponent]
})
export class TableScreenModule {
}