Fit and Finish changes for Indexes and Transform pages (#1154) (#1160)

* changes for indexes, transform * Worked on review * Couple of changes for old UI * Minor changes to UI * Resolved P0 items identified in demo * Updated old UI Title sizes --------- (cherry picked from commit 8a0ae28) 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>
opensearch-project · Sep 2, 2024 · dfd0cc2 · dfd0cc2
1 parent 6d7ddaa
commit dfd0cc2
Show file tree

Hide file tree

Showing 58 changed files with 2,318 additions and 1,874 deletions.
diff --git a/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap b/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<IndexDetail /> spec render the component 1`] = `
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
     <div
-      class="euiSpacer euiSpacer--l"
+      class="euiSpacer euiSpacer--s"
     />
     <div
       class="euiSpacer euiSpacer--l"

diff --git a/public/containers/IndexDetail/index.tsx b/public/containers/IndexDetail/index.tsx
@@ -47,25 +47,41 @@ export default function IndexDetail(props: IIndexDetailProps) {
         <h2>Source index details</h2>
       </EuiText>
       <EuiHorizontalRule margin="xs" />
-      <EuiSpacer />
+      <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"],
             },
           ]}

diff --git a/public/pages/CreateIndex/containers/IndexForm/index.tsx b/public/pages/CreateIndex/containers/IndexForm/index.tsx
@@ -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>

diff --git a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
@@ -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;
@@ -24,10 +33,18 @@ const ConfigureTransform = ({
   onChangeDescription,
   description,
 }: ConfigureTransformProps) => (
-  <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Job name and description" titleSize="m">
+  <EuiPanel>
+    <EuiText size="s">
+      <h2>Job name and description</h2>
+    </EuiText>
+    <EuiHorizontalRule margin="xs" />
     <div>
       <EuiCompressedFormRow
-        label="Name"
+        label={
+          <EuiText size="s">
+            <h3>Name</h3>
+          </EuiText>
+        }
         helpText="Specify a unique, descriptive name."
         isInvalid={!!transformIdError}
         error={transformIdError}
@@ -43,13 +60,15 @@ const ConfigureTransform = ({
       <EuiSpacer />
       <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem grow={false}>
-          <EuiText size="xs">
-            <h4>Description</h4>
+          <EuiText size="s">
+            <h3>Description</h3>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiText size="xs" color="subdued">
-            <i> – optional</i>
+          <EuiText size="s" color="subdued">
+            <h3>
+              <i> – optional</i>
+            </h3>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -58,6 +77,6 @@ const ConfigureTransform = ({
         <EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
       </EuiCompressedFormRow>
     </div>
-  </ContentPanel>
+  </EuiPanel>
 );
 export default ConfigureTransform;
diff --git a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
@@ -36,7 +36,7 @@ const setOfSteps = (step: number) => {
 
 const CreateTransformSteps = ({ step }: CreateTransformStepsProps) => (
   <div style={{ paddingLeft: "10px" }}>
-    <EuiSteps steps={setOfSteps(step)} headingElement="h6" />
+    <EuiSteps steps={setOfSteps(step)} headingElement="h6" titleSize="xs" />
   </div>
 );
 

diff --git a/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx b/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
@@ -168,8 +168,8 @@ export default function DefineTransforms({
   if (isReadOnly)
     return (
       <div>
-        <EuiText>
-          <h5>Original fields with sample data</h5>
+        <EuiText size="s">
+          <h3>Original fields with sample data</h3>
         </EuiText>
         <EuiSpacer size="s" />
         <EuiDataGrid
@@ -195,8 +195,8 @@ export default function DefineTransforms({
           gridStyle={{ rowHover: "none" }}
         />
         <EuiSpacer size="l" />
-        <EuiText>
-          <h5>Transformed fields preview based on sample data</h5>
+        <EuiText size="s">
+          <h3>Transformed fields preview based on sample data</h3>
         </EuiText>
         <EuiSpacer size="s" />
         <PreviewTransform
@@ -210,9 +210,18 @@ export default function DefineTransforms({
     );
 
   return (
-    <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Select fields to transform" titleSize="m">
-      <EuiText>
-        <h5>Original fields with sample data</h5>
+    <ContentPanel
+      panelStyles={{ padding: "16px 16px" }}
+      bodyStyles={{ padding: "10px" }}
+      title={
+        <EuiText size="s">
+          <h2>Select fields to transform</h2>
+        </EuiText>
+      }
+      titleSize="m"
+    >
+      <EuiText size="s">
+        <h3>Original fields with sample data</h3>
       </EuiText>
       <EuiSpacer size="s" />
       {/*TODO: Substitute "source index", and "filtered by" fields with actual values*/}
@@ -242,8 +251,8 @@ export default function DefineTransforms({
         }}
       />
       <EuiSpacer size="l" />
-      <EuiText>
-        <h5>Transformed fields preview based on sample data</h5>
+      <EuiText size="s">
+        <h3>Transformed fields preview based on sample data</h3>
       </EuiText>
       <EuiSpacer size="s" />
       <EuiText color="subdued" size="xs">

diff --git a/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx b/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
@@ -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";
 
@@ -27,28 +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: "20px 20px" }}
-        bodyStyles={{ padding: "10px" }}
-        title="Set up indices"
-        titleSize="m"
-      >
+                  ]}
+                />
+              )}
+            </ModalConsumer>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiHorizontalRule margin="xs" />
         <div>
           <EuiFlexGrid columns={3}>
             <EuiFlexItem>
@@ -84,7 +87,7 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
           </EuiFlexGrid>
           <EuiSpacer size="s" />
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
diff --git a/public/pages/CreateTransform/components/PreviewEmptyPrompt/PreviewEmptyPrompt.tsx b/public/pages/CreateTransform/components/PreviewEmptyPrompt/PreviewEmptyPrompt.tsx
@@ -24,16 +24,18 @@ export default function PreviewEmptyPrompt({ isReadOnly }: PreviewEmptyPromptPro
       ) : (
         <EuiEmptyPrompt
           title={
-            <EuiText size="m">
+            <EuiText size="s">
               <h4> No fields selected </h4>
             </EuiText>
           }
           body={
-            <p>
-              {" "}
-              From the table above, select a field you want to transform by clicking <EuiIcon type="plusInCircleFilled" /> next to the field
-              name.
-            </p>
+            <EuiText size="s">
+              <p>
+                {" "}
+                From the table above, select a field you want to transform by clicking <EuiIcon type="plusInCircleFilled" /> next to the
+                field name.
+              </p>
+            </EuiText>
           }
         />
       )}

diff --git a/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx b/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
@@ -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";
@@ -82,32 +82,42 @@ 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: "20px 20px" }}
-        bodyStyles={{ padding: "10px" }}
-        title="Define transforms"
-        titleSize="m"
-      >
+                  ]}
+                />
+              )}
+            </ModalConsumer>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiHorizontalRule margin="xs" />
         <div>
           <EuiFlexGrid columns={4}>{aggListItems()}</EuiFlexGrid>
           <EuiSpacer />
-          <EuiAccordion id="" buttonContent="Sample source index and transform result">
+          <EuiAccordion
+            id=""
+            buttonContent={
+              <EuiText size="s">
+                <h3>Sample source index and transform result</h3>
+              </EuiText>
+            }
+          >
             <div style={{ padding: "10px" }}>
               <EuiSpacer size="m" />
               <DefineTransforms
@@ -125,7 +135,7 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
             </div>
           </EuiAccordion>
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }