diff options
3 files changed, 72 insertions, 53 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html index 7c225d285..b16a06494 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html @@ -20,7 +20,7 @@ limitations under the License. --> <div style="display: flex;flex-direction: row"> - <div style="width: 12%; height: 553px;"> + <!-- <div style="width: 12%; height: 553px;"> <mat-accordion> <mat-expansion-panel> @@ -34,38 +34,32 @@ limitations under the License. </div> </mat-expansion-panel> </mat-accordion> - </div> + </div> --> - <div style="width: 90%;display: flex;flex-direction: row; margin-left: 1em"> - <div style="width: 50%; margin: 2px;"> - <p>Request</p> - <textarea style=" width: 99%; - min-height: 27rem; - font-family: Lucida Console, Monaco, monospace; - font-size: 0.8rem; - line-height: 1.2;" cols="30" rows="10">{{request }}</textarea> - <div style="height: 10%"> - <button style="margin: 1em; - background-color: #3f51b5; - color: white; - border-radius: 2em; - padding: 0.5em;min-width: 6em;">Submit</button> - <button style="margin: 1em; - background-color: #3f51b5; - color: white; - border-radius: 2em; - padding: 0.5em;min-width: 6em;">Clear</button> + <div style="width: 100%;display: flex;flex-direction: row; margin-left: 1em"> + <div style="width: 50%; margin: 2px; "> + <p>Request</p> + <!-- <textarea style=" width: 99%; + min-height: 27rem; + font-family: Lucida Console, Monaco, monospace; + font-size: 0.8rem; + line-height: 1.2;" cols="30" rows="10">{{request }}</textarea> --> + <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor> + <div style="height: 10%"> + <button class="button">Submit</button> + <button class="button">Clear</button> + </div> </div> - </div> - <div style="width: 50%; margin: 2px;"> - <p>Response</p> - <textarea style=" width: 99%; - min-height: 27rem; - font-family: Lucida Console, Monaco, monospace; - font-size: 0.8rem; - line-height: 1.2;" cols="30" rows="10"></textarea> + <div style="width: 50%; margin: 2px;"> + <p>Response</p> + <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor> + <!-- <textarea style=" width: 99%; + min-height: 27rem; + font-family: Lucida Console, Monaco, monospace; + font-size: 0.8rem; + line-height: 1.2;" cols="30" rows="10"></textarea> --> + </div> </div> - </div> -</div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss index 22941b5fa..33a7e2d60 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss @@ -17,4 +17,24 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ -*/
\ No newline at end of file +*/ + +.aceEditor { + overflow: hidden; + // height: 100% !important; + min-height: 27rem; + background-color: white !important; + border: 1px solid #3f87a6; + border-left: 3px solid #3f87a6; + line-height: 1.2; + width: 99%; +} + +.button { + margin: 1em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts index ee33fd737..2a2455c61 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts @@ -19,9 +19,9 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit } from '@angular/core'; -import {FlatTreeControl} from '@angular/cdk/tree'; -import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; import { Observable, Subscription } from 'rxjs'; import { Store } from '@ngrx/store'; @@ -31,7 +31,10 @@ import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; import { IMetaData } from '../../../common/core/store/models/metadata.model'; import { LoadBlueprintSuccess } from 'src/app/common/core/store/actions/blueprint.action'; - +import "ace-builds/webpack-resolver"; +import 'brace'; +import 'brace/ext/language_tools'; +import 'ace-builds/src-min-noconflict/snippets/html'; interface FoodNode { name: string; @@ -42,19 +45,19 @@ const TREE_DATA: FoodNode[] = [ { name: 'Definitions', children: [ - {name: 'activation-blueprint.json'}, - {name: 'artifacts_types.json'}, - {name: 'data_types.json'}, + { name: 'activation-blueprint.json' }, + { name: 'artifacts_types.json' }, + { name: 'data_types.json' }, ] - }, + }, { name: 'Scripts', children: [ { name: 'kotlin', children: [ - {name: 'ScriptComponent.cba.kts'}, - {name: 'ResourceAssignmentProcessor.cba.kts'}, + { name: 'ScriptComponent.cba.kts' }, + { name: 'ResourceAssignmentProcessor.cba.kts' }, ] } ] @@ -95,9 +98,10 @@ interface ExampleFlatNode { }) export class TestTemplateComponent implements OnInit { private blueprintpState: Subscription; - private request ; + private request; private workflows = []; - + @ViewChild('editor') editor; + options: any = { fontSize: "100%", printMargin: false, tabSize: 2 }; private transformer = (node: FoodNode, level: number) => { return { expandable: !!node.children && node.children.length > 0, @@ -107,23 +111,24 @@ export class TestTemplateComponent implements OnInit { } treeControl = new FlatTreeControl<ExampleFlatNode>( - node => node.level, node => node.expandable); + node => node.level, node => node.expandable); treeFlattener = new MatTreeFlattener( - this.transformer, node => node.level, node => node.expandable, node => node.children); + this.transformer, node => node.level, node => node.expandable, node => node.children); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); constructor(private store: Store<IAppState>) { this.blueprintpState = this.store.select('blueprint') - .subscribe((data: any)=>{ - console.log(data); - if(data.blueprint.topology_template && data.blueprint.topology_template.workflows) { - this.buildWorkflowData(data.blueprint.topology_template.workflows); - // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4); - } - }); + .subscribe((data: any) => { + console.log(data); + if (data.blueprint.topology_template && data.blueprint.topology_template.workflows) { + this.buildWorkflowData(data.blueprint.topology_template.workflows); + // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4); + } + }); this.dataSource.data = TREE_DATA; + } hasChild = (_: number, node: ExampleFlatNode) => node.expandable; |