aboutsummaryrefslogtreecommitdiffstats
path: root/asdc-controller/notif.txt
blob: 3472d9a2c2937128fba6f53d5cf61227f0d7a2f8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
{
    "distributionID" : "5v1234d8-5b6d-42c4-7t54-47v95n58qb7",
    “distributionVersion” : “1607”,
    "serviceName" : "Nimbus",
    “serviceInvariantUUID” : “c66232fe-d7b0-40f0-8e5e-9128e694c28b”,
    “serviceVersion” : “2.0”,
    "serviceUUID" : "4e0697d8-5b6d-42c4-8c74-46c33d46624c",
    "serviceDescription" : "Nimbus service description",
    "serviceArtifacts":[
        {
            "artifactName" : "vnf_catalog.xml",
            "artifactType" : "VNF_CATALOG",
            "artifactUUID" :"4e1444d8-5b6d-42c4-8c74-46c55d43425b",
            "artifactVersion" : "1" , 
            "artifactURL" : "/asdc/v1/catalog/services/Nimbus/2.0/artifacts/vnf_catalog.xml" ,
            "artifactDescription" : "VNF Catalog Artifact" ,
            "artifactChecksum" : "14e389rnbvq6tf=="
        }
      ],
    "resources":[
        {
            "resourceInstanceName" : "PCRF1",
            "resourceName" : "PCRF",
            "resourceInvariantUUID" : "ff420d27-4585-445a-8a86-a6f64333b337",
            "resourceVersion": "1.0",
            "resourceUUID" : "4e5555d8-5b6d-42c4-8c74-46c33d8904f",
            "resourceType" : "VF",
            "artifacts" : [
                {
                    "artifactName" : "license.xml",
                    "artifactType" : "VF_LICENSE",
                    "artifactUUID" :"4e1111d8-5b6d-42c4-8c74-46c12d43424c",
                    "artifactVersion" : "1" , 
                    "artifactURL" : "/asdc/v1/catalog/services/Nimbus/2.0/resourceInstances/ PCRF1/artifacts/license.xml" ,
                    "artifactDescription" : "VF License Model Artifact" ,
                    "artifactChecksum" : "14e389rnbvq8vq=="
                }
            ],
            "vfModules": [
                {
                    "vfModuleModelName": "PCRF-module-0",
                    "vfModuleModelInvariantUUID" : "7ebcc262-2d4a-4131-bfed-32cb92d251ce",
                    "vfModuleModelVersion": "1",
                    "vfModuleModelUUID": "9g6666d8-5b6d-42c4-8c74-46c33d8904f",
                    "vfModuleModelDescription": "PCRF VF Module",
                    "isBase": TRUE,
                    "artifacts": [
                        {
                            "artifactName": "pcrf-base-module.yaml",
                            "artifactLabel": "PCRF::base::module-0",
                            "artifactType": "HEAT",
                            "artifactUUID": "d1dc0ac0-0b07-11e6-b512-3e1d05defe78",
                            "artifactVersion": "1",
                            "artifactURL": "/asdc/v1/catalog/services/Nimbus/2.0/resourceInstances/PCRF1/artifacts/pcrf-base-module.yaml",
                            "artifactDescription": "PCRF VF Module HEAT base template artifact",
                            "artifactTimeout": 60,
                            "artifactChecksum": "dy6389rnbvq8vq=="
                        },
                        {
                            "artifactName": "pcrf-nested.yaml",
                            "artifactLabel": "PCRF::nested-1",
                            "artifactType": "HEAT_NESTED",
                            "artifactUUID": "4e1111d8-5b6d-42c4-8c74-46c12d43424c",
                            "artifactVersion": "2",
                            "artifactURL": "/asdc/v1/catalog/services/Nimbus/2.0/resourceInstances/PCRF1/artifacts/pcrf-nested.yaml",
                            "artifactDescription": "PCRF VF Module HEAT nested template artifact",
                            "artifactChecksum": "76hd389rnbvq8vq=="
                        },
                        {
                            "artifactName": "pcrf-base-module.env",
                            "artifactLabel": "PCRF::base::module-0-env",
                            "artifactType": "HEAT_ENV",
                            "artifactUUID": "2636916f-aa37-4c79-b3ea-0e68d6e139e6",
                            "artifactVersion": "3",
                            "artifactURL": "/asdc/v1/catalog/services/Nimbus/2.0/resourceInstances/PCRF1/pcrf-base-module.env",
                            "artifactDescription": "PCRF VF Module HEAT environment artifact",
                            "generatedFromUUID" : “d1dc0ac0-0b07-11e6-b512-3e1d05defe78”,
                            "artifactChecksum": "3d6555rnbvq3tq=="
                        },
                        {
                            "artifactName": "pcrf-getfile.sh",
                            "artifactLabel": "PCRF::getfile-1",
                            "artifactType": "HEAT_ARTIFACT",
                            "artifactUUID": "c1492a80-0b07-11e6-b512-3e1d05defe78",
                            "artifactVersion": "3",
                            "artifactURL": "/asdc/v1/catalog/services/Nimbus/2.0/resourceInstances/PCRF1/artifacts/pcrf-getfile.sh",
                            "artifactDescription": "HEAT getfile artifact",
                            "artifactChecksum": "fds3555rnbvq3tq=="
                        },
                    ]
                },                  
                {
                    "vfModuleModelName": "PCRF-module-0-vol",
                    "vfModuleModelInvariantUUID" : "7ebcc262-2d4a-4131-cfed-32cb92d25222",
                    "vfModuleModelVersion": "1",
                    "vfModuleModelUUID": "9g6446d8-5b6d-42c4-8c74-46c33d89f50",
                    "vfModuleModelDescription": "PCRF volume VF Module",
                    "artifacts": [
                        {
                            "artifactName": "pcrf-ppd-pcm-module-volume.yaml",
                            "artifactLabel": "PCRF::PPD_PCM::module-0-vol",
                            "artifactType": "HEAT_VOL",
                            "artifactUUID": "48a0b856-22b9-4362-875c-3c960ee2a336",
                            "artifactVersion": "1",
                            "artifactURL": "/asdc/v1/catalog/services/Nimbus/2.0/resourceInstances/PCRF1/artifacts/pcrf-ppd-pcm-module-volume.yaml",
                            "artifactDescription": "VF Module HEAT Volume base template artifact",
                            "artifactTimeout": 60,
                            "artifactChecksum": "zsc389rnbvq8vq=="
                        },
                        {
                            "artifactName": "pcrf-ppd-pcm-module-volume.env",
                            "artifactLabel": "PCRF::PPD_PCM::module-0-vol-env",
                            "artifactType": "HEAT_VOL_ENV",
                            "artifactUUID": "3d6eea53-58f1-4434-aabe-1c92cbaa6936",
                            "artifactVersion": "1",
                            "artifactURL": "/asdc/v1/catalog/services/Nimbus/2.0/resourceInstances/PCRF1/artifacts/pcrf-ppd-pcm-module-volume.env",
                            "artifactDescription": "VF Module HEAT Volume env artifact",
                            "generatedFromUUID": "48a0b856-22b9-4362-875c-3c960ee2a336",
                            "artifactChecksum": "g8m389rnbvq8vq=="
                        }           
                    ]
                },
            ]
        },  
        {
            "resourceInstanceName" : "aaa_2",
            "resourceName" : "aaa",
            "resourceInvariantUUID" : "ff420d27-5555-335a-8a77-a6f64999b337",
            "resourceVersion": "1.0",
            "resourceUUID" : "4e5555d8-5b6d-42c4-8c74-46c33d8904f",
            "resourceType" : "VF",
            "artifacts": [
                ...
            ],
            "vfModules": [
                ...
            ]
        }                     
    ]
}
543' href='#n543'>543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782
<app-header></app-header>

