forked from winery/winery
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request winery#528 from OpenTOSCA/thesis/version-slider
Add version slider in topology modeler
- Loading branch information
Showing
14 changed files
with
348 additions
and
39 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
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
37 changes: 37 additions & 0 deletions
37
....winery.frontends/app/topologymodeler/src/app/version-slider/version-slider.component.css
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,37 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2020 Contributors to the Eclipse Foundation | ||
| * | ||
| * See the NOTICE file(s) distributed with this work for additional | ||
| * information regarding copyright ownership. | ||
| * | ||
| * This program and the accompanying materials are made available under the | ||
| * terms of the Eclipse Public License 2.0 which is available at | ||
| * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0 | ||
| * which is available at https://www.apache.org/licenses/LICENSE-2.0. | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 | ||
| *******************************************************************************/ | ||
|
|
||
| .version-slider-view { | ||
| position: fixed; | ||
| bottom: 0; | ||
| z-index: 6; | ||
| left: 50%; | ||
| width: 75%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| ::ng-deep .version-slider-view .ngx-slider .ngx-slider-tick-legend { | ||
| width: 7em; | ||
| max-width: 7em; | ||
| } | ||
|
|
||
| ::ng-deep .version-slider-view .ngx-slider { | ||
| width: calc(100% - 3.5em - 1em); | ||
| } | ||
|
|
||
| #open { | ||
| margin-left: 1em; | ||
| margin-bottom: 3px; | ||
| width: 3.5em; | ||
| } |
27 changes: 27 additions & 0 deletions
27
...winery.frontends/app/topologymodeler/src/app/version-slider/version-slider.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,27 @@ | ||
| <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
| ~ Copyright (c) 2020 Contributors to the Eclipse Foundation | ||
| ~ | ||
| ~ See the NOTICE file(s) distributed with this work for additional | ||
| ~ information regarding copyright ownership. | ||
| ~ | ||
| ~ This program and the accompanying materials are made available under the | ||
| ~ terms of the Eclipse Public License 2.0 which is available at | ||
| ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0 | ||
| ~ which is available at https://www.apache.org/licenses/LICENSE-2.0. | ||
| ~ | ||
| ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 | ||
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> | ||
|
|
||
| <div *ngIf="options.stepsArray" | ||
| class="version-slider-view"> | ||
| <ngx-slider [(value)]="sliderValue" | ||
| [options]="options" | ||
| (userChange)="updateTopologyTemplate()"> | ||
| </ngx-slider> | ||
| <button id="open" | ||
| class="btn btn-sm align-middle btn-info button-group" | ||
| [disabled]="selectedIsCurrent()" | ||
| (click)="open()"> | ||
| Open | ||
| </button> | ||
| </div> |
133 changes: 133 additions & 0 deletions
133
...e.winery.frontends/app/topologymodeler/src/app/version-slider/version-slider.component.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,133 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2020 Contributors to the Eclipse Foundation | ||
| * | ||
| * See the NOTICE file(s) distributed with this work for additional | ||
| * information regarding copyright ownership. | ||
| * | ||
| * This program and the accompanying materials are made available under the | ||
| * terms of the Eclipse Public License 2.0 which is available at | ||
| * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0 | ||
| * which is available at https://www.apache.org/licenses/LICENSE-2.0. | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 | ||
| *******************************************************************************/ | ||
|
|
||
| import { Component, OnInit } from '@angular/core'; | ||
| import { VersionSliderService } from './version-slider.service'; | ||
| import { Options } from '@angular-slider/ngx-slider'; | ||
| import { WineryVersion } from '../../../../tosca-management/src/app/model/wineryVersion'; | ||
| import { BackendService } from '../services/backend.service'; | ||
| import { TopologyTemplateUtil } from '../models/topologyTemplateUtil'; | ||
| import { NgRedux } from '@angular-redux/store'; | ||
| import { IWineryState } from '../redux/store/winery.store'; | ||
| import { TopologyRendererActions } from '../redux/actions/topologyRenderer.actions'; | ||
| import { WineryActions } from '../redux/actions/winery.actions'; | ||
| import { WineryRepositoryConfigurationService } from '../../../../tosca-management/src/app/wineryFeatureToggleModule/WineryRepositoryConfiguration.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'winery-version-slider', | ||
| templateUrl: './version-slider.component.html', | ||
| styleUrls: ['./version-slider.component.css'] | ||
| }) | ||
| export class VersionSliderComponent implements OnInit { | ||
| private static readonly LEGEND_CHAR_LIMIT = 15; | ||
|
|
||
| sliderValue: number; | ||
| versions: WineryVersion[]; | ||
| options: Options = { | ||
| showTicksValues: true, | ||
| stepsArray: undefined, | ||
| translate: VersionSliderComponent.hideValues | ||
| }; | ||
|
|
||
| constructor(private versionSliderService: VersionSliderService, | ||
| private backendService: BackendService, | ||
| private ngRedux: NgRedux<IWineryState>, | ||
| private rendererActions: TopologyRendererActions, | ||
| private wineryActions: WineryActions, | ||
| private configurationService: WineryRepositoryConfigurationService) { | ||
| this.versionSliderService.getVersions() | ||
| .subscribe(versions => this.init(versions)); | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| } | ||
|
|
||
| private init(versions: WineryVersion[]) { | ||
| this.versions = versions; | ||
|
|
||
| const id = this.backendService.configuration.id; | ||
| this.sliderValue = this.versions | ||
| .findIndex(v => this.toId(v) === id); | ||
|
|
||
| const stepsArray = []; | ||
| this.versions.forEach((version, index) => { | ||
| const legend = VersionSliderComponent.limitChars(version.toReadableString()); | ||
| stepsArray.push({ value: index, legend }); | ||
| }); | ||
| // trigger change detection | ||
| const newOptions: Options = Object.assign({}, this.options); | ||
| newOptions.stepsArray = stepsArray; | ||
| this.options = newOptions; | ||
| } | ||
|
|
||
| updateTopologyTemplate() { | ||
| const version = this.getSelectedVersion(); | ||
| const id = this.toId(version); | ||
|
|
||
| this.versionSliderService.getTopologyTemplate(id) | ||
| .subscribe(topologyTemplate => { | ||
| TopologyTemplateUtil.updateTopologyTemplate( | ||
| this.ngRedux, | ||
| this.wineryActions, | ||
| topologyTemplate, | ||
| this.configurationService.isYaml() | ||
| ); | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| selectedIsCurrent(): boolean { | ||
| return this.toId(this.getSelectedVersion()) | ||
| === this.backendService.configuration.id; | ||
| } | ||
|
|
||
| open() { | ||
| const version = this.getSelectedVersion(); | ||
| const id = this.toId(version); | ||
| let editorConfig = '?repositoryURL=' + encodeURIComponent(this.backendService.configuration.repositoryURL) | ||
| + '&uiURL=' + encodeURIComponent(this.backendService.configuration.uiURL) | ||
| + '&ns=' + encodeURIComponent(this.backendService.configuration.ns) | ||
| + '&id=' + id; | ||
| if (!version.editable) { | ||
| editorConfig += '&isReadonly=true'; | ||
| } | ||
| window.open(editorConfig, '_blank'); | ||
| } | ||
|
|
||
| private getSelectedVersion() { | ||
| return this.versions[this.sliderValue]; | ||
| } | ||
|
|
||
| private toId(version: WineryVersion): string { | ||
| return VersionSliderComponent.getName(this.backendService.configuration.id) | ||
| + WineryVersion.WINERY_NAME_FROM_VERSION_SEPARATOR | ||
| + version.toString(); | ||
| } | ||
|
|
||
| private static getName(id: string) { | ||
| return id.split(WineryVersion.WINERY_NAME_FROM_VERSION_SEPARATOR)[0]; | ||
| } | ||
|
|
||
| private static hideValues(): string { | ||
| return ''; | ||
| } | ||
|
|
||
| private static limitChars(str: string): string { | ||
| if (str.length < this.LEGEND_CHAR_LIMIT) { | ||
| return str; | ||
| } else { | ||
| return str.substr(0, this.LEGEND_CHAR_LIMIT) + '...'; | ||
| } | ||
| } | ||
| } |
62 changes: 62 additions & 0 deletions
62
...pse.winery.frontends/app/topologymodeler/src/app/version-slider/version-slider.service.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,62 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2020 Contributors to the Eclipse Foundation | ||
| * | ||
| * See the NOTICE file(s) distributed with this work for additional | ||
| * information regarding copyright ownership. | ||
| * | ||
| * This program and the accompanying materials are made available under the | ||
| * terms of the Eclipse Public License 2.0 which is available at | ||
| * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0 | ||
| * which is available at https://www.apache.org/licenses/LICENSE-2.0. | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 | ||
| *******************************************************************************/ | ||
|
|
||
| import { Injectable } from '@angular/core'; | ||
| import { HttpClient } from '@angular/common/http'; | ||
| import { BackendService } from '../services/backend.service'; | ||
| import { WineryVersion } from '../../../../tosca-management/src/app/model/wineryVersion'; | ||
| import { Observable } from 'rxjs'; | ||
| import { TTopologyTemplate } from '../models/ttopology-template'; | ||
|
|
||
| @Injectable() | ||
| export class VersionSliderService { | ||
|
|
||
| constructor(private http: HttpClient, | ||
| private backendService: BackendService) { | ||
| } | ||
|
|
||
| getVersions(): Observable<WineryVersion[]> { | ||
| const url = this.backendService.configuration.parentElementUrl + '?versions'; | ||
| return this.http.get<WineryVersion[]>(url) | ||
| .map(array => array.reverse()) | ||
| // recreate class to access methods | ||
| .map(array => array.map(v => VersionSliderService.toWineryVersion(v))); | ||
| } | ||
|
|
||
| hasMultipleVersions(): Observable<boolean> { | ||
| return this.getVersions() | ||
| .map(versions => versions && versions.length > 1); | ||
| } | ||
|
|
||
| getTopologyTemplate(id: string): Observable<TTopologyTemplate> { | ||
| const url = this.backendService.configuration.repositoryURL + '/' | ||
| + 'servicetemplates/' | ||
| + encodeURIComponent(encodeURIComponent(this.backendService.configuration.ns)) + '/' | ||
| + id + '/' | ||
| + 'topologytemplate'; | ||
| return this.http.get<TTopologyTemplate>(url); | ||
| } | ||
|
|
||
| private static toWineryVersion(wv: any): WineryVersion { | ||
| return new WineryVersion( | ||
| wv.componentVersion, | ||
| wv.wineryVersion, | ||
| wv.workInProgressVersion, | ||
| wv.currentVersion, | ||
| wv.latestVersion, | ||
| wv.releasable, | ||
| wv.editable | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.