mirror of https://github.com/portainer/portainer
fix(be-overlay): consistency overlay with variants [EE-6742] (#11776)
Co-authored-by: testa113 <testa113>pull/11789/head
Ali
GitHub
parent
4bcefb4866
commit
6d2775a42e
|
|
@ -1,46 +1,52 @@
|
|||
<page-header title="'User activity logs'" breadcrumbs="['User activity logs']" reload="true"> </page-header>
|
||||
|
||||
<div class="be-indicator-container limited-be mx-4">
|
||||
<div>
|
||||
<div class="limited-be-link vertical-center"><be-feature-indicator class="m-2" feature="$ctrl.limitedFeature"></be-feature-indicator></div>
|
||||
<div class="limited-be-content">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" disabled />
|
||||
<div class="mx-4">
|
||||
<div class="be-indicator-container limited-be">
|
||||
<div class="limited-be-link vertical-center m-4"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
|
||||
<div class="limited-be-content !p-0 !pt-[15px]">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="dateRangeInput" class="col-sm-2 control-label text-left">Date range</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted small vertical-center">
|
||||
<pr-icon icon="'info'" class-name="'icon icon-sm icon-primary'"></pr-icon>
|
||||
Portainer user activity logs have a maximum retention of 7 days.
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
|
||||
<pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon>
|
||||
Export as CSV
|
||||
</button>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
<div class="row mt-5">
|
||||
<activity-logs-datatable
|
||||
logs="$ctrl.state.logs"
|
||||
keyword="$ctrl.state.keyword"
|
||||
sort="$ctrl.state.sort"
|
||||
limit="$ctrl.state.limit"
|
||||
context-filter="$ctrl.state.contextFilter"
|
||||
total-items="$ctrl.state.totalItems"
|
||||
current-page="$ctrl.state.currentPage"
|
||||
feature="{{:: $ctrl.limitedFeature}}"
|
||||
on-change-keyword="($ctrl.onChangeKeyword)"
|
||||
on-change-sort="($ctrl.onChangeSort)"
|
||||
on-change-limit="($ctrl.onChangeLimit)"
|
||||
on-change-page="($ctrl.onChangePage)"
|
||||
></activity-logs-datatable>
|
||||
<p class="text-muted small vertical-center">
|
||||
<pr-icon icon="'info'" class-name="'icon icon-sm icon-primary'"></pr-icon>
|
||||
Portainer user activity logs have a maximum retention of 7 days.
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
|
||||
<pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon>
|
||||
Export as CSV
|
||||
</button>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<activity-logs-datatable
|
||||
logs="$ctrl.state.logs"
|
||||
keyword="$ctrl.state.keyword"
|
||||
sort="$ctrl.state.sort"
|
||||
limit="$ctrl.state.limit"
|
||||
context-filter="$ctrl.state.contextFilter"
|
||||
total-items="$ctrl.state.totalItems"
|
||||
current-page="$ctrl.state.currentPage"
|
||||
feature="{{:: $ctrl.limitedFeature}}"
|
||||
on-change-keyword="($ctrl.onChangeKeyword)"
|
||||
on-change-sort="($ctrl.onChangeSort)"
|
||||
on-change-limit="($ctrl.onChangeLimit)"
|
||||
on-change-page="($ctrl.onChangePage)"
|
||||
></activity-logs-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<page-header title="'User authentication logs'" breadcrumbs="['User authentication logs']" reload="true"> </page-header>
|
||||
|
||||
<div class="be-indicator-container limited-be mx-4">
|
||||
<div>
|
||||
<div class="limited-be-link vertical-center"><be-feature-indicator class="m-4" feature="$ctrl.limitedFeature"></be-feature-indicator></div>
|
||||
<div class="mx-4">
|
||||
<div class="be-indicator-container limited-be">
|
||||
<div class="limited-be-link vertical-center m-4"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
|
||||
<!-- 15px matches the padding for col-sm-12 for the widget and table -->
|
||||
<div class="limited-be-content !p-0 !pt-[15px]">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
|
|
@ -10,7 +11,7 @@
|
|||
<rd-widget-body>
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
|
||||
<label for="dateRangeInput" class="col-sm-2 control-label text-left">Date range</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" disabled />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,38 @@ import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.ser
|
|||
|
||||
import { BEFeatureIndicator } from './BEFeatureIndicator';
|
||||
|
||||
type Variants = 'form-section' | 'widget' | 'multi-widget';
|
||||
|
||||
type OverlayClasses = {
|
||||
beLinkContainerClassName: string;
|
||||
contentClassName: string;
|
||||
};
|
||||
|
||||
const variantClassNames: Record<Variants, OverlayClasses> = {
|
||||
'form-section': {
|
||||
beLinkContainerClassName: '',
|
||||
contentClassName: '',
|
||||
},
|
||||
widget: {
|
||||
beLinkContainerClassName: '',
|
||||
// no padding so that the border overlaps the widget border
|
||||
contentClassName: '!p-0',
|
||||
},
|
||||
'multi-widget': {
|
||||
beLinkContainerClassName: 'm-4',
|
||||
// widgets have a mx of 15px and mb of 15px - match this at the top with padding
|
||||
contentClassName: '!p-0 !pt-[15px]',
|
||||
},
|
||||
};
|
||||
|
||||
export function BEOverlay({
|
||||
featureId,
|
||||
children,
|
||||
className,
|
||||
variant = 'form-section',
|
||||
}: {
|
||||
featureId: FeatureId;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
variant?: 'form-section' | 'widget' | 'multi-widget';
|
||||
}) {
|
||||
const isLimited = isLimitedToBE(featureId);
|
||||
if (!isLimited) {
|
||||
|
|
@ -21,10 +45,22 @@ export function BEOverlay({
|
|||
|
||||
return (
|
||||
<div className="be-indicator-container limited-be">
|
||||
<div className="limited-be-link vertical-center">
|
||||
<div
|
||||
className={clsx(
|
||||
'limited-be-link vertical-center',
|
||||
variantClassNames[variant].beLinkContainerClassName
|
||||
)}
|
||||
>
|
||||
<BEFeatureIndicator featureId={featureId} />
|
||||
</div>
|
||||
<div className={clsx('limited-be-content', className)}>{children}</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'limited-be-content',
|
||||
variantClassNames[variant].contentClassName
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,10 @@ export function BackupS3Form() {
|
|||
validateOnMount
|
||||
>
|
||||
{({ values, errors, isSubmitting, setFieldValue, isValid }) => (
|
||||
<BEOverlay featureId={FeatureId.S3_BACKUP_SETTING}>
|
||||
<BEOverlay
|
||||
featureId={FeatureId.S3_BACKUP_SETTING}
|
||||
variant="form-section"
|
||||
>
|
||||
<Form className="form-horizontal">
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import { BackupS3Form } from './BackupS3Form';
|
|||
export function BackupSettingsPanel() {
|
||||
const [backupType, setBackupType] = useState(options[0].value);
|
||||
|
||||
console.log(backupType);
|
||||
|
||||
return (
|
||||
<Widget>
|
||||
<WidgetTitle icon={Download} title="Back up Portainer" />
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export function HelmCertPanel() {
|
|||
};
|
||||
|
||||
return (
|
||||
<BEOverlay featureId={FeatureId.CA_FILE} className="!p-0">
|
||||
<BEOverlay featureId={FeatureId.CA_FILE} variant="widget">
|
||||
<Widget>
|
||||
<Widget.Title
|
||||
icon={Key}
|
||||
|
|
|
|||
Loading…
Reference in New Issue