highlight sample data section for new users (#20953)

* highlight sample data section for new users * do not set state on unmounted component * do not block render of home component * add jest tests for isNewKibanaInstance * remove unneeded async from home jest test
elastic · Jul 24, 2018 · 6c61aba · 6c61aba
1 parent f471aaa
commit 6c61aba
Show file tree

Hide file tree

Showing 11 changed files with 818 additions and 101 deletions.
diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
@@ -186,8 +186,229 @@ exports[`apmUiEnabled 1`] = `
     wrap={false}
   >
     <EuiFlexItem
+      className="addDataFooterItem"
       component="div"
-      grow={false}
+      grow={true}
+    >
+      <EuiText
+        grow={true}
+      >
+        <strong
+          style={
+            Object {
+              "height": 38,
+            }
+          }
+        >
+          Sample Data
+        </strong>
+        <EuiLink
+          color="primary"
+          href="#/home/tutorial_directory/sampleData"
+          style={
+            Object {
+              "marginLeft": 8,
+            }
+          }
+          type="button"
+        >
+          Load a data set and a Kibana dashboard
+        </EuiLink>
+      </EuiText>
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="addDataFooterItem"
+      component="div"
+      grow={true}
+    >
+      <EuiText
+        grow={true}
+      >
+        <strong
+          style={
+            Object {
+              "height": 38,
+            }
+          }
+        >
+          Your Data
+        </strong>
+        <EuiLink
+          color="primary"
+          href="#/management/kibana/index"
+          style={
+            Object {
+              "marginLeft": 8,
+            }
+          }
+          type="button"
+        >
+          Connect to your Elasticsearch index
+        </EuiLink>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</EuiPanel>
+`;
+
+exports[`isNewKibanaInstance 1`] = `
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="l"
+>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={true}
+    >
+      <EuiTitle
+        size="m"
+      >
+        <h3>
+          Add Data to Kibana
+        </h3>
+      </EuiTitle>
+      <EuiText
+        grow={true}
+      >
+        <p>
+          Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems.
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="l"
+  />
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="none"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={true}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={true}
+    >
+      <EuiCard
+        className="addDataCard"
+        description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
+        footer={
+          <EuiButton
+            className="addDataButton"
+            color="primary"
+            fill={false}
+            href="#/home/tutorial_directory/logging"
+            iconSide="left"
+            type="button"
+          >
+            Add log data
+          </EuiButton>
+        }
+        icon={
+          <EuiIcon
+            className="addDataIcon"
+            size="m"
+            type="loggingApp"
+          />
+        }
+        layout="vertical"
+        textAlign="center"
+        title="Logging"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
+    >
+      <EuiCard
+        className="addDataCard"
+        description="Collect metrics from the operating system and services running on your servers."
+        footer={
+          <EuiButton
+            className="addDataButton"
+            color="primary"
+            fill={false}
+            href="#/home/tutorial_directory/metrics"
+            iconSide="left"
+            type="button"
+          >
+            Add metric data
+          </EuiButton>
+        }
+        icon={
+          <EuiIcon
+            className="addDataIcon"
+            size="m"
+            type="monitoringApp"
+          />
+        }
+        layout="vertical"
+        textAlign="center"
+        title="Metrics"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
+    >
+      <EuiCard
+        className="addDataCard"
+        description="Centralize security events for interactive investigation in ready-to-go visualizations."
+        footer={
+          <EuiButton
+            className="addDataButton"
+            color="primary"
+            fill={false}
+            href="#/home/tutorial_directory/security"
+            iconSide="left"
+            type="button"
+          >
+            Add security events
+          </EuiButton>
+        }
+        icon={
+          <EuiIcon
+            className="addDataIcon"
+            size="m"
+            type="securityApp"
+          />
+        }
+        layout="vertical"
+        textAlign="center"
+        title="Security Analytics"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    margin="l"
+    size="full"
+  />
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="spaceAround"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      className="addDataFooterItem addDataFooterItem_highlight"
+      component="div"
+      grow={true}
     >
       <EuiText
         grow={true}
@@ -199,7 +420,7 @@ exports[`apmUiEnabled 1`] = `
             }
           }
         >
-          Need data?
+          Sample Data
         </strong>
         <EuiLink
           color="primary"
@@ -211,13 +432,14 @@ exports[`apmUiEnabled 1`] = `
           }
           type="button"
         >
-          Load sample data, visualizations, and dashboards
+          Load a data set and a Kibana dashboard
         </EuiLink>
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
+      className="addDataFooterItem addDataFooterItem_highlight"
       component="div"
-      grow={false}
+      grow={true}
     >
       <EuiText
         grow={true}
@@ -229,7 +451,7 @@ exports[`apmUiEnabled 1`] = `
             }
           }
         >
-          Have data?
+          Your Data
         </strong>
         <EuiLink
           color="primary"
@@ -404,8 +626,9 @@ exports[`render 1`] = `
     wrap={false}
   >
     <EuiFlexItem
+      className="addDataFooterItem"
       component="div"
-      grow={false}
+      grow={true}
     >
       <EuiText
         grow={true}
@@ -417,7 +640,7 @@ exports[`render 1`] = `
             }
           }
         >
-          Need data?
+          Sample Data
         </strong>
         <EuiLink
           color="primary"
@@ -429,13 +652,14 @@ exports[`render 1`] = `
           }
           type="button"
         >
-          Load sample data, visualizations, and dashboards
+          Load a data set and a Kibana dashboard
         </EuiLink>
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
+      className="addDataFooterItem"
       component="div"
-      grow={false}
+      grow={true}
     >
       <EuiText
         grow={true}
@@ -447,7 +671,7 @@ exports[`render 1`] = `
             }
           }
         >
-          Have data?
+          Your Data
         </strong>
         <EuiLink
           color="primary"