Merge "Support parsing of ASCII/CLI files within Velocity and Jinja Template"
authorKAPIL SINGAL <ks220y@att.com>
Sun, 27 Sep 2020 16:27:38 +0000 (16:27 +0000)
committerGerrit Code Review <gerrit@onap.org>
Sun, 27 Sep 2020 16:27:38 +0000 (16:27 +0000)
12 files changed:
cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
cds-ui/designer-client/src/assets/img/trash-solid.svg [new file with mode: 0644]
cds-ui/designer-client/src/styles.css

index e006f23..ddde3da 100644 (file)
                                 <input class="dropdown-toggle" type="text">
                                 <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
                                 <ul class="dropdown-content">
-                                    <!-- <li>
+                                    <li>
                                       <i class="icon-get_started" aria-hidden="true"></i>
                                       <p>
-                                        <input id="clicker3" [checked]="startTour" type="checkbox" />
+                                        <input id="clicker3" type="checkbox" />
                                         <label for="clicker">
                                           Getting Started
                                           <span>Quick steps to help you get started</span>
                                         </label>
                                       </p>
-                                    </li> -->
+                                    </li>
+                                    <!-- <li>
+                                        <i class="icon-get_started" aria-hidden="true"></i>
+                                        <p>
+                                          <input id="clicker3" [checked]="startTour" type="checkbox" />
+                                          <label for="clicker">
+                                            Getting Started
+                                            <span>Quick steps to help you get started</span>
+                                          </label>
+                                        </p>
+                                      </li> -->
                                     <li>
                                         <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
                                             <i class="icon-user_guide" aria-hidden="true"></i>
@@ -81,7 +91,7 @@
                         <span>Save</span>
                     </button>
                     <button data-target="#discardChangesModal" data-toggle="modal" class="action-button"
-                            [disabled]="!isSaveEnabled">
+                        [disabled]="!isSaveEnabled">
                         <i class="icon-discard-sm" aria-hidden="true"></i>
                         <span>Discard Changes</span>
                     </button>
                     </a>
 
                     <a class="action-button"
-                       (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
+                        (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
                         <i class="icon-download" aria-hidden="true"></i>
                         <span>Download</span>
                     </a>
                             <div class="row package-auth-info">
                                 <div class="col-3">
                                     <p><b>Author Name</b></p>
-                                    <span> {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
+                                    <span>
+                                        {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
                                 </div>
                                 <!--<div class="col-4">
                                     <p><b>Author Email</b></p>
                                     <ul class="package-contributers">
                                         <li>
                                             <button type="button" class="border-fade" data-toggle="tooltip"
-                                                    data-placement="bottom" title="User name">
+                                                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">
+                                                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">
+                                                title="User name">
                                                 <img src="/assets/img/img-user3.jpg">
                                             </button>
                                         </li>
                             </button> -->
                             <!-- Button trigger modal - 1st Action -->
 
-                            <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
-                                    [attr.data-target]="dataTarget">
+                            <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2"
+                                data-toggle="modal" [attr.data-target]="dataTarget">
                                 <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">
+                                aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                                 <div class="modal-dialog" role="document">
                                     <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">
+                                                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">
+                                                data-ride="carousel" data-interval="false">
                                                 <div class="carousel-inner">
                                                     <!--OPTIONS SLIDE-->
                                                     <div class="carousel-item active">
                                                             <!--Custom Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="1">
+                                                                    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">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="1" class="btn">
                                                                                 Create
                                                                             </button>
                                                                         </div>
                                                             <!--Default Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="2">
+                                                                    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">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="2" class="btn">
                                                                                 Select
                                                                             </button>
                                                                         </div>
                                                             <!--Recent Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="3">
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="3">
                                                                     <div class="card actionType recent">
                                                                         <div class="card-body">
                                                                             <h3>Recent</h3>
                                                                                 recent
                                                                                 packages</p>
                                                                             <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="3" class="btn">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="3" class="btn">
                                                                                 Select
                                                                             </button>
                                                                         </div>
                                                             <!--Import Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="4">
+                                                                    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">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="4" class="btn">
                                                                                 Browse
                                                                             </button>
                                                                         </div>
                                                         </div>
                                                         <div class="row">
                                                             <div class="col text-center">
-                                                                <button class="btn skip-btn"
-                                                                        (click)="goToDesignerMode(viewedPackage.id)">
+                                                                <button class="btn skip-btn" data-dismiss="modal"
+                                                                    (click)="goToDesignerMode(viewedPackage.id)">
                                                                     Skip
                                                                     to Designer Canvas
                                                                 </button>
                                                     <!--Custom Action Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            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
+                                                                class="form-control customAction"
+                                                                placeholder="Type Action Name" autofocus>
+                                                            <button type="button"  data-dismiss="modal"
+                                                                (click)="goToDesignerMode(viewedPackage.id)"
+                                                                class="btn submit">Start
                                                             </button>
                                                         </div>
 
                                                     <!--Default Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            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>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                           placeholder="Search">
+                                                                        placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation1"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation1" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation1">config-assign</label>
+                                                                                for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation2"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation2" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation2">config-assign-test</label>
+                                                                                for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation3"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation3" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation3">config-deploy</label>
+                                                                                for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation4"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation4" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation4">config-modify</label>
+                                                                                for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </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 type="button" data-dismiss="modal"
+                                                                        (click)="goToDesignerMode(viewedPackage.id)"
+                                                                        class="btn submit">Start
                                                                     </button>
                                                                 </div>
                                                             </div>
                                                     <!--Recent Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            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>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                           placeholder="Search">
+                                                                        placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation1"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation1" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation1">config-assign</label>
+                                                                                for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation2"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation2" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation2">config-assign-test</label>
+                                                                                for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation3"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation3" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation3">config-deploy</label>
+                                                                                for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation4"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation4" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation4">config-modify</label>
+                                                                                for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </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 type="button" class="btn submit">Start
                                                                     </button>
                                                                 </div>
                                                             </div>
                                                     <!--Import Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            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)">
+                                                                        dropZoneLabel="Drop files here"
+                                                                        (onFileDrop)="dropped($event)"
+                                                                        (onFileOver)="fileOver($event)"
+                                                                        (onFileLeave)="fileLeave($event)">
                                                                         <ng-template ngx-file-drop-content-tmp
-                                                                                     let-openFileSelector="openFileSelector">
+                                                                            let-openFileSelector="openFileSelector">
                                                                             <div class="folder-upload">
                                                                                 <img
-                                                                                        src="assets/img/folder-upload.svg"/>
+                                                                                    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()">
+                                                                                    class="btn btn-sm btn-primary"
+                                                                                    (click)="openFileSelector()">
                                                                                     Browse
                                                                                     Files
                                                                                 </button>
                                                                     <div class="upload-table">
                                                                         <table class="table">
                                                                             <thead>
-                                                                            <tr
+                                                                                <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>
+                                                                                    <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 class="row">
                                                                 <div class="col text-center">
-                                                                    <button type="button"
-                                                                            class="btn submit mt-4">Import
+                                                                    <button type="button" class="btn submit mt-4">Import
                                                                     </button>
                                                                 </div>
                                                             </div>
                                 </div>
                             </div>
                             <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
-                                    data-target="#enrichModal">
+                                data-target="#enrichModal">
                                 <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
                             </button>
 
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a [classList]="metadataClasses" 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>
+                                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>
+                                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>
+                                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>
+                                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>
+                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
                         </div>
                     </div>
 
                     <div class="col">
                         <div class="tab-content" id="nav-tabContent" (change)="clickEvent()">
                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                 aria-labelledby="nav-metadata-tab">
+                                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">
+                                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">
+                                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">
+                                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">
+                                aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
                                     <div class="editor-container">
                                         <app-dsl-definitions-tab></app-dsl-definitions-tab>
 
 <!-- Enrich Modal -->
 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
-     aria-hidden="true">
+    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"/>
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body">
                     <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;">
+                    [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
+                    (click)="enrichBluePrint()">Enrich
                 </button>
             </div>
         </div>
 </div>
 <!-- Delete Modal -->
 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
-     aria-hidden="true">
+    aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
             </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 type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-primary">Delete
                 </button>
             </div>
         </div>
 </div>
 
 <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel"
-     aria-hidden="true">
+    aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                <button type="button" (click)="discardChanges()" data-dismiss="modal"
-                        class="btn btn-primary">Discard Changes
+                <button type="button" (click)="discardChanges()" data-dismiss="modal" class="btn btn-primary">Discard
+                    Changes
                 </button>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
index dd39cb2..f8f1d80 100644 (file)
@@ -12,7 +12,7 @@
                     <li class="breadcrumb-item">
                         <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
-                                data-target="#exampleModalLong">
+                            data-target="#exampleModalLong">
                             <i class="icon-info" aria-hidden="true"></i>
                         </button>
                     </li>
                     </li>
                 </ol>
                 <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
-                     aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                     <div class="modal-dialog" role="document">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <img src="assets/img/icon-close.svg"/>
+                                    <img src="assets/img/icon-close.svg" />
                                 </button>
                             </div>
                             <div class="modal-body package-info">
                 <li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Preview">
+                            data-tooltip="Preview">
                             <i class="fa fa-eye"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Download">
+                            data-tooltip="Download">
                             <i class="fa fa-download"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Share">
+                            data-tooltip="Share">
                             <i class="fa fa-share-square"></i>
                         </a>
                     </div>
                     <div class="dropdown">
                         <input class="dropdown-toggle" type="text">
                         <div class="dropdown-text">Save</div>
-                        <ul class="dropdown-content">
+                        <ul class="dropdown-content save-blueprint">
                             <li>
                                 <a (click)="saveBluePrint()">Save</a>
                             </li>
                             <li>
-                                <a href="">Save &amp; Deploy</a>
+                                <a (click)="publishBluePrint()">Save &amp; Deploy</a>
                             </li>
                         </ul>
                     </div>
 
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
-            data-tooltip="Collapse Side bar">
+        data-tooltip="Collapse Side bar">
         <i class="fa arr-size">&#xf100;</i>
     </button>
     <div class="collapse navbar-collapse ">
                     <div class="col-12">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
-                               aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
+                                aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
                             <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
-                               aria-controls=" " aria-selected="false">Template</a>
+                                aria-controls=" " aria-selected="false">Template</a>
                         </div>
                     </div>
                 </nav>
                 <div class="btn-group viewBtns" role="group">
                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
                     <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
-                            class="btn btn-secondary topologyView">Scripting
+                        class="btn btn-secondary topologyView">Scripting
                     </button>
                 </div>
             </li>
 <ng-sidebar-container class="sidebar-container">
     <!-- Controller SideBar -->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
-                [mode]="'push'" #sidebarLeft>
+        [mode]="'push'" #sidebarLeft>
 
         <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 col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
-                       role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+                        role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
-                       role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+                        role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                 </div>
             </div>
         </nav>
             <div class="col">
                 <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
-                         aria-labelledby="nav-action-tab">
+                        aria-labelledby="nav-action-tab">
                         <!--Action Search Box-->
                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 
     </div>
     <!-- Action Attribute SideBar -->
     <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-                [position]="'right'" #sidebarRight>
+        [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col-2 pr-0">
                                 <div class="card-header row" id="headingOne">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseOne" aria-expanded="true"
-                                                aria-controls="collapseOne">
+                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                             Steps
                                         </button>
                                     </h2>
                                 </div>
 
                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
                                 <div class="card-header row" id="headingTwo">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseTwo" aria-expanded="true"
-                                                aria-controls="collapseTwo">
+                                            data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                             Inputs
                                         </button>
                                     </h2>
                                     </div>
                                 </div>
                                 <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
                                 <div class="card-header row" id="headingThree">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseThree" aria-expanded="true"
-                                                aria-controls="collapseThree">
+                                            data-target="#collapseThree" aria-expanded="true"
+                                            aria-controls="collapseThree">
                                             Outputs
                                         </button>
                                     </h2>
                                     </div>
                                 </div>
                                 <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
 
     <!-- Function Attribute SideBar -->
     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
-                [mode]="'push'" [position]="'right'" #sidebarRight>
+        [mode]="'push'" [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col-2 pr-0">
                             <div class="card-header row" id="headingOne">
                                 <h2 class="col-10 mb-0">
                                     <button class="btn btn-link" type="button" data-toggle="collapse"
-                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                         Interface
                                     </button>
                                 </h2>
                             </div>
 
                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                 data-parent="#accordionExample">
+                                data-parent="#accordionExample">
                                 <div class="card-body">
                                     <div class="row">
                                         <div class="col-9">
                                     </div>
                                     <div class="form-group">
                                         <label>
-                                            <input class="with-gap radio-btn" name="group1" type="radio"/>
+                                            <input class="with-gap radio-btn" name="group1" type="radio" />
                                             <span class="radio-btn">True</span>
                                         </label>
                                         <label class="radio-btn">
-                                            <input class="with-gap radio-btn" name="group1" type="radio"/>
+                                            <input class="with-gap radio-btn" name="group1" type="radio" />
                                             <span class="radio-btn">False</span>
                                         </label>
                                     </div>
                             <div class="card-header row" id="headingOne">
                                 <h2 class="col-10 mb-0">
                                     <button class="btn btn-link" type="button" data-toggle="collapse"
-                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                         Artifact
                                     </button>
                                 </h2>
                             </div>
 
                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                 data-parent="#accordionExample">
+                                data-parent="#accordionExample">
                                 <div class="card-body">
                                     <div class="row">
                                         <div class="col-9">
         </div>
     </ng-sidebar>
 
-</ng-sidebar-container>
+</ng-sidebar-container>
\ No newline at end of file
index d811363..099d966 100644 (file)
@@ -115,6 +115,22 @@ export class DesignerComponent implements OnInit, OnDestroy {
         this.attributesSideBar = !this.attributesSideBar;
     }
 
+    publishBluePrint() {
+        this.create();
+        this.zipFile.generateAsync({ type: 'blob' })
+            .then(blob => {
+                const formData = new FormData();
+                formData.append('file', blob);
+                this.designerService.publishBlueprint(formData).subscribe(res => {
+                    console.log('Package Deployed...');
+                }, error => {
+                    console.log(error);
+                }, () => {
+                    //  this.deployBluePrint = false;
+                });
+            });
+    }
+
     // private _toggleSidebar3() {
     //   this.functionAttributeSidebar = !this.functionAttributeSidebar;
     // }
index 771c44b..c0d79ca 100644 (file)
@@ -21,11 +21,11 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import {Injectable} from '@angular/core';
-import {Observable} from 'rxjs';
-import {ApiService} from '../../../../common/core/services/api.typed.service';
-import {ResourceDictionaryURLs, BlueprintURLs} from '../../../../common/constants/app-constants';
-import {ModelType} from './model/ModelType.model';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApiService } from '../../../../common/core/services/api.typed.service';
+import { ResourceDictionaryURLs, BlueprintURLs } from '../../../../common/constants/app-constants';
+import { ModelType } from './model/ModelType.model';
 import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 
 
@@ -34,8 +34,10 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 })
 export class DesignerService {
 
-    constructor(private api: ApiService<ModelType>,
-                private api2: ApiService<BluePrintDetailModel>) {
+    constructor(
+        private api: ApiService<ModelType>,
+        private api2: ApiService<BluePrintDetailModel>
+    ) {
     }
 
     getFunctions(modelDefinitionType: string): Observable<ModelType[]> {
@@ -50,4 +52,9 @@ export class DesignerService {
         return this.getBluePrintModel(id);
     }
 
+    publishBlueprint(body: any | null, options?: any): Observable<any> {
+
+        return this.api.post(BlueprintURLs.publish, body, { responseType: 'text' });
+    }
+
 }
index b1dcded..fe98fa2 100644 (file)
@@ -1,12 +1,12 @@
-import {Injectable, ViewChild} from '@angular/core';
-import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
-import {VlbDefinition} from './mapping-models/definitions/VlbDefinition';
-import {DslDefinition} from './mapping-models/CBAPacakge.model';
-import {PackageCreationStore} from './package-creation.store';
+import { Injectable, ViewChild } from '@angular/core';
+import { MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
+import { VlbDefinition } from './mapping-models/definitions/VlbDefinition';
+import { DslDefinition } from './mapping-models/CBAPacakge.model';
+import { PackageCreationStore } from './package-creation.store';
 import * as JSZip from 'jszip';
-import {PackageCreationUtils} from './package-creation.utils';
-import {MetadataTabComponent} from './metadata-tab/metadata-tab.component';
-import {DesignerStore} from '../designer/designer.store';
+import { PackageCreationUtils } from './package-creation.utils';
+import { MetadataTabComponent } from './metadata-tab/metadata-tab.component';
+import { DesignerStore } from '../designer/designer.store';
 
 @Injectable({
     providedIn: 'root'
@@ -19,12 +19,14 @@ export class PackageCreationExtractionService {
 
     private toscaMetaDataKeys: string[] = ['TOSCA-Meta-File-Version', 'CSAR-Version',
         'Created-By', 'Entry-Definitions', 'Template-Name', 'Template-Version', 'Template-Type', 'Template-Tags'];
-    @ViewChild(MetadataTabComponent, {static: false})
+    @ViewChild(MetadataTabComponent, { static: false })
     private metadataTabComponent: MetadataTabComponent;
 
-    constructor(private packageCreationStore: PackageCreationStore,
-                private packageCreationUtils: PackageCreationUtils,
-                private designerStore: DesignerStore) {
+    constructor(
+        private packageCreationStore: PackageCreationStore,
+        private packageCreationUtils: PackageCreationUtils,
+        private designerStore: DesignerStore
+    ) {
 
     }
 
@@ -96,9 +98,9 @@ export class PackageCreationExtractionService {
             console.log(definition.topology_template);
             const content = {};
             const workflow = 'workflows';
-            content[workflow] = definition.topology_template.workflows;
+            content[workflow] = definition.topology_template ? definition.topology_template.workflows : {};
             const nodeTemplates = 'node_templates';
-            content[nodeTemplates] = definition.topology_template.node_templates;
+            content[nodeTemplates] = definition.topology_template ? definition.topology_template.node_templates : {};
             this.designerStore.saveSourceContent(JSON.stringify(content));
 
         }
index 03bbc72..e42304a 100644 (file)
                 <input class="dropdown-toggle" type="text">
                 <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
                 <ul class="dropdown-content">
+                  <li>
+                    <i class="icon-get_started" aria-hidden="true"></i>
+                    <p>
+                      <input id="clicker3" type="checkbox" />
+                      <label for="clicker">
+                        Getting Started
+                        <span>Quick steps to help you get started</span>
+                      </label>
+                    </p>
+                  </li>
                   <!-- <li>
                     <i class="icon-get_started" aria-hidden="true"></i>
                     <p>
index dfd8c31..4566f34 100644 (file)
@@ -9,8 +9,8 @@
             class="btn btn-outline-danger" title="Delete Template">Delete</button>
         <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit"
             class="btn btn-outline-secondary">Clear</button>
-        <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close"
-            class="btn btn-primary">Finish</button>
+        <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0"
+            title="Submit template and close" class="btn btn-primary">Finish</button>
     </div>
 </div>
 <div class="card creat-card">
@@ -31,8 +31,8 @@
         <div class="card">
             <div class="card-header" id="headingOne">
                 <h5 class="mb-0 d-flex justify-content-between">
-                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" id="templateTab" aria-expanded="true"
-                        aria-controls="collapseOne">
+                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" id="templateTab"
+                        aria-expanded="true" aria-controls="collapseOne">
                         1. Template <span class="accordian-title">{{currentTemplate?.fileName?.split('/')[1]}}</span>
                     </button>
 
@@ -59,7 +59,8 @@
                                     Jinja
                                 </span>
                             </label>
-                            <label tourAnchor="tm-templateContent" name="trst" (click)="allowedExt=['.kt'];templateExt='kt'">
+                            <label tourAnchor="tm-templateContent" name="trst"
+                                (click)="allowedExt=['.kt'];templateExt='kt'">
                                 <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
                                     name="exampleRadios" id="exampleRadios1" value=kt>
 
@@ -70,8 +71,7 @@
                         </div>
                     </div>
                     <div class="create-template-import">Use the editor to add parameters or you can also
-                        <a href="#" data-toggle="modal" 
-                            data-target="#templateModal"><b>Import
+                        <a href="#" data-toggle="modal" data-target="#templateModal"><b>Import
                                 File</b></a>. <br /> <span class="templateNote"><i class="icon-info"
                                 aria-hidden="true"></i> When you import new file, the new attributes will replace
                             current attributes.</span></div>
@@ -86,8 +86,9 @@
         <div class="card">
             <div class="card-header" id="headingTwo">
                 <h5 class="mb-0">
-                    <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" data-toggle="collapse"
-                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab"
+                        data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
+                        aria-controls="collapseTwo">
                         2. Manage Mapping <span
                             class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span>
                     </button>
                     <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                         <thead>
                             <tr>
+                                <th></th>
                                 <th>Required</th>
                                 <th>Parameter Name</th>
                                 <th>Dictionary Name</th>
                         </thead>
                         <tbody>
                             <tr *ngFor="let dict of resourceDictionaryRes">
+                                <td><input type="checkbox" [checked]="selectedProps.has(dict.name)"
+                                        (click)="selectProp(dict.name)"></td>
                                 <td>
                                     <img *ngIf="dict.definition?.property?.required"
                                         src="/assets/img/icon-required-yes.svg">
index 78449fb..94fa3db 100644 (file)
@@ -54,6 +54,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     edit = false;
     fileToDelete: any = {};
     parserFactory = new ParserFactory();
+    selectedProps = new Set<string>();
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -88,7 +89,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 this.resourceDictionaryRes = [];
             }
             this.templateFileContent = templateInfo.fileContent;
-            this.templateExt = this.templateInfo.ext || this.templateExt ;
+            this.templateExt = this.templateInfo.ext || this.templateExt;
             this.currentTemplate = Object.assign({}, templateInfo);
 
             if (templateInfo.type === 'template' || templateInfo.type.includes('template')) {
@@ -101,6 +102,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
 
         });
 
+
         this.sharedService.isEdit().subscribe(res => {
             console.log('------------------------....');
             console.log(res);
@@ -131,6 +133,68 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         };
     }
 
+    selectProp(value) {
+        console.log(value);
+        if (this.selectedProps.has(value)) {
+            this.selectedProps.delete(value);
+        } else {
+            this.selectedProps.add(value);
+        }
+    }
+
+    removeProps() {
+        console.log(this.selectedProps);
+        this.selectedProps.forEach(prop => {
+            this.resourceDictionaryRes.forEach((res, index) => {
+                if (res.name === prop) {
+                    console.log('delete...');
+                    this.resourceDictionaryRes.splice(index, 1);
+                    this.selectedProps.delete(prop);
+                }
+            });
+        });
+    }
+    selectAllProps() {
+        if (this.resourceDictionaryRes.length === this.selectedProps.size) {
+            this.selectedProps = new Set<string>();
+        } else {
+            this.resourceDictionaryRes.forEach(prop => {
+                console.log(prop);
+                this.selectedProps.add(prop.name);
+            });
+        }
+
+    }
+    reMap() {
+        let currentResDictionary = [];
+        if (this.selectedProps && this.selectedProps.size > 0) {
+            console.log('base');
+            this.packageCreationService.getTemplateAndMapping([...this.selectedProps]).subscribe(res => {
+                let message = 'Re-Auto mapping';
+                this.mappingRes = [];
+                currentResDictionary = res;
+                console.log(currentResDictionary);
+                if (currentResDictionary && currentResDictionary.length <= 0) {
+                    message = 'No values for those attributes';
+                }
+
+                // Replcae new values with the old ones
+                currentResDictionary.forEach(curr => {
+                    for (let i = 0; i < this.resourceDictionaryRes.length; i++) {
+                        if (this.resourceDictionaryRes[i].name === curr.name) {
+                            this.resourceDictionaryRes[i] = curr;
+                        }
+                    }
+                });
+                this.rerender();
+                this.toastr.success(message, 'Success');
+            }, err => {
+                this.toastr.error('Error');
+            });
+        }
+
+    }
+
     getFileExtension() {
         switch (this.templateExt) {
             case 'vtl':
index 936c2da..17955ec 100644 (file)
                   </label>
                 </p>
               </li> -->
+              <li>
+                <i class="icon-get_started" aria-hidden="true"></i>
+                <p>
+                  <input id="clicker3" type="checkbox" />
+                  <label for="clicker">
+                    Getting Started
+                    <span>Quick steps to help you get started</span>
+                  </label>
+                </p>
+              </li>
               <li>
                 <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
                   <i class="icon-user_guide" aria-hidden="true"></i>
diff --git a/cds-ui/designer-client/src/assets/img/trash-solid.svg b/cds-ui/designer-client/src/assets/img/trash-solid.svg
new file mode 100644 (file)
index 0000000..e40a23d
--- /dev/null
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" class="svg-inline--fa fa-trash fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg>
\ No newline at end of file
index fb200de..56ffbdf 100644 (file)
@@ -974,6 +974,11 @@ height: 40px;
   text-indent: unset;
   text-align: center;
 }
+.helpMenu li:hover,
+.helpMenu li:hover i,
+.helpMenu li:hover p{
+  cursor: pointer;
+}
 .helpMenu li:not(:last-child){
   margin-bottom: 9px;
 }