[Inventory] Project restructure to show entities grid (#192991)

Inventory plugin restructure. Creating server API to fetch entities and
initial data grid load on the page.

x-pack/plugins/observability_solution/inventory/common/entities.ts

@@ -5,16 +5,22 @@
  * 2.0.
  */
 
-export interface EntityTypeDefinition {
-  type: string;
-  label: string;
-  icon: string;
-  count: number;
-}
-
-export interface EntityDefinition {
-  type: string;
-  field: string;
-  filter?: string;
-  index: string[];
+export interface LatestEntity {
+  agent: {
+    name: string[];
+  };
+  data_stream: {
+    type: string[];
+  };
+  cloud: {
+    availability_zone: string[];
+  };
+  entity: {
+    firstSeenTimestamp: string;
+    lastSeenTimestamp: string;
+    type: string;
+    displayName: string;
+    id: string;
+    identityFields: string[];
+  };
 }

x-pack/plugins/observability_solution/inventory/public/components/entities_grid/index.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import {
+  EuiDataGrid,
+  EuiDataGridCellValueElementProps,
+  EuiDataGridColumn,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useAbortableAsync } from '@kbn/observability-utils/hooks/use_abortable_async';
+import React, { useState } from 'react';
+import { useKibana } from '../../hooks/use_kibana';
+
+const columns: EuiDataGridColumn[] = [
+  {
+    id: 'entityName',
+    displayAsText: 'Entity name',
+  },
+  {
+    id: 'entityType',
+    displayAsText: 'Type',
+  },
+];
+
+export function EntitiesGrid() {
+  const {
+    services: { inventoryAPIClient },
+  } = useKibana();
+  const [visibleColumns, setVisibleColumns] = useState(columns.map(({ id }) => id));
+  const { value = { entities: [] }, loading } = useAbortableAsync(
+    ({ signal }) => {
+      return inventoryAPIClient.fetch('GET /internal/inventory/entities', {
+        signal,
+      });
+    },
+    [inventoryAPIClient]
+  );
+
+  if (loading) {
+    return <EuiLoadingSpinner size="s" />;
+  }
+
+  function CellValue({ rowIndex, columnId, setCellProps }: EuiDataGridCellValueElementProps) {
+    const data = value.entities[rowIndex];
+    if (data === undefined) {
+      return null;
+    }
+
+    return <>{data.entity.displayName}</>;
+  }
+
+  return (
+    <EuiDataGrid
+      aria-label={i18n.translate(
+        'xpack.inventory.entitiesGrid.euiDataGrid.inventoryEntitiesGridLabel',
+        { defaultMessage: 'Inventory entities grid' }
+      )}
+      columns={columns}
+      columnVisibility={{ visibleColumns, setVisibleColumns }}
+      rowCount={value.entities.length}
+      renderCellValue={CellValue}
+    />
+  );
+}

x-pack/plugins/observability_solution/inventory/public/components/inventory_page_template/index.tsx

@@ -4,13 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiPanel, EuiTitle } from '@elastic/eui';
-import { css } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
-import { useTheme } from '@kbn/observability-utils/hooks/use_theme';
 import React from 'react';
 import { useKibana } from '../../hooks/use_kibana';
-import { EntityTypeList } from '../entity_type_list';
 
 export function InventoryPageTemplate({ children }: { children: React.ReactNode }) {
   const {
@@ -19,60 +15,17 @@ export function InventoryPageTemplate({ children }: { children: React.ReactNode
     },
   } = useKibana();
 
-  const { PageTemplate } = observabilityShared.navigation;
-
-  const theme = useTheme();
+  const { PageTemplate: ObservabilityPageTemplate } = observabilityShared.navigation;
 
   return (
-    <PageTemplate
-      pageSectionProps={{
-        className: css`
-          max-height: calc(100vh - var(--euiFixedHeadersOffset, 0));
-          overflow: auto;
-          padding-inline: 0px;
-        `,
-        contentProps: {
-          className: css`
-            padding-block: 0px;
-            display: flex;
-            height: 100%;
-          `,
-        },
+    <ObservabilityPageTemplate
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.inventory.inventoryPageHeaderLabel', {
+          defaultMessage: 'Inventory',
+        }),
       }}
     >
-      <EuiFlexGroup direction="row" gutterSize="s" alignItems="stretch">
-        <EuiPanel
-          className={css`
-            width: 288px;
-            max-width: 288px;
-            min-width: 288px;
-            padding: 24px;
-            height: 100%;
-            border: none;
-            border-radius: 0;
-            border-right: 1px solid ${theme.colors.lightShade};
-          `}
-          hasBorder={false}
-          hasShadow={false}
-        >
-          <EuiFlexGroup direction="column" gutterSize="l">
-            <EuiTitle size="xs">
-              <h1>
-                {i18n.translate('xpack.inventory.inventoryPageHeaderLabel', {
-                  defaultMessage: 'Inventory',
-                })}
-              </h1>
-            </EuiTitle>
-            <EuiFlexGroup direction="column" gutterSize="m">
-              <EntityTypeList />
-            </EuiFlexGroup>
-          </EuiFlexGroup>
-        </EuiPanel>
-
-        <EuiPanel hasBorder={false} hasShadow={false} paddingSize="l">
-          {children}
-        </EuiPanel>
-      </EuiFlexGroup>
-    </PageTemplate>
+      {children}
+    </ObservabilityPageTemplate>
   );
 }

x-pack/plugins/observability_solution/inventory/public/pages/inventory_page/index.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { EntitiesGrid } from '../../components/entities_grid';
+
+export function InventoryPage() {
+  return (
+    <div>
+      <EntitiesGrid />
+    </div>
+  );
+}