abasatwar · vkushwah · Aug 1, 2022 · Aug 3, 2022 · Aug 4, 2022 · Aug 8, 2022
diff --git a/dashboards-observability/common/constants/application_analytics.ts b/dashboards-observability/common/constants/application_analytics.ts
@@ -13,7 +13,15 @@ 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_PANEL_TITLE = 'Panel';
+export const TAB_PANEL_TITLE = 'Panel(demo)';
 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';
diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts
@@ -72,7 +72,6 @@ export const pageStyles: CSS.Properties = {
   maxWidth: '1130px',
 };
 
-
 export enum visChartTypes {
   Bar = 'bar',
   HorizontalBar = 'horizontal_bar',
@@ -82,13 +81,13 @@ export enum visChartTypes {
   Text = 'text',
   Gauge = 'gauge',
   Histogram = 'histogram',
-  TreeMap = 'tree_map'
+  TreeMap = 'tree_map',
 }
 
 export interface ValueOptionsAxes {
-  xaxis ?: IField[];
-  yaxis ?: IField[];
-  zaxis ?: IField[];
+  xaxis?: IField[];
+  yaxis?: IField[];
+  zaxis?: IField[];
   childField?: IField[];
   valueField?: IField[];
   series?: IField[];
@@ -97,67 +96,75 @@ export interface ValueOptionsAxes {
 
 export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double'];
 
-export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap];
+export const ENABLED_VIS_TYPES = [
+  visChartTypes.Bar,
+  visChartTypes.HorizontalBar,
+  visChartTypes.Line,
+  visChartTypes.Pie,
+  visChartTypes.HeatMap,
+  visChartTypes.Text,
+  visChartTypes.TreeMap,
+];
 
 //Live tail constants
 export const LIVE_OPTIONS = [
   {
-    label:'5s',
+    label: '5s',
     startTime: 'now-5s',
     delayTime: 5000,
   },
   {
-    label:'10s',
+    label: '10s',
     startTime: 'now-10s',
     delayTime: 10000,
   },
   {
-    label:'30s',
+    label: '30s',
     startTime: 'now-30s',
     delayTime: 30000,
   },
   {
-    label:'1m',
+    label: '1m',
     startTime: 'now-1m',
     delayTime: 60000,
   },
   {
-    label:'5m',
+    label: '5m',
     startTime: 'now-5m',
     delayTime: 60000 * 5,
   },
   {
-    label:'15m',
+    label: '15m',
     startTime: 'now-15m',
     delayTime: 60000 * 15,
   },
   {
-    label:'30m',
+    label: '30m',
     startTime: 'now-30m',
     delayTime: 60000 * 30,
   },
   {
-    label:'1h',
+    label: '1h',
     startTime: 'now-1h',
     delayTime: 60000 * 60,
   },
   {
-    label:'2h',
+    label: '2h',
     startTime: 'now-2h',
     delayTime: 60000 * 120,
   },
 ];
 
-export const LIVE_END_TIME ='now';
+export const LIVE_END_TIME = 'now';
 export interface DefaultChartStylesProps {
-  DefaultMode: string,
-  Interpolation: string,
-  LineWidth: number,
-  FillOpacity: number,
-  MarkerSize: number,
-  ShowLegend: string,
-  LegendPosition: string
-};
+  DefaultMode: string;
+  Interpolation: string;
+  LineWidth: number;
+  FillOpacity: number;
+  MarkerSize: number;
+  ShowLegend: string;
+  LegendPosition: string;
+}
 
 export const DefaultChartStyles: DefaultChartStylesProps = {
   DefaultMode: 'lines',
@@ -166,7 +173,39 @@ export const DefaultChartStyles: DefaultChartStylesProps = {
   FillOpacity: 40,
   MarkerSize: 5,
   ShowLegend: 'show',
-  LegendPosition: 'v'
-}
+  LegendPosition: 'v',
+};
 
-export const FILLOPACITY_DIV_FACTOR = 200; 
+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)',
+  },
+];
diff --git a/dashboards-observability/common/types/application_analytics.ts b/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 {

diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -86,6 +86,7 @@ export interface ILogExplorerProps {
 }
 
 export interface IExplorerProps {
+  appType?: string;
   pplService: PPLService;
   dslService: DSLService;
   tabId: string;

diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx
@@ -8,9 +8,10 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 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';
@@ -70,6 +71,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}
                     />
                   );
                 }}

diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/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>