Feature/integration

dashboards-observability/common/constants/application_analytics.ts

@@ -15,5 +15,13 @@ export const TAB_TRACE_TITLE = 'Traces & Spans';
 export const TAB_LOG_TITLE = 'Log Events';
 export const TAB_PANEL_TITLE = 'Panel';
 export const TAB_CONFIG_TITLE = 'Configuration';
+export const TAB_INTEGRATION_ID = 'request-response';
+export const TAB_INTEGRATION_TITLE = 'Request/Response';
+export const TAB_UPSTREAM_ID = 'upstreams';
+export const TAB_UPSTREAM_TITLE = 'HTTP Upstreams';
+export const TAB_TCP_ZONES_ID = 'tcp-udp-zones';
+export const TAB_TCP_ZONES_TITLE = 'TCP/UDP Zones';
+export const TAB_TCP_UPSTREAMS_ID = 'tcp-udp-upstreams';
+export const TAB_TCP_UPSTREAMS_TITLE = 'TCP/UDP Upstreams';
 
 export const APP_ANALYTICS_API_PREFIX = '/api/observability/application';

dashboards-observability/common/constants/shared.ts

@@ -182,3 +182,35 @@ export const DEFAULT_CHART_STYLES: DefaultChartStylesProps = {
 };
 
 export const FILLOPACITY_DIV_FACTOR = 200;
+
+export const INTEGRATION = 'integration';
+
+export const QUERY_VIS_TYPES = [
+  {
+    type: visChartTypes.Line,
+    query:
+      'source = nginx_2 | stats avg( upstream_response_time )as Response_Time , count() as response_count by span( @timestamp ,1h)',
+  },
+  {
+    type: visChartTypes.Line,
+    query: 'source = nginx_2 | stats max(bytes_sent), avg(bytes_sent) by remote_addr',
+  },
+  {
+    type: visChartTypes.Bar,
+    query: 'source = nginx_2 | stats count() by request_method',
+  },
+  {
+    type: visChartTypes.Bar,
+    query:
+      'source = nginx_2 |  where status > 400 or status < 599 | stats count() by span( @timestamp , 1d)',
+  },
+  {
+    type: visChartTypes.Line,
+    query: 'source = nginx_2 |  stats avg( bytes_sent ) by span( @timestamp ,1d)',
+  },
+  {
+    type: visChartTypes.Bar,
+    query:
+      'source = nginx_2 | stats avg( upstream_response_time ) as response_time by span( @timestamp , 1h)',
+  },
+];

dashboards-observability/common/types/application_analytics.ts

