Update get started content (elastic#205)

* Update get statrted info

* Updates following review

docs/en/observability/add-observability-data.asciidoc

@@ -1,43 +1,41 @@
 [[add-observability-data]]
 = Send data to {es}
 
+To use Elastic Observability, you need {es} for storing and searching your
+data, and {kib} for visualizing and managing it. 
+
+[float]
+[[spin-up-stack]]
+== Spin up the Elastic Stack
+
+You can use our
+https://www.elastic.co/cloud/elasticsearch-service[hosted {ess}]
+on {ecloud} (recommended), or self-manage the {stack} on your own hardware.
+
+include::tab-widgets/deploy-ess-stack-widget.asciidoc[]
+
+[float]
+[[send-data-deployment]]
+== Get data into your deployment
+
 Now that you have provisioned your first deployment of your {es} cluster, 
-you’re ready to ingest your logs, metrics, uptime, and APM data.
+you’re ready to ingest your logs, metrics, uptime data, and APM data.
 
 To make full use of Elastic Observability, we recommend that you install the observability 
 products in the following order:
 
-1. Install and configure {filebeat} on your servers to collect log events.
-+
-{filebeat} allows you ship log data from sources that come
-in the form of files. It monitors the log files or locations that you specify,
-collects log events, and forwards them to {es}. To ease the collection and parsing of
-log formats for common applications such as Apache, MySQL, and Kafka, a number of
-{filebeat-ref}/filebeat-modules.html[modules] are available.
+1. Install and configure {filebeat} on your servers to collect log events. For details, see
+<<ingest-logs,Ingest logs>>.
 
 2. Install and configure {metricbeat} on your servers to collect and preprocess system 
 and service metrics, such as information about running processes, as well as CPU, memory,
-disk, and network utilization numbers.
-+
-{metricbeat} comes with predefined assets for parsing, indexing, and
-visualizing your data. To load these assets, {metricbeat} uses
-{metricbeat-ref}/metricbeat-modules.html[modules], before sending them to {es}. Each
-integration defines the basic logic for collecting data from specific services, such as
-Redis or MySQL. A module consists of metricsets that fetch and structure the data.
-+
-To learn more, see {metricbeat-ref}/how-metricbeat-works.html[How {metricbeat} works].
+disk, and network utilization numbers. For details, see <<ingest-metrics,Ingest metrics>>.
 
 3. Install and configure {heartbeat} on your servers to periodically check the status of your 
-services.
-+
-{heartbeat} uses probing to monitor the availability of services and helps 
-verify that you’re meeting your service level agreements for service uptime.
-You typically install {heartbeat} as part of a monitoring service that runs on a separate machine 
-and possibly even outside of the network where the services that you want to monitor are running.
+services. For details, see <<ingest-uptime,Ingest uptime data>>.
 
 4. If you have added an APM Server as part of an {ess-trial}[{ess}] deployment, configure your
-APM agents to send data to your {es} cluster.
-+
-Elastic APM monitors software services and applications in real time, collects 
-unhandled errors and exceptions, and automatically picks up basic host-level 
-metrics and agent specific metrics.
+APM agents to send data to your {es} cluster. For details, see <<instrument-apps,Instrument applications>>.
+
+// Add Javascript and CSS for tabbed panels
+include::tab-widgets/code.asciidoc[]

docs/en/observability/index.asciidoc

@@ -23,9 +23,6 @@ include::observability-introduction.asciidoc[leveloffset=+1]
 // What's new
 include::whats-new.asciidoc[leveloffset=+1]
 
-// Get started
-include::install-observability.asciidoc[leveloffset=+1]
-
 // Send data to Elasticsearch
 include::add-observability-data.asciidoc[leveloffset=+1]
 

docs/en/observability/ingest-logs.asciidoc

@@ -15,7 +15,7 @@
 [NOTE]
 =====
 If you haven't already, you need to install {es} for storing and searching your data, and {kib} for visualizing and
-managing it. For more information, see <<install-observability,Get started>>.
+managing it. For more information, see <<add-observability-data,Send data to {es}>>.
 =====
 
 Install and configure {filebeat} on your servers to collect log events. {filebeat} allows you ship log data from sources that come
@@ -202,4 +202,3 @@ include::{beats-repo-dir}/tab-widgets/code.asciidoc[]
 :!modulename:
 :!has_modules_command:
 :!release-state:
-

docs/en/observability/ingest-metrics.asciidoc

@@ -14,7 +14,7 @@
 [NOTE]
 =====
 If you haven't already, you need to install {es} for storing and searching your data, and {kib} for visualizing and
-managing it. For more information, see <<install-observability,Get started>>.
+managing it. For more information, see <<add-observability-data,Send data to {es}>>.
 =====
 
 Install and configure {metricbeat} on your servers to collect and preprocess system 
@@ -25,7 +25,8 @@ disk, and network utilization numbers.
 visualizing your data. To load these assets, {metricbeat} uses
 {metricbeat-ref}/metricbeat-modules.html[modules], before sending them to {es}. Each
 integration defines the basic logic for collecting data from specific services, such as
-Redis or MySQL. A module consists of metricsets that fetch and structure the data.
+Redis or MySQL. A module consists of metricsets that fetch and structure the data. To learn more, see
+{metricbeat-ref}/how-metricbeat-works.html[How {metricbeat} works].
 
 [[install-metricbeat]]
 == Step 1: Install {metricbeat}

docs/en/observability/ingest-uptime.asciidoc

@@ -12,7 +12,7 @@
 [NOTE]
 =====
 If you haven't already, you need to install {es} for storing and searching your data, and {kib} for visualizing and
-managing it. For more information, see <<install-observability,Get started>>.
+managing it. For more information, see <<add-observability-data,Send data to {es}>>.
 =====
 
 Install and configure {heartbeat} on your servers to periodically check the status of your 

docs/en/observability/instrument-apps.asciidoc

@@ -8,7 +8,7 @@ errors and exceptions, and automatically picks up basic host-level metrics and a
 [NOTE]
 =====
 If you haven’t already, you need to install {es} for storing and searching your data, {kib} for
-visualizing and managing it, and APM Server. For more information, see <<install-observability,Get started>>.
+visualizing and managing it, and APM Server. For more information, see <<add-observability-data,Send data to {es}>>.
 =====
 
 [[install-apm-agents]]

docs/en/observability/monitor-java-app.asciidoc

@@ -22,7 +22,7 @@ Java agent].
 
 Create a deployment using our hosted {ess} on {ess-trial}[{ecloud}]. The deployment includes
 an {es} cluster for storing and searching your data, {kib} for visualizing and managing
