add date picker

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

@@ -8,7 +8,7 @@ import { getDashboardByUid, getDatasources } from '../../../services/grafana_bac
 
 import { contextSrv } from 'grafana/app/core/core';
 
-import { Table, Button, HorizontalGroup, Modal, LoadingPlaceholder } from '@grafana/ui';
+import { Table, Button, HorizontalGroup, Modal, LoadingPlaceholder, TimeRangeInput } from '@grafana/ui';
 import {
   PanelProps,
   toDataFrame,
@@ -20,6 +20,7 @@ import {
   PanelModel,
   DataQuery,
   DataSourceSettings,
+  TimeRange,
 } from '@grafana/data';
 import { RefreshEvent } from '@grafana/runtime';
 
@@ -41,6 +42,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
 
   const [isModalOpen, setModalVisibility] = useState<boolean>(false);
 
+  const [selectedTimeRange, setTimeRange] = useState<TimeRange>(timeRange);
+
   useEffect(() => {
     async function getCurrentDashboard(): Promise<any> {
       const currentDashboardUid = getDashboardUid(window.location.toString());
@@ -90,10 +93,10 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
   }, [dashboard, datasources]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (tasks === null) {
-      return;
-    }
-    const dataFrame = getDataFrameForTaskTable(tasks);
+    // if (tasks === null) {
+    //   return;
+    // }
+    const dataFrame = getDataFrameForTaskTable([]);
     setTasksDataFrame(dataFrame);
   }, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -143,9 +146,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
 
   async function onAddTaskClick(): Promise<void> {
     const selectedQueries = _.filter(queries, (query: QueryTableRowConfig) => query.selected);
-
     // 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
     await queryApi('/task', {
       method: 'POST',
@@ -375,7 +377,13 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
               ) : (
                 <div>
                   <Table width={width / 2 - 20} height={height - 40} data={queriesDataFrame} />
-                  <HorizontalGroup justify="flex-end">
+                  <HorizontalGroup justify="flex-end" spacing="md">
+                    <TimeRangeInput
+                      value={selectedTimeRange}
+                      onChange={(newTimeRange) => {
+                        setTimeRange(newTimeRange);
+                      }}
+                    />
                     <Button
                       variant="primary"
                       aria-label="Add task button"