[APM] Add kuery to apm ui

src/ui/public/index_patterns/static_utils/index.js

@@ -28,6 +28,10 @@ export function isFilterable(field) {
 }
 
 export function getFromSavedObject(savedObject) {
+  if (!savedObject) {
+    return null;
+  }
+
   return {
     fields: JSON.parse(savedObject.attributes.fields),
     title: savedObject.attributes.title,

x-pack/package.json

@@ -132,6 +132,7 @@
     "pivotal-ui": "13.0.1",
     "pluralize": "3.1.0",
     "pngjs": "3.3.1",
+    "polished": "^1.9.2",
     "prop-types": "^15.6.0",
     "puid": "1.0.5",
     "react": "^16.3.0",

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.js

@@ -130,7 +130,9 @@ function DetailView({ errorGroup, urlParams, location }) {
       interval: 'auto',
       query: {
         language: 'lucene',
-        query: `${SERVICE_NAME}:"${serviceName}" AND ${ERROR_GROUP_ID}:${groupId}`
+        query: `${SERVICE_NAME}:"${serviceName}" AND ${ERROR_GROUP_ID}:${groupId}${
+          urlParams.kuery ? ` AND ${urlParams.kuery}` : ``
+        }`
       },
       sort: { '@timestamp': 'desc' }
     }

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.js

@@ -11,6 +11,7 @@ import { get } from 'lodash';
 import { HeaderLarge } from '../../shared/UIComponents';
 import DetailView from './DetailView';
 import Distribution from './Distribution';
+import { KueryBar } from '../../shared/KueryBar';
 
 import { EuiText, EuiBadge } from '@elastic/eui';
 import {
@@ -86,6 +87,8 @@ function ErrorGroupDetails({ urlParams, location }) {
               )}
             </HeaderLarge>
 
+            <KueryBar />
+
             {showDetails && (
               <Titles>
                 <EuiText>