Revert "Renaming Files having BluePrint to have Blueprint"
[ccsdk/cds.git] / cds-ui / designer-client / src / app / modules / feature-modules / packages / configuration-dashboard / configuration-dashboard.component.html
index fafe76f..e3c584a 100644 (file)
                               <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"
                                 [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
                             </li> -->
+                            <!--Version-->
+                            <div class="nav-item copyright">v1.0.0</div>
                             <!--Help Menu-->
                             <div class="nav-item dropdown helpMenu">
                                 <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>
+                                        <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>
                                     </li>
                                 </ul>
                             </div>
-
                         </ul>
                     </nav>
                 </div>
             </div>
         </header>
-
-
         <div class="container-fluid body-container">
-
+            <ngx-ui-loader></ngx-ui-loader>
             <div class="container">
                 <div class="creat-action-container">
-
                     <button class="action-button save" (click)="editBluePrint()" [disabled]="!isSaveEnabled">
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
                         <span>Delete</span>
                     </a>
                 </div>
-
                 <div class="card creat-card view-package-container">
                     <div class="row">
                         <div class="col-1 text-center"><i class="package-type-icon icon-topologyView-active"></i></div>
                             <div class="row mb-4">
                                 <div class="col-12 package-name deployed">
                                     {{viewedPackage.artifactName}}
+                                    <!-- <img *ngIf="bluePrint.published.includes('Y')" class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
                                     <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon">
                                     <span class="package-version">v{{viewedPackage.artifactVersion}}</span>
                                 </div>
                             <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>
                             </button> -->
                             <!-- Button trigger modal - 1st Action -->
 
-                            <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
-                                    data-target="#exampleModalLong">
+                            <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>
                                                         <div class="row">
                                                             <div class="col text-center">
-                                                                <button class="btn skip-btn"
+                                                                <button class="btn skip-btn" data-dismiss="modal"
                                                                         (click)="goToDesignerMode(viewedPackage.id)">
                                                                     Skip
                                                                     to Designer Canvas
                                                             <input type="text" [(ngModel)]="customActionName"
                                                                    class="form-control customAction"
                                                                    placeholder="Type Action Name" autofocus>
-                                                            <button type="button"
+                                                            <button type="button" data-dismiss="modal"
                                                                     (click)="goToDesignerMode(viewedPackage.id)"
                                                                     class="btn submit">Start
                                                             </button>
                                                             <div class="row">
                                                                 <div class="col text-center">
                                                                     <p class="selectedActions">0 selected</p>
-                                                                    <button type="button"
+                                                                    <button type="button" data-dismiss="modal"
                                                                             (click)="goToDesignerMode(viewedPackage.id)"
                                                                             class="btn submit">Start
                                                                     </button>
                                                             <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>
                                                             </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>
                             </div>
-                            <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
-                                    data-target="#enrichModal">
-                                <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
+                            <button type="button" class="btn btn-sm mb-2 btn-enrich" (click)="enrichBluePrint()">
+                                <!-- data-toggle="modal" data-target="#enrichModal"-->
+
+                                <i class="icon-enrich" aria-hidden="true"></i> Enrich
                             </button>
 
 
                                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>
+                               aria-selected="false">DSL PROPERTIES</a>
+                            <a class="nav-item nav-link" id="nav-topologytemplate-tab" data-toggle="tab"
+                               href="#nav-topologytemplate" role="tab" aria-controls="nav-authentication"
+                               aria-selected="false">Topology Template</a>
                         </div>
                     </div>
 
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
                                  aria-labelledby="nav-authentication-tab">
+                                <div class="card creat-card">
+                                    <div class="editor-container" (change)="clickEvent()">
+                                        <app-dsl-definitions-tab (changeEvent)="clickEvent()"></app-dsl-definitions-tab>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tab-pane fade" id="nav-topologytemplate" role="tabpanel"
+                                 aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
                                     <div class="editor-container">
-                                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
+                                        <app-topology-template></app-topology-template>
                                     </div>
                                 </div>
                             </div>
         </div>
     </div>
 </div>
-
 <!-- Enrich Modal -->
 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
      aria-hidden="true">
                     <li>1. Copy and paste "workflows" and "node_templates"</li>
                     <li>2. Press <b>Enrich</b> button</li>
                 </ul>
-                <ace-editor [(text)]="vlbDefinition.topology_template.content" [mode]="'javascript'"
-                            [autoUpdateContent]="true"
-                            [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'"
-                            #editor
-                            style="height:300px;">
+                <ace-editor [(text)]="this.vlbDefinition.topology_template.content" [mode]="'json'"
+                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
+                            (textChanged)="textChanged($event)" #editor style="height:250px;">
                 </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 class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5>
+                <h5 class="modal-title" id="removePackageModalLabel">Delete Package</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <i class="icon-action-close"></i>
                 </button>
             </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-danger">Delete
                 </button>
             </div>
         </div>
             </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>