Skip to content
This repository was archived by the owner on May 14, 2025. It is now read-only.

Commit b8ae583

Browse files
oodamienghillert
oodamien
authored and
ghillert
committed
Stream Deploy Improvements
- Refactor the Stream Deployment page to create sub components (gh-670) - Improve tabbing (gh-665) Resolves #670 Resolves #665
1 parent 98ab2a4 commit b8ae583

23 files changed

+1757
-995
lines changed

‎ui/src/app/shared/directives/auto-resize.directive.ts

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { Directive, ElementRef, HostBinding, HostListener, Input, AfterViewInit, Optional, Self } from '@angular/core';
2+
import { NgControl } from '@angular/forms';
3+
4+
/**
5+
* @license
6+
* Copyright Google Inc. All Rights Reserved.
7+
* Copyright Alex Shevchenko.
8+
*
9+
* Use of this source code is governed by an MIT-style license that can be
10+
* found in the LICENSE file at https://angular.io/license
11+
*
12+
* Source Project: https://github.com/shevaroller/angular-autosize
13+
* Directive to automatically resize a textarea to fit its content.
14+
*/
15+
@Directive({
16+
selector: 'textarea[dataflowAutoResize],' +
17+
'textarea[dataflowTextareaAutoResize]',
18+
exportAs: 'TextareaAutoResize',
19+
})
20+
export class AutoResizeDirective implements AfterViewInit {
21+
/** Keep track of the previous textarea value to avoid resizing when the value hasn't changed. */
22+
private previousValue: string;
23+
24+
private minRowsTextarea: number;
25+
private maxRowsTextarea: number;
26+
27+
/** Cached height of a textarea with a single row. */
28+
private cachedLineHeight: number;
29+
30+
// Textarea elements that have the directive applied should have a single row by default.
31+
// Browsers normally show two rows by default and therefore this limits the minRows binding.
32+
@HostBinding('attr.rows') '1';
33+
34+
@HostListener('input') onTextareaInput() {
35+
this.resizeToFitContent();
36+
}
37+
38+
@Input('autoResizeMinRows')
39+
get minRows() { return this.minRowsTextarea; }
40+
41+
set minRows(value: number) {
42+
this.minRowsTextarea = value;
43+
this.setMinHeight();
44+
}
45+
46+
@Input('autoResizeMaxRows')
47+
get maxRows() { return this.maxRowsTextarea; }
48+
49+
set maxRows(value: number) {
50+
this.maxRowsTextarea = value;
51+
this.setMaxHeight();
52+
}
53+
54+
constructor(private _elementRef: ElementRef, @Optional() @Self() formControl: NgControl) {
55+
if (formControl && formControl.valueChanges) {
56+
formControl.valueChanges.subscribe(() => this.resizeToFitContent());
57+
}
58+
}
59+
60+
/** Sets the minimum height of the textarea as determined by minRows. */
61+
setMinHeight(): void {
62+
const minHeight = this.minRows && this.cachedLineHeight ?
63+
`${this.minRows * this.cachedLineHeight}px` : null;
64+
65+
if (minHeight) {
66+
this._setTextareaStyle('minHeight', minHeight);
67+
}
68+
}
69+
70+
/** Sets the maximum height of the textarea as determined by maxRows. */
71+
setMaxHeight(): void {
72+
const maxHeight = this.maxRows && this.cachedLineHeight ?
73+
`${this.maxRows * this.cachedLineHeight}px` : null;
74+
75+
if (maxHeight) {
76+
this._setTextareaStyle('maxHeight', maxHeight);
77+
}
78+
}
79+
80+
ngAfterViewInit() {
81+
this._cacheTextareaLineHeight();
82+
this.resizeToFitContent();
83+
}
84+
85+
/** Sets a style property on the textarea element. */
86+
private _setTextareaStyle(property: string, value: string): void {
87+
const textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
88+
textarea.style[property] = value;
89+
}
90+
91+
/**
92+
* Cache the height of a single-row textarea.
93+
*
94+
* We need to know how large a single "row" of a textarea is in order to apply minRows and
95+
* maxRows. For the initial version, we will assume that the height of a single line in the
96+
* textarea does not ever change.
97+
*/
98+
private _cacheTextareaLineHeight(): void {
99+
const textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
100+
101+
// Use a clone element because we have to override some styles.
102+
const textareaClone = textarea.cloneNode(false) as HTMLTextAreaElement;
103+
textareaClone.rows = 1;
104+
105+
// Use `position: absolute` so that this doesn't cause a browser layout and use
106+
// `visibility: hidden` so that nothing is rendered. Clear any other styles that
107+
// would affect the height.
108+
textareaClone.style.position = 'absolute';
109+
textareaClone.style.visibility = 'hidden';
110+
textareaClone.style.border = 'none';
111+
textareaClone.style.padding = '0';
112+
textareaClone.style.height = '';
113+
textareaClone.style.minHeight = '';
114+
textareaClone.style.maxHeight = '';
115+
116+
textarea.parentNode.appendChild(textareaClone);
117+
this.cachedLineHeight = textareaClone.clientHeight;
118+
textarea.parentNode.removeChild(textareaClone);
119+
120+
// Min and max heights have to be re-calculated if the cached line height changes
121+
this.setMinHeight();
122+
this.setMaxHeight();
123+
}
124+
125+
/** Resize the textarea to fit its content. */
126+
resizeToFitContent() {
127+
const textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
128+
if (textarea.value === this.previousValue) {
129+
return;
130+
}
131+
132+
// Reset the textarea height to auto in order to shrink back to its default size.
133+
textarea.style.height = 'auto';
134+
135+
// Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
136+
// TODO: hot fix by Damien Vitrac
137+
// textarea.style.height = `${textarea.scrollHeight}px`;
138+
139+
this.previousValue = textarea.value;
140+
}
141+
}

