Skip to content

Commit

Permalink
Fit and finish changes for Aliases, Templates and Policy managed Indi…
Browse files Browse the repository at this point in the history 
…ces pages (#1155) (#1158)

* Changes for Aliases, templates & policy managed indices



* Added snap files



* Resolved a failing UT



* Updated couple of snap files



* Fixed a few bugs and worked on comments



* Updated Snap files



* Worked on reviews



* Couple of changes for old UI



* Minor changes to UI



* Title changes in Old UI



---------


(cherry picked from commit b08be46)

Signed-off-by: Kshitij Tandon <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@opensearch-trigger-bot @github-actions
opensearch-trigger-bot[bot] and github-actions[bot] authored Sep 2, 2024
1 parent daed7ef commit 6d7ddaa
Show file tree
Hide file tree
Showing 92 changed files with 4,636 additions and 3,762 deletions.
13 changes: 11 additions & 2 deletions public/components/ConfirmationModal/ConfirmationModal.tsx
View file
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
16 changes: 14 additions & 2 deletions public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap
View file
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
4 changes: 2 additions & 2 deletions public/components/ContentPanel/ContentPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,12 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
{title ? (
<EuiFlexItem>
{typeof title === "string" ? (
<EuiTitle size={titleSize}>
<EuiText size="s">
<h1>
{title}
<span className="panel-header-count"> {itemCount > 0 ? `(${itemCount})` : null} </span>
</h1>
</EuiTitle>
</EuiText>
) : (
title
)}
Expand Down
22 changes: 12 additions & 10 deletions public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,19 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
<div
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
Testing
<span
class="panel-header-count"
>
</span>
</h1>
<h1>
Testing
<span
class="panel-header-count"
>
</span>
</h1>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down
18 changes: 14 additions & 4 deletions public/components/DeleteModal/DeleteModal.tsx
View file
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
44 changes: 30 additions & 14 deletions public/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
View file
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
View file
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

0 comments on commit 6d7ddaa

Please sign in to comment.