gerrit.onap Code Review - ccsdk/cds.git/blob

   1 <app-header></app-header>
   2
   3 <div class="new-wrapper">
   4     <header class="page-title">
   5         <div class="row">
   6             <h2 class="col m-0">CBA Packages
   7                 <span>({{numberOfPackages}} packages)</span>
   8             </h2>
   9             <div class="col">
  10             </div>
  11         </div>
  12     </header>
  13
  14     <div class="main-container">
  15
  16         <div class="container-fluid body-container creat-container-all">
  17
  18             <div class="creat-container">
  19                 <div class="creat-action-container">
  20                     <a href="#" class="action-button">
  21                         <i class="icon-clone" aria-hidden="true"></i>
  22                         <span>Clone</span>
  23                     </a>
  24
  25                     <a href="#" class="action-button">
  26                         <i class="icon-archive" aria-hidden="true"></i>
  27                         <span>Archive</span>
  28                     </a>
  29
  30                     <a href="#" class="action-button">
  31                         <i class="icon-delete" aria-hidden="true"></i>
  32                         <span>Delete</span>
  33                     </a>
  34                 </div>
  35                 <nav class="row">
  36                     <div class="col pr-0">
  37                         <button class="float btn btn-sm btn-primary">Save</button>
  38                         <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
  39                     </div>
  40                 </nav>
  41                 <nav class="row">
  42                     <!--Nav Tabs-->
  43                     <div class="col pr-0">
  44                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
  45                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
  46                                href="#nav-metadata"
  47                                role="tab" aria-controls="nav-metadata"
  48                                aria-selected="true">METADATA</a>
  49                             <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
  50                                role="tab" aria-controls="nav-imports"
  51                                aria-selected="false">IMPORTS</a>
  52                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
  53                                href="#nav-authentication"
  54                                role="tab" aria-controls="nav-authentication"
  55                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
  56                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
  57                                role="tab" aria-controls="nav-template"
  58                                aria-selected="false">TEMPLATE & MAPPING</a>
  59                             <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
  60                                role="tab" aria-controls="nav-scripts"
  61                                aria-selected="false">SCRIPTS</a>
  62                         </div>
  63                     </div>
  64
  65                 </nav>
  66                 <div class="row mt-4">
  67                     <div class="col">
  68                         <div class="tab-content" id="nav-tabContent">
  69                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
  70                                  aria-labelledby="nav-metadata-tab">
  71                                 <div class="card creat-card">
  72                                     <div class="single-line">
  73                                         <label class="label-name">Mode</label>
  74                                         <label name="trst" *ngFor="let mode of modes; let i = index">
  75                                             <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
  76                                                    name="exampleRadios" id="exampleRadios1" value={{mode}}>
  77
  78                                             <span>
  79                                             <i [className]="mode.style" aria-hidden="true"></i>
  80                                                 <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> -->
  81                                                 {{mode.name}}
  82                                             </span>
  83                                         </label>
  84                                     </div>
  85                                   <!--  <div class="single-line">
  86                                         <label class="label-name">Dictionary Library Instances</label>
  87                                         <div class="label-input">
  88                                             <select name="cars">
  89                                                 <option class="select-placeholder">Select library</option>
  90                                                 <option value="audi"
  91                                                         *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
  92                                             </select>
  93                                         </div>
  94                                     </div>-->
  95
  96                                 </div>
  97                                 <div class="card creat-card">
  98                                     <div class="single-line">
  99                                         <label class="label-name">Name</label>
 100                                         <div class="label-input">
 101                                             <input type="input" (input)="searchPackages($event)"
 102                                                    [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
 103                                         </div>
 104                                     </div>
 105                                     <hr/>
 106                                     <div class="single-line">
 107                                         <label class="label-name">Description</label>
 108                                         <div class="label-input">
 109                                             <input type="input" placeholder="Descripe the package">
 110                                         </div>
 111                                     </div>
 112                                     <hr/>
 113                                     <div class="single-line">
 114                                         <label class="label-name">Version</label>
 115                                         <div class="label-input">
 116                                             <input type="input" placeholder="Example: 1.0.0">
 117                                         </div>
 118                                     </div>
 119                                     <hr/>
 120                                     <div class="single-line">
 121                                         <label class="label-name">tags</label>
 122                                         <div class="label-input">
 123                                             <input type="input" placeholder="Ex., vDNS-CDS">
 124                                         </div>
 125                                     </div>
 126                                 </div>
 127                                 <div id="container">
 128                                     <div id="target">
 129                                         <div class="card creat-card">
 130                                             <div class="single-line">
 131                                                 <h5 class="label-name">
 132                                                     Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a>
 133                                                 </h5>
 134
 135                                             </div>
 136                                             <div class="single-line">
 137                                                 <label class="label-name">Name</label>
 138                                                 <div class="label-input">
 139                                                     <input type="input" placeholder="Enter Name">
 140                                                 </div>
 141                                             </div>
 142                                             <hr/>
 143                                             <div class="single-line">
 144                                                 <label class="label-name">Value</label>
 145                                                 <div class="label-input">
 146                                                     <input type="input" placeholder="Enter Value">
 147                                                 </div>
 148                                             </div>
 149
 150                                         </div>
 151                                     </div>
 152                                 </div>
 153                                 <div class="card creat-card">
 154                                     <div class="single-line">
 155                                         <div name="custom key">
 156                                             <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
 157                                                     class="fa fa-plus" aria-hidden="true"></i> Add a custom key
 158                                             </button>
 159
 160
 161                                         </div>
 162                                     </div>
 163                                 </div>
 164
 165                             </div>
 166                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
 167                                  aria-labelledby="nav-imports-tab">
 168                                 <div class="import-container-all">
 169                                     <div class="import-container">
 170                                         <div class="import-container-input">
 171                                             <input placeholder="Enter file URL" type="input"
 172                                                    class="ng-pristine ng-valid ng-touched">
 173                                             <a class="enter-link" href="#"><i class="icon-enter"></i></a>
 174                                         </div>
 175                                         <span class="import-container-span">Or you can also <a href="#"
 176                                                                                                data-toggle="modal"
 177                                                                                                data-target="#exampleModal">Import File</a></span>
 178
 179                                     </div>
 180
 181                                     <div class="accordion">
 182                                         <div class="card creat-card">
 183                                             <div class="single-line">
 184                                                 <label class="label-name">File</label>
 185                                             </div>
 186                                         </div>
 187                                         <div id="accordion">
 188                                             <div class="card">
 189                                                 <div class="card-header" id="headingOne">
 190                                                     <h5 class="mb-0 d-flex justify-content-between">
 191                                                         <button class="btn btn-link" data-toggle="collapse"
 192                                                                 data-target="#collapseOne" aria-expanded="true"
 193                                                                 aria-controls="collapseOne">
 194                                                             <i class="icon-file-code"></i> Definitions/data_types.json
 195                                                         </button>
 196                                                         <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
 197                                                     </h5>
 198                                                 </div>
 199
 200                                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
 201                                                      data-parent="#accordion">
 202                                                     <div class="card-body">
 203                                                         Anim pariatur cliche reprehenderit, enim eiusmod high life
 204                                                         accusamus terry richardson ad squid. 3 wolf moon officia aute,
 205                                                         non cupidatat skateboard dolor brunch. Food truck quinoa
 206                                                         nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
 207                                                         put a bird on it squid single-origin coffee nulla assumenda
 208                                                         shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
 209                                                         wes anderson cred nesciunt sapiente ea proident. Ad vegan
 210                                                         excepteur butcher vice lomo. Leggings occaecat craft beer
 211                                                         farm-to-table, raw denim aesthetic synth nesciunt you probably
 212                                                         haven't heard of them accusamus labore sustainable VHS.
 213                                                     </div>
 214                                                 </div>
 215                                             </div>
 216                                             <div class="card">
 217                                                 <div class="card-header" id="headingTwo">
 218                                                     <h5 class="mb-0">
 219                                                         <button class="btn btn-link collapsed" data-toggle="collapse"
 220                                                                 data-target="#collapseTwo" aria-expanded="false"
 221                                                                 aria-controls="collapseTwo">
 222                                                             Definitions/relationship_types.json
 223                                                         </button>
 224                                                     </h5>
 225                                                 </div>
 226                                                 <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
 227                                                      data-parent="#accordion">
 228                                                     <div class="card-body">
 229                                                         Anim pariatur cliche reprehenderit, enim eiusmod high life
 230                                                         accusamus terry richardson ad squid. 3 wolf moon officia aute,
 231                                                         non cupidatat skateboard dolor brunch. Food truck quinoa
 232                                                         nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
 233                                                         put a bird on it squid single-origin coffee nulla assumenda
 234                                                         shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
 235                                                         wes anderson cred nesciunt sapiente ea proident. Ad vegan
 236                                                         excepteur butcher vice lomo. Leggings occaecat craft beer
 237                                                         farm-to-table, raw denim aesthetic synth nesciunt you probably
 238                                                         haven't heard of them accusamus labore sustainable VHS.
 239                                                     </div>
 240                                                 </div>
 241                                             </div>
 242                                             <div class="card">
 243                                                 <div class="card-header" id="headingThree">
 244                                                     <h5 class="mb-0">
 245                                                         <button class="btn btn-link collapsed" data-toggle="collapse"
 246                                                                 data-target="#collapseThree" aria-expanded="false"
 247                                                                 aria-controls="collapseThree">
 248                                                             Definitions/artifact_types.json
 249                                                         </button>
 250                                                     </h5>
 251                                                 </div>
 252                                                 <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
 253                                                      data-parent="#accordion">
 254                                                     <div class="card-body">
 255                                                         Anim pariatur cliche reprehenderit, enim eiusmod high life
 256                                                         accusamus terry richardson ad squid. 3 wolf moon officia aute,
 257                                                         non cupidatat skateboard dolor brunch. Food truck quinoa
 258                                                         nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
 259                                                         put a bird on it squid single-origin coffee nulla assumenda
 260                                                         shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
 261                                                         wes anderson cred nesciunt sapiente ea proident. Ad vegan
 262                                                         excepteur butcher vice lomo. Leggings occaecat craft beer
 263                                                         farm-to-table, raw denim aesthetic synth nesciunt you probably
 264                                                         haven't heard of them accusamus labore sustainable VHS.
 265                                                     </div>
 266                                                 </div>
 267                                             </div>
 268                                         </div>
 269                                     </div>
 270
 271                                 </div>
 272                             </div>
 273                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
 274                                  aria-labelledby="nav-authentication-tab">...
 275                             </div>
 276                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
 277                                  aria-labelledby="nav-template-tab">...
 278                             </div>
 279                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
 280                                  aria-labelledby="nav-scripts-tab">...
 281                             </div>
 282                         </div>
 283                     </div>
 284                 </div>
 285             </div>
 286         </div>
 287     </div>
 288 </div>
 289
 290 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
 291      aria-hidden="true">
 292     <div class="modal-dialog" role="document">
 293         <div class="modal-content">
 294             <div class="modal-header">
 295                 <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
 296                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 297                     <span aria-hidden="true">&times;</span>
 298                 </button>
 299             </div>
 300             <div class="modal-body">
 301                 ...
 302             </div>
 303             <div class="modal-footer">
 304                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 305                 <button type="button" class="btn btn-primary">Import</button>
 306             </div>
 307         </div>
 308     </div>
 309 </div>