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 dropdown helpMenu">
23 <input class="dropdown-toggle" type="text">
24 <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
25 <ul class="dropdown-content">
27 <i class="icon-get_started" aria-hidden="true"></i>
29 <input id="clicker3" type="checkbox"/>
32 <span>Quick steps to help you get started</span>
37 <i class="icon-get_started" aria-hidden="true"></i>
39 <input id="clicker3" [checked]="startTour" type="checkbox" />
42 <span>Quick steps to help you get started</span>
47 <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
48 <i class="icon-user_guide" aria-hidden="true"></i>
51 <span>CDS Designer's User Guide</span>
58 <div class="nav-item dropdown userMenu">
59 <input class="dropdown-toggle" type="text">
60 <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
61 <ul class="dropdown-content">
63 <a href="#">Username</a>
66 <a href="#">Settings</a>
69 <a href="#">Projects</a>
72 <a href="#">Log out</a>
84 <div class="container-fluid body-container">
85 <ngx-ui-loader></ngx-ui-loader>
86 <div class="container">
87 <div class="creat-action-container">
89 <button class="action-button save" (click)="editBluePrint()" [disabled]="!isSaveEnabled">
90 <i class="icon-save-sm" aria-hidden="true"></i>
93 <button data-target="#discardChangesModal" data-toggle="modal" class="action-button"
94 [disabled]="!isSaveEnabled">
95 <i class="icon-discard-sm" aria-hidden="true"></i>
96 <span>Discard Changes</span>
100 <button class="action-button">
101 <i class="icon-clone-sm" aria-hidden="true"></i>
105 <a href="#" class="action-button">
106 <i class="icon-archive-sm" aria-hidden="true"></i>
110 <a class="action-button"
111 (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
112 <i class="icon-download" aria-hidden="true"></i>
113 <span>Download</span>
116 <a data-target="#removePackageModal" data-toggle="modal" class="action-button delete">
117 <i class="icon-delete-sm" aria-hidden="true"></i>
122 <div class="card creat-card view-package-container">
124 <div class="col-1 text-center"><i class="package-type-icon icon-topologyView-active"></i></div>
126 <div class="row mb-4">
127 <div class="col-12 package-name deployed">
128 {{viewedPackage.artifactName}}
129 <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon">
130 <span class="package-version">v{{viewedPackage.artifactVersion}}</span>
132 <div class="col-12 package-description">
133 Last modified {{ viewedPackage.createdDate | date:'short' }} By
134 {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}
137 <div class="row package-auth-info">
139 <p><b>Author Name</b></p>
141 {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
143 <!--<div class="col-4">
144 <p><b>Author Email</b></p>
145 <span>shaaban.eltanany.ext@orange.com</span>
148 <p><b>Contributions</b></p>
149 <ul class="package-contributers">
151 <button type="button" class="border-fade" data-toggle="tooltip"
152 data-placement="bottom" title="User name">
153 <img src="/assets/img/img-user1.jpeg">
157 <button type="button" data-toggle="tooltip" data-placement="bottom"
159 <img src="/assets/img/img-user2.jpg">
163 <button type="button" data-toggle="tooltip" data-placement="bottom"
165 <img src="/assets/img/img-user3.jpg">
169 <a href="">5 contributors</a>
175 <div class="col-2 package-view-button">
176 <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
179 <!-- Button trigger modal - 1st Action -->
181 <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2"
182 data-toggle="modal" [attr.data-target]="dataTarget">
183 <i class="icon-topologyView-active"></i> Designer Mode
185 <!-- Designer Modal -->
186 <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
187 aria-labelledby="exampleModalLongTitle" aria-hidden="true">
188 <div class="modal-dialog" role="document">
189 <div class="modal-content">
190 <div class="modal-header">
191 <h5 class="modal-title" id="exampleModalLongTitle"></h5>
192 <button type="button" class="close" data-dismiss="modal" aria-label="Close"
194 <i class="icon-action-close"></i>
197 <div class="modal-body">
198 <div id="carouselExampleIndicators" class="carousel slide"
199 data-ride="carousel" data-interval="false">
200 <div class="carousel-inner">
202 <div class="carousel-item active">
203 <h3 class="mainHead">Create an action</h3>
204 <h1>How would you like to get started?</h1>
207 <div class="col-3 d-flex">
209 data-target="#carouselExampleIndicators"
211 <div class="card actionType custom">
212 <div class="card-body">
214 <p>Start with your own settings</p>
216 data-target="#carouselExampleIndicators"
217 data-slide-to="1" class="btn">
224 <!--Default Action-->
225 <div class="col-3 d-flex">
227 data-target="#carouselExampleIndicators"
229 <div class="card actionType default">
230 <div class="card-body">
232 <p>Explore preset actions from CDS
235 data-target="#carouselExampleIndicators"
236 data-slide-to="2" class="btn">
244 <div class="col-3 d-flex">
246 data-target="#carouselExampleIndicators"
248 <div class="card actionType recent">
249 <div class="card-body">
251 <p>Re-use recent actions of your
255 data-target="#carouselExampleIndicators"
256 data-slide-to="3" class="btn">
264 <div class="col-3 d-flex">
266 data-target="#carouselExampleIndicators"
268 <div class="card actionType import">
269 <div class="card-body">
271 <p>Import your own action files</p>
273 data-target="#carouselExampleIndicators"
274 data-slide-to="4" class="btn">
283 <div class="col text-center">
284 <button class="btn skip-btn" data-dismiss="modal"
285 (click)="goToDesignerMode(viewedPackage.id)">
292 <!--Custom Action Form-->
293 <div class="carousel-item">
294 <button data-target="#carouselExampleIndicators"
295 data-slide-to="0" title="Back" class="btn back"><i
296 class="icon-action-back"></i></button>
297 <h1>Create Custom Action</h1>
298 <div class="form-group text-center">
299 <input type="text" [(ngModel)]="customActionName"
300 class="form-control customAction"
301 placeholder="Type Action Name" autofocus>
302 <button type="button" data-dismiss="modal"
303 (click)="goToDesignerMode(viewedPackage.id)"
304 class="btn submit">Start
309 <!--Default Actions Form-->
310 <div class="carousel-item">
311 <button data-target="#carouselExampleIndicators"
312 data-slide-to="0" title="Back" class="btn back"><i
313 class="icon-action-back"></i></button>
314 <h1>Choose Action(s) from CDS Default Package </h1>
315 <div class="actionFormWrapper">
316 <div class="row mb-3">
317 <div class="col sort-packages">
318 <label class="actionlabel">Version</label>
319 <div class="dropdown" style="width: 90px">
320 <input class="dropdown-toggle" type="text">
321 <div class="dropdown-text">1.6.2</div>
322 <ul class="dropdown-content">
333 <input type="text" class="form-control searchInput"
334 placeholder="Search">
337 <div class="row actionsListScroll">
339 <div class="actionName">
340 <div class="custom-control custom-checkbox">
341 <input type="checkbox"
342 class="custom-control-input"
343 id="customControlValidation1"
345 <label class="custom-control-label"
346 for="customControlValidation1">config-assign</label>
351 <div class="actionName">
352 <div class="custom-control custom-checkbox">
353 <input type="checkbox"
354 class="custom-control-input"
355 id="customControlValidation2"
357 <label class="custom-control-label"
358 for="customControlValidation2">config-assign-test</label>
363 <div class="actionName">
364 <div class="custom-control custom-checkbox">
365 <input type="checkbox"
366 class="custom-control-input"
367 id="customControlValidation3"
369 <label class="custom-control-label"
370 for="customControlValidation3">config-deploy</label>
375 <div class="actionName">
376 <div class="custom-control custom-checkbox">
377 <input type="checkbox"
378 class="custom-control-input"
379 id="customControlValidation4"
381 <label class="custom-control-label"
382 for="customControlValidation4">config-modify</label>
387 <div class="actionName">
388 <div class="custom-control custom-checkbox">
389 <input type="checkbox"
390 class="custom-control-input"
391 id="customControlValidation5"
393 <label class="custom-control-label"
394 for="customControlValidation5">config-assign1</label>
399 <div class="actionName">
400 <div class="custom-control custom-checkbox">
401 <input type="checkbox"
402 class="custom-control-input"
403 id="customControlValidation5"
405 <label class="custom-control-label"
406 for="customControlValidation5">config-assign1</label>
411 <div class="actionName">
412 <div class="custom-control custom-checkbox">
413 <input type="checkbox"
414 class="custom-control-input"
415 id="customControlValidation5"
417 <label class="custom-control-label"
418 for="customControlValidation5">config-assign1</label>
423 <div class="actionName">
424 <div class="custom-control custom-checkbox">
425 <input type="checkbox"
426 class="custom-control-input"
427 id="customControlValidation5"
429 <label class="custom-control-label"
430 for="customControlValidation5">config-assign1</label>
435 <div class="actionName">
436 <div class="custom-control custom-checkbox">
437 <input type="checkbox"
438 class="custom-control-input"
439 id="customControlValidation5"
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"
453 <label class="custom-control-label"
454 for="customControlValidation5">config-assign1</label>
459 <div class="actionName">
460 <div class="custom-control custom-checkbox">
461 <input type="checkbox"
462 class="custom-control-input"
463 id="customControlValidation5"
465 <label class="custom-control-label"
466 for="customControlValidation5">config-assign1</label>
472 <div class="col text-center">
473 <p class="selectedActions">0 selected</p>
474 <button type="button" data-dismiss="modal"
475 (click)="goToDesignerMode(viewedPackage.id)"
476 class="btn submit">Start
482 <!--Recent Actions Form-->
483 <div class="carousel-item">
484 <button data-target="#carouselExampleIndicators"
485 data-slide-to="0" title="Back" class="btn back"><i
486 class="icon-action-back"></i></button>
487 <h1>Choose Action(s) from Recent Packages</h1>
488 <div class="actionFormWrapper">
489 <div class="row mb-3">
490 <div class="col sort-packages">
491 <label class="actionlabel">Package
493 <div class="dropdown">
494 <input class="dropdown-toggle" type="text">
495 <div class="dropdown-text">CDS (v 1.0.0)
497 <ul class="dropdown-content">
499 <a>Test Package (v 1.1.8)</a>
502 <a>Test Package (v 1.1.8)</a>
505 <a>Test Package (v 1.1.8)</a>
508 <a>Test Package (v 1.1.8)</a>
514 <input type="text" class="form-control searchInput"
515 placeholder="Search">
518 <div class="row actionsListScroll">
520 <div class="actionName">
521 <div class="custom-control custom-checkbox">
522 <input type="checkbox"
523 class="custom-control-input"
524 id="customControlValidation1"
526 <label class="custom-control-label"
527 for="customControlValidation1">config-assign</label>
532 <div class="actionName">
533 <div class="custom-control custom-checkbox">
534 <input type="checkbox"
535 class="custom-control-input"
536 id="customControlValidation2"
538 <label class="custom-control-label"
539 for="customControlValidation2">config-assign-test</label>
544 <div class="actionName">
545 <div class="custom-control custom-checkbox">
546 <input type="checkbox"
547 class="custom-control-input"
548 id="customControlValidation3"
550 <label class="custom-control-label"
551 for="customControlValidation3">config-deploy</label>
556 <div class="actionName">
557 <div class="custom-control custom-checkbox">
558 <input type="checkbox"
559 class="custom-control-input"
560 id="customControlValidation4"
562 <label class="custom-control-label"
563 for="customControlValidation4">config-modify</label>
568 <div class="actionName">
569 <div class="custom-control custom-checkbox">
570 <input type="checkbox"
571 class="custom-control-input"
572 id="customControlValidation5"
574 <label class="custom-control-label"
575 for="customControlValidation5">config-assign1</label>
580 <div class="actionName">
581 <div class="custom-control custom-checkbox">
582 <input type="checkbox"
583 class="custom-control-input"
584 id="customControlValidation5"
586 <label class="custom-control-label"
587 for="customControlValidation5">config-assign1</label>
592 <div class="actionName">
593 <div class="custom-control custom-checkbox">
594 <input type="checkbox"
595 class="custom-control-input"
596 id="customControlValidation5"
598 <label class="custom-control-label"
599 for="customControlValidation5">config-assign1</label>
604 <div class="actionName">
605 <div class="custom-control custom-checkbox">
606 <input type="checkbox"
607 class="custom-control-input"
608 id="customControlValidation5"
610 <label class="custom-control-label"
611 for="customControlValidation5">config-assign1</label>
616 <div class="actionName">
617 <div class="custom-control custom-checkbox">
618 <input type="checkbox"
619 class="custom-control-input"
620 id="customControlValidation5"
622 <label class="custom-control-label"
623 for="customControlValidation5">config-assign1</label>
628 <div class="actionName">
629 <div class="custom-control custom-checkbox">
630 <input type="checkbox"
631 class="custom-control-input"
632 id="customControlValidation5"
634 <label class="custom-control-label"
635 for="customControlValidation5">config-assign1</label>
640 <div class="actionName">
641 <div class="custom-control custom-checkbox">
642 <input type="checkbox"
643 class="custom-control-input"
644 id="customControlValidation5"
646 <label class="custom-control-label"
647 for="customControlValidation5">config-assign1</label>
653 <div class="col text-center">
654 <p class="selectedActions">0 selected</p>
655 <button type="button" class="btn submit">Start
661 <!--Import Actions Form-->
662 <div class="carousel-item">
663 <button data-target="#carouselExampleIndicators"
664 data-slide-to="0" title="Back" class="btn back"><i
665 class="icon-action-back"></i></button>
666 <h1>Import Action(s)</h1>
667 <div class="actionFormWrapper">
670 <ngx-file-drop accept=".json"
671 dropZoneLabel="Drop files here"
672 (onFileDrop)="dropped($event)"
673 (onFileOver)="fileOver($event)"
674 (onFileLeave)="fileLeave($event)">
675 <ng-template ngx-file-drop-content-tmp
676 let-openFileSelector="openFileSelector">
677 <div class="folder-upload">
679 src="assets/img/folder-upload.svg"/>
681 <div class="folder-upload-text">
684 <div class="folder-upload-text">or
685 <button type="button"
686 class="btn btn-sm btn-primary"
687 (click)="openFileSelector()">
692 <div class="folder-upload-type">
698 <div class="upload-table">
699 <table class="table">
702 *ngFor="let item of uploadedFiles; let i=index">
704 src="assets/img/icon-file-code.svg"/>
706 <th>{{ item.name }}</th>
707 <th width="40" class="text-right">
709 src="assets/img/icon-remove-file.svg"/>
718 <div class="col text-center">
719 <button type="button" class="btn submit mt-4">Import
731 <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
732 data-target="#enrichModal">
733 <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
737 <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"><i
738 class="fa fa-play-circle"></i> Deploy
748 <div class="nav nav-tabs " id="nav-tab" role="tablist">
749 <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab"
750 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
751 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
752 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
753 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
754 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
755 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
756 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
757 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
758 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
759 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
760 aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
765 <div class="row mt-4">
767 <div class="tab-content" id="nav-tabContent" (change)="clickEvent()">
768 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
769 aria-labelledby="nav-metadata-tab">
770 <app-metadata-tab></app-metadata-tab>
772 <div class="tab-pane fade" id="nav-template" role="tabpanel"
773 aria-labelledby="nav-template-tab">
774 <app-template-mapping></app-template-mapping>
776 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
777 aria-labelledby="nav-scripts-tab">
778 <app-scripts-tab></app-scripts-tab>
780 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
781 aria-labelledby="nav-imports-tab">
782 <app-imports-tab></app-imports-tab>
785 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
786 aria-labelledby="nav-authentication-tab">
787 <div class="card creat-card">
788 <div class="editor-container">
789 <app-dsl-definitions-tab></app-dsl-definitions-tab>
801 <!-- Enrich Modal -->
802 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
804 <div class="modal-dialog" role="document">
805 <div class="modal-content">
806 <div class="modal-header">
807 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
808 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
809 <img src="assets/img/icon-close.svg"/>
812 <div class="modal-body">
813 <ul class="defintionsNote">
814 <li><b>To do manual enrichment: </b></li>
815 <li>1. Copy and paste "workflows" and "node_templates"</li>
816 <li>2. Press <b>Enrich</b> button</li>
818 <ace-editor [(text)]="this.vlbDefinition.topology_template.content" [mode]="'json'"
819 [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
820 (textChanged)="textChanged($event)"
821 #editor style="height:300px;">
824 <div class="modal-footer">
825 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
826 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
827 (click)="enrichBluePrint()">Enrich
833 <!-- Delete Modal -->
834 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
836 <div class="modal-dialog" role="document">
837 <div class="modal-content">
838 <div class="modal-header">
839 <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5>
840 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
841 <i class="icon-action-close"></i>
844 <div class="modal-body">
845 <p>Are you sure you want to delete this package?</p>
847 <div class="modal-footer">
848 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
849 <button type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-primary">Delete
856 <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel"
858 <div class="modal-dialog" role="document">
859 <div class="modal-content">
860 <div class="modal-header">
861 <h5 class="modal-title" id="discardChangesModalLabel">Discard Changes</h5>
862 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
863 <i class="icon-action-close"></i>
866 <div class="modal-body">
867 <p>Are you sure you want to discard the changes?</p>
869 <div class="modal-footer">
870 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
871 <button type="button" (click)="discardChanges()" data-dismiss="modal" class="btn btn-primary">Discard