Replace spy panels by Inspector

docs/development/plugin/development-uiexports.asciidoc

@@ -9,7 +9,7 @@ An aggregate list of available UiExport types:
 | hacks | Any module that should be included in every application
 | visTypes | Modules that register providers with the `ui/registry/vis_types` registry.
 | fieldFormats | Modules that register providers with the `ui/registry/field_formats` registry.
-| spyModes | Modules that register providers with the `ui/registry/spy_modes` registry.
+| inspectorViews | Modules that register custom inspector views via the `viewRegistry` in `ui/inspector`.
 | chromeNavControls | Modules that register providers with the `ui/registry/chrome_nav_controls` registry.
 | navbarExtensions | Modules that register providers with the `ui/registry/navbar_extensions` registry.
 | docViews | Modules that register providers with the `ui/registry/doc_views` registry.

docs/visualize.asciidoc

@@ -162,6 +162,6 @@ include::visualize/tagcloud.asciidoc[]
 
 include::visualize/heatmap.asciidoc[]
 
-include::visualize/visualization-raw-data.asciidoc[]
-
 include::visualize/vega.asciidoc[]
+
+include::visualize/inspector.asciidoc[]

docs/visualize/inspector.asciidoc

@@ -0,0 +1,17 @@
+[[vis-inspector]]
+== Inspector
+
+Many visualizations have an Inspector that can help you gain insight to the data
+behind the visualization.
+
+To open the Inspector use the Inspector button while in the editor or select Inspector
+from the Dashboard panel menu.
+
+From the Inspector, you can download the visualization data as a comma separated
+values (CSV) file in Formatted or Raw format. Formatted downloads the data in table format.
+Raw downloads the data as provided -- dates are timestamps, numbers don’t have
+thousand separators, and so on.
+
+To view the requests that collected the data, select Requests from the View menu in the upper right.
+
+Which views are available depends on the inspected visualization.

package.json

@@ -226,6 +226,8 @@
     "@kbn/eslint-plugin-license-header": "link:packages/kbn-eslint-plugin-license-header",
     "@kbn/plugin-generator": "link:packages/kbn-plugin-generator",
     "@kbn/test": "link:packages/kbn-test",
+    "@types/angular": "^1.6.45",
+    "@types/classnames": "^2.2.3",
     "@types/eslint": "^4.16.2",
     "@types/execa": "^0.9.0",
     "@types/getopts": "^2.0.0",

src/core_plugins/spy_modes/index.js → src/core_plugins/inspector_views/index.js

@@ -20,9 +20,8 @@
 export default function (kibana) {
   return new kibana.Plugin({
     uiExports: {
-      spyModes: [
-        'plugins/spy_modes/table_spy_mode',
-        'plugins/spy_modes/req_resp_stats_spy_mode'
+      inspectorViews: [
+        'plugins/inspector_views/register_views'
       ]
     }
   });

src/core_plugins/inspector_views/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "inspector_views",
+  "version": "kibana"
+}

src/core_plugins/inspector_views/public/data/__snapshots__/data_view.test.js.snap

@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Inspector Data View component should render empty state 1`] = `
+<DataViewComponent
+  adapters={
+    Object {
+      "data": DataAdapter {
+        "_events": Object {
+          "change": [Function],
+        },
+        "_eventsCount": 1,
+        "_maxListeners": undefined,
+        "domain": null,
+        "tabular": [Function],
+        "tabularOptions": Object {},
+      },
+    }
+  }
+  title="Test Data"
+>
+  <InspectorView
+    useFlex={true}
+  >
+    <EuiFlyoutBody
+      className="inspector-view__flex"
+    >
+      <div
+        className="euiFlyoutBody inspector-view__flex"
+      >
+        <EuiEmptyPrompt
+          body={
+            <UNDEFINED>
+              <p>
+                The element did not provide any data.
+              </p>
+            </UNDEFINED>
+          }
+          iconColor="subdued"
+          title={
+            <h2>
+              No data available
+            </h2>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No data available
+                  </h2>
+                </EuiTitle>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText
+                  grow={true}
+                >
+                  <div
+                    className="euiText"
+                  >
+                    <p>
+                      The element did not provide any data.
+                    </p>
+                  </div>
+                </EuiText>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+              </span>
+            </EuiTextColor>
+          </div>
+        </EuiEmptyPrompt>
+      </div>
+    </EuiFlyoutBody>
+  </InspectorView>
+</DataViewComponent>
+`;
+
+exports[`Inspector Data View component should render loading state 1`] = `
+<DataViewComponent
+  adapters={
+    Object {
+      "data": DataAdapter {
+        "_events": Object {
+          "change": [Function],
+        },
+        "_eventsCount": 1,
+        "_maxListeners": undefined,
+        "domain": null,
+      },
+    }
+  }
+  title="Test Data"
+>
+  <InspectorView
+    useFlex={true}
+  >
+    <EuiFlyoutBody
+      className="inspector-view__flex"
+    >
+      <div
+        className="euiFlyoutBody inspector-view__flex"
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          component="div"
+          direction="row"
+          gutterSize="l"
+          justifyContent="center"
+          responsive={true}
+          wrap={false}
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <EuiFlexItem
+              component="div"
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <EuiPanel
+                  className="eui-textCenter"
+                  grow={true}
+                  hasShadow={false}
+                  paddingSize="m"
+                >
+                  <div
+                    className="euiPanel euiPanel--paddingMedium eui-textCenter"
+                  >
+                    <EuiLoadingChart
+                      mono={false}
+                      size="m"
+                    >
+                      <div
+                        className="euiLoadingChart euiLoadingChart--medium"
+                      >
+                        <div
+                          className="euiLoadingChart__bar"
+                        />
+                        <div
+                          className="euiLoadingChart__bar"
+                        />
+                        <div
+                          className="euiLoadingChart__bar"
+                        />
+                        <div
+                          className="euiLoadingChart__bar"
+                        />
+                      </div>
+                    </EuiLoadingChart>
+                    <EuiSpacer
+                      size="s"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--s"
+                      />
+                    </EuiSpacer>
+                    <EuiText
+                      grow={true}
+                    >
+                      <div
+                        className="euiText"
+                      >
+                        <p>
+                          Gathering data
+                        </p>
+                      </div>
+                    </EuiText>
+                  </div>
+                </EuiPanel>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </div>
+    </EuiFlyoutBody>
+  </InspectorView>
+</DataViewComponent>
+`;