airship/airshipui
Code Issues Proposed changes

Refactor config component

Browse Source 
These changes are cosmetic, and aim to make it easier for
users to navigate, read, and edit each config subsection.
No underlying functionality has been changed.

Change-Id: Iecb0efbda61c278126567c69916d790d2130a8aa
This commit is contained in:
Matthew Fuller 2020-10-30 18:46:32 +00:00
parent fab7bd9ef5
commit 5f26bb7c8e
17 changed files with 231 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/app/ctl/config/config-context/config-context.component.css
View File

@ -15,3 +15,15 @@
.grey-icon {
color: grey;
}
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

70
client/src/app/ctl/config/config-context/config-context.component.html
View File

@ -1,36 +1,36 @@
<mat-card class="context-card">
<mat-card-header>
<mat-card-title>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h4>{{context.name}}</h4>
</mat-panel-title>
</mat-expansion-panel-header>
ContextKubeconf:
<mat-form-field appearance="fill">
<input [formControl]="contextKubeconf" matInput>
</mat-form-field>
Manifest:
<mat-form-field appearance="fill">
<input [formControl]="manifest" matInput>
</mat-form-field>
EncryptionConfig:
<mat-form-field appearance="fill">
<input [formControl]="encryptionConfig" matInput>
</mat-form-field>
ManagementConfiguration:
<mat-form-field appearance="fill">
<input [formControl]="managementConfiguration" matInput>
</mat-form-field>
<mat-action-row>
<div class="edit-btn-container">
<button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</button>{{context.name}}
<button mat-raised-button (click)="useContext(context.name)">Use Context</button>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>ContextKubeconf:
<mat-form-field appearance="fill">
<input [formControl]="contextKubeconf" matInput>
</mat-form-field>
</p>
<p>Manifest:
<mat-form-field appearance="fill">
<input [formControl]="manifest" matInput>
</mat-form-field>
</p>
<p>EncryptionConfig:
<mat-form-field appearance="fill">
<input [formControl]="encryptionConfig" matInput>
</mat-form-field>
</p>
<p>ManagementConfiguration:
<mat-form-field appearance="fill">
<input [formControl]="managementConfiguration" matInput>
</mat-form-field>
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button [disabled]="locked" (click)="setContext()" color="primary">Set</button>
</mat-card-actions>
</mat-card>
<mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
<ng-template #unlocked>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</ng-template>
Edit</button>
</div>
<button mat-raised-button (click)="useContext(context.name)">Use Context</button>
<button mat-raised-button class="set-button" [disabled]="locked" (click)="setContext()" color="primary">Set</button>
</mat-action-row>
</mat-expansion-panel>
<br />

6
client/src/app/ctl/config/config-context/config-context.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -34,14 +34,14 @@ describe('ConfigContextComponent', () => {
declarations: [ ConfigContextComponent ],
imports: [
BrowserAnimationsModule,
MatCardModule,
FormsModule,
MatInputModule,
MatIconModule,
MatCheckboxModule,
MatButtonModule,
ReactiveFormsModule,
ToastrModule.forRoot()
ToastrModule.forRoot(),
MatExpansionModule,
]
})
.compileComponents();

14
client/src/app/ctl/config/config-encryption/config-encryption.component.css
View File

@ -14,4 +14,16 @@
.grey-icon {
color: grey;
}
}
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

46
client/src/app/ctl/config/config-encryption/config-encryption.component.html
View File

@ -1,39 +1,39 @@
<mat-card class="encryption-config-card">
<mat-card-header>
<mat-card-title>
<button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</button>{{config.name}}
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h4>{{config.name}}</h4>
</mat-panel-title>
</mat-expansion-panel-header>
<div *ngIf="config.hasOwnProperty('encryptionKeyPath')">
<p>EncryptionKeyPath:
EncryptionKeyPath:
<mat-form-field appearance="fill">
<input matInput [formControl]="encryptionKeyPath">
</mat-form-field>
</p>
<p>DecryptionKeyPath:
DecryptionKeyPath:
<mat-form-field appearance="fill">
<input matInput [formControl]="decryptionKeyPath">
</mat-form-field>
</p>
</div>
<div *ngIf="config.hasOwnProperty('keySecretName')">
<p>KeySecretName:
KeySecretName:
<mat-form-field appearance="fill">
<input matInput [formControl]="keySecretName">
</mat-form-field>
</p>
<p>KeySecretNamespace:
KeySecretNamespace:
<mat-form-field appearance="fill">
<input matInput [formControl]="keySecretNamespace">
</mat-form-field>
</p>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button [disabled]="locked" (click)="setEncryptionConfig()" color="primary">Set</button>
</mat-card-actions>
</mat-card>
<mat-action-row>
<div class="edit-btn-container">
<button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
<ng-template #unlocked>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</ng-template>
Edit</button>
</div>
<button mat-raised-button class="set-button" [disabled]="locked" (click)="setEncryptionConfig()" color="primary">Set</button>
</mat-action-row>
</mat-expansion-panel>
<br />

