Skip to content

Commit

Permalink
Minor changes to UI
Browse files Browse the repository at this point in the history 
Signed-off-by: Kshitij Tandon <[email protected]>
  • Loading branch information
@tandonks
tandonks committed Aug 30, 2024
1 parent 7ed3516 commit 82f8274
Show file tree
Hide file tree
Showing 18 changed files with 578 additions and 596 deletions.
36 changes: 9 additions & 27 deletions public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,23 @@ exports[`<IndexDetail /> spec render the component 1`] = `
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="padding-left: 0px; padding-right: 0px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 10px;"
class="euiText euiText--small"
>
<div
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--small"
>
Source index details
<span
class="panel-header-count"
>
</span>
</h1>
</div>
<h2>
Source index details
</h2>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
/>
<div
style="padding: 0px 10px;"
>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--l"
/>
</div>
class="euiSpacer euiSpacer--s"
/>
<div
class="euiSpacer euiSpacer--l"
/>
</div>
</div>
`;
38 changes: 29 additions & 9 deletions public/containers/IndexDetail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
import { EuiSpacer } from "@elastic/eui";
import { EuiSpacer, EuiText, EuiTitle, EuiHorizontalRule, EuiPanel } from "@elastic/eui";
import React, { useContext, useEffect, useState } from "react";
import { CatIndex } from "../../../server/models/interfaces";
import { ContentPanel } from "../../components/ContentPanel";
import { CoreServicesContext } from "../../components/core_services";
import { ServicesContext } from "../../services";
import DescriptionListHoz from "../../components/DescriptionListHoz";
Expand Down Expand Up @@ -43,32 +42,53 @@ export default function IndexDetail(props: IIndexDetailProps) {
})();
}, [props.indices.join(","), setLoading, setItems, coreServices]);
return (
<ContentPanel title="Source index details" titleSize="s">
<EuiSpacer />
<EuiPanel>
<EuiText size="s">
<h2>Source index details</h2>
</EuiText>
<EuiHorizontalRule margin="xs" />
<EuiSpacer size="s" />
{items && items.length ? (
<DescriptionListHoz
compressed
listItems={[
{
title: "Index name",
title: (
<EuiText size="s">
<h4>Index name</h4>
</EuiText>
),
description: items[0].index,
},
{
title: "Primary shards",
title: (
<EuiText size="s">
<h4>Primary shards</h4>
</EuiText>
),
description: items[0].pri,
},
{
title: "Replica shards",
title: (
<EuiText size="s">
<h4>Replica shards</h4>
</EuiText>
),
description: items[0].rep,
},
{
title: "Total index size",
title: (
<EuiText size="s">
<h4>Total index size</h4>
</EuiText>
),
description: items[0]["store.size"],
},
]}
/>
) : null}
<EuiSpacer />
{loading ? null : props.children}
</ContentPanel>
</EuiPanel>
);
}
8 changes: 7 additions & 1 deletion public/pages/CreateIndex/containers/IndexForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,13 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
</EuiSmallButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createIndexCreateButton">
<EuiSmallButton
fill
onClick={this.onSubmit}
isLoading={isSubmitting}
data-test-subj="createIndexCreateButton"
iconType={isEdit ? undefined : "plus"}
>
{isEdit ? "Update" : "Create"}
</EuiSmallButton>
</EuiFlexItem>
Expand Down
30 changes: 17 additions & 13 deletions public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,17 @@
*/

import React, { ChangeEvent } from "react";
import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
import { ContentPanel } from "../../../../components/ContentPanel";
import {
EuiSpacer,
EuiCompressedFormRow,
EuiCompressedFieldText,
EuiTextArea,
EuiText,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiHorizontalRule,
} from "@elastic/eui";

