Skip to content

Commit

Permalink
Makde changes for Rollup page
Browse files Browse the repository at this point in the history 
Signed-off-by: Sandeep Kumawat <[email protected]>
  • Loading branch information
Sandeep Kumawat committed Aug 28, 2024
1 parent 1a9e49d commit 2ee5c11
Show file tree
Hide file tree
Showing 16 changed files with 1,120 additions and 1,060 deletions.
157 changes: 79 additions & 78 deletions public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,20 +349,23 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr

return (
<EuiPanel>
<EuiFlexGroup style={{ padding: "0px 0px 0px 10px" }} justifyContent="spaceBetween">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem>
<EuiFlexGroup gutterSize="xs" direction="column">
<EuiFlexItem>
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h1>Additional aggregation{` (${selectedDimensionField.length})`} </h1>
</EuiTitle>
<EuiText size="s">
<h2>Additional aggregation{` (${selectedDimensionField.length})`} </h2>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<i> – optional </i>
</EuiTitle>
<EuiText size="s" color="subdued">
<h2>
{" "}
<i>– optional</i>{" "}
</h2>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
Expand Down Expand Up @@ -404,79 +407,77 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr

<EuiSpacer size="s" />
<EuiHorizontalRule margin="xs" />
<div style={{ paddingLeft: "10px" }}>
<EuiBasicTable
items={dimensionsShown}
itemId="sequence"
columns={aggregationColumns}
tableLayout="auto"
hasActions={true}
onChange={this.onDimensionTableChange}
pagination={dimensionPagination}
sorting={dimensionSorting}
noItemsMessage={
<Fragment>
<EuiSpacer />
<EuiText>No fields added for aggregations</EuiText>
<EuiSpacer />
<EuiFlexGroup style={{ padding: "5px 10px" }} alignItems="center">
<EuiFlexItem>
<EuiSpacer />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSmallButton onClick={this.showModal} data-test-subj="addFieldsAggregationEmpty">
Add fields
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="m" />
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
}
/>
<EuiSpacer size="s" />
{isModalVisible && (
<EuiOverlayMask>
<EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
<EuiModalHeader>
<EuiModalHeaderTitle>Add fields</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiBasicTable
items={dimensionsShown}
itemId="sequence"
columns={aggregationColumns}
tableLayout="auto"
hasActions={true}
onChange={this.onDimensionTableChange}
pagination={dimensionPagination}
sorting={dimensionSorting}
noItemsMessage={
<Fragment>
<EuiSpacer />
<EuiText>No fields added for aggregations</EuiText>
<EuiSpacer />
<EuiFlexGroup style={{ padding: "5px 10px" }} alignItems="center">
<EuiFlexItem>
<EuiSpacer />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSmallButton onClick={this.showModal} data-test-subj="addFieldsAggregationEmpty">
Add fields
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="m" />
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
}
/>
<EuiSpacer size="s" />
{isModalVisible && (
<EuiOverlayMask>
<EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
<EuiModalHeader>
<EuiModalHeaderTitle>Add fields</EuiModalHeaderTitle>
</EuiModalHeader>

<EuiModalBody>
<EuiForm title="Add fields">
<EuiBasicTable
columns={AddFieldsColumns}
items={fieldsOption}
itemId="label"
rowHeader="fieldName"
noItemsMessage="No fields available"
isSelectable={true}
selection={selection}
tableLayout="fixed"
/>
</EuiForm>
</EuiModalBody>
<EuiModalBody>
<EuiForm title="Add fields">
<EuiBasicTable
columns={AddFieldsColumns}
items={fieldsOption}
itemId="label"
rowHeader="fieldName"
noItemsMessage="No fields available"
isSelectable={true}
selection={selection}
tableLayout="fixed"
/>
</EuiForm>
</EuiModalBody>

<EuiModalFooter>
<EuiSmallButtonEmpty onClick={this.closeModal} data-test-subj="addFieldsAggregationCancel">
Cancel
</EuiSmallButtonEmpty>
<EuiSmallButton
fill
onClick={() => {
this.closeModal();
this.onClickAdd();
}}
data-test-subj="addFieldsAggregationAdd"
>
Add
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
)}
</div>
<EuiModalFooter>
<EuiSmallButtonEmpty onClick={this.closeModal} data-test-subj="addFieldsAggregationCancel">
Cancel
</EuiSmallButtonEmpty>
<EuiSmallButton
fill
onClick={() => {
this.closeModal();
this.onClickAdd();
}}
data-test-subj="addFieldsAggregationAdd"
>
Add
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
)}
</EuiPanel>
);
}
Expand Down
88 changes: 55 additions & 33 deletions public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.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,
EuiHorizontalRule,
EuiPanel,
} from "@elastic/eui";