@@ -28,6 +28,7 @@ export interface ApplicationRequestType {
   traceGroups: string[];
   panelId: string;
   availabilityVisId: string;
+  // appType: string | null; TODO Uncomment this line when api if fixed to accept this field
 }
 
 export interface AvailabilityType {

dashboards-observability/common/types/explorer.ts

@@ -106,6 +106,7 @@ export interface ILogExplorerProps {
 }
 
 export interface IExplorerProps {
+  appType?: string;
   pplService: PPLService;
   dslService: DSLService;
   tabId: string;

dashboards-observability/public/components/app.tsx

@@ -9,9 +9,10 @@ import { Provider } from 'react-redux';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 import { QueryManager } from 'common/query_manager';
 import { CoreStart } from '../../../../src/core/public';
-import { observabilityID, observabilityTitle } from '../../common/constants/shared';
+import { INTEGRATION, observabilityID, observabilityTitle } from '../../common/constants/shared';
 import store from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
+// import { Home as ApplicationAnalyticsHome } from './integrations/plugins/application_analytics/home';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
 import { Home as CustomPanelsHome } from './custom_panels/home';
 import { EventAnalytics } from './event_analytics';
@@ -73,6 +74,26 @@ export const App = ({
                       dslService={dslService}
                       savedObjects={savedObjects}
                       timestampUtils={timestampUtils}
+                      appType={'application'}
+                    />
+                  );
+                }}
+              />
+              <Route
+                path={'/integrations/plugins'}
+                render={(props) => {
+                  return (
+                    <ApplicationAnalyticsHome
+                      {...props}
+                      chrome={chrome}
+                      http={http}
+                      notifications={notifications}
+                      parentBreadcrumbs={[parentBreadcrumb]}
+                      pplService={pplService}
+                      dslService={dslService}
+                      savedObjects={savedObjects}
+                      timestampUtils={timestampUtils}
+                      appType={INTEGRATION}
                     />
                   );
                 }}

dashboards-observability/public/components/application_analytics/components/app_table.tsx

@@ -37,12 +37,13 @@ import moment from 'moment';
 import { DeleteModal } from '../../common/helpers/delete_modal';
 import { AppAnalyticsComponentDeps } from '../home';
 import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
-import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
+import { INTEGRATION, pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
 import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics';
 
 interface AppTableProps extends AppAnalyticsComponentDeps {
   loading: boolean;
   applications: ApplicationType[];
+  appType: string;
   fetchApplications: () => void;
   renameApplication: (newAppName: string, appId: string) => void;
   deleteApplication: (appList: string[], panelIdList: string[], toastMessage?: string) => void;
@@ -55,6 +56,7 @@ export function AppTable(props: AppTableProps) {
     chrome,
     applications,
     parentBreadcrumbs,
+    appType,
     fetchApplications,
     renameApplication,
     deleteApplication,
@@ -66,16 +68,23 @@ export function AppTable(props: AppTableProps) {
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
   const [selectedApplications, setSelectedApplications] = useState<ApplicationType[]>([]);
-  const createButtonText = 'Create application';
+  const createButtonText = appType === INTEGRATION ? 'Add Integration' : 'Create application';
+  const breadCrumbs =
+    appType === INTEGRATION
+      ? {
+          text: 'Integrations',
+          href: '#/integrations/plugins',
+        }
+      : {
+          text: 'Application analytics',
+          href: '#/application_analytics',
+        };
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([...parentBreadcrumbs, breadCrumbs]);
+  }, [appType]);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([
-      ...parentBreadcrumbs,
-      {
-        text: 'Application analytics',
-        href: '#/application_analytics',
-      },
-    ]);
     clear();
     fetchApplications();
   }, []);
@@ -209,17 +218,15 @@ export function AppTable(props: AppTableProps) {
     }
   };
 
+  const appLink = appType === INTEGRATION ? '#/integrations/plugins/' : '#/application_analytics/';
   const tableColumns = [
     {
       field: 'name',
       name: 'Name',
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink
-          data-test-subj={`${record.name}ApplicationLink`}
-          href={`#/application_analytics/${record.id}`}
-        >
+        <EuiLink data-test-subj={`${record.name}ApplicationLink`} href={`${appLink}${record.id}`}>
           {_.truncate(record.name, { length: 100 })}
         </EuiLink>
       ),
@@ -251,25 +258,31 @@ export function AppTable(props: AppTableProps) {
     },
   ] as Array<EuiTableFieldDataColumnType<ApplicationType>>;
 
+  const allApps =
+    appType === INTEGRATION ? '#/integrations/plugins/all_apps' : '#/application_analytics/create';
+
   return (
     <div style={pageStyles}>
       <EuiPage>
         <EuiPageBody component="div">
           <EuiPageHeader>
             <EuiPageHeaderSection>
               <EuiTitle size="l">
-                <h1>Overview</h1>
+                {appType === INTEGRATION ? <h1>Integrations</h1> : <h1>Overview</h1>}
               </EuiTitle>
             </EuiPageHeaderSection>
           </EuiPageHeader>
           <EuiPageContent id="applicationArea">
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
-                <EuiTitle data-test-subj="applicationHomePageTitle" size="s">
-                  <h3>
-                    Applications<span className="panel-header-count"> ({applications.length})</span>
-                  </h3>
-                </EuiTitle>
+                {appType !== INTEGRATION && (
+                  <EuiTitle data-test-subj="applicationHomePageTitle" size="s">
+                    <h3>
+                      Applications
+                      <span className="panel-header-count"> ({applications.length})</span>
+                    </h3>
+                  </EuiTitle>
+                )}
               </EuiPageContentHeaderSection>
               <EuiPageContentHeaderSection>
                 <EuiFlexGroup gutterSize="s">
@@ -284,7 +297,7 @@ export function AppTable(props: AppTableProps) {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/application_analytics/create">
+                    <EuiButton fill href={allApps}>
                       {createButtonText}
                     </EuiButton>
                   </EuiFlexItem>
@@ -324,7 +337,7 @@ export function AppTable(props: AppTableProps) {
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton fullWidth={false} href={`#/application_analytics/create`}>
+                    <EuiButton fullWidth={false} href={allApps}>
                       {createButtonText}
                     </EuiButton>
                   </EuiFlexItem>