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">
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-content">
125 <div class="modal-header">
126 <h5 class="modal-title" id="exampleModalLongTitle"></h5>
127 <button type="button" class="close" data-dismiss="modal"
128 aria-label="Close" title="Close">
129 <i class="icon-action-close"></i>
132 <div class="modal-body">
133 <div id="carouselExampleIndicators" class="carousel slide"
134 data-ride="carousel" data-interval="false">
135 <div class="carousel-inner" style="height: 480px">
137 <div class="carousel-item active">
138 <h1>Let’s create the 1st Action</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">
216 <div class="col text-center">
217 <button class="btn skip-btn"
218 (click)="goToDesignerMode(viewedPackage.id)">Skip
219 to Designer Canvas</button>
223 <!--Custom Action Form-->
224 <div class="carousel-item">
225 <button data-target="#carouselExampleIndicators"
226 data-slide-to="0" title="Back" class="btn back"><i
227 class="icon-action-back"></i></button>
228 <h1>Create Custom Action</h1>
229 <div class="form-group text-center">
230 <input type="text" [(ngModel)]="customActionName"
231 class="form-control customAction"
232 placeholder="Type Action Name" autofocus>
233 <button type="button"
234 (click)="goToDesignerMode(viewedPackage.id)"
235 class="btn submit">Start</button>
239 <!--Default Actions Form-->
240 <div class="carousel-item">
241 <button data-target="#carouselExampleIndicators"
242 data-slide-to="0" title="Back" class="btn back"><i
243 class="icon-action-back"></i></button>
244 <h1>Choose Action(s) from CDS Default Package </h1>
245 <div class="actionFormWrapper">
246 <div class="row mb-3">
247 <div class="col sort-packages">
248 <label class="actionlabel">Version</label>
249 <div class="dropdown" style="width: 90px">
250 <input class="dropdown-toggle" type="text">
251 <div class="dropdown-text">1.6.2</div>
252 <ul class="dropdown-content">
264 class="form-control searchInput"
265 placeholder="Search">
268 <div class="row actionsListScroll">
270 <div class="actionName">
271 <div class="custom-control custom-checkbox">
272 <input type="checkbox"
273 class="custom-control-input"
274 id="customControlValidation1"
276 <label class="custom-control-label"
277 for="customControlValidation1">config-assign</label>
282 <div class="actionName">
283 <div class="custom-control custom-checkbox">
284 <input type="checkbox"
285 class="custom-control-input"
286 id="customControlValidation2"
288 <label class="custom-control-label"
289 for="customControlValidation2">config-assign-test</label>
294 <div class="actionName">
295 <div class="custom-control custom-checkbox">
296 <input type="checkbox"
297 class="custom-control-input"
298 id="customControlValidation3"
300 <label class="custom-control-label"
301 for="customControlValidation3">config-deploy</label>
306 <div class="actionName">
307 <div class="custom-control custom-checkbox">
308 <input type="checkbox"
309 class="custom-control-input"
310 id="customControlValidation4"
312 <label class="custom-control-label"
313 for="customControlValidation4">config-modify</label>
318 <div class="actionName">
319 <div class="custom-control custom-checkbox">
320 <input type="checkbox"
321 class="custom-control-input"
322 id="customControlValidation5"
324 <label class="custom-control-label"
325 for="customControlValidation5">config-assign1</label>
330 <div class="actionName">
331 <div class="custom-control custom-checkbox">
332 <input type="checkbox"
333 class="custom-control-input"
334 id="customControlValidation5"
336 <label class="custom-control-label"
337 for="customControlValidation5">config-assign1</label>
342 <div class="actionName">
343 <div class="custom-control custom-checkbox">
344 <input type="checkbox"
345 class="custom-control-input"
346 id="customControlValidation5"
348 <label class="custom-control-label"
349 for="customControlValidation5">config-assign1</label>
354 <div class="actionName">
355 <div class="custom-control custom-checkbox">
356 <input type="checkbox"
357 class="custom-control-input"
358 id="customControlValidation5"
360 <label class="custom-control-label"
361 for="customControlValidation5">config-assign1</label>
366 <div class="actionName">
367 <div class="custom-control custom-checkbox">
368 <input type="checkbox"
369 class="custom-control-input"
370 id="customControlValidation5"
372 <label class="custom-control-label"
373 for="customControlValidation5">config-assign1</label>
378 <div class="actionName">
379 <div class="custom-control custom-checkbox">
380 <input type="checkbox"
381 class="custom-control-input"
382 id="customControlValidation5"
384 <label class="custom-control-label"
385 for="customControlValidation5">config-assign1</label>
390 <div class="actionName">
391 <div class="custom-control custom-checkbox">
392 <input type="checkbox"
393 class="custom-control-input"
394 id="customControlValidation5"
396 <label class="custom-control-label"
397 for="customControlValidation5">config-assign1</label>
403 <div class="col text-center">
404 <p class="selectedActions">0 selected</p>
405 <button type="button"
406 (click)="goToDesignerMode(viewedPackage.id)"
407 class="btn submit">Start</button>
412 <!--Recent Actions Form-->
413 <div class="carousel-item">
414 <button data-target="#carouselExampleIndicators"
415 data-slide-to="0" title="Back" class="btn back"><i
416 class="icon-action-back"></i></button>
417 <h1>Choose Action(s) from Recent Packages</h1>
418 <div class="actionFormWrapper">
419 <div class="row mb-3">
420 <div class="col sort-packages">
421 <label class="actionlabel">Package
423 <div class="dropdown">
424 <input class="dropdown-toggle" type="text">
425 <div class="dropdown-text">CDS (v 1.0.0)
427 <ul class="dropdown-content">
429 <a>Test Package (v 1.1.8)</a>
432 <a>Test Package (v 1.1.8)</a>
435 <a>Test Package (v 1.1.8)</a>
438 <a>Test Package (v 1.1.8)</a>
445 class="form-control searchInput"
446 placeholder="Search">
449 <div class="row actionsListScroll">
451 <div class="actionName">
452 <div class="custom-control custom-checkbox">
453 <input type="checkbox"
454 class="custom-control-input"
455 id="customControlValidation1"
457 <label class="custom-control-label"
458 for="customControlValidation1">config-assign</label>
463 <div class="actionName">
464 <div class="custom-control custom-checkbox">
465 <input type="checkbox"
466 class="custom-control-input"
467 id="customControlValidation2"
469 <label class="custom-control-label"
470 for="customControlValidation2">config-assign-test</label>
475 <div class="actionName">
476 <div class="custom-control custom-checkbox">
477 <input type="checkbox"
478 class="custom-control-input"
479 id="customControlValidation3"
481 <label class="custom-control-label"
482 for="customControlValidation3">config-deploy</label>
487 <div class="actionName">
488 <div class="custom-control custom-checkbox">
489 <input type="checkbox"
490 class="custom-control-input"
491 id="customControlValidation4"
493 <label class="custom-control-label"
494 for="customControlValidation4">config-modify</label>
499 <div class="actionName">
500 <div class="custom-control custom-checkbox">
501 <input type="checkbox"
502 class="custom-control-input"
503 id="customControlValidation5"
505 <label class="custom-control-label"
506 for="customControlValidation5">config-assign1</label>
511 <div class="actionName">
512 <div class="custom-control custom-checkbox">
513 <input type="checkbox"
514 class="custom-control-input"
515 id="customControlValidation5"
517 <label class="custom-control-label"
518 for="customControlValidation5">config-assign1</label>
523 <div class="actionName">
524 <div class="custom-control custom-checkbox">
525 <input type="checkbox"
526 class="custom-control-input"
527 id="customControlValidation5"
529 <label class="custom-control-label"
530 for="customControlValidation5">config-assign1</label>
535 <div class="actionName">
536 <div class="custom-control custom-checkbox">
537 <input type="checkbox"
538 class="custom-control-input"
539 id="customControlValidation5"
541 <label class="custom-control-label"
542 for="customControlValidation5">config-assign1</label>
547 <div class="actionName">
548 <div class="custom-control custom-checkbox">
549 <input type="checkbox"
550 class="custom-control-input"
551 id="customControlValidation5"
553 <label class="custom-control-label"
554 for="customControlValidation5">config-assign1</label>
559 <div class="actionName">
560 <div class="custom-control custom-checkbox">
561 <input type="checkbox"
562 class="custom-control-input"
563 id="customControlValidation5"
565 <label class="custom-control-label"
566 for="customControlValidation5">config-assign1</label>
571 <div class="actionName">
572 <div class="custom-control custom-checkbox">
573 <input type="checkbox"
574 class="custom-control-input"
575 id="customControlValidation5"
577 <label class="custom-control-label"
578 for="customControlValidation5">config-assign1</label>
584 <div class="col text-center">
585 <p class="selectedActions">0 selected</p>
586 <button type="button"
587 class="btn submit">Start</button>
592 <!--Import Actions Form-->
593 <div class="carousel-item">
594 <button data-target="#carouselExampleIndicators"
595 data-slide-to="0" title="Back" class="btn back"><i
596 class="icon-action-back"></i></button>
597 <h1>Import Action(s)</h1>
598 <div class="actionFormWrapper">
601 <ngx-file-drop accept=".json"
602 dropZoneLabel="Drop files here"
603 (onFileDrop)="dropped($event)"
604 (onFileOver)="fileOver($event)"
605 (onFileLeave)="fileLeave($event)">
606 <ng-template ngx-file-drop-content-tmp
607 let-openFileSelector="openFileSelector">
608 <div class="folder-upload">
610 src="assets/img/folder-upload.svg" />
612 <div class="folder-upload-text">
615 <div class="folder-upload-text">or
616 <button type="button"
617 class="btn btn-sm btn-primary"
618 (click)="openFileSelector()">Browse
622 <div class="folder-upload-type">
627 <div class="upload-table">
628 <table class="table">
631 *ngFor="let item of uploadedFiles; let i=index">
633 src="assets/img/icon-file-code.svg" />
635 <th>{{ item.name }}</th>
639 src="assets/img/icon-remove-file.svg" />
648 <div class="col text-center">
649 <button type="button"
650 class="btn submit mt-4">Import</button>
662 <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
663 data-target="#enrichModal">
664 <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
668 <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"><i
669 class="fa fa-play-circle"></i> Deploy
679 <div class="nav nav-tabs " id="nav-tab" role="tablist">
680 <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab"
681 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
682 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
683 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
684 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
685 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
686 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
687 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
688 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
689 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
690 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
691 aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
696 <div class="row mt-4">
698 <div class="tab-content" id="nav-tabContent">
699 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
700 aria-labelledby="nav-metadata-tab">
701 <app-metadata-tab></app-metadata-tab>
703 <div class="tab-pane fade" id="nav-template" role="tabpanel"
704 aria-labelledby="nav-template-tab">
705 <app-template-mapping></app-template-mapping>
707 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
708 aria-labelledby="nav-scripts-tab">
709 <app-scripts-tab></app-scripts-tab>
711 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
712 aria-labelledby="nav-imports-tab">
713 <app-imports-tab></app-imports-tab>
716 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
717 aria-labelledby="nav-authentication-tab">
718 <div class="card creat-card">
719 <div class="editor-container">
720 <app-dsl-definitions-tab></app-dsl-definitions-tab>
732 <!-- Enrich Modal -->
733 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
735 <div class="modal-dialog" role="document">
736 <div class="modal-content">
737 <div class="modal-header">
738 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
739 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
740 <img src="assets/img/icon-close.svg" />
743 <div class="modal-body">
744 <ul class="defintionsNote">
745 <li><b>To do manual enrichment: </b></li>
746 <li>1. Copy and paste "workflows" and "node_templates"</li>
747 <li>2. Press <b>Enrich</b> button</li>
749 <ace-editor [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true"
750 [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'" #editor
751 style="height:300px;">
754 <div class="modal-footer">
755 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
756 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich">Enrich</button>
761 <!-- Delete Modal -->
762 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
764 <div class="modal-dialog" role="document">
765 <div class="modal-content">
766 <div class="modal-header">
767 <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5>
768 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
769 <i class="icon-action-close"></i>
772 <div class="modal-body">
773 <p>Are you sure you want to delete this package?</p>
775 <div class="modal-footer">
776 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
777 <button type="button" (click)="deletePackage()" data-dismiss="modal"
778 class="btn btn-primary">Delete</button>