Browse Source

fix timepicker styles

pull/7/head
vargburz 2 years ago
parent
commit
5aac34cf26
  1. 72
      src/panels/corpglory-dataexporter-panel/components/Panel.tsx

72
src/panels/corpglory-dataexporter-panel/components/Panel.tsx

@ -1,4 +1,5 @@
import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType } from '../types'; import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType } from '../types';
import { css } from '@emotion/css';
import { convertTimestampToDate, getDashboardUid } from '../../../utils'; import { convertTimestampToDate, getDashboardUid } from '../../../utils';
import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons'; import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons';
@ -8,7 +9,16 @@ import { getDashboardByUid, getDatasources } from '../../../services/grafana_bac
import { contextSrv } from 'grafana/app/core/core'; import { contextSrv } from 'grafana/app/core/core';
import { Table, Button, HorizontalGroup, Modal, LoadingPlaceholder, TimeRangeInput } from '@grafana/ui'; import {
Table,
Button,
HorizontalGroup,
VerticalGroup,
Modal,
LoadingPlaceholder,
TimeRangeInput,
useStyles2,
} from '@grafana/ui';
import { import {
PanelProps, PanelProps,
toDataFrame, toDataFrame,
@ -352,6 +362,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
setQueries(updatedQueries); setQueries(updatedQueries);
} }
const styles = useStyles2(getStyles);
return ( return (
<div> <div>
{tasksDataFrame === null ? ( {tasksDataFrame === null ? (
@ -370,31 +382,39 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
> >
Add Task Add Task
</Button> </Button>
<Modal title="Select Queries" isOpen={isModalOpen} onDismiss={onCloseModal}> <Modal
title="Select Queries"
isOpen={isModalOpen}
onDismiss={onCloseModal}
className={styles.calendarModal}
>
{queriesDataFrame === null ? ( {queriesDataFrame === null ? (
// TODO: if datasource responds with error, display the error // TODO: if datasource responds with error, display the error
<LoadingPlaceholder text="Loading..."></LoadingPlaceholder> <LoadingPlaceholder text="Loading..."></LoadingPlaceholder>
) : ( ) : (
<div> <div>
<Table width={width / 2 - 20} height={height - 40} data={queriesDataFrame} /> <VerticalGroup spacing="xs">
<HorizontalGroup justify="flex-end" spacing="md"> <HorizontalGroup justify="flex-start" spacing="md">
<TimeRangeInput <TimeRangeInput
value={selectedTimeRange} value={selectedTimeRange}
onChange={(newTimeRange) => { onChange={(newTimeRange) => {
setTimeRange(newTimeRange); setTimeRange(newTimeRange);
}} }}
/> />
<Button </HorizontalGroup>
variant="primary" <Table width={width / 2 - 20} height={height - 40} data={queriesDataFrame} />
aria-label="Add task button" <HorizontalGroup justify="flex-end" spacing="md">
style={{ marginTop: '8px' }} <Button
onClick={onAddTaskClick} variant="primary"
// TODO: move to function aria-label="Add task button"
disabled={!queries?.filter((query: QueryTableRowConfig) => query.selected)?.length} onClick={onAddTaskClick}
> // TODO: move to function
Add Task disabled={!queries?.filter((query: QueryTableRowConfig) => query.selected)?.length}
</Button> >
</HorizontalGroup> Add Task
</Button>
</HorizontalGroup>
</VerticalGroup>
</div> </div>
)} )}
</Modal> </Modal>
@ -404,3 +424,13 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
</div> </div>
); );
} }
const getStyles = () => ({
calendarModal: css`
section {
position: fixed;
top: 20%;
z-index: 1061;
}
`,
});

Loading…
Cancel
Save