Skip to content

Commit

Permalink
Support dark mode and session for sql, minor bug fixes (#165) (#169)
Browse files Browse the repository at this point in the history
* suport dark mode and editor theming from dev tools



* remove sql editor theme, add session check



* update snapshots



* minor fixes



* fix import



* fix job query url



* update poll interval to 2000



---------


(cherry picked from commit 937ff30)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent 2269d1d commit 0f5673a
Show file tree
Hide file tree
Showing 20 changed files with 357 additions and 529 deletions.
10 changes: 6 additions & 4 deletions common/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME = `materialized_view`;
export const TREE_ITEM_DATABASE_NAME_DEFAULT_NAME = `database`;
export const TREE_ITEM_TABLE_NAME_DEFAULT_NAME = `table`;
export const TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME = `Load Materialized View`;
export const TREE_ITEM_BADGE_NAME =`badge`
export const TREE_ITEM_BADGE_NAME = `badge`;
export const LOAD_OPENSEARCH_INDICES_QUERY = `SHOW tables LIKE '%';`;
export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs
(status VALUE_SET)
Expand Down Expand Up @@ -89,6 +89,8 @@ export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices
- All user given index names must be in lowercase letters. Index name cannot begin with underscores. Spaces, commas, and characters -, :, ", *, +, /, \, |, ?, #, >, or < are not allowed.
`;

export const SIDEBAR_POLL_INTERVAL_MS = 5000;

export const FETCH_OPENSEARCH_INDICES_PATH = '/api/sql_console/sqlquery'
export const FETCH_OPENSEARCH_INDICES_PATH = '/api/sql_console/sqlquery';
export const POLL_INTERVAL_MS = 2000;
export const ASYNC_QUERY_ENDPOINT = '/api/spark_sql_console';
export const ASYNC_QUERY_JOB_ENDPOINT = ASYNC_QUERY_ENDPOINT + '/job/';
export const ASYNC_QUERY_SESSION_ID = 'async-query-session-id';
62 changes: 62 additions & 0 deletions common/utils/async_query_helpers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import _ from 'lodash';
import { CoreStart } from '../../../../src/core/public';
import {
ASYNC_QUERY_ENDPOINT,
ASYNC_QUERY_JOB_ENDPOINT,
ASYNC_QUERY_SESSION_ID,
POLL_INTERVAL_MS,
} from '../constants';

export const setAsyncSessionId = (value: string | null) => {
if (value === null) sessionStorage.removeItem(ASYNC_QUERY_SESSION_ID);
else sessionStorage.setItem(ASYNC_QUERY_SESSION_ID, value);
};

export const getAsyncSessionId = () => {
return sessionStorage.getItem(ASYNC_QUERY_SESSION_ID);
};

export const getJobId = (query: {}, http: CoreStart['http'], callback) => {
http
.post(ASYNC_QUERY_ENDPOINT, {
body: JSON.stringify({ ...query, sessionId: getAsyncSessionId() ?? undefined }),
})
.then((res) => {
const id = res.data.resp.queryId;
setAsyncSessionId(_.get(res.data.resp, 'sessionId', null));
callback(id);
})
.catch((err) => {
console.error(err);
});
};

export const pollQueryStatus = (id: string, http: CoreStart['http'], callback) => {
http
.get(ASYNC_QUERY_JOB_ENDPOINT + id)
.then((res) => {
const status = res.data.resp.status.toLowerCase();
if (
status === 'pending' ||
status === 'running' ||
status === 'scheduled' ||
status === 'waiting'
) {
setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS);
} else if (status === 'failed') {
callback([]);
} else if (status === 'success') {
const results = _.get(res.data.resp, 'datarows');
callback(results);
}
})
.catch((err) => {
console.error(err);
callback([]);
});
};
19 changes: 0 additions & 19 deletions public/ace-themes/sql_console.js

This file was deleted.

63 changes: 28 additions & 35 deletions public/components/Main/__snapshots__/main.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -296,15 +296,15 @@ exports[`<Main /> spec click clear button 1`] = `
/>
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel coreSystemRootDomElement"
>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 7rem;"
style="width: 100%; height: 10rem;"
>
<button
class="euiCodeEditorKeyboardHint"
Expand All @@ -323,9 +323,9 @@ exports[`<Main /> spec click clear button 1`] = `
</p>
</button>
<div
class=" ace_editor ace-sql-console"
class=" ace_editor ace-tm"
id="some_html_id"
style="width: 100%; height: 7rem; font-size: 14px;"
style="width: 100%; height: 10rem; font-size: 14px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -523,7 +523,6 @@ exports[`<Main /> spec click clear button 1`] = `
/>
<div
class="euiText euiText--medium"
style="color: rgb(63, 63, 63);"
>
<div
class="euiTextAlign euiTextAlign--center"
Expand Down Expand Up @@ -850,15 +849,15 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
/>
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel coreSystemRootDomElement"
>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 7rem;"
style="width: 100%; height: 10rem;"
>
<button
class="euiCodeEditorKeyboardHint"
Expand All @@ -877,9 +876,9 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
</p>
</button>
<div
class=" ace_editor ace-sql-console"
class=" ace_editor ace-tm"
id="some_html_id"
style="width: 100%; height: 7rem; font-size: 14px;"
style="width: 100%; height: 10rem; font-size: 14px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -1077,7 +1076,6 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
/>
<div
class="euiText euiText--medium"
style="color: rgb(63, 63, 63);"
>
<div
class="euiTextAlign euiTextAlign--center"
Expand Down Expand Up @@ -1404,15 +1402,15 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
/>
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel coreSystemRootDomElement"
>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 7rem;"
style="width: 100%; height: 10rem;"
>
<button
class="euiCodeEditorKeyboardHint"
Expand All @@ -1431,9 +1429,9 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
</p>
</button>
<div
class=" ace_editor ace-sql-console"
class=" ace_editor ace-tm"
id="some_html_id"
style="width: 100%; height: 7rem; font-size: 14px;"
style="width: 100%; height: 10rem; font-size: 14px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -1631,7 +1629,6 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
/>
<div
class="euiText euiText--medium"
style="color: rgb(63, 63, 63);"
>
<div
class="euiTextAlign euiTextAlign--center"
Expand Down Expand Up @@ -2046,15 +2043,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
/>
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel coreSystemRootDomElement"
>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 7rem;"
style="width: 100%; height: 10rem;"
>
<button
class="euiCodeEditorKeyboardHint"
Expand All @@ -2073,9 +2070,9 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
</p>
</button>
<div
class=" ace_editor ace-sql-console"
class=" ace_editor ace-tm"
id="some_html_id"
style="width: 100%; height: 7rem; font-size: 14px;"
style="width: 100%; height: 10rem; font-size: 14px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -2273,7 +2270,6 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
/>
<div
class="euiText euiText--medium"
style="color: rgb(63, 63, 63);"
>
<div
class="euiTextAlign euiTextAlign--center"
Expand Down Expand Up @@ -2684,15 +2680,15 @@ exports[`<Main /> spec click run button, response fills null and missing values
/>
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel coreSystemRootDomElement"
>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 7rem;"
style="width: 100%; height: 10rem;"
>
<button
class="euiCodeEditorKeyboardHint"
Expand All @@ -2711,9 +2707,9 @@ exports[`<Main /> spec click run button, response fills null and missing values
</p>
</button>
<div
class=" ace_editor ace-sql-console"
class=" ace_editor ace-tm"
id="some_html_id"
style="width: 100%; height: 7rem; font-size: 14px;"
style="width: 100%; height: 10rem; font-size: 14px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -2911,7 +2907,6 @@ exports[`<Main /> spec click run button, response fills null and missing values
/>
<div
class="euiText euiText--medium"
style="color: rgb(63, 63, 63);"
>
<div
class="euiTextAlign euiTextAlign--center"
Expand Down Expand Up @@ -3241,15 +3236,15 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
/>
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel coreSystemRootDomElement"
>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 7rem;"
style="width: 100%; height: 10rem;"
>
<button
class="euiCodeEditorKeyboardHint"
Expand All @@ -3268,9 +3263,9 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
</p>
</button>
<div
class=" ace_editor ace-sql-console"
class=" ace_editor ace-tm"
id="some_html_id"
style="width: 100%; height: 7rem; font-size: 14px;"
style="width: 100%; height: 10rem; font-size: 14px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -3468,7 +3463,6 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
/>
<div
class="euiText euiText--medium"
style="color: rgb(63, 63, 63);"
>
<div
class="euiTextAlign euiTextAlign--center"
Expand Down Expand Up @@ -3817,15 +3811,15 @@ exports[`<Main /> spec renders the component 1`] = `
/>
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel coreSystemRootDomElement"
>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 7rem;"
style="width: 100%; height: 10rem;"
>
<button
class="euiCodeEditorKeyboardHint"
Expand All @@ -3844,9 +3838,9 @@ exports[`<Main /> spec renders the component 1`] = `
</p>
</button>
<div
class=" ace_editor ace-sql-console"
class=" ace_editor ace-tm"
id="some_html_id"
style="width: 100%; height: 7rem; font-size: 14px;"
style="width: 100%; height: 10rem; font-size: 14px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -4044,7 +4038,6 @@ exports[`<Main /> spec renders the component 1`] = `
/>
<div
class="euiText euiText--medium"
style="color: rgb(63, 63, 63);"
>
<div
class="euiTextAlign euiTextAlign--center"
Expand Down
Loading

0 comments on commit 0f5673a

Please sign in to comment.