Make base query immutable (#500)

Signed-off-by: Eugene Lee <eugenesk@amazon.com>
opensearch-project · Feb 28, 2022 · 5f12db9 · 5f12db9
1 parent f14c32c
commit 5f12db9
Show file tree

Hide file tree

Showing 8 changed files with 1,798 additions and 1,179 deletions.
diff --git a/...lity/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/...lity/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
diff --git a/.../public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/.../public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
diff --git a/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx b/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx
@@ -28,6 +28,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -60,6 +63,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
 
@@ -80,6 +87,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -112,6 +122,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
 
@@ -132,6 +146,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -164,6 +181,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
     utils.getByText('Log source').click();
@@ -187,6 +208,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -219,6 +243,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
     utils.getByText('Log source').click();
@@ -242,6 +270,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -283,6 +314,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
     utils.getByText('Select services & entities to include in this application').click();
@@ -306,6 +341,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -347,6 +385,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
     utils.getByText('Select services & entities to include in this application').click();
@@ -370,6 +412,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -411,6 +456,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
     utils.getByText('Constrain your application to specific trace groups').click();
@@ -434,6 +483,9 @@ describe('Create Page', () => {
     const setToasts = jest.fn();
     const updateApp = jest.fn();
     const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -475,6 +527,10 @@ describe('Create Page', () => {
         setToasts={setToasts}
         updateApp={updateApp}
         existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
       />
     );
     utils.getByText('Constrain your application to specific trace groups').click();

diff --git a/...oards-observability/public/components/application_analytics/__tests__/log_config.test.tsx b/...oards-observability/public/components/application_analytics/__tests__/log_config.test.tsx
@@ -24,6 +24,9 @@ describe('Log Config component', () => {
     const setDescriptionWithStorage = jest.fn();
     const setQueryWithStorage = jest.fn();
     const setFiltersWithStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -52,6 +55,11 @@ describe('Log Config component', () => {
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
         setFiltersWithStorage={setFiltersWithStorage}
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+        editMode={false}
       />
     );
 
@@ -69,6 +77,9 @@ describe('Log Config component', () => {
     const setDescriptionWithStorage = jest.fn();
     const setQueryWithStorage = jest.fn();
     const setFiltersWithStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
     const dslService = ({
       http: jest.fn(),
       fetch: jest.fn(),
@@ -97,6 +108,11 @@ describe('Log Config component', () => {
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
         setFiltersWithStorage={setFiltersWithStorage}
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+        editMode={false}
       />
     );
 

diff --git a/dashboards-observability/public/components/application_analytics/app_analytics.scss b/dashboards-observability/public/components/application_analytics/app_analytics.scss
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+ .ppl-link {
+  border: unset;
+  position: absolute;
+  top: 103px;
+  right: 140px;
+  background-color: transparent;
+}
+.ppl-link-light {
+  color: #006BB4;
+}
+
+.ppl-link-dark {
+  color: #1BA9F5;
+}
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
@@ -12,6 +12,8 @@ import {
   EuiFlexItem,
   EuiBadge,
   EuiOverlayMask,
+  EuiCallOut,
+  EuiFlexGroup,
 } from '@elastic/eui';
 import DSLService from 'public/services/requests/dsl';
 import React, { useState } from 'react';
@@ -23,14 +25,16 @@ import { uiSettingsService } from '../../../../../common/utils';
 import { Autocomplete } from '../../../common/search/autocomplete';
 import { AppAnalyticsComponentDeps } from '../../home';
 import { getClearModal } from '../../helpers/modal_containers';
+import '../../app_analytics.scss';
 
 interface LogConfigProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
   setIsFlyoutVisible: any;
+  editMode: boolean;
 }
 
 export const LogConfig = (props: LogConfigProps) => {
-  const { dslService, query, setQueryWithStorage, setIsFlyoutVisible } = props;
+  const { dslService, query, setQueryWithStorage, setIsFlyoutVisible, editMode } = props;
   const [logOpen, setLogOpen] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
@@ -91,7 +95,11 @@ export const LogConfig = (props: LogConfigProps) => {
           </>
         }
         extraAction={
-          <EuiButton size="s" disabled={!logOpen || !query.length} onClick={clearAllModal}>
+          <EuiButton
+            size="s"
+            disabled={!logOpen || !query.length || editMode}
+            onClick={clearAllModal}
+          >
             Clear
           </EuiButton>
         }
@@ -100,35 +108,50 @@ export const LogConfig = (props: LogConfigProps) => {
         }}
         paddingSize="l"
       >
-        <EuiFormRow
-          label="PPL Base Query"
-          helpText="The default logs view in the application will be filtered by this query."
-        >
-          <EuiFlexItem grow={false} key="query-bar" className="query-area">
-            <Autocomplete
-              key={'autocomplete-bar'}
-              query={query}
-              tempQuery={tempQuery}
-              baseQuery=""
-              handleQueryChange={handleQueryChange}
-              handleQuerySearch={() => {}}
-              dslService={dslService}
-              getSuggestions={getFullSuggestions}
-              onItemSelect={onItemSelect}
-              tabId={'application-analytics-tab'}
-            />
-            <EuiBadge
-              className={`ppl-link ${
-                uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
-              }`}
-              color="hollow"
-              onClick={() => showFlyout()}
-              onClickAriaLabel={'pplLinkShowFlyout'}
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiFlexItem>
+            <EuiCallOut iconType={'iInCircle'} size="s" style={{ maxWidth: '900px' }}>
+              You can&apos;t change the base query after the application is created.
+            </EuiCallOut>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow
+              label="Base Query"
+              helpText="The default logs view in the application will be filtered by this query."
             >
-              PPL
-            </EuiBadge>
+              <EuiFlexItem
+                grow={false}
+                key="query-bar"
+                className="query-area"
+                style={{ minWidth: '900px' }}
+              >
+                <Autocomplete
+                  key={'autocomplete-bar'}
+                  query={query}
+                  tempQuery={tempQuery}
+                  baseQuery=""
+                  handleQueryChange={handleQueryChange}
+                  handleQuerySearch={() => {}}
+                  dslService={dslService}
+                  getSuggestions={getFullSuggestions}
+                  onItemSelect={onItemSelect}
+                  isDisabled={editMode}
+                  tabId={'application-analytics-tab'}
+                />
+                <EuiBadge
+                  className={`ppl-link ${
+                    uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
+                  }`}
+                  color="hollow"
+                  onClick={() => showFlyout()}
+                  onClickAriaLabel={'pplLinkShowFlyout'}
+                >
+                  PPL
+                </EuiBadge>
+              </EuiFlexItem>
+            </EuiFormRow>
           </EuiFlexItem>
-        </EuiFormRow>
+        </EuiFlexGroup>
       </EuiAccordion>
       {isModalVisible && modalLayout}
     </div>

diff --git a/dashboards-observability/public/components/application_analytics/components/create.tsx b/dashboards-observability/public/components/application_analytics/components/create.tsx
@@ -201,7 +201,7 @@ export const CreateApp = (props: CreateAppProps) => {
               </EuiPageContentHeaderSection>
             </EuiPageContentHeader>
             <EuiHorizontalRule />
-            <LogConfig setIsFlyoutVisible={setIsFlyoutVisible} {...props} />
+            <LogConfig editMode={editMode} setIsFlyoutVisible={setIsFlyoutVisible} {...props} />
             <EuiHorizontalRule />
             <ServiceConfig
               selectedServices={selectedServices}

diff --git a/dashboards-observability/public/components/common/search/autocomplete.tsx b/dashboards-observability/public/components/common/search/autocomplete.tsx
@@ -21,6 +21,7 @@ interface AutocompleteProps extends IQueryBarProps {
     dslService: DSLService
   ) => Promise<AutocompleteItem[]>;
   onItemSelect: any;
+  isDisabled?: boolean;
   baseQuery: string;
   tabId: string;
 }
@@ -34,6 +35,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
     dslService,
     getSuggestions,
     onItemSelect,
+    isDisabled,
     baseQuery,
     tabId,
   } = props;
@@ -120,6 +122,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
           placeholder: 'Enter PPL query',
           inputElement: null,
         })}
+        disabled={isDisabled}
       />
       {autocompleteState.isOpen && (
         <div