Application Analytics (opensearch-project#299)

* Add database schema for application Signed-off-by: Eugene Lee <[email protected]> * Finished front end for Application overview Signed-off-by: Eugene Lee <[email protected]> * Finished application detail page tabs Signed-off-by: Eugene Lee <[email protected]> * WIP: Overview Page Signed-off-by: Eugene Lee <[email protected]> * Rough sketch of App Analytics UI Signed-off-by: Eugene Lee <[email protected]> * Create dummy page Signed-off-by: Eugene Lee <[email protected]> * Create app complete. Stabilizing dashboard component. Signed-off-by: Eugene Lee <[email protected]> * Update to 1.2 Observability Signed-off-by: Eugene Lee <[email protected]> * notebooks internal error Signed-off-by: Eugene Lee <[email protected]> * Address comments on PR: copyright headers, indentation, unnecessary render props Signed-off-by: Eugene Lee <[email protected]> * Set max width of app and event Signed-off-by: Eugene Lee <[email protected]> * Remove optional after description Signed-off-by: Eugene Lee <[email protected]> * Change to singular Signed-off-by: Eugene Lee <[email protected]> * Remove count badge for log source Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#290: Change form row label to ppl base query Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#291: Change description and help text for log source Signed-off-by: Eugene Lee <[email protected]> * Pass down proper props Signed-off-by: Eugene Lee <[email protected]> * Resolve gradle error and module not found error Signed-off-by: Eugene Lee <[email protected]> * Resolve kotlin errors Signed-off-by: Eugene Lee <[email protected]> * Fix parsers Signed-off-by: Eugene Lee <[email protected]> * Add praseItemList Signed-off-by: Eugene Lee <[email protected]> * Camelcase fields Signed-off-by: Eugene Lee <[email protected]> * Remove whitespace, add copyright Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#292: Add autocomplete to Log Source accordion Signed-off-by: Eugene Lee <[email protected]> * Lexicographic kotlin import Signed-off-by: Eugene Lee <[email protected]> * Add newline at end of files Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#293: Add service map to create page Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#304: Activate Clear All button for services Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#305: Add button to clear base query Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#295: Add eui combo box for trace groups Signed-off-by: Eugene Lee <[email protected]> * Separate out configuration renders Signed-off-by: Eugene Lee <[email protected]> * debug adding filters traces Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#296: Add traces table to config Signed-off-by: Eugene Lee <[email protected]> * Change from tsx to ts Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#309: Add page props and add app specific filters Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#308: Add button to clear trace groups Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#311: Allow services and traces to be selected Signed-off-by: Eugene Lee <[email protected]> * Remove link to traces on table Signed-off-by: Eugene Lee <[email protected]> * Disable clear all if nothing selected Signed-off-by: Eugene Lee <[email protected]> * disable clear all when no log source Signed-off-by: Eugene Lee <[email protected]> * Remove comment, add style to constant, temporarily remove availability Signed-off-by: Eugene Lee <[email protected]> * Address PR comments Signed-off-by: Eugene Lee <[email protected]> * Revert type assignment Signed-off-by: Eugene Lee <[email protected]> * Update tests, builds and doc (opensearch-project#318) * rebased with bwc tests Signed-off-by: Shenoy Pratik <[email protected]> * updated bwc tests Signed-off-by: Shenoy Pratik <[email protected]> * added release notes Signed-off-by: Shenoy Pratik <[email protected]> * Fix errors and address comments Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#319: Disable create until required fields are filled out Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#329: Add missing field tool tip Signed-off-by: Eugene Lee <[email protected]> * Remove unnecessary imports Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#320: Add clear modal for friction Signed-off-by: Eugene Lee <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]>
eugenesk24 · Jan 21, 2022 · ba23dcc · ba23dcc
1 parent b0a1264
commit ba23dcc
Show file tree

Hide file tree

Showing 43 changed files with 2,174 additions and 355 deletions.
diff --git a/dashboards-observability/common/constants/application_analytics.ts b/dashboards-observability/common/constants/application_analytics.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const TAB_OVERVIEW_ID_TXT_PFX = 'app-analytics-overview-';
+export const TAB_SERVICE_ID_TXT_PFX = 'app-analytics-service-';
+export const TAB_TRACE_ID_TXT_PFX = 'app-analytics-trace-';
+export const TAB_LOG_ID_TXT_PFX = 'app-analytics-log-';
+export const TAB_CONFIG_ID_TXT_PFX = 'app-analytics-config-';
+export const TAB_OVERVIEW_TITLE = 'Overview';
+export const TAB_SERVICE_TITLE = 'Services';
+export const TAB_TRACE_TITLE = 'Traces & Spans';
+export const TAB_LOG_TITLE = 'Log Events';
+export const TAB_CONFIG_TITLE = 'Configuration';
+
+export interface optionType {
+  label: string;
+}
diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import CSS from 'csstype';
+
 // Client route
 export const PPL_BASE = '/api/ppl';
 export const PPL_SEARCH = '/search';
@@ -59,3 +61,9 @@ export const PLOTLY_COLOR = [
 ];
 
 export const LONG_CHART_COLOR = PLOTLY_COLOR[1];
+
+export const pageStyles: CSS.Properties = {
+  float: 'left',
+  width: '100%',
+  maxWidth: '1130px',
+};
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -14,7 +14,7 @@ import {
   SELECTED_TIMESTAMP,
   SELECTED_DATE_RANGE
  } from '../constants/explorer';
- import { HttpStart, NotificationsStart } from '../../../../src/core/public';
+ import { CoreStart, HttpStart, NotificationsStart } from '../../../../src/core/public';
  import SavedObjects from '../../public/services/saved_objects/event_analytics/saved_objects';
  import TimestampUtils from '../../public/services/timestamp/timestamp';
  import PPLService from '../../public/services/requests/ppl';
@@ -98,4 +98,6 @@ export interface IExplorerProps {
     text?: React.ReactChild | undefined,
     side?: string | undefined
   ) => void;
-}
+  http: CoreStart['http'];
+  tabCreatedTypes?: any;
+}
diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx
@@ -11,6 +11,7 @@ import { CoreStart } from '../../../../src/core/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import store from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
+import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
 import { Home as CustomPanelsHome } from './custom_panels/home';
 import { EventAnalytics } from './explorer/event_analytics';
 import { Main as NotebooksHome } from './notebooks/components/main';
