--- /dev/null
+<ng-container *ngIf="gatewayGroup$ | async as gateways">
+ <cd-table
+ #table
+ [data]="gateways"
+ [columns]="columns"
+ columnMode="flex"
+ selectionType="single"
+ identifier="name"
+ (updateSelection)="updateSelection($event)"
+ (fetchData)="fetchData()"
+ emptyStateTitle="No gateway group created"
+ i18n-emptyStateTitle
+ emptyStateMessage="Set up your first gateway group to start using NVMe over Fabrics. This will allow you to create high-performance block storage with NVMe/TCP protocol."
+ i18n-emptyStateMessage>
+ </cd-table>
+</ng-container>
+
+<ng-template #dateTpl
+ let-created="data.value">
+ <span *ngIf="created">{{ created | date:'EEE d MMM, yyyy' }}</span>
+</ng-template>
+
+<ng-template #gatewayStatusTpl
+ let-gateway="data.value">
+ <div [cdsStack]="'horizontal'"
+ gap="4">
+
+ @if (gateway.running > 0) {
+ <span>
+ <cd-icon type="success"></cd-icon>
+ <span class="cds-ml-3">{{ gateway.running }}</span>
+ </span>
+ }
+
+ @if (gateway.error > 0) {
+ <span class="cds-ml-3">
+ <cd-icon type="error"></cd-icon>
+ <span class="cds-ml-3">{{ gateway.error }}</span>
+ </span>
+ }
+
+
+ </div>
+</ng-template>
(fetchData)="listNamespaces()"
[columns]="namespacesColumns"
selectionType="single"
- (updateSelection)="updateSelection($event)">
+ (updateSelection)="updateSelection($event)"
+ emptyStateTitle="No namespaces created."
+ i18n-emptyStateTitle
+ emptyStateMessage="Namespaces are storage volumes mapped to subsystems for host access. Create a namespace to start provisioning storage within a subsystem."
+ i18n-emptyStateMessage>
<div class="table-actions">
<cd-table-actions [permission]="permission"
selectionType="single"
[hasDetails]="true"
(setExpandedRow)="setExpandedRow($event)"
- (updateSelection)="updateSelection($event)">
+ (updateSelection)="updateSelection($event)"
+ emptyStateTitle="No subsystems created"
+ i18n-emptyStateTitle
+ emptyStateMessage="Subsystems group NVMe namespaces and manage host access. Create a subsystem to start mapping NVMe volumes to hosts."
+ i18n-emptyStateMessage>
<div class="table-actions">
<cd-table-actions [permission]="permissions.nvmeof"
[group]="group">
</cd-nvmeof-subsystems-details>
</cd-table>
+
<router-outlet name="modal"></router-outlet>
.warning-icon {
color: theme.$support-caution-major;
}
+
+.deploy-icon {
+ fill: theme.$layer-selected-disabled !important;
+}
DialogModule,
SelectModule,
TagModule,
- LayerModule
+ LayerModule,
+ InputModule,
+ GridModule,
+ LayoutModule
} from 'carbon-components-angular';
import AddIcon from '@carbon/icons/es/add/16';
import FilterIcon from '@carbon/icons/es/filter/16';
import MaximizeIcon from '@carbon/icons/es/maximize/16';
import ArrowDown from '@carbon/icons/es/caret--down/16';
import ChevronDwon from '@carbon/icons/es/chevron--down/16';
+import CheckMarkIcon from '@carbon/icons/es/checkmark/32';
+import CubeIcon from '@carbon/icons/es/cube/32';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
ThemeModule,
SelectModule,
TagModule,
- LayerModule
+ LayerModule,
+ InputModule,
+ GridModule,
+ LayoutModule
],
declarations: [
TableComponent,
CloseIcon,
MaximizeIcon,
ArrowDown,
- ChevronDwon
+ ChevronDwon,
+ CheckMarkIcon,
+ CubeIcon
]);
}
}
class="no-data"
cdstabledata
[attr.colspan]="visibleColumns.length + 2">
- <span class="d-flex justify-content-center align-items-center"
- i18n>No data to display</span>
+ <div class="empty-state cds-ml-3"
+ cdsStack="vertical"
+ gap="11">
+ <div></div>
+ <div cdsStack="vertical"
+ gap="1">
+ <div>
+ <cd-icon
+ [type]="emptyStateIcon"
+ [size]="iconSize.size32">
+ </cd-icon>
+ </div>
+ <legend class="cds--type-body-compact-02">
+ <ng-container>{{ emptyStateTitle }}</ng-container>
+ <cd-help-text class="cds--type-label-01">
+ {{ emptyStateMessage }}
+ </cd-help-text>
+ </legend>
+ </div>
+ </div>
</td>
</tr>
</tbody>
</cds-tag>
</span>
</ng-template>
+
<ng-template #tagTpl
let-column="data.column"
let-value="data.value">
import { TableStatus } from '~/app/shared/classes/table-status';
import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
-import { Icons } from '~/app/shared/enum/icons.enum';
+import { Icons, IconSize, ICON_TYPE } from '~/app/shared/enum/icons.enum';
+
import { CdTableColumn } from '~/app/shared/models/cd-table-column';
import { CdTableColumnFilter } from '~/app/shared/models/cd-table-column-filter';
import { CdTableColumnFiltersChange } from '~/app/shared/models/cd-table-column-filters-change';
@Input()
scrollable: boolean = true;
+ /**
+ * Title to be displayed when there is no data
+ */
+ @Input()
+ emptyStateTitle: string = $localize`No data available`;
+ /**
+ * Helper text to be displayed when there is no data
+ */
+ @Input()
+ emptyStateMessage: string = $localize`There are currently no records to display.`;
+ /**
+ * Icon to be displayed when there is no data
+ */
+ @Input()
+ emptyStateIcon: string = ICON_TYPE.deploy;
+
/**
* Should be a function to update the input data if undefined nothing will be triggered
*
}
icons = Icons;
+ iconSize = IconSize;
cellTemplates: {
[key: string]: TemplateRef<any>;
} = {};
danger: 'warning--filled',
infoCircle: 'information--filled',
success: 'checkmark--filled',
- warning: 'warning--alt--filled'
+ warning: 'warning--alt--filled',
+ deploy: 'deploy',
+ edit: 'edit',
+ error: 'error--filled',
+ notification: 'notification'
} as const;
projects / ceph-ci.git / commitdiff