Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fit and finish changes for Aliases, Templates and Policy managed Indices pages #1155

Merged
merged 10 commits into from
Sep 2, 2024
13 changes: 11 additions & 2 deletions public/components/ConfirmationModal/ConfirmationModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSmallButtonEmpty,
EuiText,
// @ts-ignore
} from "@elastic/eui";

Expand Down Expand Up @@ -41,10 +42,18 @@ const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({
// @ts-ignore */}
<EuiModal onCancel={onClose} onClose={onClose} maxWidth={1000} {...modalProps}>
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<EuiText size="s">
<h2>{title}</h2>
</EuiText>
</EuiModalHeaderTitle>
</EuiModalHeader>

<EuiModalBody>{bodyMessage}</EuiModalBody>
<EuiModalBody>
<EuiText size="s">
<p>{bodyMessage}</p>
</EuiText>
</EuiModalBody>

<EuiModalFooter>
<EuiSmallButtonEmpty onClick={onClose} data-test-subj="confirmationModalCloseButton">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,13 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
<div
class="euiModalHeader__title"
>
some title
<div
class="euiText euiText--small"
>
<h2>
some title
</h2>
</div>
</div>
</div>
<div
Expand All @@ -44,7 +50,13 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
<div
class="euiModalBody__overflow"
>
some body message
<div
class="euiText euiText--small"
>
<p>
some body message
</p>
</div>
</div>
</div>
<div
Expand Down
18 changes: 14 additions & 4 deletions public/components/DeleteModal/DeleteModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,30 @@ export default function DeleteTemplateModal(props: DeleteModalProps) {
return (
<EuiModal onClose={onClose}>
<EuiModalHeader>
<EuiModalHeaderTitle>{props.title}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<EuiText size="s">
<h2>{props.title}</h2>
</EuiText>
</EuiModalHeaderTitle>
</EuiModalHeader>

<EuiModalBody>
<div style={{ lineHeight: 1.5 }}>
<p>{props.tips}</p>
<EuiText size="s">
<p>{props.tips}</p>
</EuiText>
<ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
{selectedItems.map((item) => (
<li key={item}>{item}</li>
<EuiText size="s">
<li key={item}>{item}</li>
</EuiText>
))}
</ul>
<EuiSpacer />
<EuiText color="subdued" size="s">
To confirm your action, type <b style={{ color: "#000" }}>delete</b>.
<p>
To confirm your action, type <b style={{ color: "#000" }}>delete</b>.
</p>
</EuiText>
<EuiCompressedFieldText
data-test-subj="deleteInput"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,13 @@ HTMLCollection [
<div
class="euiModalHeader__title"
>
test
<div
class="euiText euiText--small"
>
<h2>
test
</h2>
</div>
</div>
</div>
<div
Expand All @@ -51,15 +57,23 @@ HTMLCollection [
<div
style="line-height: 1.5;"
>
<p>
test
</p>
<div
class="euiText euiText--small"
>
<p>
test
</p>
</div>
<ul
style="list-style-type: disc; list-style-position: inside;"
>
<li>
test
</li>
<div
class="euiText euiText--small"
>
<li>
test
</li>
</div>
</ul>
<div
class="euiSpacer euiSpacer--l"
Expand All @@ -70,13 +84,15 @@ HTMLCollection [
<div
class="euiTextColor euiTextColor--subdued"
>
To confirm your action, type
<b
style="color: rgb(0, 0, 0);"
>
delete
</b>
.
<p>
To confirm your action, type
<b
style="color: rgb(0, 0, 0);"
>
delete
</b>
.
</p>
</div>
</div>
<div
Expand Down
108 changes: 69 additions & 39 deletions public/components/IndexDetail/IndexDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {
EuiSmallButton,
EuiCallOut,
EuiTitle,
EuiText,
EuiPanel,
EuiHorizontalRule,
} from "@elastic/eui";
import { set, merge, omit, pick } from "lodash";
import flat from "flat";
Expand Down Expand Up @@ -252,7 +255,11 @@ const IndexDetail = (
return [
{
rowProps: {
label: "Number of primary shards",
label: (
<EuiText size="s">
<h3>Number of primary shards</h3>
</EuiText>
),
helpText: (
<>
<div>Specify the number of primary shards for the index. Default is 1. </div>
Expand Down Expand Up @@ -287,7 +294,11 @@ const IndexDetail = (
},
{
rowProps: {
label: "Number of replicas",
label: (
<EuiText size="s">
<h3>Number of replicas</h3>
</EuiText>
),
helpText: REPLICA_NUMBER_MESSAGE,
direction: isEdit ? "hoz" : "ver",
},
Expand Down Expand Up @@ -317,7 +328,11 @@ const IndexDetail = (
},
{
rowProps: {
label: "Refresh interval",
label: (
<EuiText size="s">
<h3>Refresh interval</h3>
</EuiText>
),
helpText:
"Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is 1 second.",
direction: isEdit ? "hoz" : "ver",
Expand Down Expand Up @@ -358,7 +373,11 @@ const IndexDetail = (
{
name: "index",
rowProps: {
label: "Index name",
label: (
<EuiText size="s">
<h3>Index name</h3>
</EuiText>
),
helpText: <div>{INDEX_NAMING_MESSAGE}</div>,
position: "bottom",
style: isEdit ? { display: "none" } : {},
Expand Down Expand Up @@ -388,10 +407,15 @@ const IndexDetail = (
{
name: "aliases",
rowProps: {
label: "Index alias",
label: (
<EuiText size="s">
<h3>
Index alias <OptionalLabel />
</h3>
</EuiText>
),
helpText: "Allow this index to be referenced by existing aliases or specify a new alias.",
direction: isEdit ? "hoz" : "ver",
isOptional: true,
},
options: {
props: {
Expand Down Expand Up @@ -432,9 +456,14 @@ const IndexDetail = (

return (
<>
<ContentPanel title={title} titleSize="s">
<EuiPanel>
<EuiText size="s">
{" "}
<h2>{title}</h2>{" "}
</EuiText>
<EuiHorizontalRule margin="xs" />
{content}
</ContentPanel>
</EuiPanel>
<EuiSpacer />
</>
);
Expand All @@ -455,6 +484,7 @@ const IndexDetail = (
// The EuiContextMenu has bug when testing in jest
// the props change won't make it rerender
key={sourceIndices.join(",")}
size="s"
panels={[
{
id: 0,
Expand Down Expand Up @@ -499,7 +529,7 @@ const IndexDetail = (
accordionProps: {
initialIsOpen: false,
id: "accordionForCreateIndexSettings",
buttonContent: <h4>Advanced settings</h4>,
buttonContent: <h3>Advanced settings</h3>,
},
rowProps: {
label: "Specify advanced index settings",
Expand Down Expand Up @@ -550,9 +580,14 @@ const IndexDetail = (

return (
<>
<ContentPanel title="Index settings" titleSize="s">
<EuiPanel>
<EuiText size="s">
{" "}
<h2>Index settings</h2>{" "}
</EuiText>
<EuiHorizontalRule margin="xs" />
{content}
</ContentPanel>
</EuiPanel>
<EuiSpacer />
</>
);
Expand Down Expand Up @@ -592,37 +627,32 @@ const IndexDetail = (
}

return (
<ContentPanel
title={
<>
<EuiTitle size="s">
<EuiPanel>
<EuiText size="s">
<h2>
Index mapping
<OptionalLabel />
</h2>
</EuiText>
<EuiCompressedFormRow
fullWidth
helpText={
<>
<div>
Index mapping
<OptionalLabel />
Define how documents and their fields are stored and indexed.{" "}
<EuiLink target="_blank" external href={`https://opensearch.org/docs/${docVersion}/opensearch/mappings/`}>
Learn more
</EuiLink>
</div>
</EuiTitle>
<EuiCompressedFormRow
fullWidth
helpText={
<>
<div>
Define how documents and their fields are stored and indexed.{" "}
<EuiLink target="_blank" external href={`https://opensearch.org/docs/${docVersion}/opensearch/mappings/`}>
Learn more
</EuiLink>
</div>
<div>Mappings and field types cannot be changed after the index is created.</div>
</>
}
>
<></>
</EuiCompressedFormRow>
</>
}
titleSize="s"
>
<div>Mappings and field types cannot be changed after the index is created.</div>
</>
}
>
<></>
</EuiCompressedFormRow>
<EuiHorizontalRule margin="xs" />
{content}
</ContentPanel>
</EuiPanel>
);
})()}
{templateSimulateLoading ? (
Expand Down
Loading
Loading