interface ConfigureTransformProps {
isEdit: boolean;
Expand All @@ -24,16 +33,11 @@ const ConfigureTransform = ({
onChangeDescription,
description,
}: ConfigureTransformProps) => (
<ContentPanel
panelStyles={{ padding: "16px 16px" }}
bodyStyles={{ padding: "10px" }}
title={
<EuiText size="s">
<h2>Job name and description</h2>
</EuiText>
}
titleSize="m"
>
<EuiPanel>
<EuiText size="s">
<h2>Job name and description</h2>
</EuiText>
<EuiHorizontalRule margin="xs" />
<div>
<EuiCompressedFormRow
label={
Expand Down Expand Up @@ -73,6 +77,6 @@ const ConfigureTransform = ({
<EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
</EuiCompressedFormRow>
</div>
</ContentPanel>
</EuiPanel>
);
export default ConfigureTransform;
55 changes: 27 additions & 28 deletions public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
*/

import React, { Component } from "react";
import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } from "@elastic/eui";
import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule } from "@elastic/eui";
import { ContentPanelActions } from "../../../../components/ContentPanel";
import { ModalConsumer } from "../../../../components/Modal";
import { IndexItem } from "../../../../../models/interfaces";

Expand All @@ -27,32 +27,31 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
const { transformId, description, onChangeStep, sourceIndex, targetIndex, sourceIndexFilter } = this.props;

return (
<ContentPanel
actions={
<ModalConsumer>
{() => (
<ContentPanelActions
actions={[
{
text: "Edit",
buttonProps: {
onClick: () => onChangeStep(1),
<EuiPanel>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="s">
<h2>Set up indices</h2>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ModalConsumer>
{() => (
<ContentPanelActions
actions={[
{
text: "Edit",
buttonProps: {
onClick: () => onChangeStep(1),
},
},
},
]}
/>
)}
</ModalConsumer>
}
panelStyles={{ padding: "16px 16px" }}
bodyStyles={{ padding: "10px" }}
title={
<EuiText size="s">
<h2>Set up indices</h2>
</EuiText>
}
titleSize="m"
>
]}
/>
)}
</ModalConsumer>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule margin="xs" />
<div>
<EuiFlexGrid columns={3}>
<EuiFlexItem>
Expand Down Expand Up @@ -88,7 +87,7 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
</EuiFlexGrid>
<EuiSpacer size="s" />
</div>
</ContentPanel>
</EuiPanel>
);
}
}
55 changes: 27 additions & 28 deletions public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
*/

import React, { Component } from "react";
import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiAccordion } from "@elastic/eui";
import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiAccordion, EuiFlexGroup, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
import { ContentPanelActions } from "../../../../components/ContentPanel";
import { ModalConsumer } from "../../../../components/Modal";
import { TransformGroupItem, FieldItem, TransformAggItem, TRANSFORM_AGG_TYPE } from "../../../../../models/interfaces";
import DefineTransforms from "../DefineTransforms";
Expand Down Expand Up @@ -82,32 +82,31 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
};

return (
<ContentPanel
actions={
<ModalConsumer>
{() => (
<ContentPanelActions
actions={[
{
text: "Edit",
buttonProps: {
onClick: () => onChangeStep(2),
<EuiPanel>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="s">
<h2>Define transforms</h2>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ModalConsumer>
{() => (
<ContentPanelActions
actions={[
{
text: "Edit",
buttonProps: {
onClick: () => onChangeStep(2),
},
},
},
]}
/>
)}
</ModalConsumer>
}
panelStyles={{ padding: "16px 16px" }}
bodyStyles={{ padding: "10px" }}
title={
<EuiText size="s">
<h2>Define transforms</h2>
</EuiText>
}
titleSize="m"
>
]}
/>
)}
</ModalConsumer>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule margin="xs" />
<div>
<EuiFlexGrid columns={4}>{aggListItems()}</EuiFlexGrid>
<EuiSpacer />
Expand Down Expand Up @@ -136,7 +135,7 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
</div>
</EuiAccordion>
</div>
</ContentPanel>
</EuiPanel>
);
}
}
Loading

0 comments on commit 82f8274

Please sign in to comment.