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 href="#" class="action-button" (click)="goBacktoDashboard()">
30 <i class="icon-discard-sm" aria-hidden="true"></i>
31 <span>Discard Changes</span>
35 <a href="#" 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}}
72 <div class="row package-auth-info">
74 <p><b>Author Name</b></p>
75 <span>Shaaban Ebrahim</span>
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 pt-3">
110 <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
113 <!-- Button trigger modal - 1st Action -->
114 <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
115 data-target="#exampleModalLong">
119 <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
120 aria-labelledby="exampleModalLongTitle" aria-hidden="true">
121 <div class="modal-dialog" role="document">
122 <div class="modal-content">
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"
127 aria-label="Close" title="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" style="height: 480px">
136 <div class="carousel-item active">
137 <h1>Let’s create the 1st Action</h1>
140 <div class="col-3 d-flex">
142 data-target="#carouselExampleIndicators"
144 <div class="card actionType custom">
145 <div class="card-body">
147 <p>Start with your own settings</p>
149 data-target="#carouselExampleIndicators"
150 data-slide-to="1" class="btn">
157 <!--Default Action-->
158 <div class="col-3 d-flex">
160 data-target="#carouselExampleIndicators"
162 <div class="card actionType default">
163 <div class="card-body">
165 <p>Explore preset actions from CDS
168 data-target="#carouselExampleIndicators"
169 data-slide-to="2" class="btn">
177 <div class="col-3 d-flex">
179 data-target="#carouselExampleIndicators"
181 <div class="card actionType recent">
182 <div class="card-body">
184 <p>Re-use recent actions of your
188 data-target="#carouselExampleIndicators"
189 data-slide-to="3" class="btn">
197 <div class="col-3 d-flex">
199 data-target="#carouselExampleIndicators"
201 <div class="card actionType import">
202 <div class="card-body">
204 <p>Import your own action files</p>
206 data-target="#carouselExampleIndicators"
207 data-slide-to="4" class="btn">
215 <div class="col text-center">
216 <button class="btn skip-btn"
217 (click)="goToDesignerMode(viewedPackage.id)">Skip
218 to Designer Canvas</button>
222 <!--Custom Action Form-->
223 <div class="carousel-item">
224 <button data-target="#carouselExampleIndicators"
225 data-slide-to="0" title="Back" class="btn back"><i
226 class="icon-action-back"></i></button>
227 <h1>Create Custom Action</h1>
228 <div class="form-group text-center">
229 <input type="text" [(ngModel)]="customActionName"
230 class="form-control customAction"
231 placeholder="Type Action Name" autofocus>
232 <button type="button"
233 (click)="goToDesignerMode(viewedPackage.id)"
234 class="btn submit">Start</button>
238 <!--Default Actions Form-->
239 <div class="carousel-item">
240 <button data-target="#carouselExampleIndicators"
241 data-slide-to="0" title="Back" class="btn back"><i
242 class="icon-action-back"></i></button>
243 <h1>Choose Action(s) from CDS Default Package </h1>
244 <div class="actionFormWrapper">
245 <div class="row mb-3">
246 <div class="col sort-packages">
247 <label class="actionlabel">Version</label>
248 <div class="dropdown" style="width: 90px">
249 <input class="dropdown-toggle" type="text">
250 <div class="dropdown-text">1.6.2</div>
251 <ul class="dropdown-content">
263 class="form-control searchInput"
264 placeholder="Search">
267 <div class="row actionsListScroll">
269 <div class="actionName">
270 <div class="custom-control custom-checkbox">
271 <input type="checkbox"
272 class="custom-control-input"
273 id="customControlValidation1"
275 <label class="custom-control-label"
276 for="customControlValidation1">config-assign</label>
281 <div class="actionName">
282 <div class="custom-control custom-checkbox">
283 <input type="checkbox"
284 class="custom-control-input"
285 id="customControlValidation2"
287 <label class="custom-control-label"
288 for="customControlValidation2">config-assign-test</label>
293 <div class="actionName">
294 <div class="custom-control custom-checkbox">
295 <input type="checkbox"
296 class="custom-control-input"
297 id="customControlValidation3"
299 <label class="custom-control-label"
300 for="customControlValidation3">config-deploy</label>
305 <div class="actionName">
306 <div class="custom-control custom-checkbox">
307 <input type="checkbox"
308 class="custom-control-input"
309 id="customControlValidation4"
311 <label class="custom-control-label"
312 for="customControlValidation4">config-modify</label>
317 <div class="actionName">
318 <div class="custom-control custom-checkbox">
319 <input type="checkbox"
320 class="custom-control-input"
321 id="customControlValidation5"
323 <label class="custom-control-label"
324 for="customControlValidation5">config-assign1</label>
329 <div class="actionName">
330 <div class="custom-control custom-checkbox">
331 <input type="checkbox"
332 class="custom-control-input"
333 id="customControlValidation5"
335 <label class="custom-control-label"
336 for="customControlValidation5">config-assign1</label>
341 <div class="actionName">
342 <div class="custom-control custom-checkbox">
343 <input type="checkbox"
344 class="custom-control-input"
345 id="customControlValidation5"
347 <label class="custom-control-label"
348 for="customControlValidation5">config-assign1</label>
353 <div class="actionName">
354 <div class="custom-control custom-checkbox">
355 <input type="checkbox"
356 class="custom-control-input"
357 id="customControlValidation5"
359 <label class="custom-control-label"
360 for="customControlValidation5">config-assign1</label>
365 <div class="actionName">
366 <div class="custom-control custom-checkbox">
367 <input type="checkbox"
368 class="custom-control-input"
369 id="customControlValidation5"
371 <label class="custom-control-label"
372 for="customControlValidation5">config-assign1</label>
377 <div class="actionName">
378 <div class="custom-control custom-checkbox">
379 <input type="checkbox"
380 class="custom-control-input"
381 id="customControlValidation5"
383 <label class="custom-control-label"
384 for="customControlValidation5">config-assign1</label>
389 <div class="actionName">
390 <div class="custom-control custom-checkbox">
391 <input type="checkbox"
392 class="custom-control-input"
393 id="customControlValidation5"
395 <label class="custom-control-label"
396 for="customControlValidation5">config-assign1</label>
402 <div class="col text-center">
403 <p class="selectedActions">0 selected</p>
404 <button type="button"
405 (click)="goToDesignerMode(viewedPackage.id)"
406 class="btn submit">Start</button>
411 <!--Recent Actions Form-->
412 <div class="carousel-item">
413 <button data-target="#carouselExampleIndicators"
414 data-slide-to="0" title="Back" class="btn back"><i
415 class="icon-action-back"></i></button>
416 <h1>Choose Action(s) from Recent Packages</h1>
417 <div class="actionFormWrapper">
418 <div class="row mb-3">
419 <div class="col sort-packages">
420 <label class="actionlabel">Package
422 <div class="dropdown">
423 <input class="dropdown-toggle" type="text">
424 <div class="dropdown-text">CDS (v 1.0.0)
426 <ul class="dropdown-content">
428 <a>Test Package (v 1.1.8)</a>
431 <a>Test Package (v 1.1.8)</a>
434 <a>Test Package (v 1.1.8)</a>
437 <a>Test Package (v 1.1.8)</a>
444 class="form-control searchInput"
445 placeholder="Search">
448 <div class="row actionsListScroll">
450 <div class="actionName">
451 <div class="custom-control custom-checkbox">
452 <input type="checkbox"
453 class="custom-control-input"
454 id="customControlValidation1"
456 <label class="custom-control-label"
457 for="customControlValidation1">config-assign</label>
462 <div class="actionName">
463 <div class="custom-control custom-checkbox">
464 <input type="checkbox"
465 class="custom-control-input"
466 id="customControlValidation2"
468 <label class="custom-control-label"
469 for="customControlValidation2">config-assign-test</label>
474 <div class="actionName">
475 <div class="custom-control custom-checkbox">
476 <input type="checkbox"
477 class="custom-control-input"
478 id="customControlValidation3"
480 <label class="custom-control-label"
481 for="customControlValidation3">config-deploy</label>
486 <div class="actionName">
487 <div class="custom-control custom-checkbox">
488 <input type="checkbox"
489 class="custom-control-input"
490 id="customControlValidation4"
492 <label class="custom-control-label"
493 for="customControlValidation4">config-modify</label>
498 <div class="actionName">
499 <div class="custom-control custom-checkbox">
500 <input type="checkbox"
501 class="custom-control-input"
502 id="customControlValidation5"
504 <label class="custom-control-label"
505 for="customControlValidation5">config-assign1</label>
510 <div class="actionName">
511 <div class="custom-control custom-checkbox">
512 <input type="checkbox"
513 class="custom-control-input"
514 id="customControlValidation5"
516 <label class="custom-control-label"
517 for="customControlValidation5">config-assign1</label>
522 <div class="actionName">
523 <div class="custom-control custom-checkbox">
524 <input type="checkbox"
525 class="custom-control-input"
526 id="customControlValidation5"
528 <label class="custom-control-label"
529 for="customControlValidation5">config-assign1</label>
534 <div class="actionName">
535 <div class="custom-control custom-checkbox">
536 <input type="checkbox"
537 class="custom-control-input"
538 id="customControlValidation5"
540 <label class="custom-control-label"
541 for="customControlValidation5">config-assign1</label>
546 <div class="actionName">
547 <div class="custom-control custom-checkbox">
548 <input type="checkbox"
549 class="custom-control-input"
550 id="customControlValidation5"
552 <label class="custom-control-label"
553 for="customControlValidation5">config-assign1</label>
558 <div class="actionName">
559 <div class="custom-control custom-checkbox">
560 <input type="checkbox"
561 class="custom-control-input"
562 id="customControlValidation5"
564 <label class="custom-control-label"
565 for="customControlValidation5">config-assign1</label>
570 <div class="actionName">
571 <div class="custom-control custom-checkbox">
572 <input type="checkbox"
573 class="custom-control-input"
574 id="customControlValidation5"
576 <label class="custom-control-label"
577 for="customControlValidation5">config-assign1</label>
583 <div class="col text-center">
584 <p class="selectedActions">0 selected</p>
585 <button type="button"
586 class="btn submit">Start</button>
591 <!--Import Actions Form-->
592 <div class="carousel-item">
593 <button data-target="#carouselExampleIndicators"
594 data-slide-to="0" title="Back" class="btn back"><i
595 class="icon-action-back"></i></button>
596 <h1>Import Action(s)</h1>
597 <div class="actionFormWrapper">
600 <ngx-file-drop accept=".json"
601 dropZoneLabel="Drop files here"
602 (onFileDrop)="dropped($event)"
603 (onFileOver)="fileOver($event)"
604 (onFileLeave)="fileLeave($event)">
605 <ng-template ngx-file-drop-content-tmp
606 let-openFileSelector="openFileSelector">
607 <div class="folder-upload">
609 src="assets/img/folder-upload.svg" />
611 <div class="folder-upload-text">
614 <div class="folder-upload-text">or
615 <button type="button"
616 class="btn btn-sm btn-primary"
617 (click)="openFileSelector()">Browse
621 <div class="folder-upload-type">
626 <div class="upload-table">
627 <table class="table">
630 *ngFor="let item of uploadedFiles; let i=index">
632 src="assets/img/icon-file-code.svg" />
634 <th>{{ item.name }}</th>
638 src="assets/img/icon-remove-file.svg" />
647 <div class="col text-center">
648 <button type="button"
649 class="btn submit mt-4">Import</button>
661 <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i
662 class="fa fa-play-circle"></i> Deploy
672 <div class="nav nav-tabs " id="nav-tab" role="tablist">
673 <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab"
674 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
675 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
676 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
677 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
678 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
679 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
680 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
681 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
682 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
683 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
684 aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
689 <div class="row mt-4">
691 <div class="tab-content" id="nav-tabContent">
692 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
693 aria-labelledby="nav-metadata-tab">
694 <app-metadata-tab></app-metadata-tab>
696 <div class="tab-pane fade" id="nav-template" role="tabpanel"
697 aria-labelledby="nav-template-tab">
698 <app-template-mapping></app-template-mapping>
700 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
701 aria-labelledby="nav-scripts-tab">
702 <app-scripts-tab></app-scripts-tab>
704 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
705 aria-labelledby="nav-imports-tab">
706 <app-imports-tab></app-imports-tab>
709 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
710 aria-labelledby="nav-authentication-tab">
711 <div class="card creat-card">
712 <div class="editor-container">
713 <app-dsl-definitions-tab></app-dsl-definitions-tab>
726 <!-- Delete Modal -->
727 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
729 <div class="modal-dialog" role="document">
730 <div class="modal-content">
731 <div class="modal-header">
732 <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5>
733 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
734 <span aria-hidden="true">×</span>
737 <div class="modal-body">
738 <p>Are you sure you want to delete this package?</p>
740 <div class="modal-footer">
741 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
742 <button type="button" (click)="deletePackage()" data-dismiss="modal"
743 class="btn btn-primary">Delete</button>