Feature: data streams (#605)

* feat: temp commit Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * refractor: move index mapping to common components Signed-off-by: suzhou <suzhou@amazon.com> * feat: enable create data stream Signed-off-by: suzhou <suzhou@amazon.com> * feat: enable data stream detail Signed-off-by: suzhou <suzhou@amazon.com> * feat: some typo fix Signed-off-by: suzhou <suzhou@amazon.com> * feat: enable data stream management Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: enable unit test Signed-off-by: suzhou <suzhou@amazon.com> * feat: add data streams cypress test Signed-off-by: suzhou <suzhou@amazon.com> * feat: update version Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: make cypress run Signed-off-by: suzhou <suzhou@amazon.com> * feat: update snapshot Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: optimize search interaction Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: add explanation Signed-off-by: suzhou <suzhou@amazon.com> * feat: add time field Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: copy the properties Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> * feat: make unit test run Signed-off-by: suzhou <suzhou@amazon.com> * feat: make unit test run Signed-off-by: suzhou <suzhou@amazon.com> * feat: update Signed-off-by: suzhou <suzhou@amazon.com> --------- Signed-off-by: suzhou <suzhou@amazon.com> (cherry picked from commit 4f1394f)
opensearch-project · Feb 22, 2023 · 666073c · 666073c
1 parent 497d5f1
commit 666073c
Show file tree

Hide file tree

Showing 25 changed files with 379 additions and 175 deletions.
diff --git a/cypress/integration/data_streams.js b/cypress/integration/data_streams.js
@@ -41,7 +41,8 @@ describe("Data stream", () => {
   describe("can create a data stream", () => {
     it("successfully", () => {
       cy.get('[data-test-subj="Create data streamButton"]').click();
-      cy.get('[data-test-subj="form-row-name"]').type(`ds-{enter}`);
+      cy.get('[data-test-subj="form-row-name"] [data-test-subj="comboBoxSearchInput"]').type(`ds-{enter}`);
+      cy.get("body").click();
       cy.get('[data-test-subj="CreateDataStreamCreateButton"]').click();
       cy.contains("ds- has been successfully created.");
     });

diff --git a/public/components/DescriptionListHoz/DescriptionListHoz.tsx b/public/components/DescriptionListHoz/DescriptionListHoz.tsx
@@ -1,4 +1,4 @@
-import { EuiDescriptionList, EuiDescriptionListProps, EuiFlexGrid, EuiFlexGridProps, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiDescriptionList, EuiDescriptionListProps, EuiFlexGrid, EuiFlexGridProps, EuiFlexItem } from "@elastic/eui";
 import React from "react";
 
 const DisplayItem = (

diff --git a/public/components/FormGenerator/built_in_components/index.tsx b/public/components/FormGenerator/built_in_components/index.tsx
@@ -6,7 +6,7 @@ import EuiComboBox from "../../ComboBoxWithoutWarning";
 export type ComponentMapEnum = "Input" | "Number" | "Switch" | "Select" | "Text" | "ComboBoxSingle" | "CheckBox";
 
 export interface IFieldComponentProps extends IEuiToolTipWrapperProps {
-  onChange: (val: IFieldComponentProps["value"]) => void;
+  onChange: (val: IFieldComponentProps["value"], ...args: any) => void;
   value?: any;
   [key: string]: any;
 }
@@ -78,7 +78,7 @@ const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponent
           ref={ref}
           onChange={(selectedOptions) => {
             if (selectedOptions && selectedOptions[0]) {
-              onChange(selectedOptions[0].label);
+              onChange(selectedOptions[0].label, selectedOptions[0]);
             } else {
               onChange(undefined);
             }

diff --git a/public/pages/CreateDataStream/components/IndexSettings/IndexSettings.tsx b/public/pages/CreateDataStream/components/IndexSettings/IndexSettings.tsx
@@ -45,24 +45,6 @@ export default function IndexSettings(props: SubDetailProps) {
             <AllBuiltInComponents.Text
               {...field.registerField({
                 name: ["template", "settings", "index.number_of_shards"],
-                rules: [
-                  {
-                    min: 1,
-                    message: "Number of shards cannot be smaller than 1.",
-                  },
-                  {
-                    validator(rule, value) {
-                      if (!value) {
-                        return Promise.reject("Number of primary shards is required.");
-                      }
-                      if (Number(value) !== parseInt(value)) {
-                        return Promise.reject("Number of primary shards must be an integer.");
-                      }
-
-                      return Promise.resolve("");
-                    },
-                  },
-                ],
               })}
             />
           </CustomFormRow>
@@ -76,24 +58,6 @@ export default function IndexSettings(props: SubDetailProps) {
             <AllBuiltInComponents.Text
               {...field.registerField({
                 name: ["template", "settings", "index.number_of_replicas"],
-                rules: [
-                  {
-                    min: 0,
-                    message: "Number of replicas cannot be smaller than 0.",
-                  },
-                  {
-                    validator(rule, value) {
-                      if (!value) {
-                        return Promise.reject("Number of replicas is required.");
-                      }
-                      if (Number(value) !== parseInt(value)) {
-                        return Promise.reject("Number of replicas must be an integer");
-                      }
-
-                      return Promise.resolve("");
-                    },
-                  },
-                ],
               })}
             />
           </CustomFormRow>

diff --git a/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx b/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx
@@ -1,11 +1,12 @@
 import React, { useContext, useEffect, useState } from "react";
-import { EuiBasicTable, EuiHealth, EuiLink, EuiSpacer } from "@elastic/eui";
+import { EuiBasicTable, EuiHealth, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
 import { ServicesContext } from "../../../../services";
 import { BrowserServices } from "../../../../models/interfaces";
 import { ManagedCatIndex } from "../../../../../server/models/interfaces";
 import { DataStreamInEdit, SubDetailProps } from "../../interface";
 import { ROUTES } from "../../../../utils/constants";
 import { ContentPanel } from "../../../../components/ContentPanel";
+import CustomFormRow from "../../../../components/CustomFormRow";
 
 const renderNumber = (value: string) => {
   return value || "-";
@@ -48,7 +49,21 @@ export default function BackingIndices(props: SubDetailProps) {
   }, [values.name]);
   const writingIndex = (values.indices || [])[(values.indices?.length || 0) - 1]?.index_name;
   return (
-    <ContentPanel title="Template details" titleSize="s">
+    <ContentPanel
+      title={
+        <>
+          <EuiTitle size="s">
+            <span>Backing indexes</span>
+          </EuiTitle>
+          <CustomFormRow
+            fullWidth
+            helpText="A data stream is composed of backing indexes. Search requests are routed to all backing indexes, while indexing requests are routed to the write backing index."
+          >
+            <></>
+          </CustomFormRow>
+        </>
+      }
+    >
       <EuiSpacer size="s" />
       <EuiBasicTable
         pagination={undefined}
@@ -87,7 +102,6 @@ export default function BackingIndices(props: SubDetailProps) {
             sortable: false,
             truncateText: true,
             textOnly: true,
-            width: "140px",
             render: renderNumber,
           },
           {
@@ -100,6 +114,14 @@ export default function BackingIndices(props: SubDetailProps) {
               return <span className="camel-first-letter">{item.extraStatus || status}</span>;
             },
           },
+          {
+            field: "rep",
+            name: "Writing index",
+            textOnly: true,
+            render: (value: string, record: ManagedCatIndex) => {
+              return record.index === writingIndex ? "Yes" : "No";
+            },
+          },
           {
             field: "store.size",
             name: "Total size",
@@ -152,14 +174,6 @@ export default function BackingIndices(props: SubDetailProps) {
             textOnly: true,
             dataType: "number",
           },
-          {
-            field: "rep",
-            name: "Writing index",
-            textOnly: true,
-            render: (value: string, record: ManagedCatIndex) => {
-              return record.index === writingIndex ? "Yes" : "No";
-            },
-          },
         ]}
       />
     </ContentPanel>

diff --git a/...CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap b/...CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
               style="padding-top: 0px; padding-bottom: 4px;"
             >
               <div>
-                A data stream is internally composed of multiple backing indices. Search requests are routed to all the backing indices, while indexing requests are routed to the latest write index.
+                Data streams simplify the management of time-series data. Data streams are composed of multiple backing indices. Search requests are routed to all backing indexes, while indexing requests are routed to the latest write index.
                  
                 <button
                   class="euiLink euiLink--primary"
@@ -79,7 +79,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--fullWidth"
           data-test-subj="form-row-name"
           id="some_html_id-row"
         >
@@ -97,6 +97,27 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
           <div
             class="euiFormRow__fieldWrapper"
           >
+            <div
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
+            >
+              Enter a data stream name. It must match an index pattern from a data stream template.
+               
+              <a
+                class="euiLink euiLink--primary"
+                href="#/templates"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Manage templates
+                EuiIconMock
+                <span
+                  class="euiScreenReaderOnly"
+                >
+                  (opens in a new tab or window)
+                </span>
+              </a>
+            </div>
             <span
               class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
@@ -117,6 +138,11 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
                       data-test-subj="comboBoxInput"
                       tabindex="-1"
                     >
+                      <p
+                        class="euiComboBoxPlaceholder"
+                      >
+                        Specify data stream name
+                      </p>
                       <div
                         class="euiComboBox__input"
                         style="font-size: 14px; display: inline-block;"
@@ -149,12 +175,6 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
                 </div>
               </div>
             </span>
-            <div
-              class="euiFormHelpText euiFormRow__text"
-              id="some_html_id-help-0"
-            >
-              Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, , |, ?, #, &gt; are not allowed.
-            </div>
           </div>
         </div>
         <div

diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
@@ -5,7 +5,7 @@
 
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react";
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
-import { TemplateItem, TemplateItemRemote } from "../../../../../models/interfaces";
+import { TemplateItemRemote } from "../../../../../models/interfaces";
 import useField, { FieldInstance } from "../../../../lib/field";
 import CustomFormRow from "../../../../components/CustomFormRow";
 import { ServicesContext } from "../../../../services";
@@ -49,7 +49,7 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
   >([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const field = useField({
-    values: {} as Partial<TemplateItem>,
+    values: {} as Partial<DataStreamInEdit>,
   });
   const destroyRef = useRef<boolean>(false);
   const onSubmit = async () => {
@@ -97,7 +97,7 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
       destroyRef.current = true;
     };
   }, []);
-  const values: DataStreamInEdit & { matchedTemplate?: string } = field.getValues();
+  const values: DataStreamInEdit = field.getValues();
   const subCompontentProps = {
     ...props,
     isEdit,
@@ -115,8 +115,8 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
               label=""
               helpText={
                 <div>
-                  A data stream is internally composed of multiple backing indices. Search requests are routed to all the backing indices,
-                  while indexing requests are routed to the latest write index.{" "}
+                  Data streams simplify the management of time-series data. Data streams are composed of multiple backing indices. Search
+                  requests are routed to all backing indexes, while indexing requests are routed to the latest write index.{" "}
                   <EuiLink target="_blank" external href={coreServices.docLinks.links.opensearch.dataStreams}>
                     Learn more.
                   </EuiLink>

diff --git a/...CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap b/...CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
             style="padding-top: 0px; padding-bottom: 4px;"
           >
             <div>
-              A data stream is internally composed of multiple backing indices. Search requests are routed to all the backing indices, while indexing requests are routed to the latest write index.
+              Data streams simplify the management of time-series data. Data streams are composed of multiple backing indices. Search requests are routed to all backing indexes, while indexing requests are routed to the latest write index.
                
               <button
                 class="euiLink euiLink--primary"
@@ -76,7 +76,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--fullWidth"
         data-test-subj="form-row-name"
         id="some_html_id-row"
       >
@@ -94,6 +94,27 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
         <div
           class="euiFormRow__fieldWrapper"
         >
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            style="padding-top: 0px; padding-bottom: 4px;"
+          >
+            Enter a data stream name. It must match an index pattern from a data stream template.
+             
+            <a
+              class="euiLink euiLink--primary"
+              href="#/templates"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Manage templates
+              EuiIconMock
+              <span
+                class="euiScreenReaderOnly"
+              >
+                (opens in a new tab or window)
+              </span>
+            </a>
+          </div>
           <span
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
@@ -114,6 +135,11 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
                     data-test-subj="comboBoxInput"
                     tabindex="-1"
                   >
+                    <p
+                      class="euiComboBoxPlaceholder"
+                    >
+                      Specify data stream name
+                    </p>
                     <div
                       class="euiComboBox__input"
                       style="font-size: 14px; display: inline-block;"
@@ -146,12 +172,6 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
               </div>
             </div>
           </span>
-          <div
-            class="euiFormHelpText euiFormRow__text"
-            id="some_html_id-help-0"
-          >
-            Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, , |, ?, #, &gt; are not allowed.
-          </div>
         </div>
       </div>
       <div