6
client/src/app/ctl/config/config-encryption/config-encryption.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -35,13 +35,13 @@ describe('ConfigEncryptionComponent', () => {
imports: [
BrowserAnimationsModule,
FormsModule,
MatCardModule,
MatInputModule,
MatIconModule,
MatCheckboxModule,
MatButtonModule,
ReactiveFormsModule,
ToastrModule.forRoot()
ToastrModule.forRoot(),
MatExpansionModule,
]
})
.compileComponents();

1
client/src/app/ctl/config/config-encryption/config-encryption.module.ts
View File

@ -18,7 +18,6 @@ import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
@NgModule({
imports: [
FormsModule,

12
client/src/app/ctl/config/config-management/config-management.component.css
View File

@ -15,3 +15,15 @@
.grey-icon {
color: grey;
}
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

43
client/src/app/ctl/config/config-management/config-management.component.html
View File

@ -1,36 +1,37 @@
<mat-card class="management-config-card">
<mat-card-header>
<mat-card-title>
<button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</button>{{config.name}}
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h4>{{config.name}}</h4>
</mat-panel-title>
</mat-expansion-panel-header>
<p>
<mat-checkbox [formControl]="insecure" labelPosition="before">Insecure: </mat-checkbox>
</p>
<p>SystemActionRetries:
SystemActionRetries:
<mat-form-field appearance="fill">
<input matInput [formControl]="systemActionRetries" pattern="[0-9]*">
</mat-form-field>
</p>
<p>SystemRebootDelay:
SystemRebootDelay:
<mat-form-field appearance="fill">
<input matInput [formControl]="systemRebootDelay" pattern="[0-9]*">
</mat-form-field>
</p>
<p>Type:
Type:
<mat-form-field appearance="fill">
<input matInput [formControl]="type">
</mat-form-field>
</p>
<p>
<mat-checkbox [formControl]="useproxy" labelPosition="before">UseProxy: </mat-checkbox>
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button [disabled]="locked" (click)="setManagementConfig()" color="primary">Set</button>
</mat-card-actions>
</mat-card>
<mat-action-row>
<div class="edit-btn-container">
<button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
<ng-template #unlocked>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</ng-template>
Edit</button>
</div>
<button mat-raised-button class="set-button" [disabled]="locked" (click)="setManagementConfig()" color="primary">Set</button>
</mat-action-row>
</mat-expansion-panel>
<br />

4
client/src/app/ctl/config/config-management/config-management.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -34,7 +34,6 @@ describe('ConfigManagementComponent', () => {
declarations: [ ConfigManagementComponent ],
imports: [
BrowserAnimationsModule,
MatCardModule,
FormsModule,
MatInputModule,
MatIconModule,
@ -42,6 +41,7 @@ describe('ConfigManagementComponent', () => {
MatButtonModule,
ReactiveFormsModule,
ToastrModule.forRoot(),
MatExpansionModule
]
})
.compileComponents();

12
client/src/app/ctl/config/config-manifest/config-manifest.component.css
View File

@ -15,3 +15,15 @@
.grey-icon {
color: grey;
}
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

61
client/src/app/ctl/config/config-manifest/config-manifest.component.html
View File

@ -1,66 +1,61 @@
<mat-card class="manifest-config-card">
<mat-card-header>
<mat-card-title>
<button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</button>{{manifest.name}}
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>RepoName:
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h4>{{manifest.name}}</h4>
</mat-panel-title>
</mat-expansion-panel-header>
RepoName:
<mat-form-field appearance="fill">
<input matInput [formControl]="RepoName">
</mat-form-field>
</p>
<p>URL:
URL:
<mat-form-field appearance="fill">
<input matInput [formControl]="URL">
</mat-form-field>
</p>
<p>Branch:
Branch:
<mat-form-field appearance="fill">
<input matInput [formControl]="Branch">
</mat-form-field>
</p>
<p>CommitHash:
CommitHash:
<mat-form-field appearance="fill">
<input matInput [formControl]="CommitHash">
</mat-form-field>
</p>
<p>Tag:
Tag:
<mat-form-field appearance="fill">
<input matInput [formControl]="Tag">
</mat-form-field>
</p>
<p>RemoteRef:
RemoteRef:
<mat-form-field appearance="fill">
<input matInput [formControl]="RemoteRef">
</mat-form-field>
</p>
<p>
<mat-checkbox [formControl]="Force" labelPosition="before">Force: </mat-checkbox>
</p>
<p>
<mat-checkbox [formControl]="IsPhase" labelPosition="before">IsPhase: </mat-checkbox>
</p>
<p>SubPath:
SubPath:
<mat-form-field appearance="fill">
<input matInput [formControl]="SubPath">
</mat-form-field>
</p>
<p>TargetPath:
TargetPath:
<mat-form-field appearance="fill">
<input matInput [formControl]="TargetPath">
</mat-form-field>
</p>
<p>MetadataPath:
MetadataPath:
<mat-form-field appearance="fill">
<input matInput [formControl]="MetadataPath">
</mat-form-field>
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button [disabled]="locked" (click)="setManifest()" color="primary">Set</button>
</mat-card-actions>
</mat-card>
<mat-action-row>
<div class="edit-btn-container">
<button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
<ng-template #unlocked>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
</ng-template>
Edit</button>
</div>
<button mat-raised-button class="set-button" [disabled]="locked" (click)="setManifest()" color="primary">Set</button>
</mat-action-row>
</mat-expansion-panel>
<br />

6
client/src/app/ctl/config/config-manifest/config-manifest.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -34,14 +34,14 @@ describe('ConfigManifestComponent', () => {
declarations: [ ConfigManifestComponent ],
imports: [
BrowserAnimationsModule,
MatCardModule,
FormsModule,
MatInputModule,
MatIconModule,
MatCheckboxModule,
MatButtonModule,
ReactiveFormsModule,
ToastrModule.forRoot()
ToastrModule.forRoot(),
MatExpansionModule
]
})
.compileComponents();

14
client/src/app/ctl/config/config.component.css
View File

@ -12,6 +12,14 @@
# limitations under the License.
*/
.grey-icon {
color: grey;
}
.grey-icon {
color: grey;
}
.current-context {
color: #ff4081;
}
mat-expansion-panel {
padding-bottom: 15px;
}

67
client/src/app/ctl/config/config.component.html
View File

@ -1,26 +1,47 @@
<h1>Airship Configuration Operations</h1>
<h1>Airship Configuration Options</h1>
<mat-divider></mat-divider>
<div class="config-container">
<h3>Contexts - Current Context: {{currentContext}}</h3>
<div class="contexts" *ngFor="let context of contexts">
<app-config-context [context]="context"></app-config-context>
</div>
<mat-divider></mat-divider>
<h3>Manifests</h3>
<div class="manifests" *ngFor="let manifest of manifests">
<app-config-manifest [manifest]="manifest"></app-config-manifest>
</div>
<mat-divider></mat-divider>
<h3>Encryption Configurations</h3>
<div class="encryption-configs" *ngFor="let config of encryptionConfigs">
<app-config-encryption [config]="config"></app-config-encryption>
</div>
<mat-divider></mat-divider>
<h3>Management Configurations</h3>
<div class="management-configs" *ngFor="let config of managementConfigs">
<app-config-management [config]="config"></app-config-management>
</div>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h3>Contexts</h3>
</mat-panel-title>
<mat-panel-description>
<h5>Current Context: {{currentContext}}</h5>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-accordion *ngFor="let context of contexts">
<app-config-context [context]="context"></app-config-context>
</mat-accordion>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h3>Manifests</h3>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-accordion *ngFor="let manifest of manifests">
<app-config-manifest [manifest]="manifest"></app-config-manifest>
</mat-accordion>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h3>Encryption Configurations</h3>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-accordion *ngFor="let config of encryptionConfigs">
<app-config-encryption [config]="config"></app-config-encryption>
</mat-accordion>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="title">
<h3>Management Configurations</h3>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-accordion *ngFor="let config of managementConfigs">
<app-config-management [config]="config"></app-config-management>
</mat-accordion>
</mat-expansion-panel>
</div>

8
client/src/app/ctl/config/config.component.spec.ts
View File

@ -19,7 +19,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { ConfigContextModule } from './config-context/config-context.module';
import { ConfigManagementModule } from './config-management/config-management.module';
@ -29,6 +28,8 @@ import { ConfigManifestComponent } from './config-manifest/config-manifest.compo
import { ConfigManagementComponent } from './config-management/config-management.component';
import { ConfigEncryptionComponent } from './config-encryption/config-encryption.component';
import { ConfigContextComponent } from './config-context/config-context.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
describe('ConfigComponent', () => {
let component: ConfigComponent;
@ -41,13 +42,14 @@ describe('ConfigComponent', () => {
FormsModule,
MatButtonModule,
MatInputModule,
MatCardModule,
MatCheckboxModule,
ConfigContextModule,
ConfigManagementModule,
ConfigManifestModule,
ConfigEncryptionModule,
ReactiveFormsModule
ReactiveFormsModule,
MatExpansionModule,
BrowserAnimationsModule
],
declarations: [
ConfigComponent,

5
client/src/app/ctl/config/config.module.ts
View File

@ -26,7 +26,7 @@ import { ConfigEncryptionComponent } from './config-encryption/config-encryption
import { ConfigManagementComponent } from './config-management/config-management.component';
import { ConfigManifestComponent } from './config-manifest/config-manifest.component';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
@NgModule({
imports: [
@ -38,7 +38,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
MatDividerModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule
MatCheckboxModule,
MatExpansionModule
],
declarations: [
ConfigComponent,