mirror of https://github.com/apache/nifi.git
[NIFI-13207] page headers and refresh containers are consistently pos… (#8804)
* [NIFI-13207] page headers and refresh containers are consistently positioned between pages * pad error banner * display hint below form fields to follow material spec, updating padding/spacing accordingly * revert access policies template * remove unused MatHint * access policy status as hint and center align hints * use margin bottom on error banner and more spacing improvements * update hint spacing in a few more use cases * remove extra padding from bottom of nifi cluster table filter component * collapse hint height when no text to display * update padding for input form field placeholder padding * use margins instead of padding * final touches This closes #8804
This commit is contained in:
Scott Aslan
GitHub
parent
7951b4be80
commit
62d5502bba
|
|
@ -15,14 +15,14 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5">
|
||||
<h3 class="primary-color">Access Policies</h3>
|
||||
</div>
|
||||
<div class="px-5 flex-1">
|
||||
<div class="pb-5 px-5 flex-1">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,67 +23,69 @@
|
|||
} @else {
|
||||
@if (policyComponentState$ | async; as policyComponentState) {
|
||||
@if (flowConfiguration$ | async; as flowConfiguration) {
|
||||
<div class="component-access-policies flex flex-col h-full gap-y-2">
|
||||
<div class="component-access-policies flex flex-col h-full">
|
||||
<error-banner></error-banner>
|
||||
<div class="accent-color font-medium">
|
||||
<div class="mb-2">
|
||||
@switch (accessPolicyState.policyStatus) {
|
||||
@case (PolicyStatus.NotFound) {
|
||||
No policy for the specified resource.
|
||||
@if (flowConfiguration.supportsConfigurableAuthorizer) {
|
||||
<a (click)="createNewPolicy()">Create</a> a new policy.
|
||||
}
|
||||
}
|
||||
@case (PolicyStatus.Inherited) {
|
||||
@if (accessPolicyState.accessPolicy) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
|
||||
context: {
|
||||
$implicit: accessPolicyState.accessPolicy,
|
||||
supportsConfigurableAuthorizer:
|
||||
flowConfiguration.supportsConfigurableAuthorizer
|
||||
}
|
||||
"></ng-container>
|
||||
}
|
||||
}
|
||||
@case (PolicyStatus.Forbidden) {
|
||||
Not authorized to access the policy for the specified resource.
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<form [formGroup]="policyForm">
|
||||
<div class="flex gap-x-2">
|
||||
<component-context
|
||||
[type]="getContextType()"
|
||||
[name]="
|
||||
policyComponentState.label ? policyComponentState.label : resourceIdentifier
|
||||
"></component-context>
|
||||
<div class="policy-select">
|
||||
<mat-form-field>
|
||||
<mat-label>Policy</mat-label>
|
||||
<mat-select
|
||||
formControlName="policyAction"
|
||||
(selectionChange)="policyActionChanged($event.value)">
|
||||
@for (option of policyActionOptions; track option) {
|
||||
@if (isComponentPolicy(option, policyComponentState)) {
|
||||
<mat-option
|
||||
[value]="option.value"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="option.description"
|
||||
[delayClose]="false"
|
||||
>{{ option.text }}
|
||||
</mat-option>
|
||||
<div>
|
||||
<form [formGroup]="policyForm" class="my-2">
|
||||
<div class="flex gap-x-2">
|
||||
<component-context
|
||||
[type]="getContextType()"
|
||||
[name]="
|
||||
policyComponentState.label ? policyComponentState.label : resourceIdentifier
|
||||
"></component-context>
|
||||
<div class="policy-select">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Policy</mat-label>
|
||||
<mat-select
|
||||
formControlName="policyAction"
|
||||
(selectionChange)="policyActionChanged($event.value)">
|
||||
@for (option of policyActionOptions; track option) {
|
||||
@if (isComponentPolicy(option, policyComponentState)) {
|
||||
<mat-option
|
||||
[value]="option.value"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="option.description"
|
||||
[delayClose]="false"
|
||||
>{{ option.text }}
|
||||
</mat-option>
|
||||
}
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="accent-color font-medium my-2">
|
||||
<div>
|
||||
@switch (accessPolicyState.policyStatus) {
|
||||
@case (PolicyStatus.NotFound) {
|
||||
No policy for the specified resource.
|
||||
@if (flowConfiguration.supportsConfigurableAuthorizer) {
|
||||
<a (click)="createNewPolicy()">Create</a> a new policy.
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
@case (PolicyStatus.Inherited) {
|
||||
@if (accessPolicyState.accessPolicy) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
|
||||
context: {
|
||||
$implicit: accessPolicyState.accessPolicy,
|
||||
supportsConfigurableAuthorizer:
|
||||
flowConfiguration.supportsConfigurableAuthorizer
|
||||
}
|
||||
"></ng-container>
|
||||
}
|
||||
}
|
||||
@case (PolicyStatus.Forbidden) {
|
||||
Not authorized to access the policy for the specified resource.
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@if (flowConfiguration.supportsConfigurableAuthorizer) {
|
||||
<div class="flex gap-x-2">
|
||||
<button
|
||||
|
|
@ -106,7 +108,7 @@
|
|||
}
|
||||
</div>
|
||||
@if (currentUser$ | async; as user) {
|
||||
<div class="flex-1 -mt-2">
|
||||
<div class="flex-1">
|
||||
<policy-table
|
||||
[policy]="accessPolicyState.accessPolicy"
|
||||
[supportsPolicyModification]="
|
||||
|
|
@ -116,7 +118,7 @@
|
|||
(removeTenantFromPolicy)="removeTenantFromPolicy($event)"></policy-table>
|
||||
</div>
|
||||
}
|
||||
<div class="flex justify-between">
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
|
||||
|
|
|
|||
|
|
@ -22,66 +22,19 @@
|
|||
</div>
|
||||
} @else {
|
||||
@if (flowConfiguration$ | async; as flowConfiguration) {
|
||||
<div class="global-access-policies flex flex-col h-full gap-y-2">
|
||||
<div class="global-access-policies flex flex-col h-full">
|
||||
<error-banner></error-banner>
|
||||
<div class="accent-color font-medium">
|
||||
<div class="mb-2">
|
||||
@switch (accessPolicyState.policyStatus) {
|
||||
@case (PolicyStatus.NotFound) {
|
||||
No policy for the specified resource.
|
||||
@if (flowConfiguration.supportsConfigurableAuthorizer) {
|
||||
<a (click)="createNewPolicy()">Create</a> a new policy.
|
||||
}
|
||||
}
|
||||
@case (PolicyStatus.Inherited) {
|
||||
@if (accessPolicyState.accessPolicy) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
|
||||
context: {
|
||||
$implicit: accessPolicyState.accessPolicy,
|
||||
supportsConfigurableAuthorizer:
|
||||
flowConfiguration.supportsConfigurableAuthorizer
|
||||
}
|
||||
"></ng-container>
|
||||
}
|
||||
}
|
||||
@case (PolicyStatus.Forbidden) {
|
||||
Not authorized to access the policy for the specified resource.
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<form [formGroup]="policyForm">
|
||||
<div class="flex gap-x-2">
|
||||
<div class="resource-select">
|
||||
<mat-form-field>
|
||||
<mat-label>Policy</mat-label>
|
||||
<mat-select
|
||||
formControlName="resource"
|
||||
(selectionChange)="resourceChanged($event.value)">
|
||||
@for (option of resourceOptions; track option) {
|
||||
<mat-option
|
||||
[value]="option.value"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="option.description"
|
||||
[delayClose]="false"
|
||||
>{{ option.text }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@if (supportsResourceIdentifier) {
|
||||
<div class="resource-identifier-select">
|
||||
<mat-form-field>
|
||||
<mat-label>Option</mat-label>
|
||||
<div>
|
||||
<form [formGroup]="policyForm" class="my-2">
|
||||
<div class="flex gap-x-2">
|
||||
<div class="resource-select">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Policy</mat-label>
|
||||
<mat-select
|
||||
formControlName="resourceIdentifier"
|
||||
(selectionChange)="resourceIdentifierChanged()">
|
||||
@for (option of requiredPermissionOptions; track option) {
|
||||
formControlName="resource"
|
||||
(selectionChange)="resourceChanged($event.value)">
|
||||
@for (option of resourceOptions; track option) {
|
||||
<mat-option
|
||||
[value]="option.value"
|
||||
nifiTooltip
|
||||
|
|
@ -94,18 +47,67 @@
|
|||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
<div class="action-select" [class.hidden]="!supportsReadWriteAction">
|
||||
<mat-form-field>
|
||||
<mat-label>Action</mat-label>
|
||||
<mat-select formControlName="action" (selectionChange)="actionChanged()">
|
||||
<mat-option [value]="Action.Read">view</mat-option>
|
||||
<mat-option [value]="Action.Write">modify</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@if (supportsResourceIdentifier) {
|
||||
<div class="resource-identifier-select">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Option</mat-label>
|
||||
<mat-select
|
||||
formControlName="resourceIdentifier"
|
||||
(selectionChange)="resourceIdentifierChanged()">
|
||||
@for (option of requiredPermissionOptions; track option) {
|
||||
<mat-option
|
||||
[value]="option.value"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="option.description"
|
||||
[delayClose]="false"
|
||||
>{{ option.text }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
<div class="action-select" [class.hidden]="!supportsReadWriteAction">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Action</mat-label>
|
||||
<mat-select formControlName="action" (selectionChange)="actionChanged()">
|
||||
<mat-option [value]="Action.Read">view</mat-option>
|
||||
<mat-option [value]="Action.Write">modify</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="accent-color font-medium my-2">
|
||||
<div>
|
||||
@switch (accessPolicyState.policyStatus) {
|
||||
@case (PolicyStatus.NotFound) {
|
||||
No policy for the specified resource.
|
||||
@if (flowConfiguration.supportsConfigurableAuthorizer) {
|
||||
<a (click)="createNewPolicy()">Create</a> a new policy.
|
||||
}
|
||||
}
|
||||
@case (PolicyStatus.Inherited) {
|
||||
@if (accessPolicyState.accessPolicy) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
|
||||
context: {
|
||||
$implicit: accessPolicyState.accessPolicy,
|
||||
supportsConfigurableAuthorizer:
|
||||
flowConfiguration.supportsConfigurableAuthorizer
|
||||
}
|
||||
"></ng-container>
|
||||
}
|
||||
}
|
||||
@case (PolicyStatus.Forbidden) {
|
||||
Not authorized to access the policy for the specified resource.
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@if (flowConfiguration.supportsConfigurableAuthorizer) {
|
||||
<div class="flex gap-x-2 items-center">
|
||||
<button
|
||||
|
|
@ -128,7 +130,7 @@
|
|||
}
|
||||
</div>
|
||||
@if (currentUser$ | async; as user) {
|
||||
<div class="flex-1 -mt-2">
|
||||
<div class="flex-1">
|
||||
<policy-table
|
||||
[policy]="accessPolicyState.accessPolicy"
|
||||
[supportsPolicyModification]="
|
||||
|
|
@ -138,7 +140,7 @@
|
|||
(removeTenantFromPolicy)="removeTenantFromPolicy($event)"></policy-table>
|
||||
</div>
|
||||
}
|
||||
<div class="flex justify-between">
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">NiFi Bulletin Board</h3>
|
||||
<bulletin-board class="flex-1"></bulletin-board>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,16 +17,16 @@
|
|||
|
||||
<div class="bulletin-board-list-container h-full flex flex-col">
|
||||
<div class="bulletin-board-list-filter-container">
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-2">
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex">
|
||||
<div class="mr-2">
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
<mat-option value="message"> message </mat-option>
|
||||
|
|
|
|||
|
|
@ -15,43 +15,45 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col gap-y-2">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">NiFi Cluster</h3>
|
||||
<error-banner></error-banner>
|
||||
@if (getTabLinks(); as tabs) {
|
||||
<!-- Don't show the tab bar if there is only 1 tab to show -->
|
||||
<div class="cluster-tabs" [class.hidden]="tabs.length === 1">
|
||||
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
|
||||
@for (tab of tabs; track tab) {
|
||||
<a
|
||||
mat-tab-link
|
||||
[routerLink]="[tab.link]"
|
||||
routerLinkActive
|
||||
#rla="routerLinkActive"
|
||||
[active]="rla.isActive">
|
||||
{{ tab.label }}
|
||||
</a>
|
||||
}
|
||||
</nav>
|
||||
<div class="flex flex-col h-full gap-y-2">
|
||||
@if (getTabLinks(); as tabs) {
|
||||
<!-- Don't show the tab bar if there is only 1 tab to show -->
|
||||
<div class="cluster-tabs" [class.hidden]="tabs.length === 1">
|
||||
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
|
||||
@for (tab of tabs; track tab) {
|
||||
<a
|
||||
mat-tab-link
|
||||
[routerLink]="[tab.link]"
|
||||
routerLinkActive
|
||||
#rla="routerLinkActive"
|
||||
[active]="rla.isActive">
|
||||
{{ tab.label }}
|
||||
</a>
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
}
|
||||
<div class="pt-4 flex-1">
|
||||
<mat-tab-nav-panel #tabPanel>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
</div>
|
||||
}
|
||||
<div class="pt-4 flex-1">
|
||||
<mat-tab-nav-panel #tabPanel>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="listingStatus() === 'loading'"></i>
|
||||
</button>
|
||||
<div>Last updated:</div>
|
||||
<div class="accent-color font-medium">{{ loadedTimestamp() }}</div>
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="listingStatus() === 'loading'"></i>
|
||||
</button>
|
||||
<div>Last updated:</div>
|
||||
<div class="accent-color font-medium">{{ loadedTimestamp() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,28 +15,28 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div>
|
||||
<div class="accent-color font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
|
||||
Filter matched {{ filteredCount }} of {{ totalCount }}
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex gap-x-2">
|
||||
<div>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
@for (option of filterableColumns; track option) {
|
||||
<mat-option [value]="option.key"> {{ option.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-2 accent-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div>
|
||||
</div>
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-1 gap-1 items-baseline">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
@for (option of filterableColumns; track option) {
|
||||
<mat-option [value]="option.key"> {{ option.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">NiFi Counters</h3>
|
||||
<counter-listing class="flex-1"></counter-listing>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,17 +16,16 @@
|
|||
-->
|
||||
<div class="counter-table h-full flex flex-col">
|
||||
<div class="counter-table-filter-container">
|
||||
<div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-2">
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex">
|
||||
<div class="mr-2">
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
<mat-option value="name"> name </mat-option>
|
||||
|
|
@ -36,6 +35,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-2 accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
|
||||
</div>
|
||||
<div class="flex-1 relative">
|
||||
<div class="listing-table overflow-y-auto absolute inset-0">
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">Flow Configuration History</h3>
|
||||
<flow-configuration-history-listing class="flex-1"></flow-configuration-history-listing>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,19 +21,19 @@
|
|||
<ngx-skeleton-loader count="3"></ngx-skeleton-loader>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="flow-configuration-history-listing flex flex-col h-full gap-y-2">
|
||||
<div class="flow-configuration-history-listing flex flex-col h-full">
|
||||
<div class="flex align-middle justify-between">
|
||||
<div class="flow-configuration-filter flex-1">
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-2 gap-1 items-baseline">
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex gap-1 items-baseline">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
@for (option of filterableColumns; track option) {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex ml-6 gap-x-2">
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Date Range</mat-label>
|
||||
<mat-date-range-input [rangePicker]="picker">
|
||||
<input
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Start Time ({{ (about$ | async)?.timezone }})</mat-label>
|
||||
<input
|
||||
matInput
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>End Time ({{ (about$ | async)?.timezone }})</mat-label>
|
||||
<input
|
||||
matInput
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
(sortChanged)="sortChanged($event)"></flow-configuration-history-table>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="flex justify-between align-middle mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i>
|
||||
|
|
|
|||
|
|
@ -17,17 +17,21 @@
|
|||
|
||||
<div class="local-changes-table h-full flex flex-col">
|
||||
<div>
|
||||
<div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-2">
|
||||
<div class="mr-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex pt-2">
|
||||
<div class="mr-2">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-2 accent-color leading-none font-medium">
|
||||
Displaying {{ filteredCount }} of {{ totalCount }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-table flex-1 relative">
|
||||
<div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
|
||||
|
|
|
|||
|
|
@ -43,10 +43,10 @@
|
|||
</div>
|
||||
<div>
|
||||
<div>Flow Description</div>
|
||||
@if (versionControlInformation.flowDescription === '') {
|
||||
<div class="unset surface-color">Empty string set</div>
|
||||
@if (!versionControlInformation.flowDescription) {
|
||||
<div class="unset surface-color">No value set</div>
|
||||
} @else {
|
||||
<div class="accent-color">{{ versionControlInformation.flowDescription }}</div>
|
||||
<div class="accent-color font-medium">{{ versionControlInformation.flowDescription }}</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">Controller Services</h3>
|
||||
@if (serviceState$ | async; as serviceState) {
|
||||
@if (isInitialLoading(serviceState)) {
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color pb-5">Manage Remote Ports</h3>
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">Manage Remote Ports</h3>
|
||||
@if (portsState$ | async; as portsState) {
|
||||
<div class="grid-container grid grid-cols-2">
|
||||
<div class="col-span-1 pr-5">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
-->
|
||||
|
||||
<div class="login-form w-96 flex flex-col gap-y-5">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="primary-color">Log In</h3>
|
||||
<div class="flex gap-x-2">
|
||||
@if (logoutSupported()) {
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<form [formGroup]="loginForm" (ngSubmit)="login()">
|
||||
<form [formGroup]="loginForm" (ngSubmit)="login()" class="my-2">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Username</mat-label>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">Parameter Contexts</h3>
|
||||
<parameter-context-listing class="flex-1"></parameter-context-listing>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,14 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<h3 class="px-5 primary-color">Provenance</h3>
|
||||
<div class="px-5 flex-1">
|
||||
<div class="px-5">
|
||||
<h3 class="primary-color">Provenance</h3>
|
||||
</div>
|
||||
<div class="pb-5 px-5 flex-1">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,14 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="provenance-event-table h-full flex flex-col gap-y-2">
|
||||
<div class="provenance-event-table h-full flex flex-col">
|
||||
<error-banner></error-banner>
|
||||
<div [class.hidden]="showLineage" class="h-full flex flex-col gap-y-2">
|
||||
<div [class.hidden]="showLineage" class="h-full flex flex-col">
|
||||
<div class="flex flex-col">
|
||||
<div [class.invisible]="!filterApplied" class="accent-color font-medium font-bold">
|
||||
Filter matched {{ filteredCount }} of {{ totalCount }}
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex justify-between mb-1">
|
||||
<div>
|
||||
Oldest event available:
|
||||
<span class="accent-color font-medium">{{ oldestEventAvailable }}</span>
|
||||
|
|
@ -35,26 +32,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-2">
|
||||
<div class="mr-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
@for (option of filterColumnOptions; track option) {
|
||||
<mat-option [value]="option">{{ option }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex">
|
||||
<div class="mr-2">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
@for (option of filterColumnOptions; track option) {
|
||||
<mat-option [value]="option">{{ option }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="accent-color font-medium my-2">
|
||||
Filter matched {{ filteredCount }} of {{ totalCount }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<button mat-icon-button color="primary" (click)="searchClicked()">
|
||||
<i class="fa fa-search"></i>
|
||||
|
|
@ -62,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative -mt-4">
|
||||
<div class="flex-1 relative">
|
||||
<div class="listing-table absolute inset-0 overflow-y-auto">
|
||||
<table
|
||||
mat-table
|
||||
|
|
@ -181,7 +183,7 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshClicked()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="loading"></i>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1">
|
||||
<div class="pb-5 px-5 flex-1">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="flowfile-table h-full flex flex-col gap-y-2">
|
||||
<div class="flowfile-table h-full flex flex-col">
|
||||
<h3 class="queue-listing-header primary-color">{{ connectionLabel }}</h3>
|
||||
<error-banner></error-banner>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex justify-between mb-2">
|
||||
<div class="accent-color font-medium">
|
||||
Display {{ displayObjectCount }} of {{ formatCount(queueSizeObjectCount) }} ({{
|
||||
formatBytes(queueSizeByteCount)
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">NiFi Settings</h3>
|
||||
<div class="settings-tabs">
|
||||
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
</nav>
|
||||
</div>
|
||||
<div class="pt-4 flex-1">
|
||||
<div class="pt-5 flex-1">
|
||||
<mat-tab-nav-panel #tabPanel>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="general-form w-96">
|
||||
@if (currentUser$ | async; as currentUser) {
|
||||
<form [formGroup]="controllerForm">
|
||||
<form [formGroup]="controllerForm" class="my-2">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col gap-y-2">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="primary-color">
|
||||
@if (selectedClusterNode$ | async; as selectedNode) {
|
||||
@if (selectedNode.id !== 'All') {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
</nav>
|
||||
</div>
|
||||
<div class="pt-4 flex-1">
|
||||
<div class="mt-5 flex-1">
|
||||
<mat-tab-nav-panel #tabPanel>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
|
|
|
|||
|
|
@ -16,61 +16,61 @@
|
|||
-->
|
||||
|
||||
<div class="summary-table-filter-container">
|
||||
<div class="accent-color font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
|
||||
Filter matched {{ filteredCount }} of {{ totalCount }}
|
||||
</div>
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-1 gap-1 items-baseline">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
@for (option of filterableColumns; track option) {
|
||||
<mat-option [value]="option.key"> {{ option.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@if (includeStatusFilter) {
|
||||
<div>
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex mt-2 gap-1 items-baseline">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Status</mat-label>
|
||||
<mat-select formControlName="filterStatus">
|
||||
<mat-option value="All"> All Statuses</mat-option>
|
||||
<mat-option value="Running"> Running</mat-option>
|
||||
<mat-option value="Stopped"> Stopped</mat-option>
|
||||
<mat-option value="Validating"> Validating</mat-option>
|
||||
<mat-option value="Disabled"> Disabled</mat-option>
|
||||
<mat-option value="Invalid"> Invalid</mat-option>
|
||||
</mat-select>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
@if (includePrimaryNodeOnlyFilter) {
|
||||
<div>
|
||||
<mat-checkbox color="primary" formControlName="primaryOnly"></mat-checkbox>
|
||||
<mat-label class="whitespace-nowrap">Primary Node</mat-label>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (clusterNodes && clusterNodes.length > 0) {
|
||||
<div class="cluster-node-selection flex flex-1 flex-row-reverse">
|
||||
<mat-form-field>
|
||||
<mat-label>Cluster Node</mat-label>
|
||||
<mat-select formControlName="clusterNode" panelWidth="">
|
||||
@for (node of clusterNodes; track node) {
|
||||
<mat-option [value]="node">{{ node.address }}</mat-option>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
@for (option of filterableColumns; track option) {
|
||||
<mat-option [value]="option.key"> {{ option.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
@if (includeStatusFilter) {
|
||||
<div>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Status</mat-label>
|
||||
<mat-select formControlName="filterStatus">
|
||||
<mat-option value="All"> All Statuses</mat-option>
|
||||
<mat-option value="Running"> Running</mat-option>
|
||||
<mat-option value="Stopped"> Stopped</mat-option>
|
||||
<mat-option value="Validating"> Validating</mat-option>
|
||||
<mat-option value="Disabled"> Disabled</mat-option>
|
||||
<mat-option value="Invalid"> Invalid</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
@if (includePrimaryNodeOnlyFilter) {
|
||||
<div>
|
||||
<mat-checkbox color="primary" formControlName="primaryOnly"></mat-checkbox>
|
||||
<mat-label class="whitespace-nowrap">Primary Node</mat-label>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (clusterNodes && clusterNodes.length > 0) {
|
||||
<div class="cluster-node-selection flex flex-1 flex-row-reverse">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Cluster Node</mat-label>
|
||||
<mat-select formControlName="clusterNode" panelWidth="">
|
||||
@for (node of clusterNodes; track node) {
|
||||
<mat-option [value]="node">{{ node.address }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-2 accent-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
|
||||
<header class="nifi-header">
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<header class="mb-5 nifi-header">
|
||||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5 flex-1 flex flex-col">
|
||||
<div class="pb-5 px-5 flex-1 flex flex-col">
|
||||
<h3 class="user-header primary-color">NiFi Users</h3>
|
||||
<user-listing class="flex-1"></user-listing>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,17 +17,16 @@
|
|||
<div class="user-table h-full flex flex-col">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="flex pt-2">
|
||||
<form [formGroup]="filterForm" class="my-2">
|
||||
<div class="flex">
|
||||
<div class="mr-2">
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter By</mat-label>
|
||||
<mat-select formControlName="filterColumn">
|
||||
<mat-option value="user"> user</mat-option>
|
||||
|
|
@ -37,6 +36,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-2 accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
@if (canModifyTenants(currentUser)) {
|
||||
|
|
|
|||
|
|
@ -33,22 +33,26 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col">
|
||||
<form [formGroup]="filterForm" class="flex flex-col gap-y-2">
|
||||
<div class="accent-color font-medium">Displaying {{ filteredEntries }} of {{ totalEntries }}</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
@if ({ value: (canClear$ | async)! }; as canClear) {
|
||||
@if (canClear.value && totalEntries > 0) {
|
||||
<div>
|
||||
<a (click)="clearState()">Clear state</a>
|
||||
</div>
|
||||
<div>
|
||||
<form [formGroup]="filterForm" class="flex flex-col my-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput type="text" class="small" formControlName="filterTerm" />
|
||||
</mat-form-field>
|
||||
@if ({ value: (canClear$ | async)! }; as canClear) {
|
||||
@if (canClear.value && totalEntries > 0) {
|
||||
<div>
|
||||
<a (click)="clearState()">Clear state</a>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-2 accent-color leading-none font-medium">
|
||||
Displaying {{ filteredEntries }} of {{ totalEntries }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="listing-table flex-1 relative">
|
||||
<div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
|
||||
<table
|
||||
|
|
|
|||
|
|
@ -16,18 +16,20 @@
|
|||
-->
|
||||
|
||||
@if ((messages$ | async)!; as messages) {
|
||||
<div class="banner-container border-t border-b px-6 py-3 flex justify-between items-center">
|
||||
@if (messages.length === 1) {
|
||||
<div>{{ messages[0] }}</div>
|
||||
} @else {
|
||||
<ul>
|
||||
@for (message of messages; track message) {
|
||||
<li>{{ message }}</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
<div class="flex flex-col mt-auto">
|
||||
<button mat-stroked-button (click)="dismiss()">Dismiss</button>
|
||||
<div class="mb-4">
|
||||
<div class="banner-container border-t border-b px-6 py-3 flex justify-between items-center">
|
||||
@if (messages.length === 1) {
|
||||
<div>{{ messages[0] }}</div>
|
||||
} @else {
|
||||
<ul>
|
||||
@for (message of messages; track message) {
|
||||
<li>{{ message }}</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
<div class="flex flex-col mt-auto">
|
||||
<button mat-stroked-button (click)="dismiss()">Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
-->
|
||||
|
||||
<div class="page-content w-1/2 flex flex-col gap-y-5">
|
||||
<div class="flex justify-between items-center gap-x-3">
|
||||
<div class="flex justify-between items-start gap-x-3">
|
||||
<h3 class="primary-color whitespace-nowrap overflow-hidden text-ellipsis" [title]="title">{{ title }}</h3>
|
||||
<div class="flex gap-x-3">
|
||||
@if (logoutSupported()) {
|
||||
|
|
|
|||
|
|
@ -326,13 +326,6 @@
|
|||
margin: unset;
|
||||
}
|
||||
|
||||
.mat-h3,
|
||||
.mat-typography .mat-h3,
|
||||
.mat-typography h3 {
|
||||
// Because angular material typography adds bottom margin
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.mat-h4,
|
||||
.mat-typography .mat-h4,
|
||||
.mat-typography h4 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue