Skip to content

Commit

Permalink
design changes for loading, changed the banner, updated tests (#170)
Browse files Browse the repository at this point in the history 
Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
  • Loading branch information
@sumukhswamy
sumukhswamy committed Oct 24, 2023
1 parent 937ff30 commit dcff236
Show file tree
Hide file tree
Showing 8 changed files with 346 additions and 228 deletions.
6 changes: 6 additions & 0 deletions common/types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,10 @@ export interface TreeItem {
type: TreeItemType;
isExpanded: boolean;
values?: TreeItem[];
isLoading?: boolean
}

export interface isLoading {
flag: boolean;
status: string;
}
5 changes: 3 additions & 2 deletions common/utils/async_query_helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,13 @@ export const pollQueryStatus = (id: string, http: CoreStart['http'], callback) =
status === 'scheduled' ||
status === 'waiting'
) {
callback({status: status})
setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS);
} else if (status === 'failed') {
callback([]);
callback({ status: 'FAILED', results: [] });
} else if (status === 'success') {
const results = _.get(res.data.resp, 'datarows');
callback(results);
callback({ status: 'SUCCESS', results: results });
}
})
.catch((err) => {
Expand Down
214 changes: 115 additions & 99 deletions public/components/Main/__snapshots__/main.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ exports[`<Main /> spec click clear button 1`] = `
>
<div
class="euiPageSideBar"
style="max-width: 400px; width: 400px; overflow: auto;"
style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
Expand Down Expand Up @@ -243,34 +243,38 @@ exports[`<Main /> spec click clear button 1`] = `
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<div
class="euiEmptyPrompt"
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h3
class="euiTitle euiTitle--medium"
class="euiEmptyPrompt"
>
Error loading data
</h3>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h4
class="euiTitle euiTitle--xsmall"
>
Error loading data
</h4>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -746,7 +750,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
>
<div
class="euiPageSideBar"
style="max-width: 400px; width: 400px; overflow: auto;"
style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
Expand Down Expand Up @@ -796,34 +800,38 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<div
class="euiEmptyPrompt"
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h3
class="euiTitle euiTitle--medium"
class="euiEmptyPrompt"
>
Error loading data
</h3>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h4
class="euiTitle euiTitle--xsmall"
>
Error loading data
</h4>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1299,7 +1307,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
>
<div
class="euiPageSideBar"
style="max-width: 400px; width: 400px; overflow: auto;"
style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
Expand Down Expand Up @@ -1349,34 +1357,38 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<div
class="euiEmptyPrompt"
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h3
class="euiTitle euiTitle--medium"
class="euiEmptyPrompt"
>
Error loading data
</h3>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h4
class="euiTitle euiTitle--xsmall"
>
Error loading data
</h4>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1852,7 +1864,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
>
<div
class="euiPageSideBar"
style="max-width: 400px; width: 400px; overflow: auto;"
style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
Expand Down Expand Up @@ -2493,7 +2505,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
>
<div
class="euiPageSideBar"
style="max-width: 400px; width: 400px; overflow: auto;"
style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
Expand Down Expand Up @@ -3133,7 +3145,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
>
<div
class="euiPageSideBar"
style="max-width: 400px; width: 400px; overflow: auto;"
style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
Expand Down Expand Up @@ -3183,34 +3195,38 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<div
class="euiEmptyPrompt"
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h3
class="euiTitle euiTitle--medium"
class="euiEmptyPrompt"
>
Error loading data
</h3>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon--danger"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
fill-rule="evenodd"
/>
</svg>
<div
class="euiSpacer euiSpacer--m"
/>
<h4
class="euiTitle euiTitle--xsmall"
>
Error loading data
</h4>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3677,7 +3693,7 @@ exports[`<Main /> spec renders the component 1`] = `
>
<div
class="euiPageSideBar"
style="max-width: 400px; width: 400px; overflow: auto;"
style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
Expand Down
6 changes: 3 additions & 3 deletions public/components/Main/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import {
EuiButton,
EuiButtonIcon,
EuiCallOut,
EuiComboBoxOptionOption,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -16,7 +17,6 @@ import {
EuiPanel,
EuiSpacer,
EuiText,
EuiCallOut,
} from '@elastic/eui';
import { IHttpResponse } from 'angular';
import _ from 'lodash';
Expand Down Expand Up @@ -957,8 +957,8 @@ export class Main extends React.Component<MainProps, MainState> {
</EuiFlexGroup>
<EuiPage paddingSize="none">
{this.state.language === 'SQL' && (
<EuiPanel>
<EuiPageSideBar style={{ maxWidth: '400px', width: '400px' , overflow: 'auto' }}>
<EuiPanel grow ={true}>
<EuiPageSideBar style={{ maxWidth: '400px', width: '400px', maxHeight: '1200px' ,overflowY:'auto'}}>
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
Loading

0 comments on commit dcff236

Please sign in to comment.