Add TimePicker #7

Merged
rozetko merged 4 commits from panel-updates into master 2 years ago
  1. 72
      src/panels/corpglory-dataexporter-panel/components/Panel.tsx

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

@ -7,8 +7,18 @@ import { deleteTask, getStaticFile, getTasks, queryApi } from '../../../services
import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service'; import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service';
import { contextSrv } from 'grafana/app/core/core'; import { contextSrv } from 'grafana/app/core/core';
import { css } from '@emotion/css';
import { Table, Button, HorizontalGroup, Modal, LoadingPlaceholder } from '@grafana/ui'; import {
Table,
Button,
HorizontalGroup,
VerticalGroup,
Modal,
LoadingPlaceholder,
TimeRangeInput,
useStyles2,
} from '@grafana/ui';
import { import {
PanelProps, PanelProps,
toDataFrame, toDataFrame,
@ -20,6 +30,7 @@ import {
PanelModel, PanelModel,
DataQuery, DataQuery,
DataSourceSettings, DataSourceSettings,
TimeRange,
} from '@grafana/data'; } from '@grafana/data';
import { RefreshEvent } from '@grafana/runtime'; import { RefreshEvent } from '@grafana/runtime';
@ -41,6 +52,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
const [isModalOpen, setModalVisibility] = useState<boolean>(false); const [isModalOpen, setModalVisibility] = useState<boolean>(false);
const [selectedTimeRange, setTimeRange] = useState<TimeRange>(timeRange);
useEffect(() => { useEffect(() => {
async function getCurrentDashboard(): Promise<any> { async function getCurrentDashboard(): Promise<any> {
const currentDashboardUid = getDashboardUid(window.location.toString()); const currentDashboardUid = getDashboardUid(window.location.toString());
@ -143,9 +156,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
async function onAddTaskClick(): Promise<void> { async function onAddTaskClick(): Promise<void> {
const selectedQueries = _.filter(queries, (query: QueryTableRowConfig) => query.selected); const selectedQueries = _.filter(queries, (query: QueryTableRowConfig) => query.selected);
// TODO: timerange picker // TODO: timerange picker
const timerange: [number, number] = [timeRange.from.unix(), timeRange.to.unix()]; const timerange: [number, number] = [selectedTimeRange.from.unix(), selectedTimeRange.to.unix()];
// TODO: move this function to API Service // TODO: move this function to API Service
await queryApi('/task', { await queryApi('/task', {
method: 'POST', method: 'POST',
@ -350,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 ? (
@ -368,25 +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"> <HorizontalGroup justify="flex-start" spacing="md">
<Button <TimeRangeInput
variant="primary" value={selectedTimeRange}
aria-label="Add task button" onChange={(newTimeRange) => {
style={{ marginTop: '8px' }} setTimeRange(newTimeRange);
onClick={onAddTaskClick} }}
// TODO: move to function />
disabled={!queries?.filter((query: QueryTableRowConfig) => query.selected)?.length} </HorizontalGroup>
> <Table width={width / 2 - 20} height={height - 40} data={queriesDataFrame} />
Add Task <HorizontalGroup justify="flex-end" spacing="md">
</Button> <Button
</HorizontalGroup> variant="primary"
aria-label="Add task button"
onClick={onAddTaskClick}
// TODO: move to function
disabled={!queries?.filter((query: QueryTableRowConfig) => query.selected)?.length}
>
Add Task
</Button>
</HorizontalGroup>
</VerticalGroup>
</div> </div>
)} )}
</Modal> </Modal>
@ -396,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