Skip to content

Commit

Permalink
Helm: Improve experience for editing chart values (#469)
Browse files Browse the repository at this point in the history
* Indicate if the Helm chart has a schema

* Fixes

* Fix unit tests

* Update go.sum

* Replace foundation DB with sql db and file cache

* Tidy ups and final tweaks to get versions working

* Tidy up build and remove fdb

* Update .gitignore

* Remove unused functions

* FIx upgrade and add in sources

* Improve the edit experience for entering Helm chart values

* Fix unit test

* Remove fdb helm chart values

* Fix default cache folder name

* Remove unused commented code

* Fix comments

* Formatting

* Tidy ups

* Fix stylesheet issue with var

* Update comments

* Add missing import following refactor

* Fixes for diff and for form <-> editor transitions

* Fix issues with async delete and edit

* Tidy up chartName

* Fix HelmChartID rename to HelmChartReference

* Fixes

* FIx backend merge issues

* Fixes

* Get upgrade working

* Fix unit tests due to moving of create release component

* Additional unit test fixes

* One more test fix

* Fix for tests

* Import MD App Module for unit test fix

* Remove commented out code block

* Use drop down menu for the values actions

* Improve comments and remove console.log

* Set volume for helm cache when deployed to k8s

* Fix fro kuberenetes deployment

* Ensure db statements aer modified for different DBs

* Address PR feedback

* Fix missing param to error log msg

* Add support for retrieving icon for a specific version

* Use icon for the chart version. Reduce loading indicators

* Bug fix for icon on list view

* Fix icons on Helm Hub

* Merge fixes

* Fix merge issue

* Fix merge issue

* Fix unit tests

* Address PR feedback
  • Loading branch information
nwmac authored Sep 15, 2020
1 parent e568f98 commit 491190d
Show file tree
Hide file tree
Showing 24 changed files with 1,172 additions and 202 deletions.
12 changes: 11 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,17 @@
"input": "custom-src/frontend/assets/custom",
"output": "/core/assets/custom"
},
"src/frontend/packages/core/favicon.ico"
"src/frontend/packages/core/favicon.ico",
{
"glob": "**/*",
"input": "node_modules/ngx-monaco-editor/assets/monaco",
"output": "/core/assets/monaco"
},
{
"glob": "**/*",
"input": "node_modules/@cfstratos/monaco-yaml/lib",
"output": "/core/assets/monaco/vs/language/yaml"
}
],
"styles": [
"src/frontend/packages/core/src/styles.scss",
Expand Down
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,31 +61,33 @@
"@angular/platform-browser-dynamic": "^9.1.6",
"@angular/platform-server": "^9.1.6",
"@angular/router": "^9.1.6",
"@cfstratos/ajsf-material": "^0.1.6",
"@cfstratos/monaco-yaml": "^2.5.0",
"@ngrx/effects": "^9.1.2",
"@ngrx/router-store": "^9.1.2",
"@ngrx/store": "^9.1.2",
"@ngrx/store-devtools": "^9.1.2",
"@swimlane/ngx-charts": "^13.0.3",
"@swimlane/ngx-graph": "^7.0.1",
"@types/moment-timezone": "^0.5.13",
"@types/marked": "^0.7.4",
"@types/moment-timezone": "^0.5.13",
"angular2-virtual-scroll": "^0.4.16",
"core-js": "^3.6.5",
"immer": "^6.0.3",
"intersect": "^1.0.1",
"lodash-es": "^4.17.14",
"mappy-breakpoints": "^0.2.3",
"marked": "^0.8.2",
"intersect": "^1.0.1",
"moment": "^2.24.0",
"moment-timezone": "^0.5.28",
"ngrx-store-localstorage": "9.0.0",
"ngx-moment": "^3.5.0",
"ngx-monaco-editor": "^9.0.0",
"normalizr": "^3.6.0",
"reselect": "^4.0.0",
"rxjs": "^6.5.5",
"rxjs-spy": "^7.0.2",
"rxjs-websockets": "~8.0.1",
"@cfstratos/ajsf-material": "^0.1.5",
"ts-md5": "^1.2.7",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
Expand Down
3 changes: 2 additions & 1 deletion src/frontend/packages/suse-extensions/sass/_all-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import '../src/custom/helm/list-types/monocular-chart-card/monocular-chart-card.component.theme';
@import '../src/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.theme';
@import '../src/custom/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.theme';
@import '../src/custom/kubernetes/workloads/chart-values-editor/chart-values-editor.component.theme';

@mixin apply-theme-suse-extensions($stratos-theme) {

Expand All @@ -18,5 +19,5 @@
@include monocular-chart-card($theme, $app-theme);
@include helm-release-summary-tab-theme($theme, $app-theme);
@include kube-node-link-theme($theme, $app-theme);

@include app-chart-values-editor-theme($theme, $app-theme);
}

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
import { CoreModule } from '../../../../core/src/core/core.module';
import { SharedModule } from '../../../../core/src/shared/shared.module';
import { MonocularChartViewComponent } from './chart-view/monocular.component';
import { CreateReleaseModule } from './create-release/create-release.module';
import { HelmRoutingModule } from './helm.routing';
import { MonocularChartCardComponent } from './list-types/monocular-chart-card/monocular-chart-card.component';
import { MonocularTabBaseComponent } from './monocular-tab-base/monocular-tab-base.component';
Expand All @@ -17,7 +16,6 @@ import { CatalogTabComponent } from './tabs/catalog-tab/catalog-tab.component';
CommonModule,
SharedModule,
HelmRoutingModule,
CreateReleaseModule,
MonocularModule
],
declarations: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MonocularChartViewComponent } from './chart-view/monocular.component';
import { CreateReleaseComponent } from './create-release/create-release.component';
import { MonocularTabBaseComponent } from './monocular-tab-base/monocular-tab-base.component';
import { CatalogTabComponent } from './tabs/catalog-tab/catalog-tab.component';

Expand All @@ -18,8 +17,6 @@ const monocular: Routes = [
},
{ pathMatch: 'full', path: 'charts/:endpoint/:repo/:chartName/:version', component: MonocularChartViewComponent },
{ path: 'charts/:endpoint/:repo/:chartName', component: MonocularChartViewComponent },
{ pathMatch: 'full', path: 'install/:endpoint/:repo/:name/:version', component: CreateReleaseComponent },
{ path: 'install/:endpoint/:repo/:name', component: CreateReleaseComponent },
];

@NgModule({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export class ChartDetailsUsageComponent implements OnInit {
}

get installUrl(): string {
return `/monocular/install/${getMonocularEndpoint(this.route, this.chart)}/${this.chart.id}/${this.currentVersion}`;
return `/workloads/install/${getMonocularEndpoint(this.route, this.chart)}/${this.chart.id}/${this.currentVersion}`;
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<mat-card class="editor-card">
<div *ngIf="loading$ | async" class="editor-loading">
<div>
<div class="editor-loading__msg">Loading ...</div>
<mat-progress-bar class="editor-loading__progress-bar" [color]="'primary'" mode="indeterminate"></mat-progress-bar>
</div>
</div>
<mat-toolbar class="editor-toolbar">
<mat-button-toggle-group [value]="mode" name="editMode" aria-label="Edit Mode" (change)="editModeChanged($event)" *ngIf="schema; else editorOnly">
<mat-button-toggle value="form">Form</mat-button-toggle>
<mat-button-toggle value="editor">YAML</mat-button-toggle>
</mat-button-toggle-group>

<ng-template #editorOnly>
<div class="editor-title">YAML Editor</div>
</ng-template>

<div class="editor-spacer"></div>

<div class="editor-toolbar-buttons">
<mat-menu #appMenu="matMenu">
<button mat-menu-item (click)="copyValues()">Copy from chart values</button>
<button *ngIf="releaseValues" mat-menu-item (click)="copyReleaseValues()">Copy from release values</button>
<mat-divider *ngIf="mode === 'editor'" class="editor-menu-divider"></mat-divider>
<button *ngIf="mode === 'editor'" mat-menu-item (click)="diff()">Diff with chart values</button>
<mat-divider class="editor-menu-divider"></mat-divider>
<button mat-menu-item (click)="clearFormValues()">Clear</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="appMenu">
<span>Values</span>
<mat-icon>arrow_drop_down</mat-icon>
</button>
</div>

<div class="editor-toolbar-buttons">
<mat-button-toggle (click)="toggleLineNumbers()" checked="lineNumbers" *ngIf="mode === 'editor'">
<mat-icon>format_list_numbered</mat-icon>
</mat-button-toggle>
<mat-button-toggle (click)="toggleMinimap()" checked="minimap" *ngIf="mode === 'editor'">
<mat-icon>map</mat-icon>
</mat-button-toggle>
</div>

</mat-toolbar>
<div [ngClass]="{'editor-hidden': mode !== 'form'}" class="editor-form">
<div class="editor-yaml-error" *ngIf="yamlError">
<div class="editor-yaml-error__msg">
<div>
<mat-icon class="editor-yaml-error__icon text-warning">warning</mat-icon>
</div>
<div class="editor-yaml-error__text">
<div>Error - YAML is not valid</div>
<div>Use the YAML editor to correct it so the values can be loaded into the form</div>
</div>
</div>
</div>
<json-schema-form *ngIf="hasSchema" (onChanges)="formChanged($event)" #schemaForm loadExternalAssets="false" [options]="{ addSubmit: false }" [schema]="schema" framework="material-design" [data]="initialFormData"></json-schema-form>
</div>
<div [ngClass]="{'editor-hidden': mode !== 'editor'}" class="editor-monaco" #monacoContainer>
<ngx-monaco-editor #monacoEditor class="editor-monaco-edit "[options]="editorOptions" [model]="model" [(ngModel)]="code" (onInit)="onMonacoInit($event)"></ngx-monaco-editor>
</div>

</mat-card>
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
:host {
display: flex;
width: 100%;
}
.editor {

$toolbar-height: 40px;

&-card {
flex: 1;
padding: 0;
}

&-title {
font-size: 14px;
}

&-form {
display: block;
height: calc(100% - #{$toolbar-height});
overflow-y: scroll;
padding: 20px;
width: 100%;

&.editor-hidden {
display: none;
}
}

&-loading {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
z-index: 100;

&__msg {
text-align: center;
}
&__progress-bar {
margin-top: 10px;
min-width: 120px;
}
}

&-yaml-error {
align-items: center;
display: flex;
height: calc(100% - #{$toolbar-height});
justify-content: center;
margin: -20px;
opacity: 0.7;
position: absolute;
width: 100%;
z-index: 100;

&__msg {
display: flex;
flex-direction: row;
}
&__text {
line-height: 24px;
}
&__icon {
font-size: 32px;
height: 32px;
margin-right: 12px;
width: 32px;
}
}

&-toolbar-buttons {
display: flex;
mat-button-toggle {
margin-left: 8px;
}
}

&-spacer {
flex: 1 1 auto;
}

&-monaco {
display: block;

&.editor-hidden {
display: none;
}
}

&-monaco-edit {
position: absolute;
}

&-menu-divider {
margin: 4px 0;
}
}

.mat-card.editor-card>:first-child {
margin: 0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { HttpClient, HttpClientModule, HttpHandler } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { createBasicStoreModule } from '@stratosui/store/testing';

import { ConfirmationDialogService } from '../../../../../../core/src/shared/components/confirmation-dialog.service';
import { MDAppModule } from './../../../../../../core/src/core/md.module';
import { ChartValuesEditorComponent } from './chart-values-editor.component';

describe('ChartValuesEditorComponent', () => {
let component: ChartValuesEditorComponent;
let fixture: ComponentFixture<ChartValuesEditorComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ChartValuesEditorComponent ],
providers: [
HttpClient,
HttpHandler,
ConfirmationDialogService,
],
imports: [
MDAppModule,
HttpClientModule,
HttpClientTestingModule,
createBasicStoreModule(),
]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ChartValuesEditorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Loading

0 comments on commit 491190d

Please sign in to comment.