summary |
shortlog |
log |
commit | commitdiff |
review |
tree
raw |
patch |
inline | side by side (from parent 1:
95bc56f)
Change-Id: I0eff15c23ee34238c509d776957320ce11dec79d
Issue-ID: NONRTRIC-230
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>
-->
<div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
-->
<div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
- <div *ngIf="policyInstanceId">{{policyInstanceId}}</div>
+ <div *ngIf="policyInstanceId">[{{this.ric}}] {{policyInstanceId}}</div>
</div>
<div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
<div class="logo">
</div>
<div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
<div class="logo">
<svg class="logo__icon" viewBox="150.3 22.2 1000 50">
<text class="logo__text" [ngClass]="{'logo__text-dark': darkMode}" font-size="30" font-weight="600"
letter-spacing=".1em" transform="translate(149 56)">
<svg class="logo__icon" viewBox="150.3 22.2 1000 50">
<text class="logo__text" [ngClass]="{'logo__text-dark': darkMode}" font-size="30" font-weight="600"
letter-spacing=".1em" transform="translate(149 56)">
- <tspan>Policy without type</tspan>
+ <tspan>< No type></tspan>
fxLayoutAlign.lt-sm="flex-start center">
<mat-card class="card" [ngClass]="{'card-dark': darkMode}">
fxLayoutAlign.lt-sm="flex-start center">
<mat-card class="card" [ngClass]="{'card-dark': darkMode}">
- <h4>
- Near-RT RIC
- </h4>
<mat-form-field *ngIf="!this.policyInstanceId">
<mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
<mat-form-field *ngIf="!this.policyInstanceId">
<mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
- placeholder="Select Near-RT RIC">
+ placeholder="Target"
+ matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
<mat-option *ngFor="let ric of this.allRics" [value]="ric">
{{ric}}
</mat-option>
<mat-option *ngFor="let ric of this.allRics" [value]="ric">
{{ric}}
</mat-option>
style="width: 300px;">
<div *ngIf="ricSelector.errors.required">
<mat-error role="alert">
style="width: 300px;">
<div *ngIf="ricSelector.errors.required">
<mat-error role="alert">
- A Near-RT RIC must be selected.
+ This field is required.
</mat-error>
</div>
</div>
</mat-form-field>
</mat-error>
</div>
</div>
</mat-form-field>
- <div *ngIf="this.policyInstanceId">
- {{this.ric}}
- </div>
-
<h4>
Properties
</h4>
<mat-form-field style="width: 800px;">
<textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
<h4>
Properties
</h4>
<mat-form-field style="width: 800px;">
<textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
- cdkAutosizeMinRows="10" required [(value)]="this.policyJson" placeholder="Policy properties">
+ cdkAutosizeMinRows="10" required [(value)]="this.policyJson" placeholder="Policy properties"
+ matTooltip="The properties of the policy instance, in JSON format" matTooltipPosition="before">
</textarea>
<div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)">
<div *ngIf="policyJsonTextArea.errors.required">
<mat-error role="alert">
</textarea>
<div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)">
<div *ngIf="policyJsonTextArea.errors.required">
<mat-error role="alert">
- The policy properties are required.
+ This field is required.
</mat-error>
</div>
<div *ngIf="policyJsonTextArea.errors.invalidJson">
</mat-error>
</div>
<div *ngIf="policyJsonTextArea.errors.invalidJson">
/* Green */
margin-right: 10px;
}
/* Green */
margin-right: 10px;
}
+
+.header {
+ background: linear-gradient(to bottom, white 0%, grayscale($color: #eeeaea) 100%);
+ font-size: 40px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ margin-left: 2px;
+ margin-right: 2px;
+}
+
+.header-dark {
+ background: #2B244D;
+}
+
+
+.card {
+ height: 100%;
+ width: 100%;
+ margin-left: 2px;
+ margin-right: 2px;
+ background-color: grayscale($color: #eeeaea);
+}
+
+.card-dark {
+ background-color: #1c1c24;
+}
-->
<div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
-->
<div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
- <div *ngIf="policyInstanceId">{{policyInstanceId}}</div>
+ <div *ngIf="policyInstanceId">[{{this.ric}}] {{policyInstanceId}}</div>
</div>
<div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
<div class="logo">
</div>
<div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
<div class="logo">
fxLayoutAlign.lt-sm="flex-start center">
<mat-card class="card" [ngClass]="{'card-dark': darkMode}">
fxLayoutAlign.lt-sm="flex-start center">
<mat-card class="card" [ngClass]="{'card-dark': darkMode}">
- <h4>
- Near-RT RIC
- </h4>
<mat-form-field *ngIf="!this.policyInstanceId">
<mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
<mat-form-field *ngIf="!this.policyInstanceId">
<mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
- placeholder="Select Near-RT RIC">
+ placeholder="Target"
+ matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
<mat-option *ngFor="let ric of this.allRics" [value]="ric">
{{ric}}
</mat-option>
</mat-select>
<div *ngIf="ricSelector.invalid && (ricSelector.dirty || ricSelector.touched)">
<div *ngIf="ricSelector.errors.required">
<mat-option *ngFor="let ric of this.allRics" [value]="ric">
{{ric}}
</mat-option>
</mat-select>
<div *ngIf="ricSelector.invalid && (ricSelector.dirty || ricSelector.touched)">
<div *ngIf="ricSelector.errors.required">
- <mat-error role="alert">A Near-RT RIC must be selected.</mat-error>
+ <mat-error role="alert">This field is required.</mat-error>
</div>
</div>
</mat-form-field>
</div>
</div>
</mat-form-field>
- <div *ngIf="this.policyInstanceId">
- {{this.ric}}
- </div>
<h4 class="default-cursor" (click)="toggleVisible('form')">
<mat-icon matTooltip="Properties">{{isVisible.form ? 'expand_less' : 'expand_more'}}</mat-icon>
<h4 class="default-cursor" (click)="toggleVisible('form')">
<mat-icon matTooltip="Properties">{{isVisible.form ? 'expand_less' : 'expand_more'}}</mat-icon>
multiTemplateDataRows [dataSource]="instanceDataSource">
<ng-container matColumnDef="instanceId">
multiTemplateDataRows [dataSource]="instanceDataSource">
<ng-container matColumnDef="instanceId">
- <mat-header-cell mat-sort-header *matHeaderCellDef>Instance</mat-header-cell>
+ <mat-header-cell mat-sort-header *matHeaderCellDef matTooltip="The ID of the policy instance">
+ Instance
+ </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.id}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="ric">
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.id}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="ric">
- <mat-header-cell mat-sort-header *matHeaderCellDef>Near-RT RIC</mat-header-cell>
+ <mat-header-cell mat-sort-header *matHeaderCellDef
+ matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
+ Target
+ </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.ric}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="service">
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.ric}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="service">
- <mat-header-cell mat-sort-header *matHeaderCellDef>Owner</mat-header-cell>
+ <mat-header-cell mat-sort-header *matHeaderCellDef
+ matTooltip="The service that created the policy instance, and is responsible for its lifecycle">
+ Owner
+ </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.service}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="lastModified">
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.service}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="lastModified">
- <mat-header-cell mat-sort-header *matHeaderCellDef>Last modified</mat-header-cell>
+ <mat-header-cell mat-sort-header *matHeaderCellDef
+ matTooltip="The time of the last modification of the policy instance">
+ Last modified
+ </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{toLocalTime(element.lastModified)}}
</mat-cell>
</ng-container>
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{toLocalTime(element.lastModified)}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell class="action-cell" *matHeaderCellDef>Action</mat-header-cell>
<mat-cell class="action-cell" *matCellDef="let instance">
<ng-container matColumnDef="action">
<mat-header-cell class="action-cell" *matHeaderCellDef>Action</mat-header-cell>
<mat-cell class="action-cell" *matCellDef="let instance">
- <button mat-icon-button (click)="modifyInstance(instance)">
+ <button mat-icon-button (click)="modifyInstance(instance)" matTooltip="Edit the policy instance">
<mat-icon>edit</mat-icon>
</button>
<mat-icon>edit</mat-icon>
</button>
- <button mat-icon-button color="warn" (click)="deleteInstance(instance)">
+ <button mat-icon-button color="warn" (click)="deleteInstance(instance)"
+ matTooltip="Delete the policy instance">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
if (this.isSchemaEmpty()) {
this.dialog.open(
NoTypePolicyInstanceDialogComponent,
if (this.isSchemaEmpty()) {
this.dialog.open(
NoTypePolicyInstanceDialogComponent,
- getPolicyDialogProperties(this.policyType, instance, this.darkMode));
+ getPolicyDialogProperties(this.policyType, instance, this.darkMode)).afterClosed().subscribe(
+ (_: any) => {
+ this.instanceDataSource.loadTable();
+ }
+ );
} else {
this.dialog.open(
PolicyInstanceDialogComponent,
} else {
this.dialog.open(
PolicyInstanceDialogComponent,
- getPolicyDialogProperties(this.policyType, instance, this.darkMode));
+ getPolicyDialogProperties(this.policyType, instance, this.darkMode)).afterClosed().subscribe(
+ (_: any) => {
+ this.instanceDataSource.loadTable();
+ }
+ );
+
}
},
(httpError: HttpErrorResponse) => {
}
},
(httpError: HttpErrorResponse) => {
</div>
<div class="body__container">
</div>
<div class="body__container">
- <img src="../../../assets/policy.png" width="250px"/>
+ <img src="../../../assets/oran-logo.png" width="250px"/>