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" required>
342 <label class="custom-control-label"
343 for="customControlValidation1">config-assign</label>
348 <div class="actionName">
349 <div class="custom-control custom-checkbox">
350 <input type="checkbox"
351 class="custom-control-input"
352 id="customControlValidation2" required>
353 <label class="custom-control-label"
354 for="customControlValidation2">config-assign-test</label>
359 <div class="actionName">
360 <div class="custom-control custom-checkbox">
361 <input type="checkbox"
362 class="custom-control-input"
363 id="customControlValidation3" required>
364 <label class="custom-control-label"
365 for="customControlValidation3">config-deploy</label>
370 <div class="actionName">
371 <div class="custom-control custom-checkbox">
372 <input type="checkbox"
373 class="custom-control-input"
374 id="customControlValidation4" required>
375 <label class="custom-control-label"
376 for="customControlValidation4">config-modify</label>
381 <div class="actionName">
382 <div class="custom-control custom-checkbox">
383 <input type="checkbox"
384 class="custom-control-input"
385 id="customControlValidation5" required>
386 <label class="custom-control-label"
387 for="customControlValidation5">config-assign1</label>
392 <div class="actionName">
393 <div class="custom-control custom-checkbox">
394 <input type="checkbox"
395 class="custom-control-input"
396 id="customControlValidation5" required>
397 <label class="custom-control-label"
398 for="customControlValidation5">config-assign1</label>
403 <div class="actionName">
404 <div class="custom-control custom-checkbox">
405 <input type="checkbox"
406 class="custom-control-input"
407 id="customControlValidation5" required>
408 <label class="custom-control-label"
409 for="customControlValidation5">config-assign1</label>
414 <div class="actionName">
415 <div class="custom-control custom-checkbox">
416 <input type="checkbox"
417 class="custom-control-input"
418 id="customControlValidation5" required>
419 <label class="custom-control-label"
420 for="customControlValidation5">config-assign1</label>
425 <div class="actionName">
426 <div class="custom-control custom-checkbox">
427 <input type="checkbox"
428 class="custom-control-input"
429 id="customControlValidation5" required>
430 <label class="custom-control-label"
431 for="customControlValidation5">config-assign1</label>
436 <div class="actionName">
437 <div class="custom-control custom-checkbox">
438 <input type="checkbox"
439 class="custom-control-input"
440 id="customControlValidation5" required>
441 <label class="custom-control-label"
442 for="customControlValidation5">config-assign1</label>
447 <div class="actionName">
448 <div class="custom-control custom-checkbox">
449 <input type="checkbox"
450 class="custom-control-input"
451 id="customControlValidation5" required>
452 <label class="custom-control-label"
453 for="customControlValidation5">config-assign1</label>
459 <div class="col text-center">
460 <p class="selectedActions">0 selected</p>
461 <button type="button" data-dismiss="modal"
462 (click)="goToDesignerMode(viewedPackage.id)"
463 class="btn submit">Start
469 <!--Recent Actions Form-->
470 <div class="carousel-item">
471 <button data-target="#carouselExampleIndicators"
472 data-slide-to="0" title="Back" class="btn back"><i
473 class="icon-action-back"></i></button>
474 <h1>Choose Action(s) from Recent Packages</h1>
475 <div class="actionFormWrapper">
476 <div class="row mb-3">
477 <div class="col sort-packages">
478 <label class="actionlabel">Package
480 <div class="dropdown">
481 <input class="dropdown-toggle" type="text">
482 <div class="dropdown-text">CDS (v 1.0.0)
484 <ul class="dropdown-content">
486 <a>Test Package (v 1.1.8)</a>
489 <a>Test Package (v 1.1.8)</a>
492 <a>Test Package (v 1.1.8)</a>
495 <a>Test Package (v 1.1.8)</a>
501 <input type="text" class="form-control searchInput"
502 placeholder="Search">
505 <div class="row actionsListScroll">
507 <div class="actionName">
508 <div class="custom-control custom-checkbox">
509 <input type="checkbox"
510 class="custom-control-input"
511 id="customControlValidation1" required>
512 <label class="custom-control-label"
513 for="customControlValidation1">config-assign</label>
518 <div class="actionName">
519 <div class="custom-control custom-checkbox">
520 <input type="checkbox"
521 class="custom-control-input"
522 id="customControlValidation2" required>
523 <label class="custom-control-label"
524 for="customControlValidation2">config-assign-test</label>
529 <div class="actionName">
530 <div class="custom-control custom-checkbox">
531 <input type="checkbox"
532 class="custom-control-input"
533 id="customControlValidation3" required>
534 <label class="custom-control-label"
535 for="customControlValidation3">config-deploy</label>
540 <div class="actionName">
541 <div class="custom-control custom-checkbox">
542 <input type="checkbox"
543 class="custom-control-input"
544 id="customControlValidation4" required>
545 <label class="custom-control-label"
546 for="customControlValidation4">config-modify</label>
551 <div class="actionName">
552 <div class="custom-control custom-checkbox">
553 <input type="checkbox"
554 class="custom-control-input"
555 id="customControlValidation5" required>
556 <label class="custom-control-label"
557 for="customControlValidation5">config-assign1</label>
562 <div class="actionName">
563 <div class="custom-control custom-checkbox">
564 <input type="checkbox"
565 class="custom-control-input"
566 id="customControlValidation5" required>
567 <label class="custom-control-label"
568 for="customControlValidation5">config-assign1</label>
573 <div class="actionName">
574 <div class="custom-control custom-checkbox">
575 <input type="checkbox"
576 class="custom-control-input"
577 id="customControlValidation5" required>
578 <label class="custom-control-label"
579 for="customControlValidation5">config-assign1</label>
584 <div class="actionName">
585 <div class="custom-control custom-checkbox">
586 <input type="checkbox"
587 class="custom-control-input"
588 id="customControlValidation5" required>
589 <label class="custom-control-label"
590 for="customControlValidation5">config-assign1</label>
595 <div class="actionName">
596 <div class="custom-control custom-checkbox">
597 <input type="checkbox"
598 class="custom-control-input"
599 id="customControlValidation5" required>
600 <label class="custom-control-label"
601 for="customControlValidation5">config-assign1</label>
606 <div class="actionName">
607 <div class="custom-control custom-checkbox">
608 <input type="checkbox"
609 class="custom-control-input"
610 id="customControlValidation5" required>
611 <label class="custom-control-label"
612 for="customControlValidation5">config-assign1</label>
617 <div class="actionName">
618 <div class="custom-control custom-checkbox">
619 <input type="checkbox"
620 class="custom-control-input"
621 id="customControlValidation5" required>
622 <label class="custom-control-label"
623 for="customControlValidation5">config-assign1</label>
629 <div class="col text-center">
630 <p class="selectedActions">0 selected</p>
631 <button type="button" class="btn submit">Start
637 <!--Import Actions Form-->
638 <div class="carousel-item">
639 <button data-target="#carouselExampleIndicators"
640 data-slide-to="0" title="Back" class="btn back"><i
641 class="icon-action-back"></i></button>
642 <h1>Import Action(s)</h1>
643 <div class="actionFormWrapper">
646 <ngx-file-drop accept=".json"
647 dropZoneLabel="Drop files here"
648 (onFileDrop)="dropped($event)"
649 (onFileOver)="fileOver($event)"
650 (onFileLeave)="fileLeave($event)">
651 <ng-template ngx-file-drop-content-tmp
652 let-openFileSelector="openFileSelector">
653 <div class="folder-upload">
655 src="assets/img/folder-upload.svg" />
657 <div class="folder-upload-text">
660 <div class="folder-upload-text">or
661 <button type="button"
662 class="btn btn-sm btn-primary"
663 (click)="openFileSelector()">
668 <div class="folder-upload-type">
674 <div class="upload-table">
675 <table class="table">
678 *ngFor="let item of uploadedFiles; let i=index">
680 src="assets/img/icon-file-code.svg" />
682 <th>{{ item.name }}</th>
683 <th width="40" class="text-right">
685 src="assets/img/icon-remove-file.svg" />
694 <div class="col text-center">
695 <button type="button" class="btn submit mt-4">Import
707 <button type="button" class="btn btn-sm mb-2 btn-enrich" (click)="enrichBlueprint()">
708 <!-- data-toggle="modal" data-target="#enrichModal"-->
710 <i class="icon-enrich" aria-hidden="true"></i> Enrich
714 <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"><i
715 class="fa fa-play-circle"></i> Deploy
725 <div class="nav nav-tabs " id="nav-tab" role="tablist">
726 <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab"
727 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
728 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
729 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
730 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
731 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
732 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
733 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
734 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
735 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
736 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
737 aria-selected="false">DSL PROPERTIES</a>
738 <a class="nav-item nav-link" id="nav-topologytemplate-tab" data-toggle="tab"
739 href="#nav-topologytemplate" role="tab" aria-controls="nav-authentication"
740 aria-selected="false">Topology Template</a>
745 <div class="row mt-4">
747 <div class="tab-content" id="nav-tabContent" (change)="clickEvent()">
748 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
749 aria-labelledby="nav-metadata-tab">
750 <app-metadata-tab></app-metadata-tab>
752 <div class="tab-pane fade" id="nav-template" role="tabpanel"
753 aria-labelledby="nav-template-tab">
754 <app-template-mapping></app-template-mapping>
756 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
757 aria-labelledby="nav-scripts-tab">
758 <app-scripts-tab></app-scripts-tab>
760 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
761 aria-labelledby="nav-imports-tab">
762 <app-imports-tab></app-imports-tab>
765 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
766 aria-labelledby="nav-authentication-tab">
767 <div class="card creat-card">
768 <div class="editor-container">
769 <app-dsl-definitions-tab></app-dsl-definitions-tab>
773 <div class="tab-pane fade" id="nav-topologytemplate" role="tabpanel"
774 aria-labelledby="nav-authentication-tab">
775 <div class="card creat-card">
776 <div class="editor-container">
777 <app-topology-template></app-topology-template>
788 <!-- Enrich Modal -->
789 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
791 <div class="modal-dialog" role="document">
792 <div class="modal-content">
793 <div class="modal-header">
794 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
795 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
796 <img src="assets/img/icon-close.svg" />
799 <div class="modal-body">
800 <ul class="defintionsNote">
801 <li><b>To do manual enrichment: </b></li>
802 <li>1. Copy and paste "workflows" and "node_templates"</li>
803 <li>2. Press <b>Enrich</b> button</li>
805 <ace-editor [(text)]="this.vlbDefinition.topology_template.content" [mode]="'json'"
806 [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
807 (textChanged)="textChanged($event)" #editor style="height:250px;">
810 <div class="modal-footer">
811 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
812 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
813 (click)="enrichBlueprint()">Enrich
819 <!-- Delete Modal -->
820 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
822 <div class="modal-dialog" role="document">
823 <div class="modal-content">
824 <div class="modal-header">
825 <h5 class="modal-title" id="removePackageModalLabel">Delete Package</h5>
826 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
827 <i class="icon-action-close"></i>
830 <div class="modal-body">
831 <p>Are you sure you want to delete this package?</p>
833 <div class="modal-footer">
834 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
835 <button type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-danger">Delete
842 <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel"
844 <div class="modal-dialog" role="document">
845 <div class="modal-content">
846 <div class="modal-header">
847 <h5 class="modal-title" id="discardChangesModalLabel">Discard Changes</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 discard the changes?</p>
855 <div class="modal-footer">
856 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
857 <button type="button" (click)="discardChanges()" data-dismiss="modal" class="btn btn-primary">Discard