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 href="#" 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 class="action-button delete">
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">v1.0.2</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">
141 <a class="d-flex" data-target="#carouselExampleIndicators"
143 <div class="card actionType custom">
144 <div class="card-body">
146 <p>Start with your own settings</p>
148 data-target="#carouselExampleIndicators"
149 data-slide-to="1" class="btn">
156 <!--Default Action-->
157 <div class="col-3 d-flex">
158 <a class="d-flex" data-target="#carouselExampleIndicators"
160 <div class="card actionType default">
161 <div class="card-body">
163 <p>Explore preset actions from CDS
166 data-target="#carouselExampleIndicators"
167 data-slide-to="2" class="btn">
175 <div class="col-3 d-flex">
176 <a class="d-flex" data-target="#carouselExampleIndicators"
178 <div class="card actionType recent">
179 <div class="card-body">
181 <p>Re-use recent actions of your
185 data-target="#carouselExampleIndicators"
186 data-slide-to="3" class="btn">
194 <div class="col-3 d-flex">
195 <a class="d-flex" data-target="#carouselExampleIndicators"
197 <div class="card actionType import">
198 <div class="card-body">
200 <p>Import your own action files</p>
202 data-target="#carouselExampleIndicators"
203 data-slide-to="4" class="btn">
211 <div class="col text-center">
212 <button class="btn skip-btn" (click)="goToDesignerMode(viewedPackage.id)">Skip to Designer Canvas</button>
216 <!--Custom Action Form-->
217 <div class="carousel-item">
218 <button data-target="#carouselExampleIndicators"
219 data-slide-to="0" title="Back" class="btn back"><i
220 class="icon-action-back"></i></button>
221 <h1>Create Custom Action</h1>
222 <div class="form-group text-center">
223 <input type="text" [(ngModel)]="customActionName" class="form-control customAction"
224 placeholder="Type Action Name" autofocus>
225 <button type="button" (click)="goToDesignerMode(viewedPackage.id)" class="btn submit">Start</button>
229 <!--Default Actions Form-->
230 <div class="carousel-item">
231 <button data-target="#carouselExampleIndicators"
232 data-slide-to="0" title="Back" class="btn back"><i
233 class="icon-action-back"></i></button>
234 <h1>Choose Action(s) from CDS Default Package </h1>
235 <div class="actionFormWrapper">
236 <div class="row mb-3">
237 <div class="col sort-packages">
238 <label class="actionlabel">Version</label>
239 <div class="dropdown" style="width: 90px">
240 <input class="dropdown-toggle" type="text">
241 <div class="dropdown-text">1.6.2</div>
242 <ul class="dropdown-content">
254 class="form-control searchInput"
255 placeholder="Search">
258 <div class="row actionsListScroll">
260 <div class="actionName">
261 <div class="custom-control custom-checkbox">
262 <input type="checkbox"
263 class="custom-control-input"
264 id="customControlValidation1"
266 <label class="custom-control-label"
267 for="customControlValidation1">config-assign</label>
272 <div class="actionName">
273 <div class="custom-control custom-checkbox">
274 <input type="checkbox"
275 class="custom-control-input"
276 id="customControlValidation2"
278 <label class="custom-control-label"
279 for="customControlValidation2">config-assign-test</label>
284 <div class="actionName">
285 <div class="custom-control custom-checkbox">
286 <input type="checkbox"
287 class="custom-control-input"
288 id="customControlValidation3"
290 <label class="custom-control-label"
291 for="customControlValidation3">config-deploy</label>
296 <div class="actionName">
297 <div class="custom-control custom-checkbox">
298 <input type="checkbox"
299 class="custom-control-input"
300 id="customControlValidation4"
302 <label class="custom-control-label"
303 for="customControlValidation4">config-modify</label>
308 <div class="actionName">
309 <div class="custom-control custom-checkbox">
310 <input type="checkbox"
311 class="custom-control-input"
312 id="customControlValidation5"
314 <label class="custom-control-label"
315 for="customControlValidation5">config-assign1</label>
320 <div class="actionName">
321 <div class="custom-control custom-checkbox">
322 <input type="checkbox"
323 class="custom-control-input"
324 id="customControlValidation5"
326 <label class="custom-control-label"
327 for="customControlValidation5">config-assign1</label>
332 <div class="actionName">
333 <div class="custom-control custom-checkbox">
334 <input type="checkbox"
335 class="custom-control-input"
336 id="customControlValidation5"
338 <label class="custom-control-label"
339 for="customControlValidation5">config-assign1</label>
344 <div class="actionName">
345 <div class="custom-control custom-checkbox">
346 <input type="checkbox"
347 class="custom-control-input"
348 id="customControlValidation5"
350 <label class="custom-control-label"
351 for="customControlValidation5">config-assign1</label>
356 <div class="actionName">
357 <div class="custom-control custom-checkbox">
358 <input type="checkbox"
359 class="custom-control-input"
360 id="customControlValidation5"
362 <label class="custom-control-label"
363 for="customControlValidation5">config-assign1</label>
368 <div class="actionName">
369 <div class="custom-control custom-checkbox">
370 <input type="checkbox"
371 class="custom-control-input"
372 id="customControlValidation5"
374 <label class="custom-control-label"
375 for="customControlValidation5">config-assign1</label>
380 <div class="actionName">
381 <div class="custom-control custom-checkbox">
382 <input type="checkbox"
383 class="custom-control-input"
384 id="customControlValidation5"
386 <label class="custom-control-label"
387 for="customControlValidation5">config-assign1</label>
393 <div class="col text-center">
394 <p class="selectedActions">0 selected</p>
395 <button type="button" (click)="goToDesignerMode(viewedPackage.id)"
396 class="btn submit">Start</button>
401 <!--Recent Actions Form-->
402 <div class="carousel-item">
403 <button data-target="#carouselExampleIndicators"
404 data-slide-to="0" title="Back" class="btn back"><i
405 class="icon-action-back"></i></button>
406 <h1>Choose Action(s) from Recent Packages</h1>
407 <div class="actionFormWrapper">
408 <div class="row mb-3">
409 <div class="col sort-packages">
410 <label class="actionlabel">Package
412 <div class="dropdown">
413 <input class="dropdown-toggle" type="text">
414 <div class="dropdown-text">CDS (v 1.0.0)
416 <ul class="dropdown-content">
418 <a>Test Package (v 1.1.8)</a>
421 <a>Test Package (v 1.1.8)</a>
424 <a>Test Package (v 1.1.8)</a>
427 <a>Test Package (v 1.1.8)</a>
434 class="form-control searchInput"
435 placeholder="Search">
438 <div class="row actionsListScroll">
440 <div class="actionName">
441 <div class="custom-control custom-checkbox">
442 <input type="checkbox"
443 class="custom-control-input"
444 id="customControlValidation1"
446 <label class="custom-control-label"
447 for="customControlValidation1">config-assign</label>
452 <div class="actionName">
453 <div class="custom-control custom-checkbox">
454 <input type="checkbox"
455 class="custom-control-input"
456 id="customControlValidation2"
458 <label class="custom-control-label"
459 for="customControlValidation2">config-assign-test</label>
464 <div class="actionName">
465 <div class="custom-control custom-checkbox">
466 <input type="checkbox"
467 class="custom-control-input"
468 id="customControlValidation3"
470 <label class="custom-control-label"
471 for="customControlValidation3">config-deploy</label>
476 <div class="actionName">
477 <div class="custom-control custom-checkbox">
478 <input type="checkbox"
479 class="custom-control-input"
480 id="customControlValidation4"
482 <label class="custom-control-label"
483 for="customControlValidation4">config-modify</label>
488 <div class="actionName">
489 <div class="custom-control custom-checkbox">
490 <input type="checkbox"
491 class="custom-control-input"
492 id="customControlValidation5"
494 <label class="custom-control-label"
495 for="customControlValidation5">config-assign1</label>
500 <div class="actionName">
501 <div class="custom-control custom-checkbox">
502 <input type="checkbox"
503 class="custom-control-input"
504 id="customControlValidation5"
506 <label class="custom-control-label"
507 for="customControlValidation5">config-assign1</label>
512 <div class="actionName">
513 <div class="custom-control custom-checkbox">
514 <input type="checkbox"
515 class="custom-control-input"
516 id="customControlValidation5"
518 <label class="custom-control-label"
519 for="customControlValidation5">config-assign1</label>
524 <div class="actionName">
525 <div class="custom-control custom-checkbox">
526 <input type="checkbox"
527 class="custom-control-input"
528 id="customControlValidation5"
530 <label class="custom-control-label"
531 for="customControlValidation5">config-assign1</label>
536 <div class="actionName">
537 <div class="custom-control custom-checkbox">
538 <input type="checkbox"
539 class="custom-control-input"
540 id="customControlValidation5"
542 <label class="custom-control-label"
543 for="customControlValidation5">config-assign1</label>
548 <div class="actionName">
549 <div class="custom-control custom-checkbox">
550 <input type="checkbox"
551 class="custom-control-input"
552 id="customControlValidation5"
554 <label class="custom-control-label"
555 for="customControlValidation5">config-assign1</label>
560 <div class="actionName">
561 <div class="custom-control custom-checkbox">
562 <input type="checkbox"
563 class="custom-control-input"
564 id="customControlValidation5"
566 <label class="custom-control-label"
567 for="customControlValidation5">config-assign1</label>
573 <div class="col text-center">
574 <p class="selectedActions">0 selected</p>
575 <button type="button"
576 class="btn submit">Start</button>
581 <!--Import Actions Form-->
582 <div class="carousel-item">
583 <button data-target="#carouselExampleIndicators"
584 data-slide-to="0" title="Back" class="btn back"><i
585 class="icon-action-back"></i></button>
586 <h1>Import Action(s)</h1>
587 <div class="actionFormWrapper">
590 <ngx-file-drop accept=".json"
591 dropZoneLabel="Drop files here"
592 (onFileDrop)="dropped($event)"
593 (onFileOver)="fileOver($event)"
594 (onFileLeave)="fileLeave($event)">
595 <ng-template ngx-file-drop-content-tmp
596 let-openFileSelector="openFileSelector">
597 <div class="folder-upload">
599 src="assets/img/folder-upload.svg" />
601 <div class="folder-upload-text">
604 <div class="folder-upload-text">or
605 <button type="button"
606 class="btn btn-sm btn-primary"
607 (click)="openFileSelector()">Browse
611 <div class="folder-upload-type">
616 <div class="upload-table">
617 <table class="table">
620 *ngFor="let item of uploadedFiles; let i=index">
622 src="assets/img/icon-file-code.svg" />
624 <th>{{ item.name }}</th>
628 src="assets/img/icon-remove-file.svg" />
637 <div class="col text-center">
638 <button type="button"
639 class="btn submit mt-4">Import</button>
651 <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i
652 class="fa fa-play-circle"></i> Deploy
662 <div class="nav nav-tabs " id="nav-tab" role="tablist">
663 <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab"
664 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
665 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
666 <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
667 role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
668 <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
669 role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
670 <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
671 role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
672 <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
673 href="#nav-authentication" role="tab" aria-controls="nav-authentication"
674 aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
679 <div class="row mt-4">
681 <div class="tab-content" id="nav-tabContent">
682 <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
683 aria-labelledby="nav-metadata-tab">
684 <app-metadata-tab></app-metadata-tab>
686 <div class="tab-pane fade" id="nav-template" role="tabpanel"
687 aria-labelledby="nav-template-tab">
688 <app-template-mapping></app-template-mapping>
690 <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
691 aria-labelledby="nav-scripts-tab">
692 <app-scripts-tab></app-scripts-tab>
694 <div class="tab-pane fade" id="nav-imports" role="tabpanel"
695 aria-labelledby="nav-imports-tab">
696 <app-imports-tab></app-imports-tab>
699 <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
700 aria-labelledby="nav-authentication-tab">
701 <div class="card creat-card">
702 <div class="editor-container">
703 <app-dsl-definitions-tab></app-dsl-definitions-tab>