+ {isManagedPolicy && (
+ <>
+
+ }
+ color="danger"
+ iconType="alert"
+ data-test-subj="editManagedPolicyCallOut"
+ >
+
+
+
+
+
+
+ )}
void;
}
export class ConfirmDelete extends Component {
+ public state = {
+ isDeleteConfirmed: false,
+ };
+
+ setIsDeleteConfirmed = (confirmed: boolean) => {
+ this.setState({
+ isDeleteConfirmed: confirmed,
+ });
+ };
+
deletePolicy = async () => {
const { policyToDelete, callback } = this.props;
const policyName = policyToDelete.name;
@@ -43,8 +53,12 @@ export class ConfirmDelete extends Component {
callback();
}
};
+ isPolicyPolicy = true;
render() {
const { policyToDelete, onCancel } = this.props;
+ const { isDeleteConfirmed } = this.state;
+ const isManagedPolicy = policyToDelete.policy?._meta?.managed;
+
const title = i18n.translate('xpack.indexLifecycleMgmt.confirmDelete.title', {
defaultMessage: 'Delete policy "{name}"',
values: { name: policyToDelete.name },
@@ -68,13 +82,47 @@ export class ConfirmDelete extends Component {
/>
}
buttonColor="danger"
+ confirmButtonDisabled={isManagedPolicy ? !isDeleteConfirmed : false}
>
-
-
-
+ {isManagedPolicy ? (
+
+ }
+ color="danger"
+ iconType="alert"
+ data-test-subj="deleteManagedPolicyCallOut"
+ >
+
+
+
+
+ }
+ checked={isDeleteConfirmed}
+ onChange={(e) => this.setIsDeleteConfirmed(e.target.checked)}
+ />
+
+ ) : (
+
+
+
+ )}
);
}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx
index 8a89759a4225e..2d79737baf2bc 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx
@@ -5,8 +5,17 @@
* 2.0.
*/
-import React from 'react';
-import { EuiButtonEmpty, EuiLink, EuiInMemoryTable, EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import {
+ EuiButtonEmpty,
+ EuiLink,
+ EuiInMemoryTable,
+ EuiToolTip,
+ EuiButtonIcon,
+ EuiBadge,
+ EuiFlexItem,
+ EuiSwitch,
+} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@@ -15,6 +24,8 @@ import { METRIC_TYPE } from '@kbn/analytics';
import { useHistory } from 'react-router-dom';
import { EuiBasicTableColumn } from '@elastic/eui/src/components/basic_table/basic_table';
import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useStateWithLocalStorage } from '../../../lib/settings_local_storage';
import { PolicyFromES } from '../../../../../common/types';
import { useKibana } from '../../../../shared_imports';
import { getIndicesListPath, getPolicyEditPath } from '../../../services/navigation';
@@ -45,17 +56,63 @@ const actionTooltips = {
),
};
+const managedPolicyTooltips = {
+ badge: i18n.translate('xpack.indexLifecycleMgmt.policyTable.templateBadgeType.managedLabel', {
+ defaultMessage: 'Managed',
+ }),
+ badgeTooltip: i18n.translate(
+ 'xpack.indexLifecycleMgmt.policyTable.templateBadgeType.managedDescription',
+ {
+ defaultMessage:
+ 'This policy is preconfigured and managed by Elastic; editing or deleting this policy might break Kibana.',
+ }
+ ),
+};
+
interface Props {
policies: PolicyFromES[];
}
+const SHOW_MANAGED_POLICIES_BY_DEFAULT = 'ILM_SHOW_MANAGED_POLICIES_BY_DEFAULT';
+
export const PolicyTable: React.FunctionComponent = ({ policies }) => {
const history = useHistory();
const {
services: { getUrlForApp },
} = useKibana();
-
+ const [managedPoliciesVisible, setManagedPoliciesVisible] = useStateWithLocalStorage(
+ SHOW_MANAGED_POLICIES_BY_DEFAULT,
+ false
+ );
const { setListAction } = usePolicyListContext();
+ const searchOptions = useMemo(
+ () => ({
+ box: { incremental: true, 'data-test-subj': 'ilmSearchBar' },
+ toolsRight: (
+
+ setManagedPoliciesVisible(event.target.checked)}
+ label={
+
+ }
+ />
+
+ ),
+ }),
+ [managedPoliciesVisible, setManagedPoliciesVisible]
+ );
+
+ const filteredPolicies = useMemo(() => {
+ return managedPoliciesVisible
+ ? policies
+ : policies.filter((item) => !item.policy?._meta?.managed);
+ }, [policies, managedPoliciesVisible]);
const columns: Array> = [
{
@@ -65,17 +122,31 @@ export const PolicyTable: React.FunctionComponent = ({ policies }) => {
defaultMessage: 'Name',
}),
sortable: true,
- render: (value: string) => {
+ render: (value: string, item) => {
+ const isManaged = item.policy?._meta?.managed;
return (
-
- trackUiMetric(METRIC_TYPE.CLICK, UIM_EDIT_CLICK)
+ <>
+
+ trackUiMetric(METRIC_TYPE.CLICK, UIM_EDIT_CLICK)
+ )}
+ >
+ {value}
+
+
+ {isManaged && (
+ <>
+
+
+
+ {managedPolicyTooltips.badge}
+
+
+
)}
- >
- {value}
-
+
);
},
},
@@ -191,11 +262,9 @@ export const PolicyTable: React.FunctionComponent = ({ policies }) => {
direction: 'asc',
},
}}
- search={{
- box: { incremental: true, 'data-test-subj': 'ilmSearchBar' },
- }}
+ search={searchOptions}
tableLayout="auto"
- items={policies}
+ items={filteredPolicies}
columns={columns}
rowProps={(policy: PolicyFromES) => ({ 'data-test-subj': `policyTableRow-${policy.name}` })}
/>