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">
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>
140 <span> {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
142 <!--<div class="col-4">
143 <p><b>Author Email</b></p>
144 <span>shaaban.eltanany.ext@orange.com</span>
147 <p><b>Contributions</b></p>
148 <ul class="package-contributers">
150 <button type="button" class="border-fade" data-toggle="tooltip"
151 data-placement="bottom" title="User name">
152 <img src="/assets/img/img-user1.jpeg">
156 <button type="button" data-toggle="tooltip" data-placement="bottom"
158 <img src="/assets/img/img-user2.jpg">
162 <button type="button" data-toggle="tooltip" data-placement="bottom"
164 <img src="/assets/img/img-user3.jpg">
168 <a href="">5 contributors</a>
174 <div class="col-2 package-view-button">
175 <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
178 <!-- Button trigger modal - 1st Action -->
180 <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
181 [attr.data-target]="dataTarget">
182 <i class="icon-topologyView-active"></i> Designer Mode
184 <!-- Designer Modal -->
185 <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
186 aria-labelledby="exampleModalLongTitle" aria-hidden="true">
187 <div class="modal-dialog" role="document">
188 <div class="modal-content">
189 <div class="modal-header">
190 <h5 class="modal-title" id="exampleModalLongTitle"></h5>
191 <button type="button" class="close" data-dismiss="modal" aria-label="Close"
193 <i class="icon-action-close"></i>
196 <div class="modal-body">
197 <div id="carouselExampleIndicators" class="carousel slide"
198 data-ride="carousel" data-interval="false">
199 <div class="carousel-inner">
201 <div class="carousel-item active">
202 <h3 class="mainHead">Create an action</h3>
203 <h1>How would you like to get started?</h1>
206 <div class="col-3 d-flex">
208 data-target="#carouselExampleIndicators"
210 <div class="card actionType custom">
211 <div class="card-body">
213 <p>Start with your own settings</p>
215 data-target="#carouselExampleIndicators"
216 data-slide-to="1" class="btn">
223 <!--Default Action-->
224 <div class="col-3 d-flex">
226 data-target="#carouselExampleIndicators"
228 <div class="card actionType default">
229 <div class="card-body">
231 <p>Explore preset actions from CDS
234 data-target="#carouselExampleIndicators"
235 data-slide-to="2" class="btn">
243 <div class="col-3 d-flex">
245 data-target="#carouselExampleIndicators"
247 <div class="card actionType recent">
248 <div class="card-body">
250 <p>Re-use recent actions of your
254 data-target="#carouselExampleIndicators"
255 data-slide-to="3" class="btn">
263 <div class="col-3 d-flex">
265 data-target="#carouselExampleIndicators"
267 <div class="card actionType import">
268 <div class="card-body">
270 <p>Import your own action files</p>
272 data-target="#carouselExampleIndicators"
273 data-slide-to="4" class="btn">
282 <div class="col text-center">
283 <button class="btn skip-btn"
284 (click)="goToDesignerMode(viewedPackage.id)">
291 <!--Custom Action Form-->
292 <div class="carousel-item">
293 <button data-target="#carouselExampleIndicators"
294 data-slide-to="0" title="Back" class="btn back"><i
295 class="icon-action-back"></i></button>
296 <h1>Create Custom Action</h1>
297 <div class="form-group text-center">
298 <input type="text" [(ngModel)]="customActionName"
299 class="form-control customAction"
300 placeholder="Type Action Name" autofocus>
301 <button type="button"
302 (click)="goToDesignerMode(viewedPackage.id)"
303 class="btn submit">Start
308 <!--Default Actions Form-->
309 <div class="carousel-item">
310 <button data-target="#carouselExampleIndicators"
311 data-slide-to="0" title="Back" class="btn back"><i
312 class="icon-action-back"></i></button>
313 <h1>Choose Action(s) from CDS Default Package </h1>
314 <div class="actionFormWrapper">
315 <div class="row mb-3">
316 <div class="col sort-packages">
317 <label class="actionlabel">Version</label>
318 <div class="dropdown" style="width: 90px">
319 <input class="dropdown-toggle" type="text">
320 <div class="dropdown-text">1.6.2</div>
321 <ul class="dropdown-content">
332 <input type="text" class="form-control searchInput"
333 placeholder="Search">
336 <div class="row actionsListScroll">
338 <div class="actionName">
339 <div class="custom-control custom-checkbox">
340 <input type="checkbox"
341 class="custom-control-input"
342 id="customControlValidation1"
344 <label class="custom-control-label"
345 for="customControlValidation1">config-assign</label>
350 <div class="actionName">
351 <div class="custom-control custom-checkbox">
352 <input type="checkbox"
353 class="custom-control-input"
354 id="customControlValidation2"
356 <label class="custom-control-label"
357 for="customControlValidation2">config-assign-test</label>
362 <div class="actionName">
363 <div class="custom-control custom-checkbox">
364 <input type="checkbox"
365 class="custom-control-input"
366 id="customControlValidation3"
368 <label class="custom-control-label"
369 for="customControlValidation3">config-deploy</label>
374 <div class="actionName">
375 <div class="custom-control custom-checkbox">
376 <input type="checkbox"
377 class="custom-control-input"
378 id="customControlValidation4"
380 <label class="custom-control-label"
381 for="customControlValidation4">config-modify</label>
386 <div class="actionName">
387 <div class="custom-control custom-checkbox">
388 <input type="checkbox"
389 class="custom-control-input"
390 id="customControlValidation5"
392 <label class="custom-control-label"
393 for="customControlValidation5">config-assign1</label>
398 <div class="actionName">
399 <div class="custom-control custom-checkbox">
400 <input type="checkbox"
401 class="custom-control-input"
402 id="customControlValidation5"
404 <label class="custom-control-label"
405 for="customControlValidation5">config-assign1</label>
410 <div class="actionName">
411 <div class="custom-control custom-checkbox">
412 <input type="checkbox"
413 class="custom-control-input"
414 id="customControlValidation5"
416 <label class="custom-control-label"
417 for="customControlValidation5">config-assign1</label>
422 <div class="actionName">
423 <div class="custom-control custom-checkbox">
424 <input type="checkbox"
425 class="custom-control-input"
426 id="customControlValidation5"
428 <label class="custom-control-label"
429 for="customControlValidation5">config-assign1</label>
434 <div class="actionName">
435 <div class="custom-control custom-checkbox">
436 <input type="checkbox"
437 class="custom-control-input"
438 id="customControlValidation5"
440 <label class="custom-control-label"
441 for="customControlValidation5">config-assign1</label>
446 <div class="actionName">
447 <div class="custom-control custom-checkbox">
448 <input type="checkbox"
449 class="custom-control-input"
450 id="customControlValidation5"
452 <label class="custom-control-label"
453 for="customControlValidation5">config-assign1</label>
458 <div class="actionName">
459 <div class="custom-control custom-checkbox">
460 <input type="checkbox"
461 class="custom-control-input"
462 id="customControlValidation5"
464 <label class="custom-control-label"
465 for="customControlValidation5">config-assign1</label>
471 <div class="col text-center">
472 <p class="selectedActions">0 selected</p>
473 <button type="button"
474 (click)="goToDesignerMode(viewedPackage.id)"
475 class="btn submit">Start
481 <!--Recent Actions Form-->
482 <div class="carousel-item">
483 <button data-target="#carouselExampleIndicators"
484 data-slide-to="0" title="Back" class="btn back"><i
485 class="icon-action-back"></i></button>
486 <h1>Choose Action(s) from Recent Packages</h1>
487 <div class="actionFormWrapper">
488 <div class="row mb-3">
489 <div class="col sort-packages">
490 <label class="actionlabel">Package
492 <div class="dropdown">
493 <input class="dropdown-toggle" type="text">
494 <div class="dropdown-text">CDS (v 1.0.0)
496 <ul class="dropdown-content">
498 <a>Test Package (v 1.1.8)</a>
501 <a>Test Package (v 1.1.8)</a>
504 <a>Test Package (v 1.1.8)</a>
507 <a>Test Package (v 1.1.8)</a>
513 <input type="text" class="form-control searchInput"
514 placeholder="Search">
517 <div class="row actionsListScroll">
519 <div class="actionName">
520 <div class="custom-control custom-checkbox">
521 <input type="checkbox"
522 class="custom-control-input"
523 id="customControlValidation1"
525 <label class="custom-control-label"
526 for="customControlValidation1">config-assign</label>
531 <div class="actionName">
532 <div class="custom-control custom-checkbox">
533 <input type="checkbox"
534 class="custom-control-input"
535 id="customControlValidation2"
537 <label class="custom-control-label"
538 for="customControlValidation2">config-assign-test</label>
543 <div class="actionName">
544 <div class="custom-control custom-checkbox">
545 <input type="checkbox"
546 class="custom-control-input"
547 id="customControlValidation3"
549 <label class="custom-control-label"
550 for="customControlValidation3">config-deploy</label>
555 <div class="actionName">
556 <div class="custom-control custom-checkbox">
557 <input type="checkbox"
558 class="custom-control-input"
559 id="customControlValidation4"
561 <label class="custom-control-label"
562 for="customControlValidation4">config-modify</label>
567 <div class="actionName">
568 <div class="custom-control custom-checkbox">
569 <input type="checkbox"
570 class="custom-control-input"
571 id="customControlValidation5"
573 <label class="custom-control-label"
574 for="customControlValidation5">config-assign1</label>
579 <div class="actionName">
580 <div class="custom-control custom-checkbox">
581 <input type="checkbox"
582 class="custom-control-input"
583 id="customControlValidation5"
585 <label class="custom-control-label"
586 for="customControlValidation5">config-assign1</label>
591 <div class="actionName">
592 <div class="custom-control custom-checkbox">
593 <input type="checkbox"
594 class="custom-control-input"
595 id="customControlValidation5"
597 <label class="custom-control-label"
598 for="customControlValidation5">config-assign1</label>
603 <div class="actionName">
604 <div class="custom-control custom-checkbox">
605 <input type="checkbox"
606 class="custom-control-input"
607 id="customControlValidation5"
609 <label class="custom-control-label"
610 for="customControlValidation5">config-assign1</label>
615 <div class="actionName">
616 <div class="custom-control custom-checkbox">
617 <input type="checkbox"
618 class="custom-control-input"
619 id="customControlValidation5"
621 <label class="custom-control-label"
622 for="customControlValidation5">config-assign1</label>
627 <div class="actionName">
628 <div class="custom-control custom-checkbox">
629 <input type="checkbox"
630 class="custom-control-input"
631 id="customControlValidation5"
633 <label class="custom-control-label"
634 for="customControlValidation5">config-assign1</label>
639 <div class="actionName">
640 <div class="custom-control custom-checkbox">
641 <input type="checkbox"
642 class="custom-control-input"
643 id="customControlValidation5"
645 <label class="custom-control-label"
646 for="customControlValidation5">config-assign1</label>
652 <div class="col text-center">
653 <p class="selectedActions">0 selected</p>
654 <button type="button"
655 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"
720 class="btn submit mt-4">Import
732 <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
733 data-target="#enrichModal">
734 <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
738 <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"><i
739 class="fa fa-play-circle"></i> Deploy
749 <div class="nav nav-tabs " id="nav-tab" role="tablist">
750 <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab"
751 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
752 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
753 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
754 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
755 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
756 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
757 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
758 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
759 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
760 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
761 aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
766 <div class="row mt-4">
768 <div class="tab-content" id="nav-tabContent" (change)="clickEvent()">
769 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
770 aria-labelledby="nav-metadata-tab">
771 <app-metadata-tab></app-metadata-tab>
773 <div class="tab-pane fade" id="nav-template" role="tabpanel"
774 aria-labelledby="nav-template-tab">
775 <app-template-mapping></app-template-mapping>
777 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
778 aria-labelledby="nav-scripts-tab">
779 <app-scripts-tab></app-scripts-tab>
781 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
782 aria-labelledby="nav-imports-tab">
783 <app-imports-tab></app-imports-tab>
786 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
787 aria-labelledby="nav-authentication-tab">
788 <div class="card creat-card">
789 <div class="editor-container">
790 <app-dsl-definitions-tab></app-dsl-definitions-tab>
802 <!-- Enrich Modal -->
803 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
805 <div class="modal-dialog" role="document">
806 <div class="modal-content">
807 <div class="modal-header">
808 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
809 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
810 <img src="assets/img/icon-close.svg"/>
813 <div class="modal-body">
814 <ul class="defintionsNote">
815 <li><b>To do manual enrichment: </b></li>
816 <li>1. Copy and paste "workflows" and "node_templates"</li>
817 <li>2. Press <b>Enrich</b> button</li>
819 <ace-editor [(text)]="vlbDefinition.topology_template.content" [mode]="'javascript'"
820 [autoUpdateContent]="true"
821 [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'"
823 style="height:300px;">
826 <div class="modal-footer">
827 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
828 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
829 (click)="enrichBluePrint()">Enrich
835 <!-- Delete Modal -->
836 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
838 <div class="modal-dialog" role="document">
839 <div class="modal-content">
840 <div class="modal-header">
841 <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5>
842 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
843 <i class="icon-action-close"></i>
846 <div class="modal-body">
847 <p>Are you sure you want to delete this package?</p>
849 <div class="modal-footer">
850 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
851 <button type="button" (click)="deletePackage()" data-dismiss="modal"
852 class="btn btn-primary">Delete
859 <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel"
861 <div class="modal-dialog" role="document">
862 <div class="modal-content">
863 <div class="modal-header">
864 <h5 class="modal-title" id="discardChangesModalLabel">Discard Changes</h5>
865 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
866 <i class="icon-action-close"></i>
869 <div class="modal-body">
870 <p>Are you sure you want to discard the changes?</p>
872 <div class="modal-footer">
873 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
874 <button type="button" (click)="discardChanges()" data-dismiss="modal"
875 class="btn btn-primary">Discard Changes