Skip to content

Commit

Permalink
Updates to UX/UI (opendistro-for-elasticsearch#57)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbbaughe
dbbaughe authored Oct 16, 2019
1 parent 32b6682 commit cdb70d7
Show file tree
Hide file tree
Showing 38 changed files with 477 additions and 327 deletions.
15 changes: 5 additions & 10 deletions public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
*/

import React, { Component } from "react";
import { EuiSpacer, EuiText, EuiComboBox, EuiFormRow } from "@elastic/eui";
import { EuiSpacer, EuiComboBox, EuiFormRow } from "@elastic/eui";
import { toastNotifications } from "ui/notify";
import { ContentPanel } from "../../../../components/ContentPanel";
import { ManagedIndexService } from "../../../../services";
Expand Down Expand Up @@ -99,23 +99,17 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
const stateOptions = options.concat([...uniqueStates].map((stateName: string) => ({ label: stateName })));

return (
<ContentPanel bodyStyles={{ padding: "initial" }} title="Managed indices" titleSize="s">
<ContentPanel bodyStyles={{ padding: "initial" }} title="Choose managed indices" titleSize="s">
<div style={{ paddingLeft: "10px" }}>
<EuiText size="xs">
<p>
When a managed index changes policy, the new policy will take affect after the managed index is finished running the current
state or the new policy has the same structure as the current one.
</p>
</EuiText>
<EuiSpacer size="m" />
<EuiFormRow
label="Managed indices"
helpText="You can use a * as a wildcard in your index pattern"
helpText="You can use * as wildcards to form index patterns."
isInvalid={!!managedIndicesError}
error={managedIndicesError}
>
<EuiComboBox
placeholder="Choose managed indices"
placeholder=""
async
options={managedIndices}
isInvalid={!!managedIndicesError}
Expand All @@ -129,6 +123,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices

<EuiFormRow label="State filters" helpText="Apply new policy only on managed indices in these states.">
<EuiComboBox
isDisabled={!selectedManagedIndices.length}
placeholder="Choose state filters"
options={stateOptions}
selectedOptions={selectedStateFilters}
Expand Down
22 changes: 6 additions & 16 deletions ...gePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
<h3
class="euiTitle euiTitle--small"
>
Managed indices
Choose managed indices
</h3>
</div>
</div>
Expand All @@ -28,13 +28,6 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
<div
style="padding-left: 10px;"
>
<div
class="euiText euiText--extraSmall"
>
<p>
When a managed index changes policy, the new policy will take affect after the managed index is finished running the current state or the new policy has the same structure as the current one.
</p>
</div>
<div
class="euiSpacer euiSpacer--m"
/>
Expand Down Expand Up @@ -67,11 +60,6 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
data-test-subj="comboBoxInput"
tabindex="-1"
>
<p
class="euiComboBoxPlaceholder"
>
Choose managed indices
</p>
<div
class="euiComboBox__input"
style="font-size: 14px; display: inline-block;"
Expand Down Expand Up @@ -126,7 +114,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
class="euiFormHelpText euiFormRow__text"
id="some_make_id-help"
>
You can use a * as a wildcard in your index pattern
You can use * as wildcards to form index patterns.
</div>
</div>
<div
Expand All @@ -143,7 +131,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
aria-describedby="some_make_id-help"
aria-expanded="false"
aria-haspopup="listbox"
class="euiComboBox"
class="euiComboBox euiComboBox-isDisabled"
role="combobox"
>
<div
Expand All @@ -153,7 +141,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
class="euiComboBox__inputWrap"
data-test-subj="comboBoxInput"
tabindex="-1"
>
Expand All @@ -168,6 +156,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
>
<input
data-test-subj="comboBoxSearchInput"
disabled=""
id="some_make_id"
role="textbox"
style="box-sizing: content-box; width: 2px;"
Expand All @@ -185,6 +174,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
aria-label="Open list of options"
class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
data-test-subj="comboBoxToggleListButton"
disabled=""
>
<svg
aria-hidden="true"
Expand Down
22 changes: 14 additions & 8 deletions public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@

import React from "react";
import _ from "lodash";
import { EuiSpacer, EuiText, EuiRadioGroup, EuiFormRow, EuiSelect, EuiComboBox } from "@elastic/eui";
import { EuiSpacer, EuiText, EuiRadioGroup, EuiFormRow, EuiSelect, EuiComboBox, EuiLink, EuiIcon } from "@elastic/eui";
import { toastNotifications } from "ui/notify";
import { ContentPanel } from "../../../../components/ContentPanel";
import { IndexService } from "../../../../services";
import { Radio } from "../../containers/ChangePolicy/ChangePolicy";
import { Policy } from "../../../../../models/interfaces";
import { PolicyOption } from "../../models/interfaces";
import { getErrorMessage } from "../../../../utils/helpers";
import { DOCUMENTATION_URL } from "../../../../utils/constants";

interface NewPolicyProps {
indexService: IndexService;
Expand Down Expand Up @@ -88,25 +89,30 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
)
);

const currentRadio = { id: Radio.Current, label: "Continue from current state" };
const currentRadio = { id: Radio.Current, label: "Keep indices in their current state after the policy takes effect" };
const stateRadio = {
id: Radio.State,
label: "Start from a chosen state after changing policies",
label: "Switch indices to the following state after the policy takes effect",
disabled: !hasSelectedPolicy || !stateOptions.length,
};
const radioOptions = [currentRadio, stateRadio];
return (
<ContentPanel bodyStyles={{ padding: "initial" }} title="New policy" titleSize="s">
<ContentPanel bodyStyles={{ padding: "initial" }} title="Choose new policy" titleSize="s">
<div style={{ paddingLeft: "10px" }}>
<EuiText size="xs">
<p>Select a new policy. Choose between switching to a new state after changing policies or staying in the current state.</p>
<p>
When the new policy will take effect depends on the current state of indices and the states of the new policy.{" "}
<EuiLink href={DOCUMENTATION_URL} target="_blank">
Learn more <EuiIcon type="popout" size="s" />
</EuiLink>
</p>
</EuiText>

<EuiSpacer size="s" />

<EuiFormRow label="Policy" isInvalid={!!selectedPoliciesError} error={selectedPoliciesError}>
<EuiFormRow label="New policy" isInvalid={!!selectedPoliciesError} error={selectedPoliciesError}>
<EuiComboBox
placeholder="Choose a policy"
placeholder=""
async
options={policies}
isInvalid={!!selectedPoliciesError}
Expand All @@ -123,7 +129,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy

<EuiSpacer size="s" />

<EuiFormRow label="Start state" helpText="Select a state to start from after changing policies">
<EuiFormRow>
<EuiSelect
disabled={stateRadioIdSelected !== Radio.State}
options={stateOptions}
Expand Down
50 changes: 27 additions & 23 deletions public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
<h3
class="euiTitle euiTitle--small"
>
New policy
Choose new policy
</h3>
</div>
</div>
Expand All @@ -32,7 +32,29 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
class="euiText euiText--extraSmall"
>
<p>
Select a new policy. Choose between switching to a new state after changing policies or staying in the current state.
When the new policy will take effect depends on the current state of indices and the states of the new policy.
<a
class="euiLink euiLink--primary"
href="https://opendistro.github.io/for-elasticsearch-docs/docs/ism/"
rel="noopener noreferrer"
target="_blank"
>
Learn more
<svg
class="euiIcon euiIcon--small"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 14.01h12.49a.5.5 0 1 1 0 1h-13a.5.5 0 0 1-.49-.597V1.5a.5.5 0 0 1 1 0v12.51zm2.354-1.656a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708.708l-8 8zM15 5.5a.5.5 0 1 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 1 0-1h3A1.5 1.5 0 0 1 15 2.5v3z"
fill-rule="evenodd"
/>
</svg>
</a>
</p>
</div>
<div
Expand All @@ -47,7 +69,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
class="euiFormLabel"
for="some_make_id"
>
Policy
New policy
</label>
<div
aria-expanded="false"
Expand All @@ -66,11 +88,6 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
data-test-subj="comboBoxInput"
tabindex="-1"
>
<p
class="euiComboBoxPlaceholder"
>
Choose a policy
</p>
<div
class="euiComboBox__input"
style="font-size: 14px; display: inline-block;"
Expand Down Expand Up @@ -140,7 +157,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
class="euiRadio__label"
for="current"
>
Continue from current state
Keep indices in their current state after the policy takes effect
</label>
</div>
<div
Expand All @@ -160,7 +177,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
class="euiRadio__label"
for="state"
>
Start from a chosen state after changing policies
Switch indices to the following state after the policy takes effect
</label>
</div>
</div>
Expand All @@ -171,20 +188,13 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
class="euiFormRow"
id="some_make_id-row"
>
<label
class="euiFormLabel"
for="some_make_id"
>
Start state
</label>
<div
class="euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<select
aria-describedby="some_make_id-help"
aria-label="Start state for new policy"
class="euiSelect"
disabled=""
Expand Down Expand Up @@ -221,12 +231,6 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
</div>
</div>
</div>
<div
class="euiFormHelpText euiFormRow__text"
id="some_make_id-help"
>
Select a state to start from after changing policies
</div>
</div>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol

onChangeManagedIndices = (selectedManagedIndices: { label: string; value?: ManagedIndexItem }[]): void => {
const managedIndicesError = selectedManagedIndices.length ? "" : "Required";
if (!selectedManagedIndices.length) {
this.onChangeStateFilters([]);
}
this.setState({ selectedManagedIndices, managedIndicesError });
};

Expand Down
Loading

0 comments on commit cdb70d7

Please sign in to comment.