Task/endpoint list poc

x-pack/plugins/endpoint/kibana.json

@@ -0,0 +1,8 @@
+{
+  "id": "endpoint",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["x-path", "endpoint"],
+  "server": true,
+  "ui": true
+}

x-pack/plugins/endpoint/public/application.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route, withRouter, RouteComponentProps } from 'react-router-dom';
+
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPageSideBar,
+  EuiTitle,
+  EuiSideNav,
+} from '@elastic/eui';
+
+import { AppMountContext, AppMountParameters } from 'kibana/public';
+import { Nav } from './components/nav';
+import { Home } from './components/home';
+import { Management } from './components/management';
+
+const EndpointRouter = ({
+  basename,
+  context,
+  endpointMetadata,
+}: {
+  basename: string;
+  context: AppMountContext;
+  endpointMetadata: any;
+}) => {
+  return (
+    <Router basename={basename}>
+      <EuiPage>
+        <EuiPageSideBar>
+          <Nav navigateToApp={context.core.application.navigateToApp} />
+        </EuiPageSideBar>
+        <Route path="/" exact component={Home} />
+        <Route
+          path="/management"
+          render={() => <Management endpointMetadata={endpointMetadata} />}
+        />
+      </EuiPage>
+    </Router>
+  );
+};
+
+export const renderApp = (
+  context: AppMountContext,
+  { appBasePath, element }: AppMountParameters,
+  response: any
+) => {
+  ReactDOM.render(
+    <EndpointRouter basename={appBasePath} context={context} endpointMetadata={response} />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

x-pack/plugins/endpoint/public/components/home.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 React from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPageSideBar,
+  EuiTitle,
+  EuiSideNav,
+} from '@elastic/eui';
+export const Home = () => (
+  <EuiPageBody>
+    <EuiPageHeader>
+      <EuiPageHeaderSection>
+        <EuiTitle size="l">
+          <h1>Welcome to Endpoint!</h1>
+        </EuiTitle>
+      </EuiPageHeaderSection>
+    </EuiPageHeader>
+    <EuiPageContent>
+      <EuiPageContentHeader>
+        <EuiPageContentHeaderSection>
+          <EuiTitle>
+            <h2>Home Page</h2>
+          </EuiTitle>
+        </EuiPageContentHeaderSection>
+      </EuiPageContentHeader>
+      <EuiPageContentBody>Body Content</EuiPageContentBody>
+    </EuiPageContent>
+  </EuiPageBody>
+);

x-pack/plugins/endpoint/public/components/management.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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 React, { Component } from 'react';
+
+import {
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiBasicTable,
+} from '@elastic/eui';
+
+import { SearchBar } from './search_bar';
+
+interface Props {
+  endpointMetadata: any;
+}
+
+interface State {
+  queriedEndpointMetadata: {};
+}
+
+export class EndpointList extends Component<Props, State> {
+  public state = {
+    queriedEndpointMetadata: null,
+  };
+
+  public updateOnChange = ({ updatedResult }: { updatedResult: {} }) => {
+    this.setState({ queriedEndpointMetadata: updatedResult });
+  };
+
+  public render() {
+    const { endpointMetadata } = this.props;
+    const { queriedEndpointMetadata } = this.state;
+
+    const items: [] = queriedEndpointMetadata
+      ? queriedEndpointMetadata
+      : endpointMetadata.hits.hits;
+
+    const columns = [
+      {
+        field: '_source',
+        name: 'Hostname',
+        sortable: true,
+        render: source => {
+          return <span>{source.host.hostname}</span>;
+        },
+        truncateText: false,
+      },
+      {
+        field: '_source',
+        name: 'IP',
+        sortable: true,
+        render: source => {
+          return <span>{source.host.ip}</span>;
+        },
+        truncateText: false,
+      },
+      {
+        field: '_source',
+        name: 'Operating System',
+        sortable: true,
+        render: source => {
+          return <span>{source.host.os.name + ' ' + source.host.os.version}</span>;
+        },
+        truncateText: false,
+      },
+      {
+        field: '_source',
+        name: 'Sensor Version',
+        sortable: true,
+        render: source => {
+          return <span>{source.agent.version}</span>;
+        },
+        truncateText: false,
+      },
+    ];
+
+    return (
+      <>
+        <SearchBar
+          searchItems={endpointMetadata.hits.hits}
+          defaultFields={[`_source`]}
+          updateOnChange={this.updateOnChange}
+        />
+        <EuiBasicTable items={items} columns={columns} />
+      </>
+    );
+  }
+}
+
+export const Management = ({ endpointMetadata }: { endpointMetadata: any }) => {
+  return (
+    <EuiPageBody data-test-subj="fooAppPageA">
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Endpoint Management</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle>
+              <h2>Manage your Endpoints</h2>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+        <EuiPageContentBody>
+          <EndpointList endpointMetadata={endpointMetadata} />
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+};

x-pack/plugins/endpoint/public/components/nav.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 React from 'react';
+import { BrowserRouter as Router, Route, withRouter, RouteComponentProps } from 'react-router-dom';
+
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPageSideBar,
+  EuiTitle,
+  EuiSideNav,
+} from '@elastic/eui';
+
+type NavProps = RouteComponentProps & {
+  navigateToApp: AppMountContext['core']['application']['navigateToApp'];
+};
+
+export const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
+  <EuiSideNav
+    items={[
+      {
+        name: 'Endpoint',
+        id: 'endpoint',
+        items: [
+          {
+            id: 'home',
+            name: 'Home',
+            onClick: () => history.push('/'),
+          },
+          {
+            id: 'management',
+            name: 'Management',
+            onClick: () => history.push('/management'),
+          },
+        ],
+      },
+    ]}
+  />
+));

