1 <app-header></app-header>
3 <div class="new-wrapper">
4 <div class="container-fluid main-container">
5 <header class="page-title">
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>
20 <div class="container-fluid body-container">
22 <div class="container">
23 <div class="creat-action-container">
25 <a class="action-button save" (click)="editBluePrint()">
26 <i class="icon-save-sm" aria-hidden="true"></i>
29 <a class="action-button" (click)="discardChanges()">
30 <i class="icon-discard-sm" aria-hidden="true"></i>
31 <span>Discard Changes</span>
35 <a class="action-button">
36 <i class="icon-clone-sm" aria-hidden="true"></i>
40 <a href="#" class="action-button">
41 <i class="icon-archive-sm" aria-hidden="true"></i>
45 <a class="action-button"
46 (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
47 <i class="icon-download" aria-hidden="true"></i>
51 <a data-target="#removePackageModal" data-toggle="modal" class="action-button">
52 <i class="icon-delete-sm" aria-hidden="true"></i>
57 <div class="card creat-card view-package-container">
59 <div class="col-1 text-center"><i class="package-type-icon icon-topologyView-active"></i></div>
61 <div class="row mb-4">
62 <div class="col-12 package-name deployed">
63 {{viewedPackage.artifactName}}
64 <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon">
65 <span class="package-version">v{{viewedPackage.artifactVersion}}</span>
67 <div class="col-12 package-description">
68 Last modified {{ viewedPackage.createdDate | date:'short' }} By
69 {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}
72 <div class="row package-auth-info">
74 <p><b>Author Name</b></p>
75 <span> {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
77 <!--<div class="col-4">
78 <p><b>Author Email</b></p>
79 <span>shaaban.eltanany.ext@orange.com</span>
82 <p><b>Contributions</b></p>
83 <ul class="package-contributers">
85 <button type="button" class="border-fade" data-toggle="tooltip"
86 data-placement="bottom" title="User name">
87 <img src="/assets/img/img-user1.jpeg">
91 <button type="button" data-toggle="tooltip" data-placement="bottom"
93 <img src="/assets/img/img-user2.jpg">
97 <button type="button" data-toggle="tooltip" data-placement="bottom"
99 <img src="/assets/img/img-user3.jpg">
103 <a href="">5 contributors</a>
109 <div class="col-2 package-view-button">
110 <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
113 <!-- Button trigger modal - 1st Action -->
115 <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
116 data-target="#exampleModalLong">
117 <i class="icon-topologyView-active"></i> Designer Mode
119 <!-- Designer Modal -->
120 <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
121 aria-labelledby="exampleModalLongTitle" aria-hidden="true">
122 <div class="modal-dialog" role="document">
123 <div class="modal-content">
124 <div class="modal-header">
125 <h5 class="modal-title" id="exampleModalLongTitle"></h5>
126 <button type="button" class="close" data-dismiss="modal" aria-label="Close"
128 <i class="icon-action-close"></i>
131 <div class="modal-body">
132 <div id="carouselExampleIndicators" class="carousel slide"
133 data-ride="carousel" data-interval="false">
134 <div class="carousel-inner">
136 <div class="carousel-item active">
137 <h3 class="mainHead">Create an action</h3>
138 <h1>How would you like to get started?</h1>
141 <div class="col-3 d-flex">
143 data-target="#carouselExampleIndicators"
145 <div class="card actionType custom">
146 <div class="card-body">
148 <p>Start with your own settings</p>
150 data-target="#carouselExampleIndicators"
151 data-slide-to="1" class="btn">
158 <!--Default Action-->
159 <div class="col-3 d-flex">
161 data-target="#carouselExampleIndicators"
163 <div class="card actionType default">
164 <div class="card-body">
166 <p>Explore preset actions from CDS
169 data-target="#carouselExampleIndicators"
170 data-slide-to="2" class="btn">
178 <div class="col-3 d-flex">
180 data-target="#carouselExampleIndicators"
182 <div class="card actionType recent">
183 <div class="card-body">
185 <p>Re-use recent actions of your
189 data-target="#carouselExampleIndicators"
190 data-slide-to="3" class="btn">
198 <div class="col-3 d-flex">
200 data-target="#carouselExampleIndicators"
202 <div class="card actionType import">
203 <div class="card-body">
205 <p>Import your own action files</p>
207 data-target="#carouselExampleIndicators"
208 data-slide-to="4" class="btn">
217 <div class="col text-center">
218 <button class="btn skip-btn"
219 (click)="goToDesignerMode(viewedPackage.id)">
226 <!--Custom Action Form-->
227 <div class="carousel-item">
228 <button data-target="#carouselExampleIndicators"
229 data-slide-to="0" title="Back" class="btn back"><i
230 class="icon-action-back"></i></button>
231 <h1>Create Custom Action</h1>
232 <div class="form-group text-center">
233 <input type="text" [(ngModel)]="customActionName"
234 class="form-control customAction"
235 placeholder="Type Action Name" autofocus>
236 <button type="button"
237 (click)="goToDesignerMode(viewedPackage.id)"
238 class="btn submit">Start
243 <!--Default Actions Form-->
244 <div class="carousel-item">
245 <button data-target="#carouselExampleIndicators"
246 data-slide-to="0" title="Back" class="btn back"><i
247 class="icon-action-back"></i></button>
248 <h1>Choose Action(s) from CDS Default Package </h1>
249 <div class="actionFormWrapper">
250 <div class="row mb-3">
251 <div class="col sort-packages">
252 <label class="actionlabel">Version</label>
253 <div class="dropdown" style="width: 90px">
254 <input class="dropdown-toggle" type="text">
255 <div class="dropdown-text">1.6.2</div>
256 <ul class="dropdown-content">
267 <input type="text" class="form-control searchInput"
268 placeholder="Search">
271 <div class="row actionsListScroll">
273 <div class="actionName">
274 <div class="custom-control custom-checkbox">
275 <input type="checkbox"
276 class="custom-control-input"
277 id="customControlValidation1"
279 <label class="custom-control-label"
280 for="customControlValidation1">config-assign</label>
285 <div class="actionName">
286 <div class="custom-control custom-checkbox">
287 <input type="checkbox"
288 class="custom-control-input"
289 id="customControlValidation2"
291 <label class="custom-control-label"
292 for="customControlValidation2">config-assign-test</label>
297 <div class="actionName">
298 <div class="custom-control custom-checkbox">
299 <input type="checkbox"
300 class="custom-control-input"
301 id="customControlValidation3"
303 <label class="custom-control-label"
304 for="customControlValidation3">config-deploy</label>
309 <div class="actionName">
310 <div class="custom-control custom-checkbox">
311 <input type="checkbox"
312 class="custom-control-input"
313 id="customControlValidation4"
315 <label class="custom-control-label"
316 for="customControlValidation4">config-modify</label>
321 <div class="actionName">
322 <div class="custom-control custom-checkbox">
323 <input type="checkbox"
324 class="custom-control-input"
325 id="customControlValidation5"
327 <label class="custom-control-label"
328 for="customControlValidation5">config-assign1</label>
333 <div class="actionName">
334 <div class="custom-control custom-checkbox">
335 <input type="checkbox"
336 class="custom-control-input"
337 id="customControlValidation5"
339 <label class="custom-control-label"
340 for="customControlValidation5">config-assign1</label>
345 <div class="actionName">
346 <div class="custom-control custom-checkbox">
347 <input type="checkbox"
348 class="custom-control-input"
349 id="customControlValidation5"
351 <label class="custom-control-label"
352 for="customControlValidation5">config-assign1</label>
357 <div class="actionName">
358 <div class="custom-control custom-checkbox">
359 <input type="checkbox"
360 class="custom-control-input"
361 id="customControlValidation5"
363 <label class="custom-control-label"
364 for="customControlValidation5">config-assign1</label>
369 <div class="actionName">
370 <div class="custom-control custom-checkbox">
371 <input type="checkbox"
372 class="custom-control-input"
373 id="customControlValidation5"
375 <label class="custom-control-label"
376 for="customControlValidation5">config-assign1</label>
381 <div class="actionName">
382 <div class="custom-control custom-checkbox">
383 <input type="checkbox"
384 class="custom-control-input"
385 id="customControlValidation5"
387 <label class="custom-control-label"
388 for="customControlValidation5">config-assign1</label>
393 <div class="actionName">
394 <div class="custom-control custom-checkbox">
395 <input type="checkbox"
396 class="custom-control-input"
397 id="customControlValidation5"
399 <label class="custom-control-label"
400 for="customControlValidation5">config-assign1</label>
406 <div class="col text-center">
407 <p class="selectedActions">0 selected</p>
408 <button type="button"
409 (click)="goToDesignerMode(viewedPackage.id)"
410 class="btn submit">Start
416 <!--Recent Actions Form-->
417 <div class="carousel-item">
418 <button data-target="#carouselExampleIndicators"
419 data-slide-to="0" title="Back" class="btn back"><i
420 class="icon-action-back"></i></button>
421 <h1>Choose Action(s) from Recent Packages</h1>
422 <div class="actionFormWrapper">
423 <div class="row mb-3">
424 <div class="col sort-packages">
425 <label class="actionlabel">Package
427 <div class="dropdown">
428 <input class="dropdown-toggle" type="text">
429 <div class="dropdown-text">CDS (v 1.0.0)
431 <ul class="dropdown-content">
433 <a>Test Package (v 1.1.8)</a>
436 <a>Test Package (v 1.1.8)</a>
439 <a>Test Package (v 1.1.8)</a>
442 <a>Test Package (v 1.1.8)</a>
448 <input type="text" class="form-control searchInput"
449 placeholder="Search">
452 <div class="row actionsListScroll">
454 <div class="actionName">
455 <div class="custom-control custom-checkbox">
456 <input type="checkbox"
457 class="custom-control-input"
458 id="customControlValidation1"
460 <label class="custom-control-label"
461 for="customControlValidation1">config-assign</label>
466 <div class="actionName">
467 <div class="custom-control custom-checkbox">
468 <input type="checkbox"
469 class="custom-control-input"
470 id="customControlValidation2"
472 <label class="custom-control-label"
473 for="customControlValidation2">config-assign-test</label>
478 <div class="actionName">
479 <div class="custom-control custom-checkbox">
480 <input type="checkbox"
481 class="custom-control-input"
482 id="customControlValidation3"
484 <label class="custom-control-label"
485 for="customControlValidation3">config-deploy</label>
490 <div class="actionName">
491 <div class="custom-control custom-checkbox">
492 <input type="checkbox"
493 class="custom-control-input"
494 id="customControlValidation4"
496 <label class="custom-control-label"
497 for="customControlValidation4">config-modify</label>
502 <div class="actionName">
503 <div class="custom-control custom-checkbox">
504 <input type="checkbox"
505 class="custom-control-input"
506 id="customControlValidation5"
508 <label class="custom-control-label"
509 for="customControlValidation5">config-assign1</label>
514 <div class="actionName">
515 <div class="custom-control custom-checkbox">
516 <input type="checkbox"
517 class="custom-control-input"
518 id="customControlValidation5"
520 <label class="custom-control-label"
521 for="customControlValidation5">config-assign1</label>
526 <div class="actionName">
527 <div class="custom-control custom-checkbox">
528 <input type="checkbox"
529 class="custom-control-input"
530 id="customControlValidation5"
532 <label class="custom-control-label"
533 for="customControlValidation5">config-assign1</label>
538 <div class="actionName">
539 <div class="custom-control custom-checkbox">
540 <input type="checkbox"
541 class="custom-control-input"
542 id="customControlValidation5"
544 <label class="custom-control-label"
545 for="customControlValidation5">config-assign1</label>
550 <div class="actionName">
551 <div class="custom-control custom-checkbox">
552 <input type="checkbox"
553 class="custom-control-input"
554 id="customControlValidation5"
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"
568 <label class="custom-control-label"
569 for="customControlValidation5">config-assign1</label>
574 <div class="actionName">
575 <div class="custom-control custom-checkbox">
576 <input type="checkbox"
577 class="custom-control-input"
578 id="customControlValidation5"
580 <label class="custom-control-label"
581 for="customControlValidation5">config-assign1</label>
587 <div class="col text-center">
588 <p class="selectedActions">0 selected</p>
589 <button type="button"
590 class="btn submit">Start
596 <!--Import Actions Form-->
597 <div class="carousel-item">
598 <button data-target="#carouselExampleIndicators"
599 data-slide-to="0" title="Back" class="btn back"><i
600 class="icon-action-back"></i></button>
601 <h1>Import Action(s)</h1>
602 <div class="actionFormWrapper">
605 <ngx-file-drop accept=".json"
606 dropZoneLabel="Drop files here"
607 (onFileDrop)="dropped($event)"
608 (onFileOver)="fileOver($event)"
609 (onFileLeave)="fileLeave($event)">
610 <ng-template ngx-file-drop-content-tmp
611 let-openFileSelector="openFileSelector">
612 <div class="folder-upload">
614 src="assets/img/folder-upload.svg"/>
616 <div class="folder-upload-text">
619 <div class="folder-upload-text">or
620 <button type="button"
621 class="btn btn-sm btn-primary"
622 (click)="openFileSelector()">
627 <div class="folder-upload-type">
633 <div class="upload-table">
634 <table class="table">
637 *ngFor="let item of uploadedFiles; let i=index">
639 src="assets/img/icon-file-code.svg"/>
641 <th>{{ item.name }}</th>
642 <th width="40" class="text-right">
644 src="assets/img/icon-remove-file.svg"/>
653 <div class="col text-center">
654 <button type="button"
655 class="btn submit mt-4">Import
667 <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
668 data-target="#enrichModal">
669 <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
673 <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"><i
674 class="fa fa-play-circle"></i> Deploy
684 <div class="nav nav-tabs " id="nav-tab" role="tablist">
685 <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab"
686 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
687 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
688 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
689 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
690 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
691 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
692 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
693 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
694 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
695 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
696 aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
701 <div class="row mt-4">
703 <div class="tab-content" id="nav-tabContent">
704 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
705 aria-labelledby="nav-metadata-tab">
706 <app-metadata-tab></app-metadata-tab>
708 <div class="tab-pane fade" id="nav-template" role="tabpanel"
709 aria-labelledby="nav-template-tab">
710 <app-template-mapping></app-template-mapping>
712 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
713 aria-labelledby="nav-scripts-tab">
714 <app-scripts-tab></app-scripts-tab>
716 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
717 aria-labelledby="nav-imports-tab">
718 <app-imports-tab></app-imports-tab>
721 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
722 aria-labelledby="nav-authentication-tab">
723 <div class="card creat-card">
724 <div class="editor-container">
725 <app-dsl-definitions-tab></app-dsl-definitions-tab>
737 <!-- Enrich Modal -->
738 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
740 <div class="modal-dialog" role="document">
741 <div class="modal-content">
742 <div class="modal-header">
743 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
744 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
745 <img src="assets/img/icon-close.svg"/>
748 <div class="modal-body">
749 <ul class="defintionsNote">
750 <li><b>To do manual enrichment: </b></li>
751 <li>1. Copy and paste "workflows" and "node_templates"</li>
752 <li>2. Press <b>Enrich</b> button</li>
754 <ace-editor [(text)]="vlbDefinition.topology_template.content" [mode]="'javascript'"
755 [autoUpdateContent]="true"
756 [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'"
758 style="height:300px;">
761 <div class="modal-footer">
762 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
763 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
764 (click)="enrichBluePrint()">Enrich
770 <!-- Delete Modal -->
771 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
773 <div class="modal-dialog" role="document">
774 <div class="modal-content">
775 <div class="modal-header">
776 <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5>
777 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
778 <i class="icon-action-close"></i>
781 <div class="modal-body">
782 <p>Are you sure you want to delete this package?</p>
784 <div class="modal-footer">
785 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
786 <button type="button" (click)="deletePackage()" data-dismiss="modal"
787 class="btn btn-primary">Delete