Skip to content
This repository was archived by the owner on Jun 3, 2021. It is now read-only.

Commit 4f92224

Browse files
codeprccodeprc
committed
updated
1 parent 7dd398b commit 4f92224

18 files changed

+677
-0
lines changed

‎src/app/screen_modules/team-dashboard/team-dashboard.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {BuildModule} from '../../widget_modules/build/build.module';
1212
import {RepoModule} from '../../widget_modules/repo/repo.module';
1313
import {DeployModule} from '../../widget_modules/deploy/deploy.module';
1414
import {FeatureModule} from '../../widget_modules/feature/feature.module';
15+
import {DockerModule} from '../../widget_modules/docker/docker.module';
1516

1617
@NgModule({
1718
declarations: [
@@ -29,6 +30,7 @@ import {FeatureModule} from '../../widget_modules/feature/feature.module';
2930
RepoModule,
3031
DeployModule,
3132
FeatureModule,
33+
DockerModule
3234
],
3335
entryComponents: [
3436
]

‎src/app/widget_modules/docker/docker-config-form/docker-config-form.component.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<div class="modal-body">
2+
<form [formGroup]="dockerConfigForm" (ngSubmit)="submitForm()">
3+
<div class="container">
4+
<div class="form-group">
5+
<label class="modal-label" for="apiToken">Instance URL</label>
6+
<div class="input-group mb-3">
7+
<input id="instanceURL" type="text" class="form-control" placeholder="Instance URL" aria-label="Instance URL"
8+
formControlName="instanceURL" required />
9+
</div>
10+
</div>
11+
<div class="form-group">
12+
<label class="modal-label" for="description">Instance PORT</label>
13+
<div class="input-group mb-3">
14+
<input id="instancePort" class="form-control" placeholder="Port" aria-label="Port"
15+
formControlName="instancePort" >
16+
</div>
17+
</div>
18+
<div class="form-group">
19+
<label class="modal-label" for="apiToken">API Token</label>
20+
<div class="input-group mb-3">
21+
<input id="apiToken" type="text" class="form-control" placeholder="API Token" aria-label="API Token"
22+
formControlName="apiToken" required />
23+
</div>
24+
</div>
25+
<div class="form-group">
26+
<label class="modal-label" for="description">Description</label>
27+
<div class="input-group mb-3">
28+
<textarea id="description" class="form-control" placeholder="Description" aria-label="Description"
29+
formControlName="description" ></textarea>
30+
</div>
31+
</div>
32+
</div>
33+
<div class="modal-footer">
34+
<div class="container">
35+
<div class="row">
36+
<div class="col text-center">
37+
<button class="btn btn-primary btn-lg" [disabled]="!dockerConfigForm.valid">
38+
Save Details
39+
</button>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</form>

‎src/app/widget_modules/docker/docker-config-form/docker-config-form.component.sass

Whitespace-only changes.

‎src/app/widget_modules/docker/docker-config-form/docker-config-form.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { DockerConfigFormComponent } from './docker-config-form.component';
4+
5+
describe('DockerConfigFormComponent', () => {
6+
let component: DockerConfigFormComponent;
7+
let fixture: ComponentFixture<DockerConfigFormComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ DockerConfigFormComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(DockerConfigFormComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/widget_modules/docker/docker-config-form/docker-config-form.component.ts

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3+
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
4+
import { Observable, of } from 'rxjs';
5+
import { catchError, debounceTime, distinctUntilChanged, map, switchMap, take, tap } from 'rxjs/operators';
6+
import { CollectorService } from 'src/app/shared/collector.service';
7+
import { DashboardService } from 'src/app/shared/dashboard.service';
8+
import { DockerService } from '../docker.service';
9+
10+
11+
@Component({
12+
selector: 'app-docker-config-form',
13+
templateUrl: './docker-config-form.component.html',
14+
styleUrls: ['./docker-config-form.component.sass']
15+
})
16+
export class DockerConfigFormComponent implements OnInit {
17+
18+
private widgetConfigId: string;
19+
private componentId: string;
20+
private collectorId : string;
21+
private collectorItemId: string;
22+
dashboard: any;
23+
dockerConfigForm: FormGroup;
24+
25+
@Input()
26+
set widgetConfig(widgetConfig: any) {
27+
this.widgetConfigId = widgetConfig.options.id;
28+
this.dockerConfigForm.get('instanceURL').setValue(widgetConfig.options.instanceURL);
29+
this.dockerConfigForm.get('instancePort').setValue(widgetConfig.options.instancePort);
30+
this.dockerConfigForm.get('apiToken').setValue(widgetConfig.options.apiToken);
31+
this.dockerConfigForm.get('description').setValue(widgetConfig.options.description);
32+
}
33+
34+
constructor(
35+
public activeModal: NgbActiveModal,
36+
private formBuilder: FormBuilder,
37+
private collectorService: CollectorService,
38+
private dashboardService: DashboardService,
39+
private dockerService: DockerService) {
40+
this.createForm();
41+
}
42+
43+
ngOnInit() {
44+
this.loadSavedDockerJob();
45+
}
46+
47+
ngAfterViewInit() {
48+
this.getDashboardComponent();
49+
}
50+
51+
private createForm() {
52+
this.dockerConfigForm = this.formBuilder.group({
53+
instanceURL: ['', Validators.required],
54+
instancePort: ['', Validators.required],
55+
apiToken: [''],
56+
description: [''],
57+
});
58+
}
59+
60+
private submitForm() {
61+
62+
const newConfig = {
63+
name: 'Docker',
64+
options: {
65+
id: this.widgetConfigId,
66+
instanceURL: this.dockerConfigForm.value.instanceURL,
67+
instancePort: this.dockerConfigForm.value.instancePort,
68+
apiToken: this.dockerConfigForm.value.apiToken,
69+
},
70+
componentId: this.componentId,
71+
collectorItemId: this.collectorItemId
72+
};
73+
74+
this.activeModal.close(newConfig);
75+
}
76+
77+
private loadSavedDockerJob() {
78+
this.dashboardService.dashboardConfig$.pipe(take(1),
79+
map(dashboard => {
80+
const dockerCollector = dashboard.application.components[0].collectorItems.Docker;
81+
if (dockerCollector) {
82+
const dockerId = dockerCollector[0].id;
83+
return dockerId;
84+
}
85+
return null;
86+
}),
87+
switchMap(dockerId => {
88+
if (dockerId) {
89+
return this.collectorService.getItemsById(dockerId);
90+
}
91+
return of(null);
92+
})).subscribe(collectorData => {
93+
this.collectorItemId = collectorData.id;
94+
});
95+
}
96+
97+
private getDashboardComponent() {
98+
this.dashboardService.dashboardConfig$.pipe(take(1),
99+
map(dashboard => {
100+
this.dashboard = dashboard;
101+
return dashboard.application.components[0].id;
102+
})).subscribe(componentId => this.componentId = componentId);
103+
}
104+
105+
}

‎src/app/widget_modules/docker/docker-detail/IClickListDockerItem.ts

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { IClickListItem } from 'src/app/shared/charts/click-list/click-list-interfaces';
2+
3+
export interface IClickListDockerVolumeItem extends IClickListItem {
4+
'mountpoint': any;
5+
'name': any;
6+
'scope': any;
7+
'driver': any;
8+
'createdAt': any
9+
}
10+
11+
export interface IClickListDockerContainerItem extends IClickListItem {
12+
'containerId': any;
13+
'names': any;
14+
'image': any;
15+
'created': any;
16+
'state': any;
17+
'current_status': any;
18+
'bridge': Bridge;
19+
'mounts': Mount[];
20+
'processes': any;
21+
'imageId': any
22+
}
23+
24+
interface Bridge {
25+
'links': any;
26+
'ipaddress': any;
27+
'gateway': any;
28+
'ipprefixLen': any;
29+
'ipv6Gateway': any;
30+
'networkID': any;
31+
'ipamconfig': any;
32+
'macAddress': any
33+
}
34+
35+
interface Mount {
36+
'type': any
37+
'name': any
38+
'source': any;
39+
'destination': any;
40+
'driver': any;
41+
'mode': any;
42+
'rw': any;
43+
'propagation': any
44+
}
45+
46+
export interface IClickListDockerNetworkItem extends IClickListItem {
47+
'name': any;
48+
'networkId': any;
49+
'created': any;
50+
'scope': any;
51+
'attachable': any;
52+
'ingress': any;
53+
'driver': 'any'
54+
}
55+
56+
export interface IClickListDockerNodeItem extends IClickListItem {
57+
'nodeId': any;
58+
'names': any;
59+
'image': any;
60+
'createdat': any;
61+
'updatedat': any;
62+
'state': any;
63+
'status': any;
64+
'imageId': any
65+
}
66+
67+
export interface IClickListDockerProcessesItem extends IClickListItem {
68+
'containerId': any;
69+
'processes': [];
70+
'titles': [];
71+
}

‎src/app/widget_modules/docker/docker-detail/docker-detail.component.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="overflow-auto">
2+
<!-- <div class="modal-content-main">-->
3+
<table class ="table-content" style="background-color: black;" modalTypeTag>
4+
5+
<tr *ngFor="let item of data | keyvalue" style="color: white; column-count: 2" >
6+
<td class="tableName "> {{item.key}} -</td>
7+
<td class="tableName "> {{item.value}}</td>
8+
</tr>
9+
</table>
10+
<!-- </div>-->
11+
</div>

‎src/app/widget_modules/docker/docker-detail/docker-detail.component.sass

Whitespace-only changes.

‎src/app/widget_modules/docker/docker-detail/docker-detail.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { DockerDetailComponent } from './docker-detail.component';
4+
5+
describe('DockerDetailComponent', () => {
6+
let component: DockerDetailComponent;
7+
let fixture: ComponentFixture<DockerDetailComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ DockerDetailComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(DockerDetailComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/widget_modules/docker/docker-detail/docker-detail.component.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {Component, Input, OnInit, Type} from '@angular/core';
2+
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
3+
import { IClickListDockerVolumeItem } from '../docker-detail/IClickListDockerItem';
4+
@Component({
5+
selector: 'app-docker-detail',
6+
templateUrl: './docker-detail.component.html',
7+
styleUrls: ['./docker-detail.component.sass']
8+
})
9+
export class DockerDetailComponent implements OnInit {
10+
11+
@Input() detailView: Type<any>;
12+
13+
public data: Type<any>;
14+
15+
constructor(
16+
public activeModal: NgbActiveModal,
17+
) { }
18+
19+
ngOnInit() {
20+
}
21+
22+
@Input()
23+
set detailData(data: any) {
24+
this.data = data;
25+
}
26+
}

‎src/app/widget_modules/docker/docker-widget/docker-charts.ts

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { ClickListComponent } from 'src/app/shared/charts/click-list/click-list.component';
2+
import { ComboChartComponent } from 'src/app/shared/charts/combo-chart/combo-chart.component';
3+
import { GaugeChartComponent } from 'src/app/shared/charts/gauge-chart/gauge-chart.component';
4+
import { ILineChartData } from 'src/app/shared/charts/line-chart/line-chart-interfaces';
5+
import { LineChartComponent } from 'src/app/shared/charts/line-chart/line-chart.component';
6+
import { PlainTextChartComponent } from 'src/app/shared/charts/plain-text-chart/plain-text-chart.component';
7+
import { NumberCardChartComponent } from 'src/app/shared/charts/number-card-chart/number-card-chart.component';
8+
import { IClickListItem } from 'src/app/shared/charts/click-list/click-list-interfaces';
9+
import { IClickListData } from 'src/app/shared/charts/click-list/click-list-interfaces';
10+
import { DashStatus } from 'src/app/shared/charts/click-list/click-list-interfaces';
11+
import { IChart } from 'src/app/shared/interfaces';
12+
13+
14+
export let DOCKER_CHARTS: IChart[] = [
15+
{
16+
title: 'CPU Usges',
17+
component: GaugeChartComponent,
18+
data:{},
19+
20+
xAxisLabel: '',
21+
yAxisLabel: '',
22+
colorScheme: 'vivid'
23+
},
24+
25+
{
26+
title: 'Docker MetaData Count',
27+
component: NumberCardChartComponent,
28+
data: [],
29+
xAxisLabel: '',
30+
yAxisLabel: '',
31+
colorScheme: 'vivid'
32+
},
33+
{
34+
title: 'Volume Details',
35+
component: ClickListComponent,
36+
data:{},
37+
xAxisLabel: '',
38+
yAxisLabel: '',
39+
colorScheme: {}
40+
},
41+
{
42+
title: 'Container Details',
43+
component: ClickListComponent,
44+
data:{},
45+
xAxisLabel: '',
46+
yAxisLabel: '',
47+
colorScheme: {}
48+
},
49+
{
50+
title: 'Process Details',
51+
component: ClickListComponent,
52+
data:{},
53+
xAxisLabel: '',
54+
yAxisLabel: '',
55+
colorScheme: {}
56+
},
57+
{
58+
title: 'Networks Details',
59+
component: ClickListComponent,
60+
data:{},
61+
xAxisLabel: '',
62+
yAxisLabel: '',
63+
colorScheme: {}
64+
}
65+
];

‎src/app/widget_modules/docker/docker-widget/docker-widget.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-template appLayout></ng-template>

‎src/app/widget_modules/docker/docker-widget/docker-widget.component.sass

Whitespace-only changes.

0 commit comments

Comments
 (0)