x-pack/plugins/endpoint/public/components/search_bar.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 React, { Component } from 'react';
+
+import { EuiSearchBar } from '@elastic/eui';
+
+interface SearchBarProps {
+  searchItems: [];
+  defaultFields: string[];
+  updateOnChange: Function;
+}
+
+interface SearchBarState {
+  currentResult: {};
+}
+
+export class SearchBar extends Component<SearchBarProps, SearchBarState> {
+  private defaultOnChange = ({ query }: { query: string }) => {
+    const { searchItems, defaultFields, updateOnChange } = this.props;
+
+    const result = EuiSearchBar.Query.execute(query, searchItems, {
+      defaultFields,
+    });
+    this.setState({ currentResult: result });
+    updateOnChange({ updatedResult: result });
+  };
+
+  public render() {
+    return (
+      <EuiSearchBar
+        defaultQuery={EuiSearchBar.Query.MATCH_ALL}
+        box={{
+          placeholder: 'try _source.host.ip:"10.11.12.13"',
+          incremental: false,
+          filters: [],
+        }}
+        onChange={this.defaultOnChange}
+      />
+    );
+  }
+}

x-pack/plugins/endpoint/public/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { PluginInitializer } from 'kibana/public';
+import { EndpointPlugin, EndpointPluginSetup, EndpointPluginStart } from './plugin';
+
+export const plugin: PluginInitializer<EndpointPluginSetup, EndpointPluginStart> = () =>
+  new EndpointPlugin();

x-pack/plugins/endpoint/public/plugin.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 { Plugin, CoreSetup } from 'kibana/public';
+
+export class EndpointPlugin implements Plugin<EndpointPluginSetup, EndpointPluginStart> {
+  public setup(core: CoreSetup, deps: {}) {
+    core.application.register({
+      id: 'endpoint',
+      title: 'Endpoint',
+      async mount(context, params) {
+        const { renderApp } = await import('./application');
+        const response = await context.core.http.get('/endpoint/hosts', {
+          query: {},
+        });
+        return renderApp(context, params, response);
+      },
+    });
+  }
+
+  public start() {}
+  public stop() {}
+}
+
+export type EndpointPluginSetup = ReturnType<EndpointPlugin['setup']>;
+export type EndpointPluginStart = ReturnType<EndpointPlugin['start']>;

x-pack/plugins/endpoint/server/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { EndpointPlugin } from './plugin';
+
+export function plugin() {
+  return new EndpointPlugin();
+}