feat: add list loader and fix action column size (#3440)

* feat: create live logs page and custom top nav

* feat: add live logs where clause

* fix: success button color

* fix: turn back color

* fix: undefined scenario

* feat: get live data

* fix: change color, change number format

* feat: add live logs list

* feat: hide view if error, clear logs

* feat: add condition for disable initial loading

* fix: double request

* fix: render id in the where clause

* fix: render where clause and live list

* fix: last log padding

* fix: list data loading

* fix: no logs text

* fix: logs list size

* fix: small issues

* feat: add list loader and fix action column size

* fix: remove unnecessary file

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
Co-authored-by: Yunus M <myounis.ar@live.com>
This commit is contained in:
Yevhen Shevchenko 2023-08-29 17:36:39 +03:00 committed by GitHub
parent 7e297dcb75
commit 0574350e6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions

View File

@ -1,4 +1,5 @@
import { Button, Popover, Select, Space } from 'antd';
import { Button, Popover, Select } from 'antd';
import Spinner from 'components/Spinner';
import { LOCALSTORAGE } from 'constants/localStorage';
import { useOptionsMenu } from 'container/OptionsMenu';
import {
@ -7,9 +8,12 @@ import {
viewModeOptionList,
} from 'pages/Logs/config';
import PopoverContent from 'pages/Logs/PopoverContent';
import { useEventSource } from 'providers/EventSource';
import { useCallback } from 'react';
import { DataSource, StringOperators } from 'types/common/queryBuilder';
import { SpinnerWrapper, Wrapper } from './styles';
function ListViewPanel(): JSX.Element {
const { config } = useOptionsMenu({
storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@ -17,6 +21,8 @@ function ListViewPanel(): JSX.Element {
aggregateOperator: StringOperators.NOOP,
});
const { isConnectionLoading } = useEventSource();
const isFormatButtonVisible = logsOptions.includes(config.format?.value);
const renderPopoverContent = useCallback(() => {
@ -35,7 +41,7 @@ function ListViewPanel(): JSX.Element {
}, [config]);
return (
<Space align="baseline" direction="horizontal">
<Wrapper>
<Select
style={defaultSelectStyle}
value={config.format?.value}
@ -51,7 +57,12 @@ function ListViewPanel(): JSX.Element {
<Button>Format</Button>
</Popover>
)}
</Space>
{isConnectionLoading && (
<SpinnerWrapper>
<Spinner style={{ height: 'auto' }} />
</SpinnerWrapper>
)}
</Wrapper>
);
}

View File

@ -0,0 +1,11 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
display: flex;
align-items: center;
gap: 1.5rem;
`;
export const SpinnerWrapper = styled.div`
margin-left: auto;
`;