@@ -50,6 +51,24 @@ export const App = ({
         <I18nProvider>
           <>
             <Switch>
+              <Route
+                path={'/application_analytics'}
+                render={(props) => {
+                  return (
+                    <ApplicationAnalyticsHome
+                    {...props}
+                    chrome={chrome}
+                    http={http}
+                    notifications={notifications}
+                    parentBreadcrumb={parentBreadcrumb}
+                    pplService={pplService}
+                    dslService={dslService}
+                    savedObjects={savedObjects}
+                    timestampUtils={timestampUtils}
+                  />
+                  )
+                }}
+              />
               <Route
                 path="/notebooks"
                 render={(props) => (
@@ -109,7 +128,7 @@ export const App = ({
                     />
                   );
                 }}
-              />
+              />  
             </Switch>
           </>
         </I18nProvider>

diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx
@@ -0,0 +1,221 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+    EuiButton,
+    EuiContextMenuItem,
+    EuiContextMenuPanel,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiHorizontalRule,
+    EuiInMemoryTable,
+    EuiLink,
+    EuiPage,
+    EuiPageBody,
+    EuiPageContent,
+    EuiPageContentHeader,
+    EuiPageContentHeaderSection,
+    EuiPageHeader,
+    EuiPageHeaderSection,
+    EuiPopover,
+    EuiSpacer,
+    EuiTableFieldDataColumnType,
+    EuiText,
+    EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { ReactElement, useEffect, useState } from 'react';
+import { AppAnalyticsComponentDeps, ApplicationType } from '../home';
+import { pageStyles } from '../../../../common/constants/shared';
+
+interface AppTableProps extends AppAnalyticsComponentDeps {
+    loading: boolean;
+    applications: Array<ApplicationType>;
+  };
+
+export function AppTable(props: AppTableProps) {
+  const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
+  const { applications, parentBreadcrumb } = props;
+
+  useEffect(() => {
+    props.chrome.setBreadcrumbs(
+      [
+      parentBreadcrumb,
+      {
+        text: 'Application analytics',
+        href: '#/application_analytics',
+      }
+    ]);
+  })
+
+  const popoverButton = (
+    <EuiButton
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
+    >
+      Actions
+    </EuiButton>
+  );
+
+  const popoverItems: ReactElement[] = [
+    <EuiContextMenuItem
+      key="rename"
+      disabled={applications.length === 0}
+    >
+      Rename
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="duplicate"
+      disabled={applications.length === 0}
+    >
+      Duplicate
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="delete"
+      disabled={applications.length === 0}
+    >
+      Delete
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="addSample"
+      disabled={applications.length === 0}
+    >
+      Add sample application
+    </EuiContextMenuItem>,
+  ];
+
+  const tableColumns = [
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink href={`#/application_analytics/id`}>{_.truncate(value, { length: 100 })}</EuiLink>
+      ),
+    },
+    {
+      field: 'composition',
+      name: 'Composition',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'currentAvailability',
+      name: 'Current Availability',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+        field: 'availabilityMetrics',
+        name: 'Availability Metrics',
+        sortable: true,
+        truncateText: true,
+      },
+  ] as Array<
+    EuiTableFieldDataColumnType<{
+      name: string;
+      id: string;
+      composition: string;
+      currentAvailability: string;
+      availabilityMetrics: string;
+    }>
+  >;
+
+  return (
+    <div style={pageStyles}>
+      <EuiPage>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle size="l">
+                <h1>Overview</h1>
+              </EuiTitle>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiPageContent id="applicationArea">
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Applications<span className="panel-header-count"> ({applications.length})</span>
+                  </h3>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem>
+                    <EuiPopover
+                      panelPaddingSize="none"
+                      button={popoverButton}
+                      isOpen={isActionsPopoverOpen}
+                      closePopover={() => setIsActionsPopoverOpen(false)}
+                    >
+                      <EuiContextMenuPanel items={popoverItems} />
+                    </EuiPopover>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiButton
+                      fill
+                      iconSide="left"
+                      iconType="heart"
+                      href={`#/application_analytics/create`}
+                      >
+                      Create application
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule />
+            {applications.length > 0 ? (
+              <EuiInMemoryTable
+                loading={props.loading}
+                items={applications}
+                itemId="id"
+                columns={tableColumns}
+                tableLayout="auto"
+                pagination={{
+                  initialPageSize: 10,
+                  pageSizeOptions: [8, 10, 13],
+                }}
+                sorting={{
+                  sort: {
+                    field: 'dateModified',
+                    direction: 'desc',
+                  },
+                }}
+                allowNeutralSort={false}
+                isSelectable={true}
+              />
+            ) : (
+              <>
+                <EuiSpacer size="xxl" />
+                <EuiText textAlign="center">
+                  <h2>No applications</h2>
+                </EuiText>
+                <EuiSpacer size="m" />
+                <EuiFlexGroup justifyContent="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton fullWidth={false}>
+                      Create application
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton fullWidth={false}>
+                      Add sample applications
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                <EuiSpacer size="xxl" />
+              </>
+            )}
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </div>
+  );
+}