[Infra UI] Add Node Type Selector to Waffle Map (#23593)

* Adding node type switcher to page; Adding title to page; * Fixing pod logging url * Adding drilldown for apm * Adding labels to pulldowns
elastic · Sep 28, 2018 · faf89e4 · faf89e4
1 parent 51e68cc
commit faf89e4
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 55 deletions.
diff --git a/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx b/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { InfraNodeType } from '../../../common/graphql/types';
 import {
   InfraWaffleMapBounds,
   InfraWaffleMapGroupOfGroups,
@@ -20,6 +21,7 @@ interface Props {
   group: InfraWaffleMapGroupOfGroups;
   formatter: (val: number) => string;
   bounds: InfraWaffleMapBounds;
+  nodeType: InfraNodeType;
 }
 
 export const GroupOfGroups: React.SFC<Props> = props => {
@@ -36,6 +38,7 @@ export const GroupOfGroups: React.SFC<Props> = props => {
             group={group}
             formatter={props.formatter}
             bounds={props.bounds}
+            nodeType={props.nodeType}
           />
         ))}
       </Groups>

diff --git a/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx b/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { InfraNodeType } from '../../../common/graphql/types';
 import {
   InfraWaffleMapBounds,
   InfraWaffleMapGroupOfNodes,
@@ -21,6 +22,7 @@ interface Props {
   formatter: (val: number) => string;
   isChild: boolean;
   bounds: InfraWaffleMapBounds;
+  nodeType: InfraNodeType;
 }
 
 export const GroupOfNodes: React.SFC<Props> = ({
@@ -30,6 +32,7 @@ export const GroupOfNodes: React.SFC<Props> = ({
   onDrilldown,
   isChild = false,
   bounds,
+  nodeType,
 }) => {
   const width = group.width > 200 ? group.width : 200;
   return (
@@ -45,6 +48,7 @@ export const GroupOfNodes: React.SFC<Props> = ({
             onDrilldown={onDrilldown}
             formatter={formatter}
             bounds={bounds}
+            nodeType={nodeType}
           />
         ))}
       </Nodes>

diff --git a/x-pack/plugins/infra/public/components/waffle/index.tsx b/x-pack/plugins/infra/public/components/waffle/index.tsx
@@ -7,7 +7,7 @@ import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import { get, last, max, min } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import { InfraMetricType } from '../../../common/graphql/types';
+import { InfraMetricType, InfraNodeType } from '../../../common/graphql/types';
 import {
   isWaffleMapGroupWithGroups,
   isWaffleMapGroupWithNodes,
@@ -29,6 +29,7 @@ import { applyWaffleMapLayout } from './lib/apply_wafflemap_layout';
 
 interface Props {
   options: InfraWaffleMapOptions;
+  nodeType: InfraNodeType;
   map: InfraWaffleData;
   loading: boolean;
   reload: () => void;
@@ -165,6 +166,7 @@ export class Waffle extends React.Component<Props, {}> {
           group={group}
           formatter={this.formatter}
           bounds={bounds}
+          nodeType={this.props.nodeType}
         />
       );
     }
@@ -178,6 +180,7 @@ export class Waffle extends React.Component<Props, {}> {
           formatter={this.formatter}
           isChild={false}
           bounds={bounds}
+          nodeType={this.props.nodeType}
         />
       );
     }

diff --git a/x-pack/plugins/infra/public/components/waffle/node.tsx b/x-pack/plugins/infra/public/components/waffle/node.tsx
@@ -9,7 +9,6 @@ import { last } from 'lodash';
 import { darken, readableColor } from 'polished';
 import React from 'react';
 import styled from 'styled-components';
-import { InfraPathType } from '../../../common/graphql/types';
 import { InfraNodeType } from '../../../server/lib/adapters/nodes';
 import { InfraWaffleMapBounds, InfraWaffleMapNode, InfraWaffleMapOptions } from '../../lib/lib';
 import { colorFromValue } from './lib/color_from_value';
@@ -28,28 +27,15 @@ interface Props {
   node: InfraWaffleMapNode;
   formatter: (val: number) => string;
   bounds: InfraWaffleMapBounds;
-}
-
-function convertInfraPathTypeToNodeType(type: InfraPathType) {
-  switch (type) {
-    case InfraPathType.hosts:
-      return InfraNodeType.host;
-    case InfraPathType.containers:
-      return InfraNodeType.container;
-    case InfraPathType.pods:
-      return InfraNodeType.pod;
-    default:
-      throw new Error('Incompatible path type.');
-  }
+  nodeType: InfraNodeType;
 }
 
 export class Node extends React.PureComponent<Props, State> {
   public readonly state: State = initialState;
   public render() {
-    const { node, options, squareSize, bounds, formatter } = this.props;
+    const { nodeType, node, options, squareSize, bounds, formatter } = this.props;
     const { isPopoverOpen } = this.state;
     const metric = last(node.metrics);
-    const nodeType = convertInfraPathTypeToNodeType(last(options.path).type);
     const valueMode = squareSize > 110;
     const rawValue = (metric && metric.value) || 0;
     const color = colorFromValue(options.legend, rawValue, bounds);

diff --git a/x-pack/plugins/infra/public/components/waffle/node_context_menu.tsx b/x-pack/plugins/infra/public/components/waffle/node_context_menu.tsx
@@ -19,14 +19,15 @@ interface Props {
 }
 
 export const NodeContextMenu: React.SFC<Props> = ({
+  options,
   children,
   node,
   isPopoverOpen,
   closePopover,
   nodeType,
 }) => {
   const nodeLogsUrl = getNodeLogsUrl(nodeType, node);
-
+  const nodeField = options.fields ? options.fields[nodeType] : null;
   const panels: EuiContextMenuPanelDescriptor[] = [
     {
       id: 0,
@@ -44,10 +45,14 @@ export const NodeContextMenu: React.SFC<Props> = ({
           name: `View metrics`,
           href: `#/metrics/${nodeType}/${node.name}`,
         },
-        {
-          name: `View APM Traces`,
-          href: `/app/apm`,
-        },
+        ...(nodeField
+          ? [
+              {
+                name: `View APM Traces`,
+                href: `../app/apm#/?_g=()&kuery=${nodeField}~20~3A~20~22${node.name}~22`,
+              },
+            ]
+          : []),
       ],
     },
   ];
@@ -80,7 +85,7 @@ const getNodeLogsUrl = (
       return getHostLogsUrl({ hostname: lastPathSegment.value });
     case 'container':
       return getContainerLogsUrl({ containerId: lastPathSegment.value });
-    case 'host':
+    case 'pod':
       return getPodLogsUrl({ podId: lastPathSegment.value });
     default:
       return undefined;

diff --git a/x-pack/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx b/x-pack/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx
@@ -82,10 +82,10 @@ export class WaffleGroupByControls extends React.PureComponent<Props, State> {
                 {o && o.text}
               </EuiBadge>
             ))
-        : 'Group By';
+        : 'All';
     const button = (
       <EuiFilterButton iconType="arrowDown" onClick={this.handleToggle}>
-        {buttonBody}
+        Group By: {buttonBody}
       </EuiFilterButton>
     );
 

diff --git a/x-pack/plugins/infra/public/components/waffle/waffle_metric_controls.tsx b/x-pack/plugins/infra/public/components/waffle/waffle_metric_controls.tsx
@@ -73,7 +73,7 @@ export class WaffleMetricControls extends React.PureComponent<Props, State> {
     ];
     const button = (
       <EuiFilterButton iconType="arrowDown" onClick={this.handleToggle}>
-        {currentLabel.text}
+        Metric: {currentLabel.text}
       </EuiFilterButton>
     );
 

diff --git a/x-pack/plugins/infra/public/components/waffle/waffle_node_type_switcher.tsx b/x-pack/plugins/infra/public/components/waffle/waffle_node_type_switcher.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiKeyPadMenu, EuiKeyPadMenuItem } from '@elastic/eui';
+import React from 'react';
+import {
+  InfraMetricInput,
+  InfraMetricType,
+  InfraNodeType,
+  InfraPathInput,
+} from '../../../common/graphql/types';
+
+interface Props {
+  nodeType: InfraNodeType;
+  changeNodeType: (nodeType: InfraNodeType) => void;
+  changeGroupBy: (groupBy: InfraPathInput[]) => void;
+  changeMetrics: (metric: InfraMetricInput[]) => void;
+}
+
+export class WaffleNodeTypeSwitcher extends React.PureComponent<Props> {
+  public render() {
+    return (
+      <EuiKeyPadMenu>
+        <EuiKeyPadMenuItem label="Hosts" onClick={this.handleClick(InfraNodeType.host)}>
+          <img src="/plugins/infra/images/hosts.svg" className="euiIcon euiIcon--large" />
+        </EuiKeyPadMenuItem>
+        <EuiKeyPadMenuItem label="Kubernetes" onClick={this.handleClick(InfraNodeType.pod)}>
+          <img src="/plugins/infra/images/k8.svg" className="euiIcon euiIcon--large" />
+        </EuiKeyPadMenuItem>
+        <EuiKeyPadMenuItem label="Docker" onClick={this.handleClick(InfraNodeType.container)}>
+          <img src="/plugins/infra/images/docker.svg" className="euiIcon euiIcon--large" />
+        </EuiKeyPadMenuItem>
+      </EuiKeyPadMenu>
+    );
+  }
+
+  private handleClick = (nodeType: InfraNodeType) => () => {
+    this.props.changeNodeType(nodeType);
+    this.props.changeGroupBy([]);
+    this.props.changeMetrics([{ type: InfraMetricType.cpu }]);
+  };
+}
diff --git a/x-pack/plugins/infra/public/lib/lib.ts b/x-pack/plugins/infra/public/lib/lib.ts
@@ -16,6 +16,7 @@ import {
   InfraNodePath,
   InfraPathInput,
   InfraTimerangeInput,
+  SourceQuery,
 } from '../../common/graphql/types';
 
 export interface InfraFrontendLibs {
@@ -161,6 +162,7 @@ export enum InfraWaffleMapRuleOperator {
 }
 
 export interface InfraWaffleMapOptions {
+  fields?: SourceQuery.Fields | null;
   formatter: InfraFormatterType;
   formatTemplate: string;
   metrics: InfraMetricInput[];

diff --git a/x-pack/plugins/infra/public/pages/home/page_content.tsx b/x-pack/plugins/infra/public/pages/home/page_content.tsx
@@ -14,41 +14,47 @@ import { WithWaffleNodes } from '../../containers/waffle/with_waffle_nodes';
 import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
 import { WithWaffleTime } from '../../containers/waffle/with_waffle_time';
 import { WithOptions } from '../../containers/with_options';
+import { WithSource } from '../../containers/with_source';
 
 export const HomePageContent: React.SFC = () => (
   <PageContent>
-    <WithOptions>
-      {({ wafflemap, sourceId }) => (
-        <WithWaffleFilter>
-          {({ filterQueryAsJson }) => (
-            <WithWaffleTime>
-              {({ currentTimeRange }) => (
-                <WithWaffleOptions>
-                  {({ metrics, groupBy, nodeType }) => (
-                    <WithWaffleNodes
-                      filterQuery={filterQueryAsJson}
-                      metrics={metrics}
-                      groupBy={groupBy}
-                      nodeType={nodeType}
-                      sourceId={sourceId}
-                      timerange={currentTimeRange}
-                    >
-                      {({ nodes, loading, refetch }) => (
-                        <Waffle
-                          map={nodes}
-                          loading={loading}
-                          options={{ ...wafflemap, metrics }}
-                          reload={refetch}
-                        />
+    <WithSource>
+      {({ configuredFields }) => (
+        <WithOptions>
+          {({ wafflemap, sourceId }) => (
+            <WithWaffleFilter>
+              {({ filterQueryAsJson }) => (
+                <WithWaffleTime>
+                  {({ currentTimeRange }) => (
+                    <WithWaffleOptions>
+                      {({ metrics, groupBy, nodeType }) => (
+                        <WithWaffleNodes
+                          filterQuery={filterQueryAsJson}
+                          metrics={metrics}
+                          groupBy={groupBy}
+                          nodeType={nodeType}
+                          sourceId={sourceId}
+                          timerange={currentTimeRange}
+                        >
+                          {({ nodes, loading, refetch }) => (
+                            <Waffle
+                              map={nodes}
+                              loading={loading}
+                              nodeType={nodeType}
+                              options={{ ...wafflemap, metrics, fields: configuredFields }}
+                              reload={refetch}
+                            />
+                          )}
+                        </WithWaffleNodes>
                       )}
-                    </WithWaffleNodes>
+                    </WithWaffleOptions>
                   )}
-                </WithWaffleOptions>
+                </WithWaffleTime>
               )}
-            </WithWaffleTime>
+            </WithWaffleFilter>
           )}
-        </WithWaffleFilter>
+        </WithOptions>
       )}
-    </WithOptions>
+    </WithSource>
   </PageContent>
 );
diff --git a/x-pack/plugins/infra/public/pages/home/toolbar.tsx b/x-pack/plugins/infra/public/pages/home/toolbar.tsx
@@ -4,22 +4,56 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
 import React from 'react';
 
 import { AutocompleteField } from '../../components/autocomplete_field';
 import { Toolbar } from '../../components/eui/toolbar';
 import { WaffleTimeControls } from '../../components/waffle/waffle_time_controls';
 
+import { InfraNodeType } from '../../../common/graphql/types';
 import { WaffleGroupByControls } from '../../components/waffle/waffle_group_by_controls';
 import { WaffleMetricControls } from '../../components/waffle/waffle_metric_controls';
+import { WaffleNodeTypeSwitcher } from '../../components/waffle/waffle_node_type_switcher';
 import { WithWaffleFilter } from '../../containers/waffle/with_waffle_filters';
 import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
 import { WithWaffleTime } from '../../containers/waffle/with_waffle_time';
 import { WithKueryAutocompletion } from '../../containers/with_kuery_autocompletion';
 
+const TITLES = {
+  [InfraNodeType.host]: 'Hosts',
+  [InfraNodeType.pod]: 'Kubernetes Pods',
+  [InfraNodeType.container]: 'Docker Containers',
+};
+
 export const HomeToolbar: React.SFC = () => (
   <Toolbar>
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem>
+        <WithWaffleOptions>
+          {({ nodeType }) => (
+            <EuiTitle size="m">
+              <h1>{TITLES[nodeType]}</h1>
+            </EuiTitle>
+          )}
+        </WithWaffleOptions>
+        <EuiText color="subdued">
+          <p>Showing the last 1 minute of data from the time period</p>
+        </EuiText>
+      </EuiFlexItem>
+      <WithWaffleOptions>
+        {({ nodeType, changeNodeType, changeGroupBy, changeMetrics }) => (
+          <EuiFlexItem grow={false}>
+            <WaffleNodeTypeSwitcher
+              nodeType={nodeType}
+              changeNodeType={changeNodeType}
+              changeMetrics={changeMetrics}
+              changeGroupBy={changeGroupBy}
+            />
+          </EuiFlexItem>
+        )}
+      </WithWaffleOptions>
+    </EuiFlexGroup>
     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="m">
       <EuiFlexItem>
         <WithKueryAutocompletion>