‎ui/src/app/shared/shared.module.ts

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
1-
import {NgModule} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
3-
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4-
import {HttpModule} from '@angular/http';
5-
import {ToastyModule} from 'ng2-toasty';
6-
import {NgBusyModule, BusyConfig, BUSY_CONFIG_DEFAULTS} from 'ng-busy';
7-
import {ErrorHandler} from './model/error-handler';
8-
import {CapitalizePipe} from './pipes/capitalize.pipe';
9-
import {TriStateCheckboxComponent} from './components/tri-state-checkbox.component';
10-
import {TriStateButtonComponent} from './components/tri-state-button.component';
11-
import {ClickOutsideDirective} from './directives/click-outside.directive';
12-
import {SearchfilterPipe} from './pipes/search-filter.pipe';
13-
import {KeyValuePipe} from './pipes/key-value-filter.pipe';
14-
import {NgxPaginationModule} from 'ngx-pagination';
15-
import {PropertyTableComponent} from './components/property-table/property-table.component';
16-
import {ProgressbarModule} from 'ngx-bootstrap/progressbar';
17-
import {ModalModule} from 'ngx-bootstrap/modal';
18-
import {BsDropdownModule} from 'ngx-bootstrap/dropdown';
19-
import {TooltipModule} from 'ngx-bootstrap/tooltip';
20-
import {TabComponent, TabsComponent} from './components/tabs.component';
21-
import {ParserService} from './services/parser.service';
22-
import {SharedAppsService} from './services/shared-apps.service';
23-
import {DataflowDateTimePipe} from './pipes/dataflow-date-time.pipe';
24-
import {DataflowDurationPipe} from './pipes/dataflow-duration.pipe';
25-
import {MapValuesPipe} from './pipes/map-values-pipe.pipe';
26-
import {FloModule} from 'spring-flo';
27-
import {HandleComponent} from './flo/handle/handle.component';
28-
import {DecorationComponent} from './flo/decoration/decoration.component';
29-
import {PropertiesDialogComponent} from './flo/properties/properties-dialog.component';
30-
import {GraphViewComponent} from './flo/graph-view/graph-view.component';
31-
import {SharedAboutService} from './services/shared-about.service';
32-
import {MasterCheckboxComponent} from './components/master-checkbox.component';
33-
import {SortComponent} from './components/sort/sort.component';
34-
import {TruncatePipe} from './pipes/truncate.pipe';
35-
import {OrderByPipe} from './pipes/orderby.pipe';
36-
import {ConfirmService} from './components/confirm/confirm.service';
37-
import {ConfirmComponent} from './components/confirm/confirm.component';
38-
import {BusyService} from './services/busy.service';
39-
import {StreamDslComponent} from './components/dsl/dsl.component';
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4+
5+
import { HttpModule } from '@angular/http';
6+
7+
import { ToastyModule } from 'ng2-toasty';
8+
9+
import { NgBusyModule, BusyConfig, BUSY_CONFIG_DEFAULTS } from 'ng-busy';
10+
import { ErrorHandler } from './model/error-handler';
11+
import { CapitalizePipe } from './pipes/capitalize.pipe';
12+
import { TriStateCheckboxComponent } from './components/tri-state-checkbox.component';
13+
import { TriStateButtonComponent } from './components/tri-state-button.component';
14+
import { ClickOutsideDirective } from './directives/click-outside.directive';
15+
import { SearchfilterPipe } from './pipes/search-filter.pipe';
16+
17+
import { KeyValuePipe } from './pipes/key-value-filter.pipe';
18+
19+
import { NgxPaginationModule } from 'ngx-pagination';
20+
import { PropertyTableComponent } from './components/property-table/property-table.component';
21+
22+
import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
23+
import { ModalModule } from 'ngx-bootstrap/modal';
24+
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
25+
import { TooltipModule } from 'ngx-bootstrap/tooltip';
26+
27+
import { TabComponent, TabsComponent } from './components/tabs.component';
28+
29+
import { ParserService } from './services/parser.service';
30+
import { SharedAppsService } from './services/shared-apps.service';
31+
import { DataflowDateTimePipe } from './pipes/dataflow-date-time.pipe';
32+
import { DataflowDurationPipe } from './pipes/dataflow-duration.pipe';
33+
import { MapValuesPipe } from './pipes/map-values-pipe.pipe';
34+
import { FloModule } from 'spring-flo';
35+
import { HandleComponent } from './flo/handle/handle.component';
36+
import { DecorationComponent } from './flo/decoration/decoration.component';
37+
import { PropertiesDialogComponent } from './flo/properties/properties-dialog.component';
38+
import { GraphViewComponent } from './flo/graph-view/graph-view.component';
39+
import { SharedAboutService } from './services/shared-about.service';
40+
import { MasterCheckboxComponent } from './components/master-checkbox.component';
41+
import { SortComponent } from './components/sort/sort.component';
42+
import { TruncatePipe } from './pipes/truncate.pipe';
43+
import { OrderByPipe } from './pipes/orderby.pipe';
44+
import { ConfirmService } from './components/confirm/confirm.service';
45+
import { ConfirmComponent } from './components/confirm/confirm.component';
46+
import { BusyService } from './services/busy.service';
47+
import { AutoResizeDirective } from './directives/auto-resize.directive';
4048