-your data, and an APM server. For more information, see <<set-up-on-cloud,Set up on Cloud>>.
+your data, and an APM server. For more information, see <<spin-up-stack,Spin up the Elastic Stack>>.
 If you do not want to follow all those steps listed here and take a look at
 the final java code, check out the
 https://github.com/elastic/observability-contrib/tree/main/monitor-java-app[observability-contrib

docs/en/observability/tab-widgets/code.asciidoc

@@ -0,0 +1,166 @@
+// Defining styles and script here for simplicity.
+++++
+<style>
+.tabs {
+  width: 100%;
+}
+[role="tablist"] {
+  margin: 0 0 -0.1em;
+  overflow: visible;
+}
+[role="tab"] {
+  position: relative;
+  padding: 0.3em 0.5em 0.4em;
+  border: 1px solid hsl(219, 1%, 72%);
+  border-radius: 0.2em 0.2em 0 0;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  background: hsl(220, 20%, 94%);
+}
+[role="tab"]:hover::before,
+[role="tab"]:focus::before,
+[role="tab"][aria-selected="true"]::before {
+  position: absolute;
+  bottom: 100%;
+  right: -1px;
+  left: -1px;
+  border-radius: 0.2em 0.2em 0 0;
+  border-top: 3px solid hsl(219, 1%, 72%);
+  content: '';
+}
+[role="tab"][aria-selected="true"] {
+  border-radius: 0;
+  background: hsl(220, 43%, 99%);
+  outline: 0;
+}
+[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
+  border-top: 5px solid hsl(218, 96%, 48%);
+}
+[role="tab"][aria-selected="true"]::after {
+  position: absolute;
+  z-index: 3;
+  bottom: -1px;
+  right: 0;
+  left: 0;
+  height: 0.3em;
+  background: hsl(220, 43%, 99%);
+  box-shadow: none;
+  content: '';
+}
+[role="tab"]:hover,
+[role="tab"]:focus,
+[role="tab"]:active {
+  outline: 0;
+  border-radius: 0;
+  color: inherit;
+}
+[role="tab"]:hover::before,
+[role="tab"]:focus::before {
+  border-color: hsl(218, 96%, 48%);
+}
+[role="tabpanel"] {
+  position: relative;
+  z-index: 2;
+  padding: 1em;
+  border: 1px solid hsl(219, 1%, 72%);
+  border-radius: 0 0.2em 0.2em 0.2em;
+  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
+  background: hsl(220, 43%, 99%);
+  margin-bottom: 1em;
+}
+[role="tabpanel"] p {
+  margin: 0;
+}
+[role="tabpanel"] * + p {
+  margin-top: 1em;
+}
+</style>
+
+<script>
+window.addEventListener("DOMContentLoaded", () => {
+  const tabs = document.querySelectorAll('[role="tab"]');
+  const tabList = document.querySelector('[role="tablist"]');
+  // Add a click event handler to each tab
+  tabs.forEach(tab => {
+    tab.addEventListener("click", changeTabs);
+  });
+  // Enable arrow navigation between tabs in the tab list
+  let tabFocus = 0;
+  tabList.addEventListener("keydown", e => {
+    // Move right
+    if (e.keyCode === 39 || e.keyCode === 37) {
+      tabs[tabFocus].setAttribute("tabindex", -1);
+      if (e.keyCode === 39) {
+        tabFocus++;
+        // If we're at the end, go to the start
+        if (tabFocus >= tabs.length) {
+          tabFocus = 0;
+        }
+        // Move left
+      } else if (e.keyCode === 37) {
+        tabFocus--;
+        // If we're at the start, move to the end
+        if (tabFocus < 0) {
+          tabFocus = tabs.length - 1;
+        }
+      }
+      tabs[tabFocus].setAttribute("tabindex", 0);
+      tabs[tabFocus].focus();
+    }
+  });
+});
+
+function setActiveTab(target) {
+  const parent = target.parentNode;
+  const grandparent = parent.parentNode;
+  // console.log(grandparent);
+  // Remove all current selected tabs
+  parent
+    .querySelectorAll('[aria-selected="true"]')
+    .forEach(t => t.setAttribute("aria-selected", false));
+  // Set this tab as selected
+  target.setAttribute("aria-selected", true);
+  // Hide all tab panels
+  grandparent
+    .querySelectorAll('[role="tabpanel"]')
+    .forEach(p => p.setAttribute("hidden", true));
+  // Show the selected panel
+  grandparent.parentNode
+    .querySelector(`#${target.getAttribute("aria-controls")}`)
+    .removeAttribute("hidden");
+}
+
+function changeTabs(e) {
+  // get the containing list of the tab that was just clicked
+  const tabList = e.target.parentNode;
+
+  // get all of the sibling tabs
+  const buttons = Array.apply(null, tabList.querySelectorAll('button'));
+
+  // loop over the siblings to discover which index thje clicked one was
+  const { index } = buttons.reduce(({ found, index }, button) => {
+    if (!found && buttons[index] === e.target) {
+      return { found: true, index };
+    } else if (!found) {
+      return { found, index: index + 1 };
+    } else {
+      return { found, index };
+    }
+  }, { found: false, index: 0 });
+
+  // get the tab container
+  const container = tabList.parentNode;
+  // read the data-tab-group value from the container, e.g. "os"
+  const { tabGroup } = container.dataset;
+  // get a list of all the tab groups that match this value on the page
+  const groups = document.querySelectorAll('[data-tab-group=' + tabGroup + ']');
+
+  // for each of the found tab groups, find the tab button at the previously discovered index and select it for each group
+  groups.forEach((group) => {
+    const target = group.querySelectorAll('button')[index];
+    setActiveTab(target);
+  });
+}
+</script>
+++++

