1 <app-header></app-header>
3 <div class="new-wrapper">
4 <div class="container-fluid main-container">
5 <header class="page-title" style="padding: 16px 30px 12px;">
8 <ul class="breadcrumb-header">
9 <li><a routerLink="/packages">CBA Packages</a></li>
10 <i class="fa fa-angle-right ml-2 mr-2"></i>
11 <li>{{viewedPackage.artifactName}}</li>
14 <div class="col profile-help">
15 <nav class="navbar navbar-expand-lg navbar-light">
16 <ul class="navbar-nav ml-auto">
17 <!-- <li class="nav-item help-btn">
18 <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"
19 [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
22 <div class="nav-item copyright">v1.0.0</div>
24 <div class="nav-item dropdown helpMenu">
25 <input class="dropdown-toggle" type="text">
26 <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
27 <ul class="dropdown-content">
29 <i class="icon-get_started" aria-hidden="true"></i>
31 <input id="clicker3" type="checkbox"/>
34 <span>Quick steps to help you get started</span>
39 <i class="icon-get_started" aria-hidden="true"></i>
41 <input id="clicker3" [checked]="startTour" type="checkbox" />
44 <span>Quick steps to help you get started</span>
49 <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
50 <i class="icon-user_guide" aria-hidden="true"></i>
53 <span>CDS Designer's User Guide</span>
60 <div class="nav-item dropdown userMenu">
61 <input class="dropdown-toggle" type="text">
62 <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
63 <ul class="dropdown-content">
65 <a href="#">Username</a>
68 <a href="#">Settings</a>
71 <a href="#">Projects</a>
74 <a href="#">Log out</a>
83 <div class="container-fluid body-container">
84 <ngx-ui-loader></ngx-ui-loader>
85 <div class="container">
86 <div class="creat-action-container">
87 <button class="action-button save" (click)="editBluePrint()" [disabled]="!isSaveEnabled">
88 <i class="icon-save-sm" aria-hidden="true"></i>
91 <button data-target="#discardChangesModal" data-toggle="modal" class="action-button"
92 [disabled]="!isSaveEnabled">
93 <i class="icon-discard-sm" aria-hidden="true"></i>
94 <span>Discard Changes</span>
98 <button class="action-button">
99 <i class="icon-clone-sm" aria-hidden="true"></i>
103 <a href="#" class="action-button">
104 <i class="icon-archive-sm" aria-hidden="true"></i>
108 <a class="action-button"
109 (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
110 <i class="icon-download" aria-hidden="true"></i>
111 <span>Download</span>
114 <a data-target="#removePackageModal" data-toggle="modal" class="action-button delete">
115 <i class="icon-delete-sm" aria-hidden="true"></i>
119 <div class="card creat-card view-package-container">
121 <div class="col-1 text-center"><i class="package-type-icon icon-topologyView-active"></i></div>
123 <div class="row mb-4">
124 <div class="col-12 package-name deployed">
125 {{viewedPackage.artifactName}}
126 <!-- <img *ngIf="bluePrint.published.includes('Y')" class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
127 <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon">
128 <span class="package-version">v{{viewedPackage.artifactVersion}}</span>
130 <div class="col-12 package-description">
131 Last modified {{ viewedPackage.createdDate | date:'short' }} By
132 {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}
135 <div class="row package-auth-info">
137 <p><b>Author Name</b></p>
139 {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
141 <!--<div class="col-4">
142 <p><b>Author Email</b></p>
143 <span>shaaban.eltanany.ext@orange.com</span>
146 <p><b>Contributions</b></p>
147 <ul class="package-contributers">
149 <button type="button" class="border-fade" data-toggle="tooltip"
150 data-placement="bottom" title="User name">
151 <img src="/assets/img/img-user1.jpeg">
155 <button type="button" data-toggle="tooltip" data-placement="bottom"
157 <img src="/assets/img/img-user2.jpg">
161 <button type="button" data-toggle="tooltip" data-placement="bottom"
163 <img src="/assets/img/img-user3.jpg">
167 <a href="">5 contributors</a>
173 <div class="col-2 package-view-button">
174 <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
177 <!-- Button trigger modal - 1st Action -->
179 <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2"
180 data-toggle="modal" [attr.data-target]="dataTarget">
181 <i class="icon-topologyView-active"></i> Designer Mode
183 <!-- Designer Modal -->
184 <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
185 aria-labelledby="exampleModalLongTitle" aria-hidden="true">
186 <div class="modal-dialog" role="document">
187 <div class="modal-content">
188 <div class="modal-header">
189 <h5 class="modal-title" id="exampleModalLongTitle"></h5>
190 <button type="button" class="close" data-dismiss="modal" aria-label="Close"
192 <i class="icon-action-close"></i>
195 <div class="modal-body">
196 <div id="carouselExampleIndicators" class="carousel slide"
197 data-ride="carousel" data-interval="false">
198 <div class="carousel-inner">
200 <div class="carousel-item active">
201 <h3 class="mainHead">Create an action</h3>
202 <h1>How would you like to get started?</h1>
205 <div class="col-3 d-flex">
207 data-target="#carouselExampleIndicators"
209 <div class="card actionType custom">
210 <div class="card-body">
212 <p>Start with your own settings</p>
214 data-target="#carouselExampleIndicators"
215 data-slide-to="1" class="btn">
222 <!--Default Action-->
223 <div class="col-3 d-flex">
225 data-target="#carouselExampleIndicators"
227 <div class="card actionType default">
228 <div class="card-body">
230 <p>Explore preset actions from CDS
233 data-target="#carouselExampleIndicators"
234 data-slide-to="2" class="btn">
242 <div class="col-3 d-flex">
244 data-target="#carouselExampleIndicators"
246 <div class="card actionType recent">
247 <div class="card-body">
249 <p>Re-use recent actions of your
253 data-target="#carouselExampleIndicators"
254 data-slide-to="3" class="btn">
262 <div class="col-3 d-flex">
264 data-target="#carouselExampleIndicators"
266 <div class="card actionType import">
267 <div class="card-body">
269 <p>Import your own action files</p>
271 data-target="#carouselExampleIndicators"
272 data-slide-to="4" class="btn">
281 <div class="col text-center">
282 <button class="btn skip-btn" data-dismiss="modal"
283 (click)="goToDesignerMode(viewedPackage.id)">
290 <!--Custom Action Form-->
291 <div class="carousel-item">
292 <button data-target="#carouselExampleIndicators"
293 data-slide-to="0" title="Back" class="btn back"><i
294 class="icon-action-back"></i></button>
295 <h1>Create Custom Action</h1>
296 <div class="form-group text-center">
297 <input type="text" [(ngModel)]="customActionName"
298 class="form-control customAction"
299 placeholder="Type Action Name" autofocus>
300 <button type="button" data-dismiss="modal"
301 (click)="goToDesignerMode(viewedPackage.id)"
302 class="btn submit">Start
307 <!--Default Actions Form-->
308 <div class="carousel-item">
309 <button data-target="#carouselExampleIndicators"
310 data-slide-to="0" title="Back" class="btn back"><i
311 class="icon-action-back"></i></button>
312 <h1>Choose Action(s) from CDS Default Package </h1>
313 <div class="actionFormWrapper">
314 <div class="row mb-3">
315 <div class="col sort-packages">
316 <label class="actionlabel">Version</label>
317 <div class="dropdown" style="width: 90px">
318 <input class="dropdown-toggle" type="text">
319 <div class="dropdown-text">1.6.2</div>
320 <ul class="dropdown-content">
331 <input type="text" class="form-control searchInput"
332 placeholder="Search">
335 <div class="row actionsListScroll">
337 <div class="actionName">
338 <div class="custom-control custom-checkbox">
339 <input type="checkbox"
340 class="custom-control-input"
341 id="customControlValidation1"
343 <label class="custom-control-label"
344 for="customControlValidation1">config-assign</label>
349 <div class="actionName">
350 <div class="custom-control custom-checkbox">
351 <input type="checkbox"
352 class="custom-control-input"
353 id="customControlValidation2"
355 <label class="custom-control-label"
356 for="customControlValidation2">config-assign-test</label>
361 <div class="actionName">
362 <div class="custom-control custom-checkbox">
363 <input type="checkbox"
364 class="custom-control-input"
365 id="customControlValidation3"
367 <label class="custom-control-label"
368 for="customControlValidation3">config-deploy</label>
373 <div class="actionName">
374 <div class="custom-control custom-checkbox">
375 <input type="checkbox"
376 class="custom-control-input"
377 id="customControlValidation4"
379 <label class="custom-control-label"
380 for="customControlValidation4">config-modify</label>
385 <div class="actionName">
386 <div class="custom-control custom-checkbox">
387 <input type="checkbox"
388 class="custom-control-input"
389 id="customControlValidation5"
391 <label class="custom-control-label"
392 for="customControlValidation5">config-assign1</label>
397 <div class="actionName">
398 <div class="custom-control custom-checkbox">
399 <input type="checkbox"
400 class="custom-control-input"
401 id="customControlValidation5"
403 <label class="custom-control-label"
404 for="customControlValidation5">config-assign1</label>
409 <div class="actionName">
410 <div class="custom-control custom-checkbox">
411 <input type="checkbox"
412 class="custom-control-input"
413 id="customControlValidation5"
415 <label class="custom-control-label"
416 for="customControlValidation5">config-assign1</label>
421 <div class="actionName">
422 <div class="custom-control custom-checkbox">
423 <input type="checkbox"
424 class="custom-control-input"
425 id="customControlValidation5"
427 <label class="custom-control-label"
428 for="customControlValidation5">config-assign1</label>
433 <div class="actionName">
434 <div class="custom-control custom-checkbox">
435 <input type="checkbox"
436 class="custom-control-input"
437 id="customControlValidation5"
439 <label class="custom-control-label"
440 for="customControlValidation5">config-assign1</label>
445 <div class="actionName">
446 <div class="custom-control custom-checkbox">
447 <input type="checkbox"
448 class="custom-control-input"
449 id="customControlValidation5"
451 <label class="custom-control-label"
452 for="customControlValidation5">config-assign1</label>
457 <div class="actionName">
458 <div class="custom-control custom-checkbox">
459 <input type="checkbox"
460 class="custom-control-input"
461 id="customControlValidation5"
463 <label class="custom-control-label"
464 for="customControlValidation5">config-assign1</label>
470 <div class="col text-center">
471 <p class="selectedActions">0 selected</p>
472 <button type="button" data-dismiss="modal"
473 (click)="goToDesignerMode(viewedPackage.id)"
474 class="btn submit">Start
480 <!--Recent Actions Form-->
481 <div class="carousel-item">
482 <button data-target="#carouselExampleIndicators"
483 data-slide-to="0" title="Back" class="btn back"><i
484 class="icon-action-back"></i></button>
485 <h1>Choose Action(s) from Recent Packages</h1>
486 <div class="actionFormWrapper">
487 <div class="row mb-3">
488 <div class="col sort-packages">
489 <label class="actionlabel">Package
491 <div class="dropdown">
492 <input class="dropdown-toggle" type="text">
493 <div class="dropdown-text">CDS (v 1.0.0)
495 <ul class="dropdown-content">
497 <a>Test Package (v 1.1.8)</a>
500 <a>Test Package (v 1.1.8)</a>
503 <a>Test Package (v 1.1.8)</a>
506 <a>Test Package (v 1.1.8)</a>
512 <input type="text" class="form-control searchInput"
513 placeholder="Search">
516 <div class="row actionsListScroll">
518 <div class="actionName">
519 <div class="custom-control custom-checkbox">
520 <input type="checkbox"
521 class="custom-control-input"
522 id="customControlValidation1"
524 <label class="custom-control-label"
525 for="customControlValidation1">config-assign</label>
530 <div class="actionName">
531 <div class="custom-control custom-checkbox">
532 <input type="checkbox"
533 class="custom-control-input"
534 id="customControlValidation2"
536 <label class="custom-control-label"
537 for="customControlValidation2">config-assign-test</label>
542 <div class="actionName">
543 <div class="custom-control custom-checkbox">
544 <input type="checkbox"
545 class="custom-control-input"
546 id="customControlValidation3"
548 <label class="custom-control-label"
549 for="customControlValidation3">config-deploy</label>
554 <div class="actionName">
555 <div class="custom-control custom-checkbox">
556 <input type="checkbox"
557 class="custom-control-input"
558 id="customControlValidation4"
560 <label class="custom-control-label"
561 for="customControlValidation4">config-modify</label>
566 <div class="actionName">
567 <div class="custom-control custom-checkbox">
568 <input type="checkbox"
569 class="custom-control-input"
570 id="customControlValidation5"
572 <label class="custom-control-label"
573 for="customControlValidation5">config-assign1</label>
578 <div class="actionName">
579 <div class="custom-control custom-checkbox">
580 <input type="checkbox"
581 class="custom-control-input"
582 id="customControlValidation5"
584 <label class="custom-control-label"
585 for="customControlValidation5">config-assign1</label>
590 <div class="actionName">
591 <div class="custom-control custom-checkbox">
592 <input type="checkbox"
593 class="custom-control-input"
594 id="customControlValidation5"
596 <label class="custom-control-label"
597 for="customControlValidation5">config-assign1</label>
602 <div class="actionName">
603 <div class="custom-control custom-checkbox">
604 <input type="checkbox"
605 class="custom-control-input"
606 id="customControlValidation5"
608 <label class="custom-control-label"
609 for="customControlValidation5">config-assign1</label>
614 <div class="actionName">
615 <div class="custom-control custom-checkbox">
616 <input type="checkbox"
617 class="custom-control-input"
618 id="customControlValidation5"
620 <label class="custom-control-label"
621 for="customControlValidation5">config-assign1</label>
626 <div class="actionName">
627 <div class="custom-control custom-checkbox">
628 <input type="checkbox"
629 class="custom-control-input"
630 id="customControlValidation5"
632 <label class="custom-control-label"
633 for="customControlValidation5">config-assign1</label>
638 <div class="actionName">
639 <div class="custom-control custom-checkbox">
640 <input type="checkbox"
641 class="custom-control-input"
642 id="customControlValidation5"
644 <label class="custom-control-label"
645 for="customControlValidation5">config-assign1</label>
651 <div class="col text-center">
652 <p class="selectedActions">0 selected</p>
653 <button type="button" class="btn submit">Start
659 <!--Import Actions Form-->
660 <div class="carousel-item">
661 <button data-target="#carouselExampleIndicators"
662 data-slide-to="0" title="Back" class="btn back"><i
663 class="icon-action-back"></i></button>
664 <h1>Import Action(s)</h1>
665 <div class="actionFormWrapper">
668 <ngx-file-drop accept=".json"
669 dropZoneLabel="Drop files here"
670 (onFileDrop)="dropped($event)"
671 (onFileOver)="fileOver($event)"
672 (onFileLeave)="fileLeave($event)">
673 <ng-template ngx-file-drop-content-tmp
674 let-openFileSelector="openFileSelector">
675 <div class="folder-upload">
677 src="assets/img/folder-upload.svg"/>
679 <div class="folder-upload-text">
682 <div class="folder-upload-text">or
683 <button type="button"
684 class="btn btn-sm btn-primary"
685 (click)="openFileSelector()">
690 <div class="folder-upload-type">
696 <div class="upload-table">
697 <table class="table">
700 *ngFor="let item of uploadedFiles; let i=index">
702 src="assets/img/icon-file-code.svg"/>
704 <th>{{ item.name }}</th>
705 <th width="40" class="text-right">
707 src="assets/img/icon-remove-file.svg"/>
716 <div class="col text-center">
717 <button type="button" class="btn submit mt-4">Import
729 <button type="button" class="btn btn-sm mb-2 btn-enrich" (click)="enrichBluePrint()">
730 <!-- data-toggle="modal" data-target="#enrichModal"-->
732 <i class="icon-enrich" aria-hidden="true"></i> Enrich
736 <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"><i
737 class="fa fa-play-circle"></i> Deploy
747 <div class="nav nav-tabs " id="nav-tab" role="tablist">
748 <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab"
749 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
750 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
751 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
752 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
753 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
754 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
755 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
756 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
757 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
758 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
759 aria-selected="false">DSL PROPERTIES</a>
760 <a class="nav-item nav-link" id="nav-topologytemplate-tab" data-toggle="tab"
761 href="#nav-topologytemplate" role="tab" aria-controls="nav-authentication"
762 aria-selected="false">Topology Template</a>
767 <div class="row mt-4">
769 <div class="tab-content" id="nav-tabContent" (change)="clickEvent()">
770 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
771 aria-labelledby="nav-metadata-tab">
772 <app-metadata-tab></app-metadata-tab>
774 <div class="tab-pane fade" id="nav-template" role="tabpanel"
775 aria-labelledby="nav-template-tab">
776 <app-template-mapping></app-template-mapping>
778 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
779 aria-labelledby="nav-scripts-tab">
780 <app-scripts-tab></app-scripts-tab>
782 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
783 aria-labelledby="nav-imports-tab">
784 <app-imports-tab></app-imports-tab>
787 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
788 aria-labelledby="nav-authentication-tab">
789 <div class="card creat-card">
790 <div class="editor-container" (change)="clickEvent()">
791 <app-dsl-definitions-tab (changeEvent)="clickEvent()"></app-dsl-definitions-tab>
795 <div class="tab-pane fade" id="nav-topologytemplate" role="tabpanel"
796 aria-labelledby="nav-authentication-tab">
797 <div class="card creat-card">
798 <div class="editor-container">
799 <app-topology-template></app-topology-template>
810 <!-- Enrich Modal -->
811 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
813 <div class="modal-dialog" role="document">
814 <div class="modal-content">
815 <div class="modal-header">
816 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
817 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
818 <img src="assets/img/icon-close.svg"/>
821 <div class="modal-body">
822 <ul class="defintionsNote">
823 <li><b>To do manual enrichment: </b></li>
824 <li>1. Copy and paste "workflows" and "node_templates"</li>
825 <li>2. Press <b>Enrich</b> button</li>
827 <ace-editor [(text)]="this.vlbDefinition.topology_template.content" [mode]="'json'"
828 [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
829 (textChanged)="textChanged($event)" #editor style="height:250px;">
832 <div class="modal-footer">
833 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
834 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
835 (click)="enrichBluePrint()">Enrich
841 <!-- Delete Modal -->
842 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
844 <div class="modal-dialog" role="document">
845 <div class="modal-content">
846 <div class="modal-header">
847 <h5 class="modal-title" id="removePackageModalLabel">Delete Package</h5>
848 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
849 <i class="icon-action-close"></i>
852 <div class="modal-body">
853 <p>Are you sure you want to delete this package?</p>
855 <div class="modal-footer">
856 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
857 <button type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-danger">Delete
864 <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel"
866 <div class="modal-dialog" role="document">
867 <div class="modal-content">
868 <div class="modal-header">
869 <h5 class="modal-title" id="discardChangesModalLabel">Discard Changes</h5>
870 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
871 <i class="icon-action-close"></i>
874 <div class="modal-body">
875 <p>Are you sure you want to discard the changes?</p>
877 <div class="modal-footer">
878 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
879 <button type="button" (click)="discardChanges()" data-dismiss="modal" class="btn btn-primary">Discard