interface ConfigureRollupProps {
isEdit: boolean;
Expand All @@ -17,36 +26,49 @@ interface ConfigureRollupProps {
}

const ConfigureRollup = ({ isEdit, rollupId, rollupIdError, onChangeName, onChangeDescription, description }: ConfigureRollupProps) => (
<ContentPanel bodyStyles={{ padding: "initial" }} title="Job name and description" titleSize="s">
<div style={{ paddingLeft: "10px" }}>
<EuiSpacer size="s" />
<EuiCompressedFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!rollupIdError} error={rollupIdError}>
<EuiCompressedFieldText
isInvalid={!!rollupIdError}
placeholder="my-rollupjob1"
value={rollupId}
onChange={onChangeName}
disabled={isEdit}
/>
</EuiCompressedFormRow>
<EuiSpacer />
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiText size="xs">
<h4>Description</h4>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="xs" color="subdued">
<i> – optional</i>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
<EuiCompressedFormRow>
<EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
</EuiCompressedFormRow>
</div>
</ContentPanel>
<EuiPanel>
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiText size="s">
<h2>Job name and description</h2>
</EuiText>
</EuiFlexGroup>
<EuiHorizontalRule margin={"xs"} />
<EuiSpacer size="s" />
<EuiCompressedFormRow
label={
<EuiText size="s">
<h3>Name</h3>
</EuiText>
}
helpText="Specify a unique, descriptive name."
isInvalid={!!rollupIdError}
error={rollupIdError}
>
<EuiCompressedFieldText
isInvalid={!!rollupIdError}
placeholder="my-rollupjob1"
value={rollupId}
onChange={onChangeName}
disabled={isEdit}
/>
</EuiCompressedFormRow>
<EuiSpacer />
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiFlexItem grow={false}>
<EuiText size="s">
<h3>Description</h3>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiText color="subdued">
<i> – optional</i>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
<EuiCompressedFormRow>
<EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
</EuiCompressedFormRow>
</EuiPanel>
);
export default ConfigureRollup;
50 changes: 28 additions & 22 deletions public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
Pagination,
EuiIcon,
EuiTableSortingType,
EuiPanel,
EuiHorizontalRule,
} from "@elastic/eui";
import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
import { ModalConsumer } from "../../../../components/Modal";
Expand Down Expand Up @@ -182,28 +184,32 @@ export default class HistogramAndMetrics extends Component<HistogramAndMetricsPr
};

return (
<ContentPanel
actions={
<ModalConsumer>
{() => (
<ContentPanelActions
actions={[
{
text: "Edit",
buttonProps: {
onClick: () => onChangeStep(2),
<EuiPanel>
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem>
<EuiText size="s">
<h2>{AGGREGATION_AND_METRIC_SETTINGS}</h2>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ModalConsumer>
{() => (
<ContentPanelActions
actions={[
{
text: "Edit",
buttonProps: {
onClick: () => onChangeStep(2),
},
},
},
]}
/>
)}
</ModalConsumer>
}
bodyStyles={{ padding: "initial" }}
title={AGGREGATION_AND_METRIC_SETTINGS}
titleSize="s"
>
<div style={{ padding: "15px" }}>
]}
/>
)}
</ModalConsumer>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule margin={"xs"} />
<div>
<EuiSpacer size="xs" />
<EuiText size="s">
<h3>Time aggregation</h3>
Expand Down Expand Up @@ -255,7 +261,7 @@ export default class HistogramAndMetrics extends Component<HistogramAndMetricsPr

<EuiSpacer size="s" />
</div>
</ContentPanel>
</EuiPanel>
);
}
}
Loading

0 comments on commit 2ee5c11

Please sign in to comment.