summaryrefslogtreecommitdiffstats
path: root/docs/guides/onap-developer/tutorials/index.rst
blob: 2365efd10c6517874f2fad3ff06e6a88bffb002c (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.. This work is licensed under a Creative Commons Attribution 4.0 International License.

Tutorials
=========

.. note::
   Until this section is migrated to gerrit/readthedocs, use the links below.

.. caution::
   The tutorials may refer to earlier versions of software
   and have not been certified on the latest Amsterdam Release.

* `Automatically Creating a Netconf Mount in APPC from SDNC <https://wiki.onap.org/x/JYUx>`_

* `Clearwater vIMS Onboarding and Instantiation <https://wiki.onap.org/x/RJp9>`_

* `How to use SLI-API for SDNC Model, Directed Graph and Adapter prototyping <https://wiki.onap.org/x/0wCW>`_

* `Setting up a Nexus Proxy <https://wiki.onap.org/x/_y70>`_
*/ .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */ } 
<div id="service-instance-details">
  <form id="serviceForm" #serviceForm="ngForm" (ngSubmit)="onSubmit(serviceForm.value)" [formGroup]="serviceInstanceDetailsFormGroup">
    <!--We can't use [hidden] since bootstrap.css label has display: inline-block. -->
    <!--see https://stackoverflow.com/questions/34650410/angular-2-hidden-does-not-seem-to-be-working-->
    <label id="notification-area" *ngIf="isShowingNotificationArea()">Data entered will apply to all service instances</label>

    <div class="details-item" *ngIf="serviceInstanceDetailsFormGroup.get('instanceName')">
      <label class="required">Instance name:</label>
      <input patternInput
             pattern="^[a-zA-Z0-9_]*$"
             [attr.data-tests-id]="'instanceName'"
             id="instance-name"
             name="instance-name"
             [ngClass]="{'error-style' :(serviceInstance?.instanceName != '' && serviceInstanceDetailsFormGroup.controls['instanceName']?.touched && serviceInstanceDetailsFormGroup.controls['instanceName']?.errors?.pattern !== null)}"
             [formControlName]="'instanceName'"
             class="form-control input-text"
             placeholder="Type Instance Name"
             type="text"
             [(ngModel)]="serviceInstance.instanceName" required>
      <form-control-error
        *ngIf="serviceInstance?.instanceName != '' && serviceInstanceDetailsFormGroup.controls['instanceName']?.touched && serviceInstanceDetailsFormGroup.controls['instanceName']?.errors?.pattern !== null"
        [message]="'Instance name may include only alphanumeric characters and underscore.'"></form-control-error>

    </div>

    <div class="details-item">
      <label class="required">Subscriber name:</label>
      <select class="subscriber form-control input-text" id="subscriber-name-select" data-tests-id="subscriberName"
              name="subscriber-name-select" [formControlName]="'globalSubscriberId'"
              [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('globalSubscriberId',servicePopupDataModel?.subscribers, serviceInstanceDetailsFormGroup)}"
              [(ngModel)]="serviceInstance.globalSubscriberId"
              required>
        <option [value]="undefined" disabled>Select Subscriber Name</option>
        <option class="subscriberNameOption" *ngFor="let subscriber of servicePopupDataModel.subscribers"
                [value]="subscriber.id" [disabled]="!subscriber.isPermitted">{{subscriber.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('globalSubscriberId',servicePopupDataModel?.subscribers, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>

    </div>

    <div class="details-item">
      <label class="required">Service type:</label>
      <select class="form-control input-text"
              [(ngModel)]="serviceInstance.subscriptionServiceType"
              [formControlName]="'subscriptionServiceType'"
              [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('subscriptionServiceType',servicePopupDataModel?.serviceTypes, serviceInstanceDetailsFormGroup)}"
              data-tests-id="serviceType" id="service-type-select"
              name="service-type" required>
        <option [value]="undefined" disabled>Select Service Type</option>
        <option *ngFor="let serviceType of servicePopupDataModel.serviceTypes" class="serviceTypeOption" [value]="serviceType.name" [disabled]="!serviceType.isPermitted">{{serviceType.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('subscriptionServiceType',servicePopupDataModel?.serviceTypes, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
    </div>

    <div class="details-item">
      <label class="required">Product family:</label>
      <select class="form-control input-text"
              data-tests-id="productFamily"
              id="product-family-select"
              [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('productFamilyId',productFamilies, serviceInstanceDetailsFormGroup)}"
              [formControlName]="'productFamilyId'"
              [(ngModel)]="serviceInstance.productFamilyId"
              name="product-family-select" required>
        <option [value]="undefined" disabled>Select Product Family</option>
        <option *ngFor="let productFamily of productFamilies | async" [value]="productFamily.id"
                [disabled]="!productFamily.isPermitted">{{productFamily.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('productFamilyId',productFamilies, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
    </div>

    <div class="details-item">
      <label class="required">LCP region:</label>
      <select
        class="form-control input-text"
        [formControlName]="'lcpCloudRegionId'"
        [(ngModel)]="serviceInstance.lcpCloudRegionId"
        [ngClass]="{'error-style ' : serviceInstanceDetailsService.hasApiError('lcpCloudRegionId', servicePopupDataModel?.lcpRegions, serviceInstanceDetailsFormGroup)}"
        name="lcpRegion"
        id="lcpRegion-select"
        data-tests-id="lcpRegion"
        required>
        <option [value]="undefined" disabled>Select LCP Region</option>
        <option *ngFor="let lcpRegion of servicePopupDataModel.lcpRegions" [value]="lcpRegion.id" [disabled]="!lcpRegion.isPermitted" class="lcpRegionOption">{{lcpRegion.id}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('lcpCloudRegionId', servicePopupDataModel?.lcpRegions, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
    </div>

    <div class="details-item">
      <label class="required">Tenant:</label>
      <select class="form-control input-text"
              [formControlName]="'tenantId'"
              [(ngModel)]="serviceInstance.tenantId"
              name="tenant" id="tenant-select"
              [ngClass]="{'error-style ' : serviceInstanceDetailsService.hasApiError('tenantId',servicePopupDataModel?.tenants ,serviceInstanceDetailsFormGroup)}"
              data-tests-id="tenant" required>
        <option [value]="undefined" disabled>Select Tenant</option>
        <option *ngFor="let tenant of servicePopupDataModel.tenants" [value]="tenant.id" [disabled]="!tenant.isPermitted">{{tenant.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('tenantId',servicePopupDataModel?.tenants ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
    </div>

    <div class="details-item">
      <label>AIC Zone:</label>
      <select
        class="form-control input-text"
        name="aicZone" id="aicZone-select"
        data-tests-id="aic_zone"
        [formControlName]="'aicZoneId'"
        [ngClass]="{'error-style ' : servicePopupDataModel?.aicZones?.length == 0 && serviceInstanceDetailsFormGroup.controls['aicZoneId'].disabled == false}"
        [(ngModel)]="serviceInstance.aicZoneId" >
        <option [value]="undefined" disabled>Select AIC Zone</option>
        <option class="aicZoneOption" *ngFor="let aicZone of servicePopupDataModel.aicZones" [value]="aicZone.id">{{aicZone.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('aicZoneId',servicePopupDataModel?.aicZones ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>

    </div>

    <div class="details-item">
      <label>Project:</label>
      <select
        [attr.data-tests-id]="'project'"
        class="form-control input-text"
        [ngClass]="{'error-style ' : servicePopupDataModel?.projects?.length == 0 && serviceInstanceDetailsFormGroup.controls['projectName'].disabled == false}"
        name="project" id="project"
        [formControlName]="'projectName'"
        [(ngModel)]="serviceInstance.projectName" >
        <option [value]="undefined" disabled>Select Project</option>
        <option *ngFor="let project of servicePopupDataModel.projects" [value]="project.id">{{project.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('projectName',servicePopupDataModel?.projects ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>

    </div>

    <div class="details-item">
      <label class="required">Owning entity:</label>
      <select [attr.data-tests-id]="'owningEntity'"
              class="form-control input-text"
              [formControlName]="'owningEntityId'"
              [(ngModel)]="serviceInstance.owningEntityId"
              name="owningEntity" id="owningEntity"
              [ngClass]="{'error-style ' : servicePopupDataModel?.owningEntities?.length == 0 && serviceInstanceDetailsFormGroup.controls['owningEntityId'].disabled == false}"
              required>
        <option [value]="undefined" disabled>Select Owning Entity</option>
        <option *ngFor="let owningEntity of servicePopupDataModel.owningEntities" [value]="owningEntity.id">{{owningEntity.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('owningEntityId',servicePopupDataModel?.owningEntities ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
    </div>
    <div class="details-item">
      <label class="required">Rollback On Failure:</label>
      <select [attr.data-tests-id]="'rollback'"
              [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('rollbackOnFailure',servicePopupDataModel?.rollbackOnFailure, serviceInstanceDetailsFormGroup)}"
              class="form-control input-text"
              [(ngModel)]="serviceInstance.rollbackOnFailure"
              [formControlName]="'rollbackOnFailure'" name="rollbackOnFailure" id="rollbackOnFailure">
        <option *ngFor="let option of servicePopupDataModel.rollbackOnFailure" [value]="option.id">{{option.name}}</option>
      </select>
      <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('rollbackOnFailure',servicePopupDataModel?.rollbackOnFailure, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
    </div>
    <div class="details-item" *ngIf="serviceInstanceDetailsFormGroup.get('pause')">
      <input  #pause id="pause" [formControlName]="'pause'" [(ngModel)]="serviceInstance.pause" type="checkbox" name="pause" data-toggle="toggle">
      <label class="checkbox-label" for="pause">Pause on pause points:</label>
    </div>


    <dynamic-inputs *ngIf="dynamicInputs != undefined && dynamicInputs.length>0" [group]="serviceInstanceDetailsFormGroup" [list]="dynamicInputs"></dynamic-inputs>
  </form>
</div>