first implementation
This commit is contained in:
parent
2977d04205
commit
737a43ff82
|
|
@ -0,0 +1,16 @@
|
|||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
# DnetIsApplication
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.1.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"dnet-is-application": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/dnet-is-application",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": [
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "dnet-is-application:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "dnet-is-application:build:development",
|
||||
"proxyConfig": "src/proxy.conf.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "dnet-is-application:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "dnet-is-application",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^15.1.0",
|
||||
"@angular/cdk": "^15.1.1",
|
||||
"@angular/common": "^15.1.0",
|
||||
"@angular/compiler": "^15.1.0",
|
||||
"@angular/core": "^15.1.0",
|
||||
"@angular/forms": "^15.1.0",
|
||||
"@angular/material": "^15.1.1",
|
||||
"@angular/platform-browser": "^15.1.0",
|
||||
"@angular/platform-browser-dynamic": "^15.1.0",
|
||||
"@angular/router": "^15.1.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^15.1.1",
|
||||
"@angular/cli": "~15.1.1",
|
||||
"@angular/compiler-cli": "^15.1.0",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"jasmine-core": "~4.5.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"typescript": "~4.9.4"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { InfoComponent } from './info/info.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{path:"info", component:InfoComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<app-main-container></app-main-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'dnet-is-application'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('dnet-is-application');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('dnet-is-application app is running!');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { TitleStrategy } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'dnet-is-application';
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { InfoComponent } from './info/info.component';
|
||||
import { DatafilterPipe } from './datafilter.pipe';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { LayoutModule } from '@angular/cdk/layout';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import {FlatTreeControl} from '@angular/cdk/tree';
|
||||
import {MatTree, MatTreeFlatDataSource, MatTreeFlattener, MatTreeNode, MatTreeModule} from '@angular/material/tree';
|
||||
import { MainContainerComponent } from './main-container/main-container.component';
|
||||
import { MainMenuTreeComponent } from './main-menu-tree/main-menu-tree.component';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {MatInputModule} from '@angular/material/input'
|
||||
import {MatTableModule} from '@angular/material/table';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
InfoComponent,
|
||||
DatafilterPipe,
|
||||
MainContainerComponent,
|
||||
MainMenuTreeComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
FormsModule,
|
||||
HttpClientModule,
|
||||
NoopAnimationsModule,
|
||||
LayoutModule,
|
||||
MatToolbarModule,
|
||||
MatButtonModule,
|
||||
MatSidenavModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatTreeModule,
|
||||
MatBadgeModule,
|
||||
MatCardModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatTableModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { DatafilterPipe } from './datafilter.pipe';
|
||||
|
||||
describe('DatafilterPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new DatafilterPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'datafilter'
|
||||
})
|
||||
export class DatafilterPipe implements PipeTransform {
|
||||
|
||||
transform(items: any[], searchTerm?: string) {
|
||||
let filteredList: any[] = [];
|
||||
if (searchTerm) {
|
||||
return items.filter(item =>
|
||||
Object.keys(item).some(k => item[k] != null &&
|
||||
item[k].toString().toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()))
|
||||
);
|
||||
}
|
||||
else {
|
||||
return items;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<div class="infoPage">
|
||||
|
||||
<h1>Container Info </h1>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input>
|
||||
</mat-form-field>
|
||||
|
||||
<ng-container *ngFor="let section of kvDatasources">
|
||||
<mat-card *ngIf="section.datasource.filteredData.length > 0">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{section.name}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<table mat-table [dataSource]="section.datasource" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="k">
|
||||
<th mat-header-cell *matHeaderCellDef> Property </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.k}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="v">
|
||||
<th mat-header-cell *matHeaderCellDef> Value </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.v}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-row *matRowDef="let row; columns: displayedKVColumns;"></tr>
|
||||
|
||||
<!-- Row 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-card-content>
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
|
||||
<mat-card *ngIf="moduleDatasource.filteredData.length > 0">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Modules</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="group">
|
||||
<th mat-header-cell *matHeaderCellDef> Group </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.group}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="versions">
|
||||
<th mat-header-cell *matHeaderCellDef> Versions </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.versions}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="files">
|
||||
<th mat-header-cell *matHeaderCellDef> Files </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.files}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedModuleColumns;"></tr>
|
||||
|
||||
<!-- Row 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-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<p>
|
||||
<input type="text" [(ngModel)]="infoFilter" placeholder="Filter..."/>
|
||||
</p>
|
||||
|
||||
<ng-container *ngFor="let section of info">
|
||||
<mat-card *ngIf="(section.data|datafilter:infoFilter).length > 0">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{section.name}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<table style="table-layout: fixed;">
|
||||
<thead *ngIf="section.name == 'Modules'">
|
||||
<tr>
|
||||
<th>Group ID</th>
|
||||
<th>Artifact ID</th>
|
||||
<th>Version</th>
|
||||
<th>POM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<ng-container *ngFor="let r of section.data|datafilter:infoFilter">
|
||||
<tr *ngIf="section.name != 'Modules'">
|
||||
<th style="width: 25%;">{{r.k}}</th>
|
||||
<td style="overflow-x: auto;"><pre style="margin: 0;">{{r.v}}</pre></td>
|
||||
</tr>
|
||||
<tr *ngIf="section.name == 'Modules'" ngClass="{'warning' : r.files.length > 1}">
|
||||
<td>{{r.group}}</td>
|
||||
<td>{{r.name}}</td>
|
||||
<td class="text-monospace"><span *ngFor="let v of r.versions">{{v}}<br /></span></td>
|
||||
<td class="text-monospace"><span *ngFor="let f of r.files">{{f}}<br /></span></td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</tbody>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
-->
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InfoComponent } from './info.component';
|
||||
|
||||
describe('InfoComponent', () => {
|
||||
let component: InfoComponent;
|
||||
let fixture: ComponentFixture<InfoComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ InfoComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(InfoComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ISCommonService } from '../iscommon.service';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
export interface KeyValue {
|
||||
k: string;
|
||||
v: string;
|
||||
}
|
||||
|
||||
export interface Module {
|
||||
group: string;
|
||||
name: string;
|
||||
versions: string[];
|
||||
files: string[];
|
||||
}
|
||||
|
||||
export interface KeyValueDatasource {
|
||||
name: string;
|
||||
datasource: MatTableDataSource<any[]>;
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-info',
|
||||
templateUrl: './info.component.html',
|
||||
styleUrls: ['./info.component.css']
|
||||
})
|
||||
export class InfoComponent {
|
||||
infoFilter?:string;
|
||||
|
||||
kvDatasources:KeyValueDatasource[] = [];
|
||||
moduleDatasource:MatTableDataSource<Module[]> = new MatTableDataSource<Module[]>([]);
|
||||
|
||||
displayedKVColumns: string[] = ['k', 'v'];
|
||||
displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
|
||||
|
||||
constructor(public service:ISCommonService) {
|
||||
this.service.loadInfo().subscribe({
|
||||
next:(data:any[]) => {
|
||||
data.forEach(section => {
|
||||
if (section['name'] == 'Modules') {
|
||||
this.moduleDatasource.data = section['data'];
|
||||
} else {
|
||||
this.kvDatasources.push({
|
||||
name: section['name'],
|
||||
datasource : new MatTableDataSource(section['data'])
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
error:error => console.log(error),
|
||||
complete:()=>console.log("Completed")
|
||||
})
|
||||
}
|
||||
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
||||
this.kvDatasources.forEach(s => s.datasource.filter = filterValue)
|
||||
this.moduleDatasource.filter = filterValue;
|
||||
}
|
||||
|
||||
getFilteredInfo(data:any[]) {
|
||||
if (this.infoFilter) {
|
||||
return data.filter(obj => {
|
||||
return Object.keys(obj).reduce((acc, curr) => {
|
||||
return acc || obj[curr].toString().toLowerCase().includes(this.infoFilter);
|
||||
}, false);
|
||||
})
|
||||
}
|
||||
else
|
||||
return data
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ISCommonService } from './iscommon.service';
|
||||
|
||||
describe('ISCommonService', () => {
|
||||
let service: ISCommonService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(ISCommonService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ResourceType } from './model/controller.model';
|
||||
import { Observable, Observer } from 'rxjs';
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ISCommonService {
|
||||
|
||||
constructor(public client:HttpClient) { }
|
||||
|
||||
|
||||
loadResourceTypes():Observable<ResourceType[]> {
|
||||
return this.client.get<ResourceType[]>("/ajax/resourceTypes");
|
||||
}
|
||||
|
||||
loadInfo():Observable<any[]> {
|
||||
return this.client.get<any[]>("/ajax/info/");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.sidenav-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.sidenav .mat-toolbar {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.mat-toolbar.mat-primary {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<mat-sidenav-container class="sidenav-container">
|
||||
<mat-sidenav #drawer class="sidenav" fixedInViewport
|
||||
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
|
||||
[mode]="(isHandset$ | async) ? 'over' : 'side'"
|
||||
[opened]="(isHandset$ | async) === false">
|
||||
<mat-toolbar>Menu</mat-toolbar>
|
||||
<app-main-menu-tree></app-main-menu-tree>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content>
|
||||
<mat-toolbar color="primary">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle sidenav"
|
||||
mat-icon-button
|
||||
(click)="drawer.toggle()"
|
||||
*ngIf="isHandset$ | async">
|
||||
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
|
||||
</button>
|
||||
<span>dnet-is-application</span>
|
||||
</mat-toolbar>
|
||||
|
||||
<!-- The routed views render in the <router-outlet>-->
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { LayoutModule } from '@angular/cdk/layout';
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
|
||||
import { MainContainerComponent } from './main-container.component';
|
||||
|
||||
describe('MainContainerComponent', () => {
|
||||
let component: MainContainerComponent;
|
||||
let fixture: ComponentFixture<MainContainerComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [MainContainerComponent],
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
LayoutModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainContainerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should compile', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, shareReplay } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-container',
|
||||
templateUrl: './main-container.component.html',
|
||||
styleUrls: ['./main-container.component.css']
|
||||
})
|
||||
export class MainContainerComponent {
|
||||
|
||||
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
|
||||
.pipe(
|
||||
map(result => result.matches),
|
||||
shareReplay()
|
||||
);
|
||||
|
||||
constructor(private breakpointObserver: BreakpointObserver) {}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.type-icon {
|
||||
color: #757575;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
|
||||
<button mat-icon-button disabled></button>
|
||||
<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
|
||||
{{ node.type === 'menuitem' ? 'description' : 'folder' }}
|
||||
</mat-icon>
|
||||
<div *ngIf="!node.badge">
|
||||
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
||||
<span *ngIf="!node.route">{{node.name}}</span>
|
||||
</div>
|
||||
<div matBadge="{{node.badge}}" matBadgeOverlap="false" *ngIf="node.badge">
|
||||
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
||||
<span *ngIf="!node.route">{{node.name}}</span>
|
||||
</div>
|
||||
</mat-tree-node>
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
|
||||
<button mat-icon-button matTreeNodeToggle
|
||||
[attr.aria-label]="'Toggle ' + node.name">
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
|
||||
</mat-icon>
|
||||
</button>
|
||||
<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
|
||||
{{ node.type ==='menuitem' ? 'description' : 'folder' }}
|
||||
</mat-icon>
|
||||
<div *ngIf="!node.badge">
|
||||
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
||||
<span *ngIf="!node.route">{{node.name}}</span>
|
||||
</div>
|
||||
<div matBadge="{{node.badge}}" matBadgeOverlap="false" *ngIf="node.badge">
|
||||
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
||||
<span *ngIf="!node.route">{{node.name}}</span>
|
||||
</div>
|
||||
</mat-tree-node>
|
||||
</mat-tree>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
|
||||
import { MainMenuTreeComponent } from './main-menu-tree.component';
|
||||
|
||||
describe('MainMenuTreeComponent', () => {
|
||||
let component: MainMenuTreeComponent;
|
||||
let fixture: ComponentFixture<MainMenuTreeComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MainMenuTreeComponent ],
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatTreeModule,
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainMenuTreeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should compile', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
|
||||
import { FlatTreeControl } from '@angular/cdk/tree';
|
||||
import { menuData } from './menu-data';
|
||||
import { ResourceType } from '../model/controller.model';
|
||||
import { ISCommonService } from '../iscommon.service';
|
||||
|
||||
export interface MenuNode {
|
||||
name: string;
|
||||
type: string;
|
||||
route?: string;
|
||||
badge?: string;
|
||||
children?: MenuNode[];
|
||||
}
|
||||
|
||||
export interface FlatTreeNode {
|
||||
name: string;
|
||||
type: string;
|
||||
level: number;
|
||||
route?: string;
|
||||
badge?: string;
|
||||
expandable: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-menu-tree',
|
||||
templateUrl: './main-menu-tree.component.html',
|
||||
styleUrls: ['./main-menu-tree.component.css']
|
||||
})
|
||||
export class MainMenuTreeComponent {
|
||||
|
||||
/** The TreeControl controls the expand/collapse state of tree nodes. */
|
||||
treeControl: FlatTreeControl<FlatTreeNode>;
|
||||
|
||||
/** The TreeFlattener is used to generate the flat list of items from hierarchical data. */
|
||||
treeFlattener: MatTreeFlattener<MenuNode, FlatTreeNode>;
|
||||
|
||||
/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
|
||||
dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;
|
||||
|
||||
constructor(public service:ISCommonService) {
|
||||
this.treeFlattener = new MatTreeFlattener(
|
||||
this.transformer,
|
||||
this.getLevel,
|
||||
this.isExpandable,
|
||||
this.getChildren);
|
||||
|
||||
this.service.loadResourceTypes().subscribe((data:ResourceType[]) => {
|
||||
let simpleResources: MenuNode[] = []
|
||||
let advancedResources: MenuNode[] = []
|
||||
|
||||
data.forEach(resType => {
|
||||
let item:MenuNode = {
|
||||
name: resType.name,
|
||||
type: 'menuitem',
|
||||
badge: resType.count.toString()
|
||||
}
|
||||
if (resType.simple) {
|
||||
simpleResources.push(item)
|
||||
} else {
|
||||
advancedResources.push(item)
|
||||
}
|
||||
})
|
||||
|
||||
menuData.forEach(m => {
|
||||
if (m.name=='Simple Resources') {
|
||||
m.children = simpleResources
|
||||
} else if (m.name=='Advanced Resources') {
|
||||
m.children = advancedResources
|
||||
}
|
||||
})
|
||||
this.dataSource.data = menuData;
|
||||
})
|
||||
|
||||
this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
|
||||
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
|
||||
this.dataSource.data = menuData;
|
||||
|
||||
}
|
||||
|
||||
/** Transform the data to something the tree can read. */
|
||||
transformer(node: MenuNode, level: number): FlatTreeNode {
|
||||
return {
|
||||
name: node.name,
|
||||
type: node.type,
|
||||
route: node.route,
|
||||
badge: node.badge,
|
||||
level,
|
||||
expandable: !!node.children
|
||||
};
|
||||
}
|
||||
|
||||
/** Get the level of the node */
|
||||
getLevel(node: FlatTreeNode): number {
|
||||
return node.level;
|
||||
}
|
||||
|
||||
/** Get whether the node is expanded or not. */
|
||||
isExpandable(node: FlatTreeNode): boolean {
|
||||
return node.expandable;
|
||||
}
|
||||
|
||||
/** Get whether the node has children or not. */
|
||||
hasChild(index: number, node: FlatTreeNode): boolean {
|
||||
return node.expandable;
|
||||
}
|
||||
|
||||
/** Get the children for the node. */
|
||||
getChildren(node: MenuNode): MenuNode[] | null | undefined {
|
||||
return node.children;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
export const menuData = [
|
||||
{ name: 'Home', type: 'menuitem' },
|
||||
{
|
||||
name: 'Datasources',
|
||||
type: 'menu',
|
||||
children: [
|
||||
{ name: 'Search', type: 'menuitem' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Simple Resources',
|
||||
type: 'menu',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Advanced Resources',
|
||||
type: 'menu',
|
||||
children: []
|
||||
},
|
||||
{ name: 'Workflow History', type: 'menuitem' },
|
||||
{ name: 'Container Info', type: 'menuitem', route: 'info' },
|
||||
{ name: 'API Documentation', type: 'menuitem' }
|
||||
|
||||
];
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export interface ResourceType{
|
||||
id:string
|
||||
name:string
|
||||
contentType:string
|
||||
count:number
|
||||
simple:boolean
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>DnetIsApplication</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"/ajax": {
|
||||
"target": "http://localhost:8280",
|
||||
"secure": false
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: darkorange;
|
||||
}
|
||||
|
||||
.text-monospace {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"useDefineForClassFields": false,
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue