add info callout for s3 datasources (#1575)

* add callout for s3 datasources Signed-off-by: Paul Sebastian <[email protected]> * fix linting Signed-off-by: Paul Sebastian <[email protected]> --------- Signed-off-by: Paul Sebastian <[email protected]>
opensearch-project · Mar 19, 2024 · a0e7e36 · a0e7e36
1 parent 73899a2
commit a0e7e36
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 11 deletions.
diff --git a/public/components/event_analytics/explorer/log_explorer.scss b/public/components/event_analytics/explorer/log_explorer.scss
@@ -32,4 +32,8 @@
 
 .search-area {
   position: relative;
+}
+
+pre.euiCodeBlock__pre.euiCodeBlock__pre--whiteSpacePreWrap {
+  margin-bottom: 0;
 }
diff --git a/public/components/event_analytics/explorer/no_results.tsx b/public/components/event_analytics/explorer/no_results.tsx
@@ -5,6 +5,7 @@
 
 import {
   EuiCallOut,
+  EuiCodeBlock,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -19,12 +20,18 @@ import { useSelector } from 'react-redux';
 import { coreRefs } from '../../../framework/core_refs';
 import { selectQueryAssistantSummarization } from '../redux/slices/query_assistant_summarization_slice';
 import { selectQueries } from '../redux/slices/query_slice';
+import { selectSearchMetaData } from '../redux/slices/search_meta_data_slice';
+import { DATA_SOURCE_TYPES, QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
 
 export const NoResults = ({ tabId }: any) => {
   // get the queries isLoaded, if it exists AND is true = show no res
   const queryInfo = useSelector(selectQueries)[tabId];
   const summaryData = useSelector(selectQueryAssistantSummarization)[tabId];
   const queryAssistLoading = summaryData?.loading;
+  const explorerSearchMeta = useSelector(selectSearchMetaData)[tabId];
+
+  const datasourceName = explorerSearchMeta?.datasources[0]?.name;
+  const languageInUse = explorerSearchMeta?.lang;
 
   return (
     <EuiPage paddingSize="s">
@@ -81,17 +88,61 @@ export const NoResults = ({ tabId }: any) => {
       ) : (
         <EuiFlexGroup justifyContent="center" direction="column">
           <EuiFlexItem grow={false}>
-            <EuiCallOut
-              title={
-                <FormattedMessage
-                  id="observability.noResults.noResultsMatchSearchCriteriaTitle"
-                  defaultMessage="No results match your search criteria"
-                />
-              }
-              color="warning"
-              iconType="help"
-              data-test-subj="observabilityNoResultsCallout"
-            />
+            {explorerSearchMeta?.datasources[0]?.type === DATA_SOURCE_TYPES.S3Glue ? (
+              <EuiCallOut
+                title={
+                  <FormattedMessage
+                    id="observability.noResults.noResultsMatchSearchCriteriaTitle"
+                    defaultMessage="Explore S3 data source"
+                  />
+                }
+                color="warning"
+                iconType="help"
+                data-test-subj="observabilityNoResultsCallout"
+              >
+                {languageInUse === QUERY_LANGUAGE.SQL ? (
+                  <EuiFlexGroup direction="column">
+                    <EuiFlexItem grow={false}>
+                      <h4>Explore Databases</h4>
+                      <EuiCodeBlock isCopyable={true} paddingSize="none" fontSize="s">
+                        {`SHOW SCHEMAS IN ${datasourceName}`}
+                      </EuiCodeBlock>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <h4>Explore Tables</h4>
+                      <EuiCodeBlock isCopyable={true} paddingSize="none" fontSize="s">
+                        {`SHOW TABLES EXTENDED IN ${datasourceName}.<database> LIKE '*'`}
+                      </EuiCodeBlock>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <h4>Sample Query</h4>
+                      <EuiCodeBlock isCopyable={true} paddingSize="none" fontSize="s">
+                        {`SELECT * FROM ${datasourceName}.<database>.<table> LIMIT 10`}
+                      </EuiCodeBlock>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                ) : (
+                  <>
+                    <h4>Sample Query</h4>
+                    <EuiCodeBlock isCopyable={true} paddingSize="none" fontSize="s">
+                      {`source = ${datasourceName}.<database>.<table> | head 10`}
+                    </EuiCodeBlock>
+                  </>
+                )}
+              </EuiCallOut>
+            ) : (
+              <EuiCallOut
+                title={
+                  <FormattedMessage
+                    id="observability.noResults.noResultsMatchSearchCriteriaTitle"
+                    defaultMessage="No results match your search criteria"
+                  />
+                }
+                color="warning"
+                iconType="help"
+                data-test-subj="observabilityNoResultsCallout"
+              />
+            )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiSpacer size="s" />