target: {
expanded: _.join(
this.selectedItem.cdExecuting
- ? [Icons.large, Icons.spinner, Icons.spin]
- : [Icons.large, Icons.bullseye],
+ ? [Icons.size24, Icons.spinner, Icons.spin]
+ : [Icons.size24, Icons.bullseye],
' '
)
},
initiators: {
- expanded: _.join([Icons.large, Icons.user], ' '),
+ expanded: _.join([Icons.size24, Icons.user], ' '),
leaf: _.join([Icons.user], ' ')
},
groups: {
- expanded: _.join([Icons.large, Icons.users], ' '),
+ expanded: _.join([Icons.size24, Icons.users], ' '),
leaf: _.join([Icons.users], ' ')
},
disks: {
- expanded: _.join([Icons.large, Icons.disk], ' '),
+ expanded: _.join([Icons.size24, Icons.disk], ' '),
leaf: _.join([Icons.disk], ' ')
},
portals: {
- expanded: _.join([Icons.large, Icons.server], ' '),
+ expanded: _.join([Icons.size24, Icons.server], ' '),
leaf: _.join([Icons.server], ' ')
}
};
[class.disabled]="loadingIndicator"
class="btn btn-light pull-right"
(click)="refreshAllDirectories()">
- <i [ngClass]="[icons.large, icons.refresh]"
+ <i [ngClass]="[icons.size24, icons.refresh]"
[class.fa-spin]="loadingIndicator"></i>
</button>
</div>
<span
*ngIf="row.active; else inactiveStatusTpl">
<i
- [ngClass]="[icons.success, icons.large]"
+ [ngClass]="[icons.success, icons.size24]"
ngbTooltip="{{ row.pathForSelection?.split?.('@')?.[0] }} is active"
class="text-success"
></i>
<ng-template #inactiveStatusTpl>
<i
- [ngClass]="[icons.warning, icons.large]"
+ [ngClass]="[icons.warning, icons.size24]"
class="text-warning"
ngbTooltip="{{ row.pathForSelection?.split?.('@')?.[0] }} has been deactivated"
></i>
<span class="fw-bold">{{row.name}}</span>
<span *ngIf="row?.info?.state === 'complete'; else snapshotRetainedTpl">
- <i [ngClass]="[icons.success, icons.large]"
+ <i [ngClass]="[icons.success, icons.size24]"
ngbTooltip="{{row.name}} is ready to use"
class="text-success"></i>
</span>
<ng-template #snapshotRetainedTpl>
- <i [ngClass]="[icons.warning, icons.large]"
+ <i [ngClass]="[icons.warning, icons.size24]"
class="text-warning"
ngbTooltip="{{row.name}} is removed after retaining the snapshots"></i>
</ng-template>
<div class="row">
<div class="col-sm-6 col-lg-6 tree-container">
<i *ngIf="loadingIndicator"
- [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
+ [ngClass]="[icons.size24, icons.spinner, icons.spin]"></i>
<cds-tree-view #tree
[isMultiSelect]="false"
(select)="onNodeSelected($event)">
<div class="row h-100 justify-content-center align-items-center">
<div class="blank-page">
<i class="mx-auto d-block"
- [ngClass]="[icons.large, icons.wrench]">
+ [ngClass]="[icons.size24, icons.wrench]">
</i>
<div class="mt-4 text-center">
<h4 class="mt-3">This cluster is already managed by cluster -
<div class="row h-100 justify-content-center align-items-center">
<div class="blank-page">
<i class="mx-auto d-block"
- [ngClass]="[icons.large3x, icons.spinner, icons.spin]">
+ [ngClass]="[icons.size32, icons.spinner, icons.spin]">
</i>
<p class="text-center mt-3"
i18n>Loading data, Please wait...</p>
<div class="row">
<div class="col-sm-6 col-lg-6 tree-container">
<i *ngIf="loadingIndicator"
- [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
+ [ngClass]="[icons.size24, icons.spinner, icons.spin]"></i>
<cds-tree-view #tree
[isMultiSelect]="false"
(select)="onNodeSelected($event)">
class=" cds-icon--size-07"></svg>
</li>
<li>
- <i [ngClass]="[icons.large2x, icons.cubes]"
+ <i [ngClass]="[icons.size32, icons.cubes]"
class="mt-2"></i>
</li>
<p class="mt-2"> <cds-tag class="tag-info">{{zonegroup}}</cds-tag></p>
i18n-title
title="Show hidden information"
(click)="showMessage = !showMessage">
- <i [ngClass]="[icons.infoCircle, icons.large]"></i>
+ <i [ngClass]="[icons.infoCircle, icons.size24]"></i>
</button>
</div>
</div>
--- /dev/null
+<ng-template #tasksTpl>
+ <!-- Executing -->
+ <div *ngFor="let executingTask of executingTasks; trackBy:trackByFn">
+ <div class="card tc_task border-0">
+ <div class="row no-gutters">
+ <div class="col-md-2 text-center">
+ <span class="text-info">
+ <svg [cdsIcon]="icons.circle"
+ [size]="icons.size16"
+ ></svg>
+ </span>
+ </div>
+ <div class="col-md-9">
+ <div class="card-body p-1">
+ <h6 class="card-title bold">{{ executingTask.description }}</h6>
+ <div class="mb-1">
+ <ngb-progressbar type="info"
+ [value]="executingTask?.progress"
+ [striped]="true"
+ [animated]="true"></ngb-progressbar>
+ </div>
+ <p class="card-text text-muted">
+ <small class="date float-start">
+ {{ executingTask.begin_time | cdDate }}
+ </small>
+
+ <span class="float-end">
+ {{ executingTask.progress || 0 }} %
+ </span>
+ </p>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <hr>
+ </div>
+</ng-template>
+
+<ng-template #notificationsTpl>
+ <ng-container *ngIf="notifications.length > 0">
+ <button type="button"
+ class="btn btn-light btn-block"
+ (click)="removeAll(); $event.stopPropagation()">
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ ></svg>
+
+ <ng-container i18n>Clear notifications</ng-container>
+ </button>
+
+ <hr>
+
+ <div *ngFor="let notification of notifications; let i = index"
+ [ngClass]="notification.borderClass">
+ <div class="card tc_notification border-0">
+ <div class="row no-gutters">
+ <div class="col-md-2 text-center">
+ <span [ngClass]="[icons.stack, icons.size24, notification.textClass]">
+ <i [ngClass]="[icons.circle, icons.stack2x]"></i>
+ <i [ngClass]="[icons.stack1x, icons.inverse, notification.iconClass]"></i>
+ </span>
+ </div>
+ <div class="col-md-10">
+ <div class="card-body p-1">
+ <button class="btn btn-link float-end mt-0 pt-0"
+ title="Remove notification"
+ i18n-title
+ (click)="remove(i); $event.stopPropagation()">
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ ></svg>
+ </button>
+ <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && !notification.alertSilenced"
+ class="btn btn-link float-end text-muted mute m-0 p-0"
+ title="Silence Alert"
+ i18n-title
+ (click)="silence(notification)">
+ <svg [cdsIcon]="icons.mute"
+ [size]="icons.size16"
+ ></svg>
+ </button>
+ <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && notification.alertSilenced"
+ class="btn btn-link float-end text-muted mute m-0 p-0"
+ title="Expire Silence"
+ i18n-title
+ (click)="expire(notification)">
+ <svg [cdsIcon]="icons.bell"
+ [size]="icons.size16"
+ ></svg>
+ </button>
+
+
+ <h6 class="card-title bold">{{ notification.title }}</h6>
+ <p class="card-text"
+ [innerHtml]="notification.message"></p>
+ <p class="card-text text-muted">
+ <ng-container *ngIf="notification.duration">
+ <small>
+ <ng-container i18n>Duration:</ng-container> {{ notification.duration | duration }}
+ </small>
+ <br>
+ </ng-container>
+ <small class="date"
+ [title]="notification.timestamp | cdDate">{{ notification.timestamp | relativeDate }}</small>
+ <i class="float-end custom-icon"
+ [ngClass]="[notification.applicationClass]"
+ [title]="notification.application"></i>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <hr>
+ </div>
+ </ng-container>
+</ng-template>
+
+<ng-template #emptyTpl>
+ <div *ngIf="notifications.length === 0 && executingTasks.length === 0">
+ <div class="message text-center"
+ i18n>There are no notifications.</div>
+ </div>
+</ng-template>
+
+<div class="card"
+ (clickOutside)="closeSidebar()"
+ [clickOutsideEnabled]="isSidebarOpened">
+ <div class="card-header">
+ <ng-container i18n>Tasks and Notifications</ng-container>
+
+ <button class="btn-close float-end"
+ tabindex="-1"
+ type="button"
+ title="close"
+ (click)="closeSidebar()">
+ </button>
+ </div>
+
+ <ngx-simplebar [options]="simplebar">
+ <div class="card-body">
+ <ng-container *ngTemplateOutlet="tasksTpl"></ng-container>
+ <ng-container *ngTemplateOutlet="notificationsTpl"></ng-container>
+ <ng-container *ngTemplateOutlet="emptyTpl"></ng-container>
+ </div>
+ </ngx-simplebar>
+</div>
[ngClass]="{ 'mt-3': status === 'in-progress' && isPaused }"
*ngIf="!value || actionName === 'upgrading'">
<i *ngIf="status === 'in-progress' && isPaused; else spinningIcon"
- [ngClass]="[icons.large, icons.spinner]"></i>
+ [ngClass]="[icons.size24, icons.spinner]"></i>
<ng-template #spinningIcon>
- <i [ngClass]="[icons.large, icons.spin, icons.spinner]"></i>
+ <i [ngClass]="[icons.size24, icons.spin, icons.spinner]"></i>
</ng-template>
</h3>
projects / ceph.git / commitdiff