changes for indexes, transform

Signed-off-by: Kshitij Tandon <[email protected]>
tandonks · Aug 28, 2024 · 020e686 · 020e686
1 parent cdf39f2
commit 020e686
Show file tree

Hide file tree

Showing 40 changed files with 1,782 additions and 1,376 deletions.
diff --git a/public/pages/CreateIndexTemplate/containers/PreviewTemplate/PreviewTemplate.tsx b/public/pages/CreateIndexTemplate/containers/PreviewTemplate/PreviewTemplate.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { forwardRef, Ref } from "react";
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from "@elastic/eui";
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import useField, { FieldInstance } from "../../../../lib/field";
 import { OverviewTemplate } from "../../components/DefineTemplate";
@@ -43,7 +43,9 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
     <>
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem>
-          <EuiTitle size="s">{<div>Template settings</div>}</EuiTitle>
+          <EuiText size="s">
+            <h3>Template settings</h3>
+          </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />

diff --git a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
@@ -24,10 +24,23 @@ const ConfigureTransform = ({
   onChangeDescription,
   description,
 }: ConfigureTransformProps) => (
-  <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Job name and description" titleSize="m">
+  <ContentPanel
+    panelStyles={{ padding: "16px 16px" }}
+    bodyStyles={{ padding: "10px" }}
+    title={
+      <EuiText size="s">
+        <h2>Job name and description</h2>
+      </EuiText>
+    }
+    titleSize="m"
+  >
     <div>
       <EuiCompressedFormRow
-        label="Name"
+        label={
+          <EuiText size="s">
+            <h3>Name</h3>
+          </EuiText>
+        }
         helpText="Specify a unique, descriptive name."
         isInvalid={!!transformIdError}
         error={transformIdError}
@@ -43,13 +56,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>

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
@@ -44,9 +44,13 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
             )}
           </ModalConsumer>
         }
-        panelStyles={{ padding: "20px 20px" }}
+        panelStyles={{ padding: "16px 16px" }}
         bodyStyles={{ padding: "10px" }}
-        title="Set up indices"
+        title={
+          <EuiText size="s">
+            <h2>Set up indices</h2>
+          </EuiText>
+        }
         titleSize="m"
       >
         <div>

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
@@ -99,15 +99,26 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
             )}
           </ModalConsumer>
         }
-        panelStyles={{ padding: "20px 20px" }}
+        panelStyles={{ padding: "16px 16px" }}
         bodyStyles={{ padding: "10px" }}
-        title="Define transforms"
+        title={
+          <EuiText size="s">
+            <h2>Define transforms</h2>
+          </EuiText>
+        }
         titleSize="m"
       >
         <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

diff --git a/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx b/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx
@@ -48,9 +48,13 @@ export default class ReviewSchedule extends Component<ReviewScheduleProps> {
             )}
           </ModalConsumer>
         }
-        panelStyles={{ padding: "20px 20px" }}
+        panelStyles={{ padding: "16px 16px" }}
         bodyStyles={{ padding: "10px" }}
-        title="Specify schedule"
+        title={
+          <EuiText size="s">
+            <h2>Specify schedule</h2>
+          </EuiText>
+        }
         titleSize="m"
       >
         <div>

diff --git a/public/pages/CreateTransform/components/Schedule/Schedule.tsx b/public/pages/CreateTransform/components/Schedule/Schedule.tsx
@@ -12,6 +12,8 @@ import {
   EuiCompressedFieldNumber,
   EuiAccordion,
   EuiHorizontalRule,
+  EuiText,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { selectInterval } from "../../../Transforms/utils/metadataHelper";
@@ -46,7 +48,13 @@ const radios = [
 
 const isContinuous = (continuousJob: string, onChangeContinuousJob: (optionId: string) => void) => (
   <React.Fragment>
-    <EuiCompressedFormRow label="Continuous">
+    <EuiCompressedFormRow
+      label={
+        <EuiText size="s">
+          <h4>Continuous</h4>
+        </EuiText>
+      }
+    >
       <EuiCompressedRadioGroup
         options={radios}
         idSelected={continuousJob}
@@ -79,7 +87,16 @@ export default class Schedule extends Component<ScheduleProps> {
       onChangePage,
     } = this.props;
     return (
-      <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Schedule" titleSize="m">
+      <ContentPanel
+        panelStyles={{ padding: "16px 16px" }}
+        bodyStyles={{ padding: "10px" }}
+        title={
+          <EuiText size="s">
+            <h2>Schedule</h2>
+          </EuiText>
+        }
+        titleSize="m"
+      >
         <div>
           {!isEdit && (
             <EuiCompressedCheckbox

diff --git a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
@@ -163,7 +163,16 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
 
     return (
       <div>
-        <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Indices" titleSize="m">
+        <ContentPanel
+          panelStyles={{ padding: "16px 16px" }}
+          bodyStyles={{ padding: "10px" }}
+          title={
+            <EuiText size="s">
+              <h2>Indices</h2>
+            </EuiText>
+          }
+          titleSize="m"
+        >
           <div>
             {hasAggregation && (
               <Fragment>
@@ -173,7 +182,11 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
               </Fragment>
             )}
             <EuiCompressedFormRow
-              label="Source index"
+              label={
+                <EuiText size="s">
+                  <h3>Source index</h3>
+                </EuiText>
+              }
               error={sourceIndexError}
               isInvalid={sourceIndexError != ""}
               helpText="The index where this transform job is performed on. Type in * as wildcard for index pattern. Indices cannot be changed once the job is created. Please ensure that you select the right source index."
@@ -193,13 +206,15 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
             <EuiSpacer size="s" />
             <EuiFlexGroup gutterSize="xs">
               <EuiFlexItem grow={false}>
-                <EuiText size="xs">
-                  <h4>Source index filter</h4>
+                <EuiText size="s">
+                  <h3>Source index filter</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>
@@ -253,7 +268,11 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
             <EuiSpacer size="s" />
             <EuiHorizontalRule margin="xs" />
             <EuiCompressedFormRow
-              label="Target index"
+              label={
+                <EuiText size="s">
+                  <h3>Target index</h3>
+                </EuiText>
+              }
               error={targetIndexError}
               isInvalid={targetIndexError != ""}
               helpText="The index stores transform results. You can look up an existing index to reuse or type to create a new index."

diff --git a/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx b/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx
@@ -395,6 +395,7 @@ export default function TransformOptions({
             anchorPosition="rightCenter"
           >
             <EuiContextMenu
+              size="s"
               initialPanelId={0}
               panels={isNumeric ? numberPanels : isText ? textPanels : isDate ? datePanels : defaultPanels}
             />

diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -677,7 +677,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           submitError={submitError}
           useUpdatedUX={useUpdatedUX}
         />
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
+        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
           <EuiFlexItem grow={false}>
             <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createTransformCancelButton">
               Cancel