Update Landing Page UI

public/components/main/__tests__/main.test.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Main } from '../main';
+
+describe('<Main /> panel', () => {
+  test('render component', () => {
+    const { container } = render(<Main />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

public/components/main/__tests__/report_definitions_table.test.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ReportDefinitions } from '../report_definitions_table';
+
+describe('<ReportDefinitions /> panel', () => {
+  test('render component', () => {
+    const { container } = render(<ReportDefinitions />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

public/components/main/__tests__/reports_table.test.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ReportsTable } from '../reports_table';
+
+describe('<ReportsTable /> panel', () => {
+  test('render component', () => {
+    const { container } = render(<ReportsTable />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

public/components/main/main.tsx

@@ -14,7 +14,6 @@
  */
 
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -33,52 +32,16 @@ import {
   // @ts-ignore
   EuiEmptyPrompt,
 } from '@elastic/eui';
-import {
-  reports_list_columns,
-  reports_list_users,
-  reports_list_search,
-  reports_list_selection_value,
-} from './reports_table';
-import {
-  scheduled_report_columns,
-  scheduled_reports,
-} from './scheduled_reports_table';
+import { reports_list_users, report_definitions } from './test_data';
+import { ReportsTable } from './reports_table';
+import { ReportDefinitions } from './report_definitions_table';
 
 let httpClientGlobal: { post: (arg0: string, arg1: string) => Promise<any> };
 
-function fetchDownloadApi(url: string) {
-  console.log('fetch download api');
-  var data = {
-    url: url,
-  };
-  httpClientGlobal
-    .post('../api/reporting/download', JSON.stringify(data))
-    .then((resp) => {
-      console.log(resp);
-    });
-}
-
-const emptyMessageReports = (
-  <EuiEmptyPrompt
-    title={<h3>You Have No Reports</h3>}
-    titleSize="xs"
-    body="Create a report from a dashboard or template"
-    actions={<EuiButton fill>Create report</EuiButton>}
-  />
-);
-
 interface RouterHomeProps {
   httpClient?: any;
 }
 
-const emptyMessageScheduledReports = (
-  <div>
-    <h3>You have no scheduled reports</h3>
-    <p>Create a new schedule to get started</p>
-    <EuiButton fill>Create schedule</EuiButton>
-  </div>
-);
-
 const error = 'Error: Unable to load table';
 
 export class Main extends React.Component<RouterHomeProps, any> {
@@ -133,30 +96,21 @@ export class Main extends React.Component<RouterHomeProps, any> {
                 </EuiTitle>
               </EuiFlexItem>
               <EuiFlexItem component="span" grow={false}>
-                <EuiButton size="m">Delete</EuiButton>
+                <EuiButton size="m">Refresh</EuiButton>
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiHorizontalRule />
-            <EuiInMemoryTable
-              items={reports_list_users}
-              itemId="id"
-              loading={false}
-              message={emptyMessageReports}
-              columns={reports_list_columns}
-              search={reports_list_search}
+            <ReportsTable
+              getRowProps={this.getRowProps}
               pagination={this.pagination}
-              sorting={true}
-              selection={reports_list_selection_value}
-              isSelectable={true}
-              rowProps={this.getRowProps}
             />
           </EuiPageContent>
           <EuiSpacer />
           <EuiPageContent panelPaddingSize={'l'}>
             <EuiFlexGroup justifyContent="spaceEvenly">
               <EuiFlexItem>
                 <EuiTitle>
-                  <h2>Scheduled Reports ({scheduled_reports.length})</h2>
+                  <h2>Report definitions ({report_definitions.length})</h2>
                 </EuiTitle>
               </EuiFlexItem>
               <EuiFlexItem component="span" grow={false}>
@@ -177,18 +131,7 @@ export class Main extends React.Component<RouterHomeProps, any> {
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiHorizontalRule />
-            <EuiInMemoryTable
-              items={scheduled_reports}
-              itemId="id"
-              loading={false}
-              message={emptyMessageScheduledReports}
-              columns={scheduled_report_columns}
-              search={reports_list_search} // todo: change?
-              pagination={this.pagination}
-              sorting={true}
-              selection={reports_list_selection_value} // todo: change?
-              isSelectable={true}
-            />
+            <ReportDefinitions pagination={this.pagination} />
           </EuiPageContent>
         </EuiPageBody>
       </EuiPage>

public/components/main/report_definitions_table.tsx

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React from 'react';
+import {
+  EuiLink,
+  EuiInMemoryTable,
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiText,
+} from '@elastic/eui';
+import { report_definitions } from './test_data';
+
+export const scheduled_report_columns = [
+  {
+    field: 'reportName',
+    name: 'Name',
+    sortable: true,
+    truncateText: true,
+  },
+  {
+    field: 'type',
+    name: 'Type',
+    sortable: true,
+    truncateText: false,
+  },
+  {
+    field: 'owner',
+    name: 'Owner',
+    sortable: true,
+    truncateText: false,
+  },
+  {
+    field: 'source',
+    name: 'Source',
+    render: (username: string) => (
+      <EuiLink href={'#'} target="_blank">
+        {username}
+      </EuiLink>
+    ),
+  },
+  {
+    field: 'lastUpdated',
+    name: 'Last Updated',
+    truncateText: true,
+  },
+  {
+    field: 'details',
+    name: 'Details',
+    sortable: false,
+    truncateText: true,
+  },
+  {
+    field: 'status',
+    name: 'Status',
+    sortable: true,
+    truncateText: false,
+  },
+];
+
+const empty_message_report_definitions = (
+  <EuiEmptyPrompt
+    title={<h3>No report definitions to display</h3>}
+    titleSize="xs"
+    body={
+      <div>
+        <EuiText>Create a new report definition to get started</EuiText>
+        <EuiText>
+          To learn more, see{' '}
+          <EuiLink>Get started with Kibana reporting</EuiLink>
+        </EuiText>
+      </div>
+    }
+    actions={
+      <div>
+        <EuiButton
+          onClick={() => {
+            window.location.assign('opendistro-kibana-reports#/create');
+          }}
+        >
+          Create
+        </EuiButton>
+      </div>
+    }
+  />
+);
+
+const report_definitions_search = {
+  box: {
+    incremental: true,
+  },
+  filters: [],
+};
+
+export function ReportDefinitions(props) {
+  const { pagination } = props;
+  return (
+    <div>
+      <EuiInMemoryTable
+        items={report_definitions}
+        itemId="id"
+        loading={false}
+        message={empty_message_report_definitions}
+        columns={scheduled_report_columns}
+        search={report_definitions_search}
+        pagination={pagination}
+        sorting={true}
+        isSelectable={true}
+      />
+    </div>
+  );
+}