src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html

   1 <!--
   2   ============LICENSE_START=======================================================
   3   ONAP CLAMP
   4   ================================================================================
   5   Copyright (C) 2017-2019 AT&T Intellectual Property. All rights
   6                               reserved.
   7   ================================================================================
   8   Licensed under the Apache License, Version 2.0 (the "License");
   9   you may not use this file except in compliance with the License.
  10   You may obtain a copy of the License at
  11
  12   http://www.apache.org/licenses/LICENSE-2.0
  13
  14   Unless required by applicable law or agreed to in writing, software
  15   distributed under the License is distributed on an "AS IS" BASIS,
  16   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17   See the License for the specific language governing permissions and
  18   limitations under the License.
  19   ============LICENSE_END============================================
  20   ===================================================================
  21
  22   -->
  23
  24
  25 <style>
  26 .disabled {
  27         background-color: #dddd;
  28 }
  29
  30 label {
  31         text-align: right;
  32         vertical-align: middle;
  33 }
  34
  35 .leftPolicyPanel {
  36         padding: 0 10px 0 0;
  37 }
  38
  39 .idError {
  40         color: red;
  41         padding: 50px 0px;
  42         text-align: center;
  43         display: none;
  44 }
  45
  46 .policyPanel {
  47         background-color: #f5f5f5;
  48         padding: 15px 5px 0 5px;
  49 }
  50
  51 .form-group.clearfix {
  52         display: -webkit-flex;
  53         display: flex;
  54         align-items: center;
  55 }
  56
  57 label {
  58         margin-bottom: 0px;
  59 }
  60
  61 .withnote {
  62         margin-bottom: 0px;
  63 }
  64
  65 .note {
  66         font-size:10px;
  67         margin-left: 250px;
  68         font-weight: normal;
  69 }
  70
  71 #policyTable {
  72         cursor: pointer;
  73         width: 100%;
  74 }
  75
  76 #policyTable tr {
  77         border-bottom: 1px solid #ddd;
  78         border-collapse: collapse;
  79         text-align: left;
  80         font-size: 12px;
  81         font-weight: normal;
  82 }
  83
  84 #policyTable td {
  85         padding: 8px 10px;
  86 }
  87
  88 #policyTable tr.highlight {
  89         background-color: #f5f5f5;
  90         font-weight: bold;
  91         font-size: 13px;
  92 }
  93
  94 #policyTableHolder {
  95         height: 200px;
  96         width: 100%;
  97         overflow: auto;
  98 }
  99 </style>
 100
 101
 102 <div attribute-test="policywindowproperties" id="configure-widgets"
 103         class="disabled-block-container">
 104         <div attribute-test="policywindowpropertiesh" class="modal-header">
 105                 <button type="button" class="close" ng-click="close(false)"
 106                         aria-hidden="true" style="margin-top: -3px">&times;</button>
 107                 <h4>Operational Policy</h4>
 108         </div>
 109
 110
 111         <div class="modal-body">
 112                 <div attribute-test="policywindowpropertiesb" class="modal-body row">
 113
 114                         <div class="panel panel-default col-sm-10 policyPanel">
 115                                 <form id="operationalPolicyHeaderForm" class="form-horizontal">
 116                                                 <div class="form-group clearfix">
 117                                                         <label class="col-sm-2">Parent policy</label>
 118                                                         <div class="col-sm-3" style="padding: 0px;">
 119                                                                 <select type="text" id="trigger_policy" name="trigger_policy"
 120                                                                         class="form-control" ng-model="null_dump"
 121                                                                         ng-init="initPolicySelect()"
 122                                                                         ng-options="policy for policy in policy_ids track by policy">
 123                                                                         <option value="">-- choose an option --</option>
 124                                                                         </select>
 125                                                         </div>
 126
 127                                                         <label for="timeout" class="col-sm-3"
 128                                                                 style="padding-left: 5px; padding-right: 10px;">Overall
 129                                                                 Time Limit</label>
 130                                                         <div class="col-sm-2" style="padding-left: 0px;">
 131                                                                 <input type="text" ng-pattern="/^[0-9]*$/" ng-model="number"
 132                                                                         class="form-control" id="timeout" name="timeout">
 133                                                         </div>
 134
 135                                                         <label for="abatement" class="col-sm-2">Abatement</label>
 136                                                         <div class="col-sm-2" style="padding-left: 0px;">
 137                                                                 <select class="form-control" id="abatement" name="abatement">
 138                                                                         <option value="false" selected>False</option>
 139                                                                         <option value="true">True</option>
 140                                                                 </select>
 141                                                         </div>
 142                                                 </div>
 143                                                 <div class="form-group clearfix row">
 144                                                     <label class="col-sm-4 control-label" for="clname">ControlLoopName</label>
 145                                                     <div class="col-sm-8">
 146                                                             <input type="text" class="form-control" name="controlLoopName"
 147                                                                     readonly="readonly" id="clname" ng-model="clname"/>
 148                                                     </div>
 149                                                 </div>
 150                                 </form>
 151                                 <div class="panel-heading" style="background-color: white;">
 152                                         <ul id="nav_Tabs" class="nav nav-tabs">
 153                                                 <li class><a id="add_one_more" href="#desc_tab"><span
 154                                                                 class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
 155                                         </ul>
 156                                 </div>
 157                                 <div class="panel-body">
 158                                         <div class="tab-content">
 159                                                 <div id="properties_tab" class="tab-pane fade in active"></div>
 160                                         </div>
 161                                 </div>
 162                         </div>
 163
 164                         <span id="formSpan" style="display: none">
 165                                 <form class="policyProperties" class="form-horizontal"
 166                                         style="border: 2px dotted gray;"
 167                                         title="Operational Policy Properties">
 168                                         <div class="form-group clearfix">
 169                                                 <label class="col-sm-4 control-label" for="id">ID</label>
 170                                                 <div class="col-sm-8">
 171                                                         <input type="text" class="form-control"  name="id" id="id" ng-model="duplicated" ng-init="duplicated = false"
 172                                                                 ng-keyup="updateTabLabel($event)" />
 173                                                         <span >ID must be unique</span>
 174                                                 </div>
 175                                         </div>
 176                                         <div class="form-group clearfix">
 177                                                 <label class="col-sm-4 control-label" for="recipe">Recipe</label>
 178                                                 <div class="col-sm-8">
 179                                                         <select class="form-control" name="recipe" id="recipe"
 180                                                                 enableFilter="true"  ng-model="recipe" ng-click="updateGuardRecipe($event)">
 181                                                                 <option value="">-- choose an option --</option>
 182                                                                 <option value="Restart">Restart</option>
 183                                                                 <option value="Rebuild">Rebuild</option>
 184                                                                 <option value="Migrate">Migrate</option>
 185                                                                 <option value="Health-Check">Health-Check</option>
 186                                                                 <option value="ModifyConfig">ModifyConfig</option>
 187                                                                 <option value="VF Module Create">VF Module Create</option>
 188                                                                 <option value="VF Module Delete">VF Module Delete</option>
 189                                                                 <option value="Reroute">Reroute</option>
 190                                                         </select>
 191                                                 </div>
 192                                         </div>
 193                                         <div class="form-group clearfix">
 194                                                 <label for="retry" class="col-sm-4 control-label"> Retry</label>
 195                                                 <div class="col-sm-8">
 196                                                         <input type="text" maxlength="5" class="form-control" id="retry"
 197                                                                 ng-pattern="/^[0-9]*$/" ng-model="number" name="retry">
 198                                                         </input>
 199                                                 </div>
 200                                         </div>
 201                                         <div class="form-group clearfix">
 202                                                 <label for="timeout" class="col-sm-4 control-label">
 203                                                         Timeout</label>
 204                                                 <div class="col-sm-8">
 205                                                         <input type="text" maxlength="5" class="form-control"
 206                                                                 id="timeout" ng-pattern="/^[0-9]*$/" ng-model="number"
 207                                                                 name="timeout"></input>
 208                                                 </div>
 209                                         </div>
 210
 211                                         <div class="form-group clearfix">
 212                                                 <label for="actor" class="col-sm-4 control-label"> Actor</label>
 213                                                 <div class="col-sm-8">
 214                                                         <select class="form-control" id="actor" name="actor" ng-click="updateGuardActor($event)" ng-model="actor">
 215                                                             <option value="">-- choose an option --</option>
 216                                                                 <option value="APPC">APPC</option>
 217                                                                 <option value="SO">SO</option>
 218                                                                 <option value="VFC">VFC</option>
 219                                                                 <option value="SDNC">SDNC</option>°
 220                                                                 <option value="SDNR">SDNR</option>°
 221                                                         </select>
 222                                                 </div>
 223
 224                                                 <label for="payload" class="col-sm-4 control-label">
 225                                                         Payload (YAML)</label>
 226                                                 <div class="col-sm-8">
 227                                                         <textarea class="form-control" id="payload" name="payload"></textarea>
 228                                                 </div>
 229                                         </div>
 230                                         <div class="form-group clearfix">
 231                                                 <label for="success" class="col-sm-4 control-label">When
 232                                                         Success</label>
 233                                                 <div class="col-sm-8">
 234                                                         <select class="form-control" id="success" name="success"
 235                                                                 ng-model="null_dump"
 236                                                                 ng-options="policy for policy in policy_ids track by policy">
 237                                                                 <option value="">-- choose an option --</option>
 238                                                                 </select>
 239                                                 </div>
 240                                         </div>
 241                                         <div class="form-group clearfix">
 242                                                 <label for="failure" class="col-sm-4 control-label">When
 243                                                         Failure</label>
 244                                                 <div class="col-sm-8">
 245                                                         <select class="form-control" id="failure" name="failure"
 246                                                                 ng-model="null_dump"
 247                                                                 ng-options="policy for policy in policy_ids track by policy">
 248                                                                 <option value="">-- choose an option --</option>
 249                                                                 </select>
 250
 251                                                 </div>
 252                                         </div>
 253                                         <div class="form-group clearfix">
 254                                                 <label for="failure_timeout" class="col-sm-4 control-label">When
 255                                                         Failure Timeout</label>
 256                                                 <div class="col-sm-8">
 257                                                         <select class="form-control" id="failure_timeout"
 258                                                                 name="failure_timeout" ng-model="null_dump"
 259                                                                 ng-options="policy for policy in policy_ids track by policy">
 260                                                                 <option value="">-- choose an option --</option>
 261                                                                 </select>
 262                                                 </div>
 263                                         </div>
 264                                         <div class="form-group clearfix">
 265                                                 <label for="failure_retries" class="col-sm-4 control-label">When
 266                                                         Failure Retries</label>
 267                                                 <div class="col-sm-8">
 268                                                         <select class="form-control" id="failure_retries"
 269                                                                 name="failure_retries" ng-model="null_dump"
 270                                                                 ng-options="policy for policy in policy_ids track by policy">
 271                                                                 <option value="">-- choose an option --</option>
 272                                                                 </select>
 273                                                 </div>
 274                                         </div>
 275                                         <div class="form-group clearfix">
 276                                                 <label for="failure_exception" class="col-sm-4 control-label">When
 277                                                         Failure Exception</label>
 278                                                 <div class="col-sm-8">
 279                                                         <select class="form-control" id="failure_exception"
 280                                                                 name="failure_exception" ng-model="null_dump"
 281                                                                 ng-options="policy for policy in policy_ids track by policy">
 282                                                                 <option value="">-- choose an option --</option>
 283                                                                 </select>
 284                                                 </div>
 285                                         </div>
 286                                         <div class="form-group clearfix">
 287                                                 <label for="failure_guard" class="col-sm-4 control-label">When
 288                                                         Failure Guard</label>
 289                                                 <div class="col-sm-8">
 290                                                         <select class="form-control" id="failure_guard"
 291                                                                 name="failure_guard" ng-model="null_dump"
 292                                                                 ng-options="policy for policy in policy_ids track by policy">
 293                                                                 <option value="">-- choose an option --</option>
 294                                                                 </select>
 295                                                 </div>
 296                                         </div>
 297                                 </form>
 298                                 <form class="policyTarget" class="form-horizontal"
 299                                         title="Operational Policy Target" style="border: 2px dotted gray;">
 300                                         <div class="form-group clearfix">
 301                                                 <label for="type" class="col-sm-4 control-label"> Target
 302                                                         Type</label>
 303                                                 <div class="col-sm-8">
 304                                                         <select class="form-control" name="type" id="type"
 305                                                                 ng-click="initTargetResourceId($event)" ng-model="type">
 306                                                                 <option value="">-- choose an option --</option>
 307                                                                 <option value="VFMODULE">VFMODULE</option>
 308                                                                 <option value="VM">VM</option>
 309                                                                 <option value="VNF">VNF</option>
 310                                                         </select>
 311                                                 </div>
 312                                         </div>
 313                                         <div class="form-group clearfix">
 314                                                 <label for="resourceID" class="col-sm-4 control-label">
 315                                                         Target ResourceId</label>
 316                                                 <div class="col-sm-8">
 317                                                         <select class="form-control" name="resourceID" id="resourceID"
 318                                                                 enableFilter="true" ng-click="changeTargetResourceId($event)"
 319                                                                 ng-model="resourceId">
 320                                                                 <option value="">-- choose an option --</option>
 321                                                         </select>
 322                                                 </div>
 323                                         </div>
 324                                         <div id="metadata">
 325                                                 <div class="form-group clearfix">
 326                                                         <label for="modelInvariantId" class="col-sm-4 control-label">
 327                                                                 Model Invariant Id</label>
 328                                                         <div class="col-sm-8">
 329                                                                 <input class="form-control" name="modelInvariantId"
 330                                                                         id="modelInvariantId" readonly />
 331                                                         </div>
 332                                                 </div>
 333                                                 <div class="form-group clearfix">
 334                                                         <label for="modelVersionId" class="col-sm-4 control-label">
 335                                                                 Model Version Id</label>
 336                                                         <div class="col-sm-8">
 337                                                                 <input class="form-control" name="modelVersionId"
 338                                                                         id="modelVersionId" readonly />
 339                                                         </div>
 340                                                 </div>
 341                                                 <div class="form-group clearfix">
 342                                                         <label for="modelName" class="col-sm-4 control-label">
 343                                                                 Model Name</label>
 344                                                         <div class="col-sm-8">
 345                                                                 <input class="form-control" name="modelName" id="modelName"
 346                                                                         readonly />
 347                                                         </div>
 348                                                 </div>
 349                                                 <div class="form-group clearfix">
 350                                                         <label for="modelVersion" class="col-sm-4 control-label">
 351                                                                 Model Version</label>
 352                                                         <div class="col-sm-8">
 353                                                                 <input class="form-control" name="modelVersion"
 354                                                                         id="modelVersion" readonly />
 355                                                         </div>
 356                                                 </div>
 357                                                 <div class="form-group clearfix">
 358                                                         <label for="modelCustomizationId" class="col-sm-4 control-label">
 359                                                                 Model Customization Id</label>
 360                                                         <div class="col-sm-8">
 361                                                                 <input class="form-control" name="modelCustomizationId"
 362                                                                         id="modelCustomizationId" readonly />
 363                                                         </div>
 364                                                 </div>
 365                                         </div>
 366                                 </form>
 367                                 <div class="form-group clearfix">
 368                                         <label for="enableGuardPolicy" class="col-sm-4 control-label">
 369                                                 Enable Guard Policy</label>
 370                                         <div class="col-sm-8">
 371                                                 <input type="checkbox" class="form-control"
 372                                                         name="enableGuardPolicy" id="enableGuardPolicy">
 373                                         </div>
 374
 375                                         <div class="col-sm-8">
 376                                                 <label for="guardPolicyType" class="col-sm-4 control-label">
 377                                                         Guard Policy Type</label> <select class="form-control"
 378                                                         name="guardPolicyType" id="guardPolicyType"
 379                                                         ng-click="changeGuardPolicyType()" ng-model="guardType">
 380                                                         <option value="GUARD_MIN_MAX">MinMax</option>
 381                                                         <option value="GUARD_YAML">FrequencyLimiter</option>
 382                                                 </select>
 383                                         </div>
 384                                 </div>
 385                                 <form class="guardProperties" class="form-horizontal"
 386                                         title="Guard policy associated" style="border: 2px dotted gray;">
 387
 388                                         <div class="form-group clearfix withnote">
 389                                                 <label class="col-sm-4 control-label" for="id">Guard Policy ID</label>
 390                                                 <div class="col-sm-8">
 391                                                         <input type="text" class="form-control" name="id" id="id" ng-blur="changeGuardId()" ng-model="id"/>
 392                                                 </div>
 393                                         </div>
 394                                         <div>
 395                                                 <label class="form-group note">Note: Prefix will be added to Guard Policy ID automatically based on Guard Policy Type</label>
 396                                         </div>
 397                                         <div class="form-group clearfix">
 398                                                 <label class="col-sm-4 control-label" for="recipe">Recipe</label>
 399                                                 <div class="col-sm-8">
 400                                                         <input type="text" class="form-control" name="recipe"
 401                                                                 readonly="readonly" id="recipe"/>
 402                                                 </div>
 403                                         </div>
 404                                         <div class="form-group clearfix">
 405                                                 <label class="col-sm-4 control-label" for="clname">ControlLoopName</label>
 406                                                 <div class="col-sm-8">
 407                                                         <input type="text" class="form-control" name="clname"
 408                                                                 readonly="readonly" id="clname" ng-model="clname"/>
 409                                                 </div>
 410                                         </div>
 411                                         <div class="form-group clearfix">
 412                                             <label for="actor" class="col-sm-4 control-label">Actor</label>
 413                                                 <div class="col-sm-8">
 414                                                     <input type="text" class="form-control" name="actor"
 415                                                                 readonly="readonly" id="actor" />
 416                                                 </div>
 417                                         </div>
 418                                         <div class="form-group clearfix">
 419
 420                                                 <label for="targets" class="col-sm-4 control-label">Guard
 421                                                         targets</label>
 422                                                 <div class="col-sm-8">
 423                                                         <input class="form-control" name="targets" id="targets" />
 424                                                 </div>
 425                                         </div>
 426
 427                                         <div class="form-group clearfix" id="minMaxGuardPolicyDiv">
 428                                                 <label for="min" class="col-sm-4 control-label"> Min
 429                                                         Guard</label>
 430                                                 <div class="col-sm-8">
 431                                                         <input class="form-control" name="min" id="min" />
 432                                                 </div>
 433                                                 <label for="max" class="col-sm-4 control-label"> Max
 434                                                         Guard</label>
 435                                                 <div class="col-sm-8">
 436                                                         <input class="form-control" name="max" id="max" />
 437                                                 </div>
 438                                         </div>
 439                                         <div class="form-group clearfix"
 440                                                 id="frequencyLimiterGuardPolicyDiv" style="display: none">
 441                                                 <label for="limit" class="col-sm-4 control-label">Limit</label>
 442                                                 <div class="col-sm-8">
 443                                                         <input class="form-control" name="limit" id="limit" />
 444                                                 </div>
 445                                                 <label for="timeUnits" class="col-sm-4 control-label">Time Units</label>
 446                                                 <div class="col-sm-8">
 447                                                         <select class="form-control" name="timeUnits"
 448                                                                 id="timeUnits">
 449                                                                 <option value=""></option>
 450                                                                 <option value="minute">minute</option>
 451                                                                 <option value="hour">hour</option>
 452                                                                 <option value="day">day</option>
 453                                                                 <option value="week">week</option>
 454                                                                 <option value="month">month</option>
 455                                                                 <option value="year">year</option>
 456                                                         </select>
 457                                                 </div>
 458                                                 <label for="timeWindow" class="col-sm-4 control-label">Time     Window</label>
 459                                                 <div class="col-sm-8">
 460                                                         <input class="form-control" name="timeWindow" id="timeWindow" />
 461                                                 </div>
 462                                         </div>
 463                                         <div class="form-group clearfix">
 464                                                 <label for="guardActiveStart" class="col-sm-4 control-label">
 465                                                         Guard Active Start</label>
 466                                                 <div class="col-sm-8">
 467                                                         <input class="form-control" name="guardActiveStart"
 468                                                                 id="guardActiveStart"  value="00:00:00Z"/>
 469                                                 </div>
 470                                                 <label for="guardActiveEnd" class="col-sm-4 control-label">
 471                                                         Guard Active End</label>
 472                                                 <div class="col-sm-8">
 473                                                         <input class="form-control" name="guardActiveEnd"
 474                                                                 id="guardActiveEnd" value="00:00:01Z"/>
 475                                                 </div>
 476                                         </div>
 477
 478                                 </form>
 479
 480                         </span>
 481                 </div>
 482         </div>
 483
 484         <div attribute-test="policywindowpropertiesf" class="modal-footer">
 485                 <button id="savePropsBtn" class="btn btn-primary" ng-disabled="duplicated">Close</button>
 486                 <button ng-click="close(true)" id="close_button"
 487                         class="btn btn-primary">Cancel</button>
 488         </div>
 489
 490 </div>