docs/en/observability/tab-widgets/deploy-ess-stack-widget.asciidoc

@@ -0,0 +1,40 @@
+++++
+<div class="tabs" data-tab-group="spin-up-stack">
+  <div role="tablist" aria-label="Spin up">
+    <button role="tab"
+            aria-selected="true"
+            aria-controls="cloud-tab-spinup"
+            id="cloud-spinup">
+      Elasticsearch Service
+    </button>
+    <button role="tab"
+            aria-selected="false"
+            aria-controls="self-managed-tab-spinup"
+            id="self-managed-spinup"
+            tabindex="-1">
+      Self-managed
+    </button>
+  </div>
+  <div tabindex="0"
+       role="tabpanel"
+       id="cloud-tab-spinup"
+       aria-labelledby="cloud-spinup">
+++++
+
+include::deploy-ess-stack.asciidoc[tag=ess]
+
+++++
+  </div>
+  <div tabindex="0"
+       role="tabpanel"
+       id="self-managed-tab-spinup"
+       aria-labelledby="self-managed-spinup"
+       hidden="">
+++++
+
+include::deploy-ess-stack.asciidoc[tag=self-managed]
+
+++++
+  </div>
+</div>
+++++

docs/en/observability/tab-widgets/deploy-ess-stack.asciidoc

@@ -0,0 +1,15 @@
+// tag::ess[]
+include::{docs-root}/shared/cloud/ess-getting-started-obs.asciidoc[]
+
+// end::ess[]
+
+// tag::self-managed[]
+See the https://www.elastic.co/support/matrix[Elastic Support Matrix] for information about
+supported operating systems and product compatibility. We recommend you use the same
+version of {es}, {kib}, and APM Server.
+
+. {stack-gs}/get-started-elastic-stack.html#install-elasticsearch[Install {es}]
+. {stack-gs}/get-started-elastic-stack.html#install-kibana[Install Kibana]
+. {apm-server-ref-v}/installing.html[Install APM server]
+
+// end::self-managed[]