Skip to content
This repository was archived by the owner on Jul 15, 2022. It is now read-only.

Commit c73311f

Browse files
author
Leonardo Chaia
committed
feat: list own Docker Hub images
1 parent 5483436 commit c73311f

15 files changed

+217
-8
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"conventional-changelog-cli": "^2.0.1",
7171
"conventional-recommended-bump": "^4.0.0",
7272
"core-js": "^2.5.7",
73+
"docker-hub-api": "^0.6.0",
7374
"dockerode": "^2.5.7",
7475
"electron": "^3.0.0",
7576
"electron-builder": "^20.28.4",

‎src/app/app-tabs.module.ts

+5
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
ApplicationEditListContainerComponent
3030
} from './application-templates/application-edit-list-container/application-edit-list-container.component';
3131
import { ContainerLogsContainerComponent } from './daemon-tools/container-logs-container/container-logs-container.component';
32+
import { DockerHubRepoListContainerComponent } from './docker-hub/docker-hub-repo-list-container/docker-hub-repo-list-container.component';
3233

3334
const TIMONEER_AVAILABLE_TABS: TabConfiguration[] = [
3435
{
@@ -96,6 +97,10 @@ const TIMONEER_AVAILABLE_TABS: TabConfiguration[] = [
9697
id: TimoneerTabs.REGISTRY_IMAGES,
9798
component: RegistryListContainerComponent,
9899
},
100+
{
101+
id: TimoneerTabs.DOCKERHUB_IMAGES,
102+
component: DockerHubRepoListContainerComponent,
103+
},
99104
{
100105
id: TimoneerTabs.DASHBOARD,
101106
title: 'Dashboard',

‎src/app/docker-hub/docker-hub-repo-list-container/docker-hub-repo-list-container.component.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div fxLayout="column"
2+
style="padding:16px;">
3+
4+
<h2 style="text-align: center">
5+
Docker Hub /{{hubSettings.username}}
6+
</h2>
7+
8+
<tim-docker-hub-repo-list></tim-docker-hub-repo-list>
9+
</div>

‎src/app/docker-hub/docker-hub-repo-list-container/docker-hub-repo-list-container.component.scss

Whitespace-only changes.

‎src/app/docker-hub/docker-hub-repo-list-container/docker-hub-repo-list-container.component.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { SettingsService } from '../../settings/settings.service';
3+
import { DockerRegistrySettings } from '../../settings/settings.model';
4+
5+
@Component({
6+
selector: 'tim-docker-hub-repo-list-container',
7+
templateUrl: './docker-hub-repo-list-container.component.html',
8+
styleUrls: ['./docker-hub-repo-list-container.component.scss']
9+
})
10+
export class DockerHubRepoListContainerComponent implements OnInit {
11+
public hubSettings: DockerRegistrySettings;
12+
13+
constructor(private settingsService: SettingsService) { }
14+
15+
public ngOnInit() {
16+
this.settingsService.getDockerIOSettings()
17+
.subscribe(hubSettings => {
18+
this.hubSettings = hubSettings;
19+
});
20+
}
21+
22+
}

‎src/app/docker-hub/docker-hub-repo-list/docker-hub-repo-list.component.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<ng-template #loadingTemplate>
2+
<tim-loading></tim-loading>
3+
</ng-template>
4+
<mat-card *ngIf="error"
5+
fxLayout="row"
6+
fxLayoutAlign="start center"
7+
fxLayoutGap="8px">
8+
<mat-icon class="tim-text-warn tim-icon-48">highlight_off</mat-icon>
9+
<div fxFlex="fill">
10+
<h2>
11+
{{error}}
12+
</h2>
13+
</div>
14+
</mat-card>
15+
<ng-container *ngIf="!loading; else loadingTemplate">
16+
17+
<mat-card *ngFor="let repo of repos"
18+
fxLayout="row"
19+
fxLayoutAlign="start center"
20+
fxLayoutGap="8px">
21+
<mat-icon class="tim-text-primary tim-icon-48">iso</mat-icon>
22+
<div fxFlex="fill">
23+
<h2>
24+
{{repo.name}}
25+
</h2>
26+
</div>
27+
28+
<div>
29+
<a mat-raised-button
30+
color="primary"
31+
(click)="createContainer(repo)">
32+
New Container
33+
</a>
34+
</div>
35+
</mat-card>
36+
37+
</ng-container>

‎src/app/docker-hub/docker-hub-repo-list/docker-hub-repo-list.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
mat-card {
2+
margin-bottom: 16px;
3+
}

‎src/app/docker-hub/docker-hub-repo-list/docker-hub-repo-list.component.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { DockerHubService } from '../docker-hub.service';
3+
import { TabService } from '../../tabs/tab.service';
4+
import { TimoneerTabs } from '../../timoneer-tabs';
5+
6+
@Component({
7+
selector: 'tim-docker-hub-repo-list',
8+
templateUrl: './docker-hub-repo-list.component.html',
9+
styleUrls: ['./docker-hub-repo-list.component.scss']
10+
})
11+
export class DockerHubRepoListComponent implements OnInit {
12+
public repos: { namespace: string; name: string; }[];
13+
public error: string;
14+
15+
public loading: boolean;
16+
17+
constructor(
18+
private dockerHub: DockerHubService,
19+
private tabService: TabService) { }
20+
21+
public ngOnInit() {
22+
this.loading = true;
23+
this.dockerHub.getReposForUser()
24+
.subscribe(repos => {
25+
this.repos = repos;
26+
this.loading = false;
27+
}, error => {
28+
this.loading = false;
29+
this.error = error.message;
30+
});
31+
}
32+
33+
public createContainer(repo: { namespace: string; name: string; }) {
34+
this.tabService.add(TimoneerTabs.DOCKER_CONTAINER_NEW, {
35+
params: `${repo.namespace}/${repo.name}`
36+
});
37+
}
38+
39+
}

‎src/app/docker-hub/docker-hub.module.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { DockerHubRepoListComponent } from './docker-hub-repo-list/docker-hub-repo-list.component';
4+
import { HttpClientModule } from '@angular/common/http';
5+
import { MatCardModule, MatIconModule, MatButtonModule } from '@angular/material';
6+
import { SharedModule } from '../shared/shared.module';
7+
import { FlexLayoutModule } from '@angular/flex-layout';
8+
import { DockerHubRepoListContainerComponent } from './docker-hub-repo-list-container/docker-hub-repo-list-container.component';
9+
10+
@NgModule({
11+
imports: [
12+
CommonModule,
13+
HttpClientModule,
14+
15+
MatCardModule,
16+
MatIconModule,
17+
MatButtonModule,
18+
FlexLayoutModule,
19+
20+
SharedModule,
21+
22+
],
23+
declarations: [
24+
DockerHubRepoListComponent,
25+
DockerHubRepoListContainerComponent
26+
],
27+
exports: [
28+
DockerHubRepoListComponent
29+
]
30+
})
31+
export class DockerHubModule { }

‎src/app/docker-hub/docker-hub.service.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Injectable } from '@angular/core';
2+
import { SettingsService } from '../settings/settings.service';
3+
import { switchMap, map } from 'rxjs/operators';
4+
import * as dockerHubApi from 'docker-hub-api';
5+
import { from } from 'rxjs';
6+
7+
@Injectable({
8+
providedIn: 'root'
9+
})
10+
export class DockerHubService {
11+
12+
constructor(private settings: SettingsService) {
13+
dockerHubApi.setCacheOptions({ enabled: true, time: 60 * 5 });
14+
}
15+
16+
public getReposForUser() {
17+
return this.settings.getDockerIOSettings()
18+
.pipe(
19+
switchMap(settings => this.logIn(settings.username, settings.password).pipe(map(info => ({ info, settings })))),
20+
switchMap(settings => from(dockerHubApi.repositories(settings.settings.username) as Promise<{ namespace: string, name: string }[]>))
21+
);
22+
}
23+
24+
protected logIn(username: string, password: string) {
25+
return from(dockerHubApi.login(username, password))
26+
.pipe(map((info: any) => {
27+
console.log(info);
28+
dockerHubApi.setLoginToken(info.token);
29+
return info;
30+
}));
31+
}
32+
}

‎src/app/home/home.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { DaemonStatusCardComponent } from './daemon-status-card/daemon-status-ca
99
import { SharedModule } from '../shared/shared.module';
1010
import { HubSettingsCardComponent } from './hub-settings-card/hub-settings-card.component';
1111
import { RegistryCardsComponent } from './registry-cards/registry-cards.component';
12+
import { DockerHubModule } from '../docker-hub/docker-hub.module';
1213

1314
@NgModule({
1415
imports: [
@@ -21,6 +22,7 @@ import { RegistryCardsComponent } from './registry-cards/registry-cards.componen
2122

2223
RegistryModule,
2324
ApplicationTemplatesModule,
25+
DockerHubModule,
2426
SharedModule,
2527
],
2628
declarations: [

‎src/app/home/hub-settings-card/hub-settings-card.component.html

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<mat-card fxLayout="row"
1+
<mat-card *ngIf="!valid; else repoListTemplate"
2+
fxLayout="row"
23
fxLayoutAlign="start center"
34
fxLayoutGap="8px"
45
style="margin-bottom: 16px;">
@@ -11,18 +12,27 @@
1112
<ng-template #settingsTemplate>
1213
<h2 style="margin: 0">
1314
<span class="tim-text-title">
14-
Docker Hub {{valid? '' : 'is not'}} Configured
15+
Docker Hub is not Configured
1516
</span>
1617
</h2>
17-
<p *ngIf="valid">
18-
Username: {{hubSettings.username}}
19-
</p>
2018
</ng-template>
2119
</div>
2220
<a fxFlex
23-
*ngIf="!valid"
2421
mat-raised-button
2522
(click)="openSettings()">
2623
Configure
2724
</a>
28-
</mat-card>
25+
</mat-card>
26+
27+
<ng-template #repoListTemplate>
28+
<h2>
29+
Docker Hub /{{hubSettings.username}}
30+
<small>
31+
<a (click)="openDockerHubList()"
32+
style="float:right">
33+
View all
34+
</a>
35+
</small>
36+
</h2>
37+
<tim-docker-hub-repo-list></tim-docker-hub-repo-list>
38+
</ng-template>

‎src/app/home/hub-settings-card/hub-settings-card.component.ts

+6
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,10 @@ export class HubSettingsCardComponent implements OnInit {
3232
public openSettings() {
3333
this.tabService.add(TimoneerTabs.SETTINGS);
3434
}
35+
36+
public openDockerHubList() {
37+
this.tabService.add(TimoneerTabs.DOCKERHUB_IMAGES, {
38+
title: `Docker Hub /${this.hubSettings.username}`
39+
});
40+
}
3541
}

‎src/app/timoneer-tabs.ts

+1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ export class TimoneerTabs {
1414
public static APPLICATION_EDIT_LIST = 'application-edit-list';
1515
public static APPLICATION_LAUNCH = 'application-launch';
1616
public static REGISTRY_IMAGES = 'registry-images';
17+
public static DOCKERHUB_IMAGES = 'dockerhub-images';
1718
public static SETTINGS = 'settings';
1819
}

‎yarn.lock

+12-1
Original file line numberDiff line numberDiff line change
@@ -2396,6 +2396,13 @@ dns-txt@^2.0.2:
23962396
dependencies:
23972397
buffer-indexof "^1.0.0"
23982398

2399+
docker-hub-api@^0.6.0:
2400+
version "0.6.0"
2401+
resolved "https://registry.yarnpkg.com/docker-hub-api/-/docker-hub-api-0.6.0.tgz#9d6e427b476026bd9b0b3a9c1d888e10beaafe91"
2402+
dependencies:
2403+
lodash "^3.10.1"
2404+
request "^2.67.0"
2405+
23992406
[email protected]:
24002407
version "1.0.7"
24012408
resolved "https://registry.yarnpkg.com/docker-modem/-/docker-modem-1.0.7.tgz#69702a95c060eeb6775f79ccdcc734e5946972a4"
@@ -4653,6 +4660,10 @@ lodash.without@~4.4.0:
46534660
version "4.4.0"
46544661
resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
46554662

4663+
lodash@^3.10.1:
4664+
version "3.10.1"
4665+
resolved "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
4666+
46564667
lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
46574668
version "4.17.10"
46584669
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
@@ -6521,7 +6532,7 @@ [email protected], request@^2.45.0, request@^2.74.0, request@^2.83.0, request@^2.87
65216532
tunnel-agent "^0.6.0"
65226533
uuid "^3.0.0"
65236534

6524-
request@^2.88.0:
6535+
request@^2.67.0, request@^2.88.0:
65256536
version "2.88.0"
65266537
resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
65276538
dependencies:

0 commit comments

Comments
 (0)