github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(be-overlay): consistency overlay with variants [EE-6742] (#11776) 

Co-authored-by: testa113 <testa113>
pull/11789/head
Ali 2024-05-07 16:16:55 +12:00 committed by GitHub
parent 4bcefb4866
commit 6d2775a42e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 98 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
app/portainer/user-activity/activity-logs-view/activity-logs-view.html
View File

@ -1,46 +1,52 @@
<page-header title="'User activity logs'" breadcrumbs="['User activity logs']" reload="true"> </page-header> <page-header title="'User activity logs'" breadcrumbs="['User activity logs']" reload="true"> </page-header>
<div class="be-indicator-container limited-be mx-4"> <div class="mx-4">
<div> <div class="be-indicator-container limited-be">
<div class="limited-be-link vertical-center"><be-feature-indicator class="m-2" feature="$ctrl.limitedFeature"></be-feature-indicator></div> <div class="limited-be-link vertical-center m-4"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
<div class="limited-be-content"> <div class="limited-be-content !p-0 !pt-[15px]">
<rd-widget> <div class="row">
<rd-widget-body> <div class="col-sm-12">
<div class="form-horizontal"> <rd-widget>
<div class="form-group"> <rd-widget-body>
<label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label> <div class="form-horizontal">
<div class="col-sm-6"> <div class="form-group">
<input type="text" class="form-control" disabled /> <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">
</div> <pr-icon icon="'info'" class-name="'icon icon-sm icon-primary'"></pr-icon>
<p class="text-muted small vertical-center"> Portainer user activity logs have a maximum retention of 7 days.
<pr-icon icon="'info'" class-name="'icon icon-sm icon-primary'"></pr-icon> </p>
Portainer user activity logs have a maximum retention of 7 days. <div>
</p> <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
<div> <pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon>
<button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled> Export as CSV
<pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon> </button>
Export as CSV </div>
</button> </rd-widget-body>
</div> </rd-widget>
</rd-widget-body> </div>
</rd-widget> </div>
<div class="row mt-5"> <div class="row">
<activity-logs-datatable <div class="col-sm-12">
logs="$ctrl.state.logs" <activity-logs-datatable
keyword="$ctrl.state.keyword" logs="$ctrl.state.logs"
sort="$ctrl.state.sort" keyword="$ctrl.state.keyword"
limit="$ctrl.state.limit" sort="$ctrl.state.sort"
context-filter="$ctrl.state.contextFilter" limit="$ctrl.state.limit"
total-items="$ctrl.state.totalItems" context-filter="$ctrl.state.contextFilter"
current-page="$ctrl.state.currentPage" total-items="$ctrl.state.totalItems"
feature="{{:: $ctrl.limitedFeature}}" current-page="$ctrl.state.currentPage"
on-change-keyword="($ctrl.onChangeKeyword)" feature="{{:: $ctrl.limitedFeature}}"
on-change-sort="($ctrl.onChangeSort)" on-change-keyword="($ctrl.onChangeKeyword)"
on-change-limit="($ctrl.onChangeLimit)" on-change-sort="($ctrl.onChangeSort)"
on-change-page="($ctrl.onChangePage)" on-change-limit="($ctrl.onChangeLimit)"
></activity-logs-datatable> on-change-page="($ctrl.onChangePage)"
></activity-logs-datatable>
</div>
</div> </div>
</div> </div>
</div> </div>

9
app/portainer/user-activity/auth-logs-view/auth-logs-view.html
View File

@ -1,8 +1,9 @@
<page-header title="'User authentication logs'" breadcrumbs="['User authentication logs']" reload="true"> </page-header> <page-header title="'User authentication logs'" breadcrumbs="['User authentication logs']" reload="true"> </page-header>
<div class="be-indicator-container limited-be mx-4"> <div class="mx-4">
<div> <div class="be-indicator-container limited-be">
<div class="limited-be-link vertical-center"><be-feature-indicator class="m-4" feature="$ctrl.limitedFeature"></be-feature-indicator></div> <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="limited-be-content !p-0 !pt-[15px]">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
@ -10,7 +11,7 @@
<rd-widget-body> <rd-widget-body>
<div class="form-horizontal"> <div class="form-horizontal">
<div class="form-group"> <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"> <div class="col-sm-6">
<input type="text" class="form-control" disabled /> <input type="text" class="form-control" disabled />
</div> </div>

44
app/react/components/BEFeatureIndicator/BEOverlay.tsx
View File

@ -5,14 +5,38 @@ import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.ser
import { BEFeatureIndicator } from './BEFeatureIndicator'; 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({ export function BEOverlay({
featureId, featureId,
children, children,
className, variant = 'form-section',
}: { }: {
featureId: FeatureId; featureId: FeatureId;
children: React.ReactNode; children: React.ReactNode;
className?: string; variant?: 'form-section' | 'widget' | 'multi-widget';
}) { }) {
const isLimited = isLimitedToBE(featureId); const isLimited = isLimitedToBE(featureId);
if (!isLimited) { if (!isLimited) {
@ -21,10 +45,22 @@ export function BEOverlay({
return ( return (
<div className="be-indicator-container limited-be"> <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} /> <BEFeatureIndicator featureId={featureId} />
</div> </div>
<div className={clsx('limited-be-content', className)}>{children}</div> <div
className={clsx(
'limited-be-content',
variantClassNames[variant].contentClassName
)}
>
{children}
</div>
</div> </div>
); );
} }

5
app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx
View File

@ -58,7 +58,10 @@ export function BackupS3Form() {
validateOnMount validateOnMount
> >
{({ values, errors, isSubmitting, setFieldValue, isValid }) => ( {({ values, errors, isSubmitting, setFieldValue, isValid }) => (
<BEOverlay featureId={FeatureId.S3_BACKUP_SETTING}> <BEOverlay
featureId={FeatureId.S3_BACKUP_SETTING}
variant="form-section"
>
<Form className="form-horizontal"> <Form className="form-horizontal">
<div className="form-group"> <div className="form-group">
<div className="col-sm-12"> <div className="col-sm-12">

2
app/react/portainer/settings/SettingsView/BackupSettingsView/BackupSettingsPanel.tsx
View File

@ -12,6 +12,8 @@ import { BackupS3Form } from './BackupS3Form';
export function BackupSettingsPanel() { export function BackupSettingsPanel() {
const [backupType, setBackupType] = useState(options[0].value); const [backupType, setBackupType] = useState(options[0].value);
console.log(backupType);
return ( return (
<Widget> <Widget>
<WidgetTitle icon={Download} title="Back up Portainer" /> <WidgetTitle icon={Download} title="Back up Portainer" />

2
app/react/portainer/settings/SettingsView/HelmCertPanel.tsx
View File

@ -30,7 +30,7 @@ export function HelmCertPanel() {
}; };
return ( return (
<BEOverlay featureId={FeatureId.CA_FILE} className="!p-0"> <BEOverlay featureId={FeatureId.CA_FILE} variant="widget">
<Widget> <Widget>
<Widget.Title <Widget.Title
icon={Key} icon={Key}