-
Notifications
You must be signed in to change notification settings - Fork 134
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Helm: Improve experience for editing chart values (#469)
* 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
Showing
24 changed files
with
1,172 additions
and
202 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 0 additions & 50 deletions
50
...end/packages/suse-extensions/src/custom/helm/create-release/create-release.component.scss
This file was deleted.
Oops, something went wrong.
19 changes: 0 additions & 19 deletions
19
...frontend/packages/suse-extensions/src/custom/helm/create-release/create-release.module.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
...ns/src/custom/kubernetes/workloads/chart-values-editor/chart-values-editor.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
104 changes: 104 additions & 0 deletions
104
...ns/src/custom/kubernetes/workloads/chart-values-editor/chart-values-editor.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
41 changes: 41 additions & 0 deletions
41
...src/custom/kubernetes/workloads/chart-values-editor/chart-values-editor.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); | ||
}); |
Oops, something went wrong.