Skip to content
Snippets Groups Projects
Commit a7228aef authored by kbeyro's avatar kbeyro
Browse files

cluster init views

parent 98ffc891
Branches
Tags 0.39
2 merge requests!184Develop,!110280 k8 s clusters
Showing
with 189 additions and 8 deletions
...@@ -3,10 +3,13 @@ import {ClusterDetailsComponent} from './index'; ...@@ -3,10 +3,13 @@ import {ClusterDetailsComponent} from './index';
import {AuthGuard} from '../../../auth/auth.guard'; import {AuthGuard} from '../../../auth/auth.guard';
import {RoleGuard} from '../../../auth/role.guard'; import {RoleGuard} from '../../../auth/role.guard';
import {ComponentMode} from '../../../shared/common/componentmode'; import {ComponentMode} from '../../../shared/common/componentmode';
import { ClusterManagerComponent } from '../../../shared/admin/clusters/manager/manager.component';
export const ClustersRoutes: Route[] = [ export const ClustersRoutes: Route[] = [
{ path: 'admin/clusters', component: ClusterDetailsComponent, canActivate: [AuthGuard, RoleGuard], { path: 'admin/clusters', component: ClusterDetailsComponent, canActivate: [AuthGuard, RoleGuard],
data: {mode: ComponentMode.VIEW, roles: ['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']}}, data: {mode: ComponentMode.VIEW, roles: ['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']}},
{ path: 'admin/clusters/view', component: ClusterDetailsComponent, canActivate: [AuthGuard, RoleGuard], { path: 'admin/clusters/view', component: ClusterDetailsComponent, canActivate: [AuthGuard, RoleGuard],
data: {mode: ComponentMode.VIEW, roles: ['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']}} data: {mode: ComponentMode.VIEW, roles: ['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']}},
{ path: 'admin/manage/clusters', component: ClusterManagerComponent, canActivate: [AuthGuard, RoleGuard],
data: {mode: ComponentMode.VIEW, roles: ['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']}},
]; ];
export class ClusterManager {
public id: number;
public name: string;
public codename: string;
public description: string;
public creationDate: string; // Możesz użyć Date, ale JSON zazwyczaj zwraca string
public modificationDate: string;
public clusterConfigFile: string;
public pathConfigFile: string;
}
\ No newline at end of file
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { AppConfigService } from "./appconfig.service";
import { Observable } from "rxjs";
import { ClusterManager } from "../model/cluster-manager";
@Injectable({
providedIn: 'root',
})
export class ClusterManagerService {
protected url: string;
constructor(private http: HttpClient,
private appConfig: AppConfigService) {
this.url = this.appConfig.getApiUrl() + '/management/cluster';
}
public sendCluster(file: File, view: ClusterManager): Observable<ClusterManager> {
const formParams = new FormData();
formParams.append('file', file);
formParams.append('data', new Blob([JSON.stringify(view)], { type: 'application/json' }));
return this.http.post<ClusterManager>(this.url, formParams);
}
public getAllClusters(): Observable<ClusterManager[]> {
return this.http.get<ClusterManager[]>(this.url + '/all');
}
}
\ No newline at end of file
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">{{ 'CLUSTERS.TITLE' | translate }}</div> <div class="panel-heading">{{ 'CLUSTERS.TITLE' | translate }} </div>
<div class="panel-body"> <div class="panel-body">
<form *ngIf="cluster" (submit)="submit()" class="form-horizontal" #clusterForm="ngForm"> <form *ngIf="cluster" (submit)="submit()" class="form-horizontal" #clusterForm="ngForm">
<div class="panel-default panel-heading">{{ 'CLUSTERS.INGRESS' | translate }}</div> <div class="panel-default panel-heading">{{ 'CLUSTERS.INGRESS' | translate }} </div>
<div class="panel-body"> <div class="panel-body">
<div class="form-group"> <div class="form-group">
<label for="ingresscontrollerconfigoption" class="col-sm-2 control-label">{{ 'CLUSTERS.CONTROLLER_CONFIG_OPTION' | translate }}</label> <label for="ingresscontrollerconfigoption" class="col-sm-2 control-label">{{ 'CLUSTERS.CONTROLLER_CONFIG_OPTION' | translate }}</label>
<div class="col-sm-10"> <div class="col-sm-10">
......
...@@ -6,6 +6,8 @@ import { ...@@ -6,6 +6,8 @@ import {
IngressResourceConfigOption, IngressResourceConfigOption,
NamespaceConfigOption NamespaceConfigOption
} from '../../../../model/cluster'; } from '../../../../model/cluster';
import { ClusterManager } from '../../../../model/cluster-manager';
import { ClusterManagerService } from '../../../../service/cluster-manager.service';
import {BaseComponent} from '../../../common/basecomponent/base.component'; import {BaseComponent} from '../../../common/basecomponent/base.component';
import {Component, EventEmitter, Input, Output} from '@angular/core'; import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
...@@ -37,11 +39,23 @@ export class ClusterDetailsComponent extends BaseComponent { ...@@ -37,11 +39,23 @@ export class ClusterDetailsComponent extends BaseComponent {
@Output() @Output()
public onDelete: EventEmitter<string> = new EventEmitter<string>(); public onDelete: EventEmitter<string> = new EventEmitter<string>();
constructor(private router: Router) { constructor(private router: Router, private clusterService: ClusterManagerService) {
super(); super();
this.initializeMaps(); this.initializeMaps();
} }
public sendCluster(event: any) {
console.log(event);
const file = event.files[0];
const view = new ClusterManager();
view.name = "test"
view.description="testest"
this.clusterService.sendCluster(file, view).subscribe(result => {
console.log(result);
}
)
}
public submit(): void { public submit(): void {
this.onSave.emit(this.cluster); this.onSave.emit(this.cluster);
} }
......
<div class="flex flex-column">
<div class="card flex justify-content-center">
<p-fileUpload name="json" (onUpload)="sendCluster($event)" customUpload="true" [draggable]="true"
(uploadHandler)="sendCluster($event)" [multiple]="false" accept=".yaml" maxFileSize="1000000">
</p-fileUpload>
</div>
<div class="card flex flex-grow justify-content-center">
<p-table [value]="clusters" [paginator]="true"
[rows]="20" [tableStyle]="{'min-width': '50rem'}"
[rowsPerPageOptions]="[15, 20, 25, 30, 50]"
[responsiveLayout]="'scroll'">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id" id="id">Id</th>
<th id="name">Name</th>
<th id="codename">Codename</th>
<th id="creationDate">Creation Date</th>
<th id="modificationDate">ModificationDate</th>
<th id="configFile">Config File Path</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-deploy>
<tr>
<td>{{deploy.id}}</td>
<td>{{deploy.name}}</td>
<td>{{deploy.codename}}</td>
<td>{{deploy.creationDate}}</td>
<td>{{deploy.modificationDate}}</td>
<td>{{deploy.pathConfigFile}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ClusterManagerComponent } from './manager.component';
describe('ManagerComponent', () => {
let component: ClusterManagerComponent;
let fixture: ComponentFixture<ClusterManagerComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ClusterManagerComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ClusterManagerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
import { ClusterManagerService } from '../../../../service/cluster-manager.service';
import { ClusterManager } from '../../../../model/cluster-manager';
@Component({
selector: 'app-manager',
templateUrl: './manager.component.html',
styleUrl: './manager.component.css'
})
export class ClusterManagerComponent {
public clusters: ClusterManager[] = [];
constructor(private clusterService: ClusterManagerService) {
this.getAllClusters();
}
public sendCluster(event: any) {
console.log(event);
const file = event.files[0];
const view = new ClusterManager();
view.name = "test"
view.description="testest"
this.clusterService.sendCluster(file, view).subscribe(result => {
console.log(result);
}
)
}
public getAllClusters() {
this.clusterService.getAllClusters().subscribe(result => {
console.log(result);
this.clusters = result;
})
}
}
...@@ -62,6 +62,9 @@ ...@@ -62,6 +62,9 @@
<li *roles="['ROLE_SYSTEM_ADMIN']"><a <li *roles="['ROLE_SYSTEM_ADMIN']"><a
[routerLink]="['/admin/configuration']">{{ 'NAVBAR.SETTINGS' | translate }}</a> [routerLink]="['/admin/configuration']">{{ 'NAVBAR.SETTINGS' | translate }}</a>
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN']"><a
[routerLink]="['/admin/manage/clusters']">{{ 'NAVBAR.SETTINGS' | translate }}</a>
</li>
<li *roles="['ROLE_SYSTEM_ADMIN']" class="dropdown-divider"></li> <li *roles="['ROLE_SYSTEM_ADMIN']" class="dropdown-divider"></li>
<li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_TOOL_MANAGER']"><a <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_TOOL_MANAGER']"><a
......
import {DefaultLogo} from '../directive/defaultlogo.directive'; import {DefaultLogo} from '../directive/defaultlogo.directive';
import {RolesDirective} from '../directive/roles.directive'; import {RolesDirective} from '../directive/roles.directive';
import {NgModule} from '@angular/core'; import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {CommonModule, DatePipe} from '@angular/common'; import {CommonModule, DatePipe} from '@angular/common';
...@@ -65,6 +65,12 @@ import { InputGroupModule } from 'primeng/inputgroup'; ...@@ -65,6 +65,12 @@ import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { FileUploadModule } from 'primeng/fileupload';
import { ClusterManager } from '../model/cluster-manager';
import { ClusterManagerComponent } from './admin/clusters/manager/manager.component';
import { TableModule } from 'primeng/table';
@NgModule({ @NgModule({
...@@ -86,7 +92,9 @@ import { BrowserModule } from '@angular/platform-browser'; ...@@ -86,7 +92,9 @@ import { BrowserModule } from '@angular/platform-browser';
InputGroupModule, InputGroupModule,
InputGroupAddonModule, InputGroupAddonModule,
ButtonModule, ButtonModule,
RecaptchaV3Module RecaptchaV3Module,
FileUploadModule,
TableModule
], ],
declarations: [ declarations: [
RateComponent, RateComponent,
...@@ -132,7 +140,8 @@ import { BrowserModule } from '@angular/platform-browser'; ...@@ -132,7 +140,8 @@ import { BrowserModule } from '@angular/platform-browser';
PreferencesComponent, PreferencesComponent,
SortableHeaderDirective, SortableHeaderDirective,
DomainNamespaceAnnotationsComponent, DomainNamespaceAnnotationsComponent,
AccessTokensComponent AccessTokensComponent,
ClusterManagerComponent
], ],
providers: [ providers: [
PasswordValidator, PasswordValidator,
...@@ -185,7 +194,11 @@ import { BrowserModule } from '@angular/platform-browser'; ...@@ -185,7 +194,11 @@ import { BrowserModule } from '@angular/platform-browser';
SortableHeaderDirective, SortableHeaderDirective,
DomainNamespaceAnnotationsComponent, DomainNamespaceAnnotationsComponent,
AccessTokensComponent AccessTokensComponent
] ],
schemas: [
NO_ERRORS_SCHEMA,
CUSTOM_ELEMENTS_SCHEMA
]
}) })
export class SharedModule { export class SharedModule {
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment