From ac3755c41bdacaf8b2858b9d469b037b9616b221 Mon Sep 17 00:00:00 2001 From: mariateresa Date: Tue, 24 Oct 2023 17:59:09 +0200 Subject: [PATCH] added java and typescript code to manage resource instances' table via service (...work in progress...). Material Table restored. --- .../service/dto/HostingNodeTypeDTO.java | 26 ++++ .../service/dto/ResourceImplDTO.java | 18 +++ .../web/rest/InformationSystemResource.java | 35 +++-- src/main/webapp/app/app.module.ts | 4 +- src/main/webapp/app/home/home.component.html | 12 +- src/main/webapp/app/home/home.module.ts | 6 +- src/main/webapp/app/services/hnodes.ts | 4 +- .../{i-hostinngnode.ts => i-res-impl.ts} | 2 +- ...s => resimpl-table-loader.service.old.txt} | 46 +++--- .../app/services/resources-impl.service.ts | 29 ++++ .../app/services/resources-loader.service.ts | 6 +- src/main/webapp/app/shared/shared.module.ts | 7 +- .../app/table-nodes/sortable.directive.ts | 38 ----- .../table-nodes/table-nodes.component.html | 49 ------- .../table-nodes/table-nodes.component.scss | 20 --- .../app/table-nodes/table-nodes.component.ts | 108 -------------- .../app/table-nodes/table-nodes.module.ts | 16 -- .../table-screen/table-screen.component.html | 80 ++++++++++ .../table-screen/table-screen.component.scss | 34 +++++ .../table-screen/table-screen.component.ts | 137 ++++++++++++++++++ .../app/table-screen/table-screen.module.ts | 24 +++ 21 files changed, 404 insertions(+), 297 deletions(-) create mode 100644 src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/HostingNodeTypeDTO.java create mode 100644 src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/ResourceImplDTO.java rename src/main/webapp/app/services/{i-hostinngnode.ts => i-res-impl.ts} (79%) rename src/main/webapp/app/services/{hnodes-loader.service.ts => resimpl-table-loader.service.old.txt} (74%) create mode 100644 src/main/webapp/app/services/resources-impl.service.ts delete mode 100644 src/main/webapp/app/table-nodes/sortable.directive.ts delete mode 100644 src/main/webapp/app/table-nodes/table-nodes.component.html delete mode 100644 src/main/webapp/app/table-nodes/table-nodes.component.scss delete mode 100644 src/main/webapp/app/table-nodes/table-nodes.component.ts delete mode 100644 src/main/webapp/app/table-nodes/table-nodes.module.ts create mode 100644 src/main/webapp/app/table-screen/table-screen.component.html create mode 100644 src/main/webapp/app/table-screen/table-screen.component.scss create mode 100644 src/main/webapp/app/table-screen/table-screen.component.ts create mode 100644 src/main/webapp/app/table-screen/table-screen.module.ts diff --git a/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/HostingNodeTypeDTO.java b/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/HostingNodeTypeDTO.java new file mode 100644 index 0000000..1d492d1 --- /dev/null +++ b/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/HostingNodeTypeDTO.java @@ -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; + */ +} diff --git a/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/ResourceImplDTO.java b/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/ResourceImplDTO.java new file mode 100644 index 0000000..bd4cd9f --- /dev/null +++ b/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/ResourceImplDTO.java @@ -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; +} diff --git a/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/web/rest/InformationSystemResource.java b/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/web/rest/InformationSystemResource.java index 85b9467..07dcb29 100644 --- a/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/web/rest/InformationSystemResource.java +++ b/src/main/java/org/gcube/fullstackapps/informationsystemmonitor/web/rest/InformationSystemResource.java @@ -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 resourceInstances(@RequestParam @Nullable String currentContext, @RequestParam String resourceType) { log.debug("Request resource instances"); + List instanceDtos = new ArrayList(); + Format dateFormatter = new SimpleDateFormat("dd-MMM-yyyy"); + try { informationSystemService.setUma(createUmaToken(currentContext)); List resIntances = informationSystemService.getResourceInstances(resourceType); - /* - for(Type t : resTypes) { - t.getID(); - t.getName(); - } - */ - /* - informationSystemService.setUma(umaToken); - List resTypes = informationSystemService.getResourceTypes(currentContext); - */ - String sc = ElementMapper.marshal(resIntances); - return ResponseEntity.ok().body(sc); + Iterator 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() diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts index 063d195..7f94ea1 100644 --- a/src/main/webapp/app/app.module.ts +++ b/src/main/webapp/app/app.module.ts @@ -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, diff --git a/src/main/webapp/app/home/home.component.html b/src/main/webapp/app/home/home.component.html index 9213a74..88ef40e 100644 --- a/src/main/webapp/app/home/home.component.html +++ b/src/main/webapp/app/home/home.component.html @@ -33,7 +33,7 @@
-
+
@@ -60,15 +60,7 @@
- - -
- -
-
- -
-
+
diff --git a/src/main/webapp/app/home/home.module.ts b/src/main/webapp/app/home/home.module.ts index b993c16..eb34b9c 100644 --- a/src/main/webapp/app/home/home.module.ts +++ b/src/main/webapp/app/home/home.module.ts @@ -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] diff --git a/src/main/webapp/app/services/hnodes.ts b/src/main/webapp/app/services/hnodes.ts index a12a05d..80f853d 100644 --- a/src/main/webapp/app/services/hnodes.ts +++ b/src/main/webapp/app/services/hnodes.ts @@ -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", diff --git a/src/main/webapp/app/services/i-hostinngnode.ts b/src/main/webapp/app/services/i-res-impl.ts similarity index 79% rename from src/main/webapp/app/services/i-hostinngnode.ts rename to src/main/webapp/app/services/i-res-impl.ts index 8180b71..c4a6b41 100644 --- a/src/main/webapp/app/services/i-hostinngnode.ts +++ b/src/main/webapp/app/services/i-res-impl.ts @@ -1,4 +1,4 @@ -export interface IHostingnode { +export interface IResImpl { type:string; name: string; id: string; diff --git a/src/main/webapp/app/services/hnodes-loader.service.ts b/src/main/webapp/app/services/resimpl-table-loader.service.old.txt similarity index 74% rename from src/main/webapp/app/services/hnodes-loader.service.ts rename to src/main/webapp/app/services/resimpl-table-loader.service.old.txt index 3a6ee4e..f54a18a 100644 --- a/src/main/webapp/app/services/hnodes-loader.service.ts +++ b/src/main/webapp/app/services/resimpl-table-loader.service.old.txt @@ -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(true); private _search$ = new Subject(); private _hnodes$ = new BehaviorSubject([]); @@ -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 { - const SERVICE_URL = appProperties.BASEURL_API+'/is/resourceinstances'; - let queryParams = new HttpParams(); - queryParams = queryParams.append("currentContext",ctx).append("resourceType",type); - return this.http.get(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; } @@ -140,14 +124,17 @@ export class HnodesLoaderService { Object.assign(this._tnode, patch); this._search$.next(); } - - - private _search(/*ctx:string, type:string, pageresults*/): Observable { + +//TODO: la paginazione va aggiustata e passata come parametro al servizio + private _search(myService:ResourcesImplService, context:string, resourceType:string): Observable { const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._tnode; + //risorse ritornate dal servizio + const fetchedResources:Observable = myService.fetchAll(context,resourceType); // 1. sort - const hnodes = this.fetchAll("", 'HostingNode'); - let nodes = sort(HNODES, sortColumn, sortDirection); + // return this.http.get('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 }); } + } \ No newline at end of file diff --git a/src/main/webapp/app/services/resources-impl.service.ts b/src/main/webapp/app/services/resources-impl.service.ts new file mode 100644 index 0000000..308c588 --- /dev/null +++ b/src/main/webapp/app/services/resources-impl.service.ts @@ -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 { + 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(SERVICE_URL,{params:queryParams}); + } + + +} diff --git a/src/main/webapp/app/services/resources-loader.service.ts b/src/main/webapp/app/services/resources-loader.service.ts index dffa165..8fad246 100644 --- a/src/main/webapp/app/services/resources-loader.service.ts +++ b/src/main/webapp/app/services/resources-loader.service.ts @@ -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 { - return this.http.get('http://localhost:3002/is/hostingnodes/all'); + getHostingNodes(): Observable { + return this.http.get('http://localhost:3002/is/hostingnodes/all'); } getResourcesByContext(): Observable { diff --git a/src/main/webapp/app/shared/shared.module.ts b/src/main/webapp/app/shared/shared.module.ts index 8b4d9b0..c394836 100644 --- a/src/main/webapp/app/shared/shared.module.ts +++ b/src/main/webapp/app/shared/shared.module.ts @@ -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 ], }) diff --git a/src/main/webapp/app/table-nodes/sortable.directive.ts b/src/main/webapp/app/table-nodes/sortable.directive.ts deleted file mode 100644 index d447bc1..0000000 --- a/src/main/webapp/app/table-nodes/sortable.directive.ts +++ /dev/null @@ -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(); - - rotate():void { - this.direction = rotate[this.direction]; - this.sort.emit({ column: this.sortable, direction: this.direction }); - } -} - diff --git a/src/main/webapp/app/table-nodes/table-nodes.component.html b/src/main/webapp/app/table-nodes/table-nodes.component.html deleted file mode 100644 index 6e83e64..0000000 --- a/src/main/webapp/app/table-nodes/table-nodes.component.html +++ /dev/null @@ -1,49 +0,0 @@ -
-
- -
- -
- Loading... -
- - - - - - - - - - - - - - - - - - - - - - - - -
UUIDNameStatusLast ModifiedAvailable MemoryHD Space
- -
- - - - -
-
diff --git a/src/main/webapp/app/table-nodes/table-nodes.component.scss b/src/main/webapp/app/table-nodes/table-nodes.component.scss deleted file mode 100644 index a7d699f..0000000 --- a/src/main/webapp/app/table-nodes/table-nodes.component.scss +++ /dev/null @@ -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) -} diff --git a/src/main/webapp/app/table-nodes/table-nodes.component.ts b/src/main/webapp/app/table-nodes/table-nodes.component.ts deleted file mode 100644 index db3a553..0000000 --- a/src/main/webapp/app/table-nodes/table-nodes.component.ts +++ /dev/null @@ -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 | any; - public closedTabs = []; - public tabs: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }]; - selectedIdx = 0; - chosenIds: string[] = []; - ////////// fine tabbed view(MatTab) - - - - hnodes$: Observable; - total$: Observable; - - - @ViewChildren(SortableDirective) headers: QueryList|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); - } - -} diff --git a/src/main/webapp/app/table-nodes/table-nodes.module.ts b/src/main/webapp/app/table-nodes/table-nodes.module.ts deleted file mode 100644 index 97fbf0c..0000000 --- a/src/main/webapp/app/table-nodes/table-nodes.module.ts +++ /dev/null @@ -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 { } diff --git a/src/main/webapp/app/table-screen/table-screen.component.html b/src/main/webapp/app/table-screen/table-screen.component.html new file mode 100644 index 0000000..33acb6c --- /dev/null +++ b/src/main/webapp/app/table-screen/table-screen.component.html @@ -0,0 +1,80 @@ +
+
+ + Search by UUID + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name{{ item.name }}Id{{ item.id }}Status{{ item.status }}Last Modified{{ item.lastmod }}Available Memory{{ item.memavailable }}HD Space{{ item.hdspace }}Actions + +
No data matching the filter "{{ input.value }}"
+ +
+
+
+ + + + + +
{{ tab.title }}
+ + + +
+ +
+ +

JSON raw data will show here

+ + + + +
+
\ No newline at end of file diff --git a/src/main/webapp/app/table-screen/table-screen.component.scss b/src/main/webapp/app/table-screen/table-screen.component.scss new file mode 100644 index 0000000..846f306 --- /dev/null +++ b/src/main/webapp/app/table-screen/table-screen.component.scss @@ -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; +} \ No newline at end of file diff --git a/src/main/webapp/app/table-screen/table-screen.component.ts b/src/main/webapp/app/table-screen/table-screen.component.ts new file mode 100644 index 0000000..b4a04b6 --- /dev/null +++ b/src/main/webapp/app/table-screen/table-screen.component.ts @@ -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(); + @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + + //per tabbed view + @ViewChild(MatTab) + public tabGroup: MatTabGroup | any; + public tabNodes: QueryList | 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 = 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); + } +} diff --git a/src/main/webapp/app/table-screen/table-screen.module.ts b/src/main/webapp/app/table-screen/table-screen.module.ts new file mode 100644 index 0000000..ebde5a7 --- /dev/null +++ b/src/main/webapp/app/table-screen/table-screen.module.ts @@ -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 { + + + }