4149
const busyConfig: BusyConfig = {
4250
message: 'Processing..',
@@ -77,6 +85,7 @@ const busyConfig: BusyConfig = {
7785
MasterCheckboxComponent,
7886
SortComponent,
7987
ClickOutsideDirective,
88+
AutoResizeDirective,
8089
PropertyTableComponent,
8190
TabsComponent,
8291
TabComponent,
@@ -89,8 +98,7 @@ const busyConfig: BusyConfig = {
8998
GraphViewComponent,
9099
TruncatePipe,
91100
OrderByPipe,
92-
ConfirmComponent,
93-
StreamDslComponent
101+
ConfirmComponent
94102
],
95103
entryComponents: [
96104
ConfirmComponent
@@ -129,7 +137,7 @@ const busyConfig: BusyConfig = {
129137
TruncatePipe,
130138
OrderByPipe,
131139
ConfirmComponent,
132-
StreamDslComponent
140+
AutoResizeDirective
133141
]
134142
})
135143
export class SharedModule {

‎ui/src/app/streams/components/streams.interface.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,8 @@ export interface StreamListParams extends ListParams {
77
sort: string;
88
order: string;
99
}
10+
11+
export interface StreamBuilderError {
12+
global: Array<string>;
13+
app: Array<string>;
14+
}

‎ui/src/app/streams/model/stream-deploy-config.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,4 @@ export class StreamDeployConfig {
1919

2020
}
2121

22-
platformExist(key: string): boolean {
23-
if (!key) {
24-
return true;
25-
}
26-
if (this.platform) {
27-
return this.platform.values.filter((a) => a.key === key).length > 0;
28-
}
29-
return false;
30-
}
31-
3222
}

0 commit comments

Comments
 (0)