<div class="new-wrapper">
    <div class="container-fluid main-container">
        <header class="page-title">
            <div class="row">
                <h2 class="col m-0">
                    <ul class="breadcrumb-header">
                        <li><a routerLink="/packages">CBA Packages</a></li>
                        <i class="fa fa-angle-right ml-2 mr-2"></i>
                        <li>{{viewedPackage.artifactName}}</li>
                    </ul>
                </h2>
                <div class="col">
                </div>
            </div>
        </header>


        <div class="container-fluid body-container">

            <div class="container">
                <div class="creat-action-container">

                    <a class="action-button save" (click)="editBluePrint()">
                        <i class="icon-save-sm" aria-hidden="true"></i>
                        <span>Save</span>
                    </a>
                    <a href="#" class="action-button" (click)="goBacktoDashboard()">
                        <i class="icon-discard-sm" aria-hidden="true"></i>
                        <span>Discard Changes</span>
                    </a>

                    <hr>
                    <a href="#" class="action-button">
                        <i class="icon-clone-sm" aria-hidden="true"></i>
                        <span>Clone</span>
                    </a>

                    <a href="#" class="action-button">
                        <i class="icon-archive-sm" aria-hidden="true"></i>
                        <span>Archive</span>
                    </a>

                    <a class="action-button"
                        (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
                        <i class="icon-download" aria-hidden="true"></i>
                        <span>Download</span>
                    </a>

                    <a data-target="#removePackageModal" data-toggle="modal" class="action-button">
                        <i class="icon-delete-sm" aria-hidden="true"></i>
                        <span>Delete</span>
                    </a>
                </div>

                <div class="card creat-card view-package-container">
                    <div class="row">
                        <div class="col-1 text-center"><i class="package-type-icon icon-topologyView-active"></i></div>
                        <div class="col-9">
                            <div class="row mb-4">
                                <div class="col-12 package-name deployed">
                                    {{viewedPackage.artifactName}}
                                    <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon">
                                    <span class="package-version">v{{viewedPackage.artifactVersion}}</span>
                                </div>
                                <div class="col-12 package-description">
                                    Last modified {{ viewedPackage.createdDate | date:'short' }} By
                                    {{viewedPackage.updatedBy}}
                                </div>
                            </div>
                            <div class="row package-auth-info">
                                <div class="col-3">
                                    <p><b>Author Name</b></p>
                                    <span>Shaaban Ebrahim</span>
                                </div>
                                <div class="col-4">
                                    <p><b>Author Email</b></p>
                                    <span>shaaban.eltanany.ext@orange.com</span>
                                </div>
                                <div class="col-5">
                                    <p><b>Contributions</b></p>
                                    <ul class="package-contributers">
                                        <li>
                                            <button type="button" class="border-fade" data-toggle="tooltip"
                                                data-placement="bottom" title="User name">
                                                <img src="/assets/img/img-user1.jpeg">
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" data-toggle="tooltip" data-placement="bottom"
                                                title="User name">
                                                <img src="/assets/img/img-user2.jpg">
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" data-toggle="tooltip" data-placement="bottom"
                                                title="User name">
                                                <img src="/assets/img/img-user3.jpg">
                                            </button>
                                        </li>
                                        <li>
                                            <a href="">5 contributors</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-2 package-view-button">
                            <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
                                Mode
                            </button> -->
                            <!-- Button trigger modal - 1st Action -->

                            <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
                                data-target="#exampleModalLong">
                                <i class="icon-topologyView-active"></i> Designer Mode
                            </button>
                            <!-- Designer Modal -->
                            <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close" title="Close">
                                                    <i class="icon-action-close"></i>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div id="carouselExampleIndicators" class="carousel slide"
                                                    data-ride="carousel" data-interval="false">
                                                    <div class="carousel-inner" style="height: 480px">
                                                        <!--OPTIONS SLIDE-->
                                                        <div class="carousel-item active">
                                                            <h1>Let’s create the 1st Action</h1>
                                                            <div class="row">
                                                                <!--Custom Action-->
                                                                <div class="col-3 d-flex">
                                                                    <a class="d-flex"
                                                                        data-target="#carouselExampleIndicators"
                                                                        data-slide-to="1">
                                                                        <div class="card actionType custom">
                                                                            <div class="card-body">
                                                                                <h3>Custom</h3>
                                                                                <p>Start with your own settings</p>
                                                                                <button
                                                                                    data-target="#carouselExampleIndicators"
                                                                                    data-slide-to="1" class="btn">
                                                                                    Create
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                                <!--Default Action-->
                                                                <div class="col-3 d-flex">
                                                                    <a class="d-flex"
                                                                        data-target="#carouselExampleIndicators"
                                                                        data-slide-to="2">
                                                                        <div class="card actionType default">
                                                                            <div class="card-body">
                                                                                <h3>Default</h3>
                                                                                <p>Explore preset actions from CDS
                                                                                    Action Catalog</p>
                                                                                <button
                                                                                    data-target="#carouselExampleIndicators"
                                                                                    data-slide-to="2" class="btn">
                                                                                    Select
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                                <!--Recent Action-->
                                                                <div class="col-3 d-flex">
                                                                    <a class="d-flex"
                                                                        data-target="#carouselExampleIndicators"
                                                                        data-slide-to="3">
                                                                        <div class="card actionType recent">
                                                                            <div class="card-body">
                                                                                <h3>Recent</h3>
                                                                                <p>Re-use recent actions of your
                                                                                    recent
                                                                                    packages</p>
                                                                                <button
                                                                                    data-target="#carouselExampleIndicators"
                                                                                    data-slide-to="3" class="btn">
                                                                                    Select
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                                <!--Import Action-->
                                                                <div class="col-3 d-flex">
                                                                    <a class="d-flex"
                                                                        data-target="#carouselExampleIndicators"
                                                                        data-slide-to="4">
                                                                        <div class="card actionType import">
                                                                            <div class="card-body">
                                                                                <h3>Import</h3>
                                                                                <p>Import your own action files</p>
                                                                                <button
                                                                                    data-target="#carouselExampleIndicators"
                                                                                    data-slide-to="4" class="btn">
                                                                                    Browse</button>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col text-center">
                                                                    <button class="btn skip-btn"
                                                                        (click)="goToDesignerMode(viewedPackage.id)">Skip
                                                                        to Designer Canvas</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--Custom Action Form-->
                                                        <div class="carousel-item">
                                                            <button data-target="#carouselExampleIndicators"
                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                    class="icon-action-back"></i></button>
                                                            <h1>Create Custom Action</h1>
                                                            <div class="form-group text-center">
                                                                <input type="text" [(ngModel)]="customActionName"
                                                                    class="form-control customAction"
                                                                    placeholder="Type Action Name" autofocus>
                                                                <button type="button"
                                                                    (click)="goToDesignerMode(viewedPackage.id)"
                                                                    class="btn submit">Start</button>
                                                            </div>

                                                        </div>
                                                        <!--Default Actions Form-->
                                                        <div class="carousel-item">
                                                            <button data-target="#carouselExampleIndicators"
                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                    class="icon-action-back"></i></button>
                                                            <h1>Choose Action(s) from CDS Default Package </h1>
                                                            <div class="actionFormWrapper">
                                                                <div class="row mb-3">
                                                                    <div class="col sort-packages">
                                                                        <label class="actionlabel">Version</label>
                                                                        <div class="dropdown" style="width: 90px">
                                                                            <input class="dropdown-toggle" type="text">
                                                                            <div class="dropdown-text">1.6.2</div>
                                                                            <ul class="dropdown-content">
                                                                                <li>
                                                                                    <a>1.1.8</a>
                                                                                </li>
                                                                                <li>
                                                                                    <a>2.1.8</a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col">
                                                                        <input type="text"
                                                                            class="form-control searchInput"
                                                                            placeholder="Search">
                                                                    </div>
                                                                </div>
                                                                <div class="row actionsListScroll">
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation1"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation1">config-assign</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation2"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation2">config-assign-test</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation3"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation3">config-deploy</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation4"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation4">config-modify</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col text-center">
                                                                        <p class="selectedActions">0 selected</p>
                                                                        <button type="button"
                                                                            (click)="goToDesignerMode(viewedPackage.id)"
                                                                            class="btn submit">Start</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--Recent Actions Form-->
                                                        <div class="carousel-item">
                                                            <button data-target="#carouselExampleIndicators"
                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                    class="icon-action-back"></i></button>
                                                            <h1>Choose Action(s) from Recent Packages</h1>
                                                            <div class="actionFormWrapper">
                                                                <div class="row mb-3">
                                                                    <div class="col sort-packages">
                                                                        <label class="actionlabel">Package
                                                                            Name</label>
                                                                        <div class="dropdown">
                                                                            <input class="dropdown-toggle" type="text">
                                                                            <div class="dropdown-text">CDS (v 1.0.0)
                                                                            </div>
                                                                            <ul class="dropdown-content">
                                                                                <li>
                                                                                    <a>Test Package (v 1.1.8)</a>
                                                                                </li>
                                                                                <li>
                                                                                    <a>Test Package (v 1.1.8)</a>
                                                                                </li>
                                                                                <li>
                                                                                    <a>Test Package (v 1.1.8)</a>
                                                                                </li>
                                                                                <li>
                                                                                    <a>Test Package (v 1.1.8)</a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col">
                                                                        <input type="text"
                                                                            class="form-control searchInput"
                                                                            placeholder="Search">
                                                                    </div>
                                                                </div>
                                                                <div class="row actionsListScroll">
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation1"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation1">config-assign</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation2"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation2">config-assign-test</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation3"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation3">config-deploy</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation4"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation4">config-modify</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="actionName">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="customControlValidation5"
                                                                                    required>
                                                                                <label class="custom-control-label"
                                                                                    for="customControlValidation5">config-assign1</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col text-center">
                                                                        <p class="selectedActions">0 selected</p>
                                                                        <button type="button"
                                                                            class="btn submit">Start</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--Import Actions Form-->
                                                        <div class="carousel-item">
                                                            <button data-target="#carouselExampleIndicators"
                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                    class="icon-action-back"></i></button>
                                                            <h1>Import Action(s)</h1>
                                                            <div class="actionFormWrapper">
                                                                <div class="row">
                                                                    <div class="col">
                                                                        <ngx-file-drop accept=".json"
                                                                            dropZoneLabel="Drop files here"
                                                                            (onFileDrop)="dropped($event)"
                                                                            (onFileOver)="fileOver($event)"
                                                                            (onFileLeave)="fileLeave($event)">
                                                                            <ng-template ngx-file-drop-content-tmp
                                                                                let-openFileSelector="openFileSelector">
                                                                                <div class="folder-upload">
                                                                                    <img
                                                                                        src="assets/img/folder-upload.svg" />
                                                                                </div>
                                                                                <div class="folder-upload-text">
                                                                                    Drag & Drop file
                                                                                </div>
                                                                                <div class="folder-upload-text">or
                                                                                    <button type="button"
                                                                                        class="btn btn-sm btn-primary"
                                                                                        (click)="openFileSelector()">Browse
                                                                                        Files
                                                                                    </button>
                                                                                </div>
                                                                                <div class="folder-upload-type">
                                                                                    Allowed file
                                                                                    type: json</div>
                                                                            </ng-template>
                                                                        </ngx-file-drop>
                                                                        <div class="upload-table">
                                                                            <table class="table">
                                                                                <thead>
                                                                                    <tr
                                                                                        *ngFor="let item of uploadedFiles; let i=index">
                                                                                        <th width="40"><img
                                                                                                src="assets/img/icon-file-code.svg" />
                                                                                        </th>
                                                                                        <th>{{ item.name }}</th>
                                                                                        <th width="40"
                                                                                            class="text-right">
                                                                                            <img
                                                                                                src="assets/img/icon-remove-file.svg" />
                                                                                        </th>
                                                                                    </tr>
                                                                                </thead>
                                                                            </table>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col text-center">
                                                                        <button type="button"
                                                                            class="btn submit mt-4">Import</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
                                data-target="#enrichModal" >
                                <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
                            </button>


                            <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"><i
                                    class="fa fa-play-circle"></i> Deploy
                            </button>
                        </div>
                    </div>

                </div>

                <nav class="row">
                    <!--Nav Tabs-->
                    <div class="col">
                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab"
                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
                                autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
                            <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
                                role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
                            <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
                                role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
                            <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
                                role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
                            <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
                        </div>
                    </div>

                </nav>
                <div class="row mt-4">
                    <div class="col">
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
                                aria-labelledby="nav-metadata-tab">
                                <app-metadata-tab></app-metadata-tab>
                            </div>
                            <div class="tab-pane fade" id="nav-template" role="tabpanel"
                                aria-labelledby="nav-template-tab">
                                <app-template-mapping></app-template-mapping>
                            </div>
                            <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
                                aria-labelledby="nav-scripts-tab">
                                <app-scripts-tab></app-scripts-tab>
                            </div>
                            <div class="tab-pane fade" id="nav-imports" role="tabpanel"
                                aria-labelledby="nav-imports-tab">
                                <app-imports-tab></app-imports-tab>

                            </div>
                            <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
                                aria-labelledby="nav-authentication-tab">
                                <div class="card creat-card">
                                    <div class="editor-container">
                                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Enrich Modal -->
<div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <img src="assets/img/icon-close.svg" />
                </button>
            </div>
            <div class="modal-body">
                <ul class="defintionsNote">
                    <li><b>To do manual enrichment: </b></li>
                    <li>1. Copy and paste "workflows" and "node_templates"</li>
                    <li>2. Press <b>Enrich</b> button</li>
                </ul>
                <ace-editor [(text)]="vlbDefinition.topology_template.content" [mode]="'javascript'" [autoUpdateContent]="true"
                    [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'" #editor
                    style="height:300px;">
                </ace-editor>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich" (click)="enrichBluePrint()">Enrich</button>
            </div>
        </div>
    </div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="icon-action-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this package?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" (click)="deletePackage()" data-dismiss="modal"
                    class="btn btn-primary">Delete</button>
            </div>
        </div>
    </div>
</div>