[Fleet] Agent logs UI (#83356)

* Initial agent log table

* Add data and storage services to Kibana context, rename useCore to useStartServices and replace usage of useStartDeps

* Initial attempt at adding query bar for log stream

* Adjust app layout to allow page content to be full height

* Dataset and log level filters, split into smaller files

* Use data plugin's `QueryStringInput` component for query bar

* Add open in Logs UI link

* Clean up unused storage dependency

* Remove agent activity log and related dead code

* Clean up i18n

* Clean up plugin deps, fix routing

* Add back storage dependency that data plugin components need

* Remove dependency on infra for logs UI link

* Change default date range to last one day

* Adjust panel padding

* Add comment

* Move module declarations to top-level x-pack/typings

* Fix missed renaming

* Remove unused path

* Move building of log stream query into separate service with unit tests

* Adjust test conditions

Author: jen-huang

x-pack/plugins/fleet/kibana.json

@@ -7,5 +7,5 @@
   "requiredPlugins": ["licensing", "data", "encryptedSavedObjects"],
   "optionalPlugins": ["security", "features", "cloud", "usageCollection", "home"],
   "extraPublicDirs": ["common"],
-  "requiredBundles": ["kibanaReact", "esUiShared", "home"]
+  "requiredBundles": ["kibanaReact", "esUiShared", "home", "infra", "kibanaUtils"]
 }

x-pack/plugins/fleet/public/applications/fleet/components/search_bar.tsx

@@ -9,7 +9,7 @@ import { IFieldType } from 'src/plugins/data/public';
 // @ts-ignore
 import { EuiSuggest, EuiSuggestItemProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useDebounce, useStartDeps } from '../hooks';
+import { useDebounce, useStartServices } from '../hooks';
 import { INDEX_NAME, AGENT_SAVED_OBJECT_TYPE } from '../constants';
 
 const DEBOUNCE_SEARCH_MS = 150;
@@ -80,7 +80,7 @@ export const SearchBar: React.FunctionComponent<Props> = ({
   );
 };
 
-function transformSuggestionType(type: string): { iconType: string; color: string } {
+export function transformSuggestionType(type: string): { iconType: string; color: string } {
   switch (type) {
     case 'field':
       return { iconType: 'kqlField', color: 'tint4' };
@@ -96,7 +96,7 @@ function transformSuggestionType(type: string): { iconType: string; color: strin
 }
 
 function useSuggestions(fieldPrefix: string, search: string) {
-  const { data } = useStartDeps();
+  const { data } = useStartServices();
 
   const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH_MS);
   const [suggestions, setSuggestions] = useState<Suggestion[]>([]);

x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout.tsx

@@ -25,7 +25,13 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiText } from '@elastic/eui';
 import { safeLoad } from 'js-yaml';
-import { useComboInput, useCore, useGetSettings, useInput, sendPutSettings } from '../hooks';
+import {
+  useComboInput,
+  useStartServices,
+  useGetSettings,
+  useInput,
+  sendPutSettings,
+} from '../hooks';
 import { useGetOutputs, sendPutOutput } from '../hooks/use_request/outputs';
 import { isDiffPathProtocol } from '../../../../common/';
 
@@ -37,7 +43,7 @@ interface Props {
 
 function useSettingsForm(outputId: string | undefined, onSuccess: () => void) {
   const [isLoading, setIsloading] = React.useState(false);
-  const { notifications } = useCore();
+  const { notifications } = useStartServices();
   const kibanaUrlsInput = useComboInput([], (value) => {
     if (value.length === 0) {
       return [

x-pack/plugins/fleet/public/applications/fleet/constants/page_paths.ts

@@ -51,8 +51,7 @@ export const PAGE_ROUTING_PATHS = {
   fleet: '/fleet',
   fleet_agent_list: '/fleet/agents',
   fleet_agent_details: '/fleet/agents/:agentId/:tabId?',
-  fleet_agent_details_events: '/fleet/agents/:agentId',
-  fleet_agent_details_details: '/fleet/agents/:agentId/details',
+  fleet_agent_details_logs: '/fleet/agents/:agentId/logs',
   fleet_enrollment_tokens: '/fleet/enrollment-tokens',
   data_streams: '/data-streams',
 };

x-pack/plugins/fleet/public/applications/fleet/hooks/index.ts

@@ -5,10 +5,9 @@
  */
 
 export { useCapabilities } from './use_capabilities';
-export { useCore } from './use_core';
+export { useStartServices } from './use_core';
 export { useConfig, ConfigContext } from './use_config';
 export { useKibanaVersion, KibanaVersionContext } from './use_kibana_version';
-export { useSetupDeps, useStartDeps, DepsContext } from './use_deps';
 export { licenseService, useLicense } from './use_license';
 export { useBreadcrumbs } from './use_breadcrumbs';
 export { useLink } from './use_link';

x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx

@@ -6,7 +6,7 @@
 import { i18n } from '@kbn/i18n';
 import { ChromeBreadcrumb } from 'src/core/public';
 import { BASE_PATH, Page, DynamicPagePathValues, pagePathGetters } from '../constants';
-import { useCore } from './use_core';
+import { useStartServices } from './use_core';
 
 const BASE_BREADCRUMB: ChromeBreadcrumb = {
   href: pagePathGetters.overview(),
@@ -204,7 +204,7 @@ const breadcrumbGetters: {
 };
 
 export function useBreadcrumbs(page: Page, values: DynamicPagePathValues = {}) {
-  const { chrome, http } = useCore();
+  const { chrome, http } = useStartServices();
   const breadcrumbs: ChromeBreadcrumb[] = breadcrumbGetters[page](values).map((breadcrumb) => ({
     ...breadcrumb,
     href: breadcrumb.href ? http.basePath.prepend(`${BASE_PATH}#${breadcrumb.href}`) : undefined,

x-pack/plugins/fleet/public/applications/fleet/hooks/use_capabilities.ts

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useCore } from './';
+import { useStartServices } from './';
 
 export function useCapabilities() {
-  const core = useCore();
+  const core = useStartServices();
   return core.application.capabilities.fleet;
 }

x-pack/plugins/fleet/public/applications/fleet/hooks/use_core.ts

@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreStart } from 'kibana/public';
+import { FleetStartServices } from '../../../plugin';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 
-export function useCore(): CoreStart {
-  const { services } = useKibana<CoreStart>();
+export function useStartServices(): FleetStartServices {
+  const { services } = useKibana<FleetStartServices>();
   if (services === null) {
     throw new Error('KibanaContextProvider not initialized');
   }

x-pack/plugins/fleet/public/applications/fleet/hooks/use_deps.ts

@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useCore } from './';
+import { useStartServices } from './';
 
 const KIBANA_BASE_PATH = '/app/kibana';
 
 export function useKibanaLink(path: string = '/') {
-  const core = useCore();
+  const core = useStartServices();
   return core.http.basePath.prepend(`${KIBANA_BASE_PATH}#${path}`);
 }