Connected Application Analytics (opensearch-project#379)

* 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]> * Rename trace-analytics to observability (opensearch-project#341) Signed-off-by: Joshua Li <[email protected]> * Event analytics unit tests (opensearch-project#342) * tests Signed-off-by: Eric Wei <[email protected]> * updated some snapshots Signed-off-by: Eric Wei <[email protected]> * resolved few failing tests Signed-off-by: Eric Wei <[email protected]> * few modifications Signed-off-by: Eric Wei <[email protected]> * Update service map parsing results for testing (opensearch-project#345) Signed-off-by: Joshua Li <[email protected]> * bumping version to 1.2.2 (opensearch-project#346) * bumping version to 1.2.2 Signed-off-by: Shenoy Pratik <[email protected]> * update PR in release notes Signed-off-by: Shenoy Pratik <[email protected]> * updating readme and badges (opensearch-project#352) Signed-off-by: Shenoy Pratik <[email protected]> * 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]> * Fix merge conflict Signed-off-by: Eugene Lee <[email protected]> * Update Workflow (opensearch-project#360) * updated snapshot in workflow to 1.2.3 Signed-off-by: Shenoy Pratik <[email protected]> * replaced variable with 1.2.3-snapshot Signed-off-by: Shenoy Pratik <[email protected]> * revert string to variable Signed-off-by: Shenoy Pratik <[email protected]> * 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]> * 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]> * Fix merge conflict Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#321: Add clear modal for services (opensearch-project#355) Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#322: Add clear modal for traces (opensearch-project#356) Signed-off-by: Eugene Lee <[email protected]> * Adds tests for application creation (opensearch-project#357) * Remove unnecessary memoization Signed-off-by: Eugene Lee <[email protected]> * Add tests for create page Signed-off-by: Eugene Lee <[email protected]> * Remove conflict Signed-off-by: Eugene Lee <[email protected]> * Add create route for app analytics Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#325: Return to app table on cancel Signed-off-by: Eugene Lee <[email protected]> * Remove unnecessary import Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#340: Apps selectable, actions correctly disabled Signed-off-by: Eugene Lee <[email protected]> * Fix mapping update Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#327: Rename application Signed-off-by: Eugene Lee <[email protected]> * opensearch-project#376: Fetch all applications for home page Signed-off-by: Eugene Lee <[email protected]> * Add exception catch Signed-off-by: Eugene Lee <[email protected]> * More specific exception : Signed-off-by: Eugene Lee <[email protected]> * Log error instead of warn Signed-off-by: Eugene Lee <[email protected]> * Remove generic exception Signed-off-by: Eugene Lee <[email protected]> * Debug assert Signed-off-by: Eugene Lee <[email protected]> * Fix type Signed-off-by: Eugene Lee <[email protected]> * Fix Lint Signed-off-by: Eugene Lee <[email protected]> * Address comments Signed-off-by: Eugene Lee <[email protected]> * Move types to type file Signed-off-by: Eugene Lee <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]> Co-authored-by: Joshua Li <[email protected]> Co-authored-by: Eric Wei <[email protected]>
eugenesk24 · Feb 14, 2022 · cfb08eb · cfb08eb
1 parent 5de87aa
commit cfb08eb
Show file tree

Hide file tree

Showing 19 changed files with 494 additions and 215 deletions.
diff --git a/dashboards-observability/common/constants/application_analytics.ts b/dashboards-observability/common/constants/application_analytics.ts
@@ -14,6 +14,4 @@ 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;
-}
+export const APP_ANALYTICS_API_PREFIX = '/api/observability/application'
diff --git a/dashboards-observability/common/types/app_analytics.ts b/dashboards-observability/common/types/app_analytics.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface optionType {
+  label: string;
+}
+
+export type ApplicationListType = {
+  name: string;
+  id: string;
+  dateCreated: string;
+  dateModified: string;
+};
+
+export type ApplicationType = {
+  name: string;
+  description: string;
+  query: string;
+  selectedServices: Array<string>;
+  selectedTraces: Array<string>;
+}
diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx
@@ -12,6 +12,7 @@ import {
     EuiHorizontalRule,
     EuiInMemoryTable,
     EuiLink,
+    EuiOverlayMask,
     EuiPage,
     EuiPageBody,
     EuiPageContent,
@@ -27,28 +28,64 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { ReactElement, useEffect, useState } from 'react';
-import { AppAnalyticsComponentDeps, ApplicationType } from '../home';
+import { AppAnalyticsComponentDeps } from '../home';
+import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
 import { pageStyles } from '../../../../common/constants/shared';
+import { ApplicationListType } from '../../../../common/types/app_analytics';
 
 interface AppTableProps extends AppAnalyticsComponentDeps {
     loading: boolean;
-    applications: Array<ApplicationType>;
+    applications: Array<ApplicationListType>;
+    fetchApplications: () => void;
+    renameApplication: (newAppName: string, appId: string) => void;
   };
 
 export function AppTable(props: AppTableProps) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
-  const { applications, parentBreadcrumb } = props;
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask></EuiOverlayMask>);
+  const [selectedApplications, setSelectedApplications] = useState<ApplicationListType[]>([]);
+  const { chrome, applications, parentBreadcrumb, fetchApplications, renameApplication } = props;
 
   useEffect(() => {
-    props.chrome.setBreadcrumbs(
+    chrome.setBreadcrumbs(
       [
       parentBreadcrumb,
       {
         text: 'Application analytics',
         href: '#/application_analytics',
       }
     ]);
-  })
+    fetchApplications();
+  }, []);
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onRename = async (newApplicationName: string) => {
+    renameApplication(newApplicationName, selectedApplications[0].id);
+    closeModal();
+  };
+
+  const renameApp = () => {
+    setModalLayout(
+      getCustomModal(
+        onRename,
+        closeModal,
+        'Name',
+        'Rename Application',
+        'Cancel',
+        'Rename',
+        selectedApplications[0].name
+      )
+    );
+    showModal();
+  };
 
   const popoverButton = (
     <EuiButton
@@ -63,25 +100,28 @@ export function AppTable(props: AppTableProps) {
   const popoverItems: ReactElement[] = [
     <EuiContextMenuItem
       key="rename"
-      disabled={applications.length === 0}
+      disabled={applications.length === 0 || selectedApplications.length !== 1}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        renameApp();
+      }}
     >
       Rename
     </EuiContextMenuItem>,
     <EuiContextMenuItem
       key="duplicate"
-      disabled={applications.length === 0}
+      disabled={applications.length === 0 || selectedApplications.length !== 1}
     >
       Duplicate
     </EuiContextMenuItem>,
     <EuiContextMenuItem
       key="delete"
-      disabled={applications.length === 0}
+      disabled={applications.length === 0 || selectedApplications.length === 0}
     >
       Delete
     </EuiContextMenuItem>,
     <EuiContextMenuItem
       key="addSample"
-      disabled={applications.length === 0}
     >
       Add sample application
     </EuiContextMenuItem>,
@@ -94,36 +134,10 @@ export function AppTable(props: AppTableProps) {
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink href={`#/application_analytics/id`}>{_.truncate(value, { length: 100 })}</EuiLink>
+        <EuiLink href={`#/application_analytics/${record.id}`}>{_.truncate(record.name, { 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;
-    }>
-  >;
+    }
+  ] as Array<EuiTableFieldDataColumnType<ApplicationListType>>;
 
   return (
     <div style={pageStyles}>
@@ -190,6 +204,9 @@ export function AppTable(props: AppTableProps) {
                 }}
                 allowNeutralSort={false}
                 isSelectable={true}
+                selection={{
+                  onSelectionChange: (items) => setSelectedApplications(items),
+                }}
               />
             ) : (
               <>
@@ -216,6 +233,7 @@ export function AppTable(props: AppTableProps) {
           </EuiPageContent>
         </EuiPageBody>
       </EuiPage>
+      {isModalVisible && modalLayout}
     </div>
   );
 }
diff --git a/...ility/public/components/application_analytics/components/config_components/log_config.tsx b/...ility/public/components/application_analytics/components/config_components/log_config.tsx
@@ -9,7 +9,7 @@ import { Autocomplete } from "../../../common/search/autocomplete";
 import DSLService from "public/services/requests/dsl";
 import React, { useState } from "react";
 import { AppAnalyticsComponentDeps } from "../../home";
-import{ getClearModal } from "../helpers/modal_containers";
+import{ getClearModal } from "../../helpers/modal_containers";
 
 interface LogConfigProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;

diff --git a/...y/public/components/application_analytics/components/config_components/service_config.tsx b/...y/public/components/application_analytics/components/config_components/service_config.tsx
@@ -12,8 +12,8 @@ import DSLService from "public/services/requests/dsl";
 import React, { useState } from "react";
 import { useEffect } from "react";
 import { AppAnalyticsComponentDeps } from "../../home";
-import { optionType } from "common/constants/application_analytics";
-import { getClearModal } from "../helpers/modal_containers";
+import { optionType } from "../../../../../common/types/app_analytics";
+import { getClearModal } from "../../helpers/modal_containers";
 
 interface ServiceConfigProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;

diff --git a/...ity/public/components/application_analytics/components/config_components/trace_config.tsx b/...ity/public/components/application_analytics/components/config_components/trace_config.tsx
@@ -5,15 +5,15 @@
 
 import dateMath from '@elastic/datemath';
 import { EuiAccordion, EuiBadge, EuiButton, EuiComboBox, EuiFormRow, EuiOverlayMask, EuiSpacer, EuiText } from "@elastic/eui";
-import { optionType } from "common/constants/application_analytics";
+import { optionType } from "../../../../../common/types/app_analytics";
 import { filtersToDsl } from "../../../trace_analytics/components/common/helper_functions";
 import { handleDashboardRequest } from "../../../trace_analytics/requests/dashboard_request_handler";
 import DSLService from "public/services/requests/dsl";
 import React, { useEffect, useState } from "react";
 import { AppAnalyticsComponentDeps } from "../../home";
 import { DashboardTable } from '../../../trace_analytics/components/dashboard/dashboard_table';
 import { FilterType } from 'public/components/trace_analytics/components/common/filters/filters';
-import { getClearModal } from '../helpers/modal_containers';
+import { getClearModal } from '../../helpers/modal_containers';
 
 interface TraceConfigProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;

diff --git a/dashboards-observability/public/components/application_analytics/components/create.tsx b/dashboards-observability/public/components/application_analytics/components/create.tsx
@@ -30,14 +30,15 @@ import { TraceConfig } from './config_components/trace_config';
 import { ServiceConfig } from "./config_components/service_config";
 import { LogConfig } from "./config_components/log_config";
 import { PPLReferenceFlyout } from "../../../components/common/helpers";
-import { optionType } from "common/constants/application_analytics";
+import { optionType } from "../../../../common/types/app_analytics";
 
 interface CreateAppProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
+  createApp: (name: string, description: string, query: string, selectedServices: Array<optionType>, selectedTraces: Array<optionType>) => void;
 };
 
 export const CreateApp = (props: CreateAppProps) => {
-  const { parentBreadcrumb, chrome, query } = props;
+  const { parentBreadcrumb, chrome, query, createApp } = props;
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [selectedServices, setSelectedServices] = useState<Array<optionType>>([]);
   const [selectedTraces, setSelectedTraces] = useState<Array<optionType>>([]);
@@ -95,6 +96,14 @@ export const CreateApp = (props: CreateAppProps) => {
     }
   };
 
+  const onCreate = () => {
+    createApp(state.name, state.description, query, selectedServices, selectedTraces)
+  }
+
+  const onCancel = () => {
+    window.location.assign(`${parentBreadcrumb.href}application_analytics`);
+  }
+
   return (
     <div style={{maxWidth: '1130px'}}>
     <EuiPage>
@@ -151,13 +160,13 @@ export const CreateApp = (props: CreateAppProps) => {
         <EuiSpacer/>
         <EuiFlexGroup>
         <EuiFlexItem grow={false}>
-          <EuiButton>
+          <EuiButton onClick={onCancel}>
           Cancel
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiToolTip position="top" content={missingField()}>
-          <EuiButton isDisabled={isDisabled} fill>
+          <EuiButton isDisabled={isDisabled} onClick={onCreate} fill>
           Create
           </EuiButton>
           </EuiToolTip>

diff --git a/...s/components/helpers/modal_containers.tsx → ...on_analytics/helpers/modal_containers.tsx b/...s/components/helpers/modal_containers.tsx → ...on_analytics/helpers/modal_containers.tsx
@@ -8,6 +8,7 @@ import {
   EuiOverlayMask,
   EuiConfirmModal,
 } from '@elastic/eui';
+import { CustomInputModal } from '../../../../public/components/custom_panels/helpers/custom_input_modal';
 
 /* The file contains helper functions for modal layouts
  * getDeleteModal - returns a confirm-modal with clear option
@@ -37,4 +38,4 @@ export const getClearModal = (
       </EuiConfirmModal>
     </EuiOverlayMask>
   );
-};
+};
diff --git a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Name validation 0>Name<=50
+export const isNameValid = (name: string) => {
+  let toast: string[]  = [];
+  if (name.length >= 50) {
+    toast.push('Name must be less than 50 characters');
+  }
+  if (name.length === 0) {
+    toast.push('Name must be at least 1 character');
+  }
+  return toast;
+};