export const BlueprintURLs = {
getAllBlueprints: '/controllerblueprint/all',
+ getOneBlueprint: '/controllerblueprint',
getPagedBlueprints: '/controllerblueprint/paged',
searchByTag: '/controllerblueprint/searchByTags/',
save: '/controllerblueprint/create-blueprint',
searchResourceDictionaryByName: '',
getSources: '/resourcedictionary/source-mapping',
getModelType: '/resourcedictionary/model-type',
- getDataType: '/resourcedictionary/model-type/by-definition/data_type'
+ getResourceDictionary: '/resourcedictionary/model-type/by-definition'
};
export const ControllerCatalogURLs = {
return this.httpClient.post(url, body, options);
}
+
+ getOne(url: string, params?: {}): Observable<T> {
+ console.log('params', params);
+ let httpParams = new HttpParams();
+ for (const key in params) {
+ if (params.hasOwnProperty(key)) {
+ httpParams = httpParams.append(key, params[key]);
+ }
+ }
+ const options = {params: httpParams};
+ return this.httpClient.get<T>(url, options);
+ }
}
--- /dev/null
+<app-header>
+</app-header>
+<p>package-viewing works!
+
+
+ {{viewedPackage!.artifactName}}}
+</p>
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurationDashboardComponent } from './configuration-dashboard.component';
+
+describe('PackageViewingComponent', () => {
+ let component: ConfigurationDashboardComponent;
+ let fixture: ComponentFixture<ConfigurationDashboardComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ConfigurationDashboardComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ConfigurationDashboardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {PackageStore} from './package.store';
+import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+
+
+@Component({
+ selector: 'app-configuration-dashboard',
+ templateUrl: './configuration-dashboard.component.html',
+ styleUrls: ['./configuration-dashboard.component.css']
+})
+export class ConfigurationDashboardComponent implements OnInit {
+ viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
+
+ constructor(private route: ActivatedRoute, private configurationStore: PackageStore) {
+
+ const id = this.route.snapshot.paramMap.get('id');
+ this.configurationStore.getPagedPackages(id);
+ this.configurationStore.state$.subscribe(
+ el => {
+ if (el && el.configuration) {
+ this.viewedPackage = el.configuration;
+ }
+ }
+ );
+
+
+ }
+
+ ngOnInit() {
+
+ }
+
+}
--- /dev/null
+import {Injectable} from '@angular/core';
+import {ApiService} from '../../../../common/core/services/api.typed.service';
+import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {Observable} from 'rxjs';
+import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ConfigurationDashboardService {
+
+
+ constructor(private api: ApiService<BluePrintDetailModel>) {
+
+ }
+
+ getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
+ return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id);
+
+ }
+}
--- /dev/null
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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============================================
+*/
+
+import {Injectable} from '@angular/core';
+import {Store} from '../../../../common/core/stores/Store';
+import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+import {ConfigurationDashboardService} from './configuration-dashboard.service';
+import {PackageDashboardState} from '../model/package-dashboard.state';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class PackageStore extends Store<PackageDashboardState> {
+
+
+ constructor(private configurationDashboardService: ConfigurationDashboardService) {
+ super(new PackageDashboardState());
+ }
+
+ getPagedPackages(id: string) {
+ this.configurationDashboardService.getBluePrintModel(id).subscribe(
+ (bluePrintDetailModels) => {
+ this.setState({
+ ...this.state,
+ configuration: bluePrintDetailModels[0]
+ });
+ });
+ /* bluePrintDetailModels.forEach(
+ bluePrintDetailModel => {
+ this.setState({
+ ...this.state,
+ configuration: bluePrintDetailModel
+ });
+ });*/
+
+
+ }
+
+}
--- /dev/null
+<div>
+ <b>Select from other packages:</b>
+ <div class="actions-scroll">
+ <div class="custom-control custom-checkbox" *ngFor="let action of actions">
+ <input type="checkbox" class="custom-control-input" id="customCheck1">
+ <label class="custom-control-label" for="customCheck1">Action name
+ <p class="m-0">{{action}}</p>
+ </label>
+ </div>
+ </div>
+ <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
+ <button type="button" class="btn btn-secondary mr-3">Insert</button>
+ <button type="button" class="btn btn-secondary">Cancel</button>
+ </div>
+</div>
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionsComponent } from './actions.component';
+
+describe('ActionsComponent', () => {
+ let component: ActionsComponent;
+ let fixture: ComponentFixture<ActionsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ActionsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ActionsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+ selector: 'app-actions',
+ templateUrl: './actions.component.html',
+ styleUrls: ['./actions.component.css']
+})
+export class ActionsComponent implements OnInit {
+ actions: string[] = [];
+
+ constructor() {
+ this.actions.push('action 1 ');
+ this.actions.push('action 2');
+ }
+
+ ngOnInit() {
+ }
+
+}
body{
- background-image: linear-gradient(-45deg, #000 6%, #fff 0) !important;
+ background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
background-size: 6px 6px !important;
}
border-color: #DEE8F3;
}
.actions-scroll{
- max-height: 160px;
+ max-height: 29vh;
overflow-y: auto;
margin-top: 12px;
margin-bottom: 20px;
.componentsList{
padding-bottom: 0;
}
+.custom-control.custom-checkbox:hover,
+.custom-control-label:hover{
+ cursor: pointer;
+}
.actionsList .custom-checkbox,
.componentsList .list-group-item{
margin-bottom: 10px;
background:#F4F9FE;
border: solid 1px #E8EFF8;
box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
- margin-left: 20em;
}
.editBar .btn-group{
box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
color: #FF6469;
font-size: 10px;
-}
\ No newline at end of file
+}
<!--Header-->
<header>
- <div class="row m-0">
- <div class="col pl-0">
- <p class="logo mb-0"></p>
- <nav aria-label="breadcrumb">
- <ol class="breadcrumb mb-0">
- <li class="breadcrumb-item">
- <a href="#">CBA Packages</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#">Package Name</a>
- </li>
- <li class="breadcrumb-item active" aria-current="page">
- <p class="mb-0">Topology View</p>
- </li>
- </ol>
- </nav>
- </div>
- <div class="col pr-0 text-right">
- <ul class="topology-actions">
- <li>
- <div class="btn-group" role="group" aria-label="Basic example">
- <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Preview">
- <i class="fa fa-eye"></i>
- </a>
- <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Download">
- <i class="fa fa-download"></i>
- </a>
- <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Share">
- <i class="fa fa-share-square"></i>
- </a>
- </div>
- </li>
- <li>
- <div class="dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">Save</div>
- <ul class="dropdown-content">
- <li>
- <a href="">Save</a>
- </li>
- <li>
- <a href="">Save & Deploy</a>
- </li>
+ <div class="row m-0">
+ <div class="col pl-0">
+ <p class="logo mb-0"></p>
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb mb-0">
+ <li class="breadcrumb-item">
+ <a href="#">CBA Packages</a>
+ </li>
+ <li class="breadcrumb-item">
+ <a href="#">Package Name</a>
+ </li>
+ <li class="breadcrumb-item active" aria-current="page">
+ <p class="mb-0">Topology View</p>
+ </li>
+ </ol>
+ </nav>
+ </div>
+ <div class="col pr-0 text-right">
+ <ul class="topology-actions">
+ <li>
+ <div class="btn-group" role="group" aria-label="Basic example">
+ <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
+ data-tooltip="Preview">
+ <i class="fa fa-eye"></i>
+ </a>
+ <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
+ data-tooltip="Download">
+ <i class="fa fa-download"></i>
+ </a>
+ <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
+ data-tooltip="Share">
+ <i class="fa fa-share-square"></i>
+ </a>
+ </div>
+ </li>
+ <li>
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">Save</div>
+ <ul class="dropdown-content">
+ <li>
+ <a href="">Save</a>
+ </li>
+ <li>
+ <a href="">Save & Deploy</a>
+ </li>
+ </ul>
+ </div>
+ </li>
</ul>
- </div>
- </li>
- </ul>
+ </div>
</div>
- </div>
</header>
<ng-sidebar-container class="sidebar-container">
- <!-- Controller SideBar -->
- <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" [mode]="'push'"
- #sidebarLeft>
- <div class="row">
- <div class="col-12 p-0">
- <form>
- <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions">
- </form>
- </div>
- <h1 class="col-12">Actions</h1>
- <div class="col-12 text-center p-0">
- <div class="btn-group actionBtns" role="group">
- <button type="button" class="btn">Insert Custom</button>
- <button type="button" class="btn">Import Action</button>
- </div>
- </div>
+ <!-- Controller SideBar -->
+ <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
+ [mode]="'push'"
+ #sidebarLeft>
+ <div class="row">
+ <div class="col-12 p-0">
+ <form>
+ <input type="text" class="form-control input-search-controller"
+ placeholder="Search actions and functions">
+ </form>
+ </div>
+ <h1 class="col-12">Actions</h1>
+ <div class="col-12 text-center p-0">
+ <div class="btn-group actionBtns" role="group">
+ <button type="button" class="btn">Insert Custom</button>
+ <button type="button" class="btn">Import Action</button>
+ </div>
+ </div><!--
<div class="col-12 actionsList">
<b>Select from other packages:</b>
<div class="actions-scroll">
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
</div>
- <h1 class="col-12">Functions</h1>
- <div class="col-12 componentsList">
- <b>Drag and drop function to Action’s box</b>
- <ul class="list-group actions-scroll">
- <li class="list-group-item">
- <p class="compType-1">component-resource-resolution</p>
- </li>
- <li class="list-group-item">
- <p class="compType-2">component-netconf-executor</p>
- </li>
- <li class="list-group-item">
- <p class="compType-3">component-remote-ansible-executor</p>
- </li>
- <li class="list-group-item">
- <p class="compType-4">dg-generic</p>
- </li>
- <li class="list-group-item">
- <p class="compType-1">component-resource-resolution</p>
- </li>
- </ul>
- </div>
- </div>
- </ng-sidebar>
- <!-- Page content -->
- <div ng-sidebar-content id="paper">
- <button class="rotate" (click)="_toggleSidebar1()">
+-->
+ <app-actions class="col-12 actionsList"></app-actions>
+ <app-functions></app-functions>
+ </div>
+ </ng-sidebar>
+ <!-- Page content -->
+ <div ng-sidebar-content>
+ <button class="rotate" (click)="_toggleSidebar1()">
<span>
Controller
<i class="fa fa-angle-double-left"></i>
</span>
- </button>
- <!-- Canvas -->
- <div class="editBar text-center">
- <div class="btn-group mr-2" role="group" aria-label="First group">
- <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
- <img src="/assets/img/icon-undoActive.svg">
- </button>
- <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
- <img src="/assets/img/icon-redo.svg">
- </button>
- </div>
- <div class="btn-group mr-2" role="group" aria-label="Second group">
- <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
- <img src="/assets/img/icon-zoomOut.svg">
</button>
- <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
- <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
- <img src="/assets/img/icon-zoomIn.svg">
- </button>
- </div>
- <div class="btn-group viewBtns" role="group" aria-label="Third group">
- <button type="button" class="btn btn-secondary topologySource active">View</button>
- <button type="button" class="btn btn-secondary topologyView">Source</button>
- </div>
- </div>
- <div class="card actionContainer">
- <div class="card-header">
- <span>Action 1</span>
- </div>
- <div class="card-body">
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType1.svg" title="">
- <h2>config-assign</h2>
- <p>component-resource-resolution</p>
- </a>
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType2.svg" title="">
- <h2>execute</h2>
- <p>component-netconf-executor</p>
- </a>
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType3.svg" title="">
- <h2>function 1</h2>
- <p>dg-generic</p>
- </a>
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType2.svg" title="">
- <h2>execute</h2>
- <p>component-netconf-executor</p>
- </a>
- </div>
- </div>
- <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
- </div>
- <!-- Attribute SideBar -->
- <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'"
- #sidebarRight>
- <div class="container-fluid0">
- <div class="row m-0">
- <div class="col-2 pr-0">
- <button (click)="sidebarRight.close()" class="closeBar"></button>
+ <!-- Canvas -->
+ <div class="editBar text-center">
+ <div class="btn-group mr-2" role="group" aria-label="First group">
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
+ <img src="/assets/img/icon-undoActive.svg">
+ </button>
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
+ <img src="/assets/img/icon-redo.svg">
+ </button>
+ </div>
+ <div class="btn-group mr-2" role="group" aria-label="Second group">
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
+ <img src="/assets/img/icon-zoomOut.svg">
+ </button>
+ <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
+ <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
+ <img src="/assets/img/icon-zoomIn.svg">
+ </button>
+ </div>
+ <div class="btn-group viewBtns" role="group" aria-label="Third group">
+ <button type="button" class="btn btn-secondary topologySource active">View</button>
+ <button type="button" class="btn btn-secondary topologyView">Source</button>
+ </div>
</div>
- <div class="col-10 attributesContainer p-0">
- <h1>Action Attributes</h1>
- <div class="scrolll">
- <div class="row m-0">
- <div class="col-12">
- <div class="form-group actionName">
- <label for="exampleInputEmail1">Action Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
- </div>
+ <div class="card actionContainer">
+ <div class="card-header">
+ <span>Action 1</span>
+ </div>
+ <div class="card-body">
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType1.svg" title="">
+ <h2>config-assign</h2>
+ <p>component-resource-resolution</p>
+ </a>
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType2.svg" title="">
+ <h2>execute</h2>
+ <p>component-netconf-executor</p>
+ </a>
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType3.svg" title="">
+ <h2>function 1</h2>
+ <p>dg-generic</p>
+ </a>
+ <a (click)="sidebarRight.open()" class="componentContainer text-center">
+ <img src="/assets/img/icon-comType2.svg" title="">
+ <h2>execute</h2>
+ <p>component-netconf-executor</p>
+ </a>
</div>
- <div class="accordion" id="accordionExample">
- <div class="card">
- <div class="card-header row" id="headingOne">
- <h2 class="col-10 mb-0">
- <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
- Steps
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
+ </div>
+ <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
+ </div>
+ <!-- Attribute SideBar -->
+ <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
+ [position]="'right'"
+ #sidebarRight>
+ <div class="container-fluid0">
+ <div class="row m-0">
+ <div class="col-2 pr-0">
+ <button (click)="sidebarRight.close()" class="closeBar"></button>
</div>
+ <div class="col-10 attributesContainer p-0">
+ <h1>Action Attributes</h1>
+ <div class="scrolll">
+ <div class="row m-0">
+ <div class="col-12">
+ <div class="form-group actionName">
+ <label for="exampleInputEmail1">Action Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ </div>
+ </div>
+ <div class="accordion" id="accordionExample">
+ <div class="card">
+ <div class="card-header row" id="headingOne">
+ <h2 class="col-10 mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse"
+ data-target="#collapseOne" aria-expanded="true"
+ aria-controls="collapseOne">
+ Steps
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
+ </div>
+ </div>
- <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
- <div class="card-body">
- <div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">Name</label>
- <button type="button" class="btn p-0">
- <img src="/assets/img/icon-edit.svg">
- </button>
- </div>
- <div class="col-3">
- <button type="button" class="btn btn-deleteAttribute">Delete</button>
- </div>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Description</label>
- <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Target</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+ data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">Name</label>
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
+ </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Description</label>
+ <textarea class="form-control" id="exampleFormControlTextarea1"
+ rows="3"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Target</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header row" id="headingTwo">
- <h2 class="col-10 mb-0">
- <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
- Inputs
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
- </div>
- <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
- <div class="card-body">
- <div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">Name</label>
- <button type="button" class="btn p-0">
- <img src="/assets/img/icon-edit.svg">
- </button>
- </div>
- <div class="col-3">
- <button type="button" class="btn btn-deleteAttribute">Delete</button>
- </div>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Description</label>
- <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Target</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header row" id="headingTwo">
+ <h2 class="col-10 mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse"
+ data-target="#collapseTwo" aria-expanded="true"
+ aria-controls="collapseTwo">
+ Inputs
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
+ </div>
+ </div>
+ <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
+ data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">Name</label>
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
+ </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Description</label>
+ <textarea class="form-control" id="exampleFormControlTextarea1"
+ rows="3"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Target</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header row" id="headingThree">
- <h2 class="col-10 mb-0">
- <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
- Outputs
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
- </div>
- <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
- <div class="card-body">
- <div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">Name</label>
- <button type="button" class="btn p-0">
- <img src="/assets/img/icon-edit.svg">
- </button>
- </div>
- <div class="col-3">
- <button type="button" class="btn btn-deleteAttribute">Delete</button>
- </div>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Description</label>
- <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Target</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header row" id="headingThree">
+ <h2 class="col-10 mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse"
+ data-target="#collapseThree" aria-expanded="true"
+ aria-controls="collapseThree">
+ Outputs
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
+ </div>
+ </div>
+ <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
+ data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">Name</label>
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
+ </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Name</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Description</label>
+ <textarea class="form-control" id="exampleFormControlTextarea1"
+ rows="3"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Target</label>
+ <input type="text" class="form-control" placeholder="Action 1">
+ </div>
- </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- </div>
</div>
- </div>
</div>
- </div>
- </div>
- </ng-sidebar>
+ </ng-sidebar>
-</ng-sidebar-container>
\ No newline at end of file
+</ng-sidebar-container>
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import * as $ from 'jquery';
-import * as _ from 'lodash';
-import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js';
@Component({
selector: 'app-designer',
private controllerSideBar: boolean;
private attributesSideBar: boolean;
- public graph: any;
- public paper: any;
-
constructor() {
this.controllerSideBar = true;
this.attributesSideBar = false;
ngOnInit() {
+
this.attachEditorBarToCanvas();
}
--- /dev/null
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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============================================
+*/
+
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../../common/core/services/api.typed.service';
+import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DesignerService {
+
+ constructor(private api: ApiService<ModelType>) {
+ }
+
+ getFunctions(modelDefinitionType: string): Observable<ModelType[]> {
+ return this.api.get(ResourceDictionaryURLs.getResourceDictionary + '/' + modelDefinitionType);
+ }
+
+}
--- /dev/null
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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============================================
+*/
+
+import {Injectable} from '@angular/core';
+import {Store} from '../../../../common/core/stores/Store';
+import {DesignerService} from './designer.service';
+import {DesignerDashboardState} from '../model/designer-dashboard.state';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DesignerStore extends Store<DesignerDashboardState> {
+
+ constructor(private designerService: DesignerService) {
+ super(new DesignerDashboardState());
+ }
+
+ public getFuntions() {
+ const modelDefinitionType = 'node_type';
+ this.designerService.getFunctions(modelDefinitionType).subscribe(
+ (modelType: ModelType[]) => {
+ console.log(modelType);
+ this.setState({
+ ...this.state,
+ functions: modelType,
+ });
+ });
+ }
+}
--- /dev/null
+<h1 class="col-12">Functions</h1>
+<div class="col-12 componentsList">
+ <b>Drag and drop function to Action’s box</b>
+ <ul class="list-group actions-scroll" >
+ <li class="list-group-item" *ngFor="let function of viewedFunctions">
+ <p class="compType-1">{{function.modelName}}</p>
+ </li>
+ <!--<li class="list-group-item">
+ <p class="compType-2">component-netconf-executor</p>
+ </li>
+ <li class="list-group-item">
+ <p class="compType-3">component-remote-ansible-executor</p>
+ </li>
+ <li class="list-group-item">
+ <p class="compType-4">dg-generic</p>
+ </li>
+ <li class="list-group-item">
+ <p class="compType-1">component-resource-resolution</p>
+ </li>-->
+ </ul>
+</div>
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FunctionsComponent } from './functions.component';
+
+describe('FunctionsComponent', () => {
+ let component: FunctionsComponent;
+ let fixture: ComponentFixture<FunctionsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FunctionsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FunctionsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import {Component, OnInit} from '@angular/core';
+import {DesignerStore} from '../designer.store';
+
+@Component({
+ selector: 'app-functions',
+ templateUrl: './functions.component.html',
+ styleUrls: ['./functions.component.css']
+})
+export class FunctionsComponent implements OnInit {
+ viewedFunctions: ModelType[] = [];
+
+ constructor(private designerStore: DesignerStore) {
+
+ this.designerStore.state$.subscribe(state => {
+ console.log(state);
+ if (state.functions) {
+ this.viewedFunctions = state.functions;
+ }
+ });
+ }
+
+ ngOnInit() {
+ this.designerStore.getFuntions();
+ }
+
+}
--- /dev/null
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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============================================
+*/
+
+import {Page} from 'src/app/common/model/page';
+import {BlueprintModel} from './BluePrint.model';
+
+export class BluePrintDetailModel extends BlueprintModel {
+ blueprintModelContent: BlueprintModelContent;
+}
+
+export class BlueprintModelContent {
+ id: string;
+ name: string;
+ description: string;
+ fileContent: any;
+
+
+}
+
+/*
+export class BluePrintDetailModelContent {
+ bluePrintDetailsModels: BluePrintDetailModel[];
+
+}*/
export class BlueprintModel {
- constructor(id: string, artifactUUId: null, artifactType: string,
- artifactVersion: string, artifactDescription: string,
- internalVersion: null, createdDate: string, artifactName: string,
- published: string, updatedBy: string, tags: string) {
- this.id = id;
- this.artifactUUId = artifactUUId;
- this.artifactType = artifactType;
- this.artifactVersion = artifactVersion;
- this.artifactDescription = artifactDescription;
- this.internalVersion = internalVersion;
- this.createdDate = createdDate;
- this.artifactName = artifactName;
- this.published = published;
- this.updatedBy = updatedBy;
- this.tags = tags;
- }
-
id: string;
artifactUUId?: null;
artifactType: string;
--- /dev/null
+class ModelType {
+ modelName: string;
+ derivedFrom: string;
+ definitionType: string;
+ definition: object;
+ description: string;
+ version: string;
+ tags: string;
+ creationDate: string;
+ updatedBy: string;
+
+}
--- /dev/null
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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============================================
+*/
+
+export class DesignerDashboardState {
+
+ functions: ModelType[];
+ actions: string[];
+
+}
--- /dev/null
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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============================================
+*/
+
+
+import {BluePrintDetailModel} from './BluePrint.detail.model';
+
+export class PackageDashboardState {
+ configuration: BluePrintDetailModel;
+
+}
--- /dev/null
+<!--Page Title-->
+<header class="page-title">
+ <div class="row">
+ <h2 class="col m-0">CBA Packages
+ <span>({{numberOfPackages}} packages)</span>
+ </h2>
+ <div class="col">
+ </div>
+ </div>
+</header>
\ No newline at end of file
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackagesHeaderComponent } from './packages-header.component';
+
+describe('PackagesHeaderComponent', () => {
+ let component: PackagesHeaderComponent;
+ let fixture: ComponentFixture<PackagesHeaderComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PackagesHeaderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PackagesHeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit } from '@angular/core';
+import { PackagesStore } from '../../packages.store';
+
+@Component({
+ selector: 'app-packages-header',
+ templateUrl: './packages-header.component.html',
+ styleUrls: ['./packages-header.component.css']
+})
+export class PackagesHeaderComponent implements OnInit {
+
+ numberOfPackages: number;
+
+ constructor(private packagesStore: PackagesStore) {
+ this.packagesStore.state$
+ .subscribe(state => {
+ this.numberOfPackages = state.totalPackagesWithoutSearchorFilters;
+ });
+ }
+
+ ngOnInit() {
+ }
+
+}
--- /dev/null
+<div class="row mt-4">
+ <div class="col">
+ <div class="tab-content" id="nav-tabContent">
+ <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+ <div class="row">
+ <!--Package Sort-->
+ <div class="col sort-packages">
+ Sort by:
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">{{selected}}</div>
+ <ul class="dropdown-content">
+ <li *ngFor="let sortType of sortTypes">
+ <a (click)="sortPackages($event)" name={{sortType}}>{{sortType}}</a>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ <!--Package Paginator-->
+ <app-package-pagination></app-package-pagination>
+ </div>
+ <app-packages-list></app-packages-list>
+
+ </div>
+ <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
+ <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+ <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
+ </div>
+ </div>
+ </div>
+</div>
+
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SortPackagesComponent } from './sort-packages.component';
+
+describe('SortPackagesComponent', () => {
+ let component: SortPackagesComponent;
+ let fixture: ComponentFixture<SortPackagesComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SortPackagesComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SortPackagesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+
+@Component({
+ selector: 'app-sort-packages',
+ templateUrl: './sort-packages.component.html',
+ styleUrls: ['./sort-packages.component.css']
+})
+export class SortPackagesComponent implements OnInit {
+ sortTypes: string[];
+ selected: string;
+
+ constructor(private packagesStore: PackagesStore) {
+ this.sortTypes = Object.keys(SortByToServerValue);
+ this.selected = 'Recent';
+ }
+
+ ngOnInit() {
+ }
+
+ sortPackages(event: any) {
+ const key = event.target.name;
+ console.log(key);
+ this.selected = key;
+ this.packagesStore.sortPagedPackages(SortByToServerValue[key]);
+ }
+}
+
+enum SortByToServerValue {
+ Recent = 'DATE',
+ Name = 'NAME',
+}
import {ApiService} from '../../../common/core/services/api.typed.service';
import {PackagesRoutingModule} from './packages.routing.module';
import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
-import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
-import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component';
-import { PackageListComponent } from './packages-dashboard/package-list/package-list.component';
-import { DesignerComponent } from './designer/designer.component';
-import { SidebarModule } from 'ng-sidebar';
-import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component';
-import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component';
-import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component';
-
+import {SharedModulesModule} from '../../shared-modules/shared-modules.module';
+import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
+import {PackageListComponent} from './packages-dashboard/package-list/package-list.component';
+import {DesignerComponent} from './designer/designer.component';
+import {SidebarModule} from 'ng-sidebar';
+import {PackagePaginationComponent} from './packages-dashboard/package-pagination/package-pagination.component';
+import {SortPackagesComponent} from './packages-dashboard/sort-packages/sort-packages.component';
+import {PackagesHeaderComponent} from './packages-dashboard/packages-header/packages-header.component';
+import {PackagesSearchComponent} from './packages-dashboard/search-by-packages/search-by-packages.component';
+import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter-by-tags.component';
+import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
+import {FunctionsComponent} from './designer/functions/functions.component';
+import {ActionsComponent} from './designer/actions/actions.component';
@NgModule({
DesignerComponent,
PackagePaginationComponent,
PackagesSearchComponent,
+ SortPackagesComponent,
+ ConfigurationDashboardComponent,
+ PackagesHeaderComponent,
+ FunctionsComponent,
+ ActionsComponent,
],
imports: [
CommonModule,
Code Review / ccsdk / cds.git / commitdiff