From d408355b4e394297e9368099d9ae5b44fe708889 Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Mon, 9 Jan 2023 21:10:40 +0300
Subject: [PATCH 1/3] add date picker

---
 .../components/Panel.tsx                      | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/panels/corpglory-dataexporter-panel/components/Panel.tsx b/src/panels/corpglory-dataexporter-panel/components/Panel.tsx
index 9c7494a..e55ae90 100644
--- a/src/panels/corpglory-dataexporter-panel/components/Panel.tsx
+++ b/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"

From 5aac34cf261c0c06739b632f72efb9d55b822105 Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Wed, 11 Jan 2023 19:11:12 +0300
Subject: [PATCH 2/3] fix timepicker styles

---
 .../components/Panel.tsx                      | 72 +++++++++++++------
 1 file changed, 51 insertions(+), 21 deletions(-)

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

From d44907e87d9817d4e962f007453bd8406f1ddeeb Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Wed, 11 Jan 2023 19:13:21 +0300
Subject: [PATCH 3/3] fix import order

---
 .../corpglory-dataexporter-panel/components/Panel.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/panels/corpglory-dataexporter-panel/components/Panel.tsx b/src/panels/corpglory-dataexporter-panel/components/Panel.tsx
index 17f9e73..1af10d9 100644
--- a/src/panels/corpglory-dataexporter-panel/components/Panel.tsx
+++ b/src/panels/corpglory-dataexporter-panel/components/Panel.tsx
@@ -1,5 +1,4 @@
 import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType } from '../types';
-import { css } from '@emotion/css';
 
 import { convertTimestampToDate, getDashboardUid } from '../../../utils';
 import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons';
@@ -8,6 +7,7 @@ import { deleteTask, getStaticFile, getTasks, queryApi } from '../../../services
 import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service';
 
 import { contextSrv } from 'grafana/app/core/core';
+import { css } from '@emotion/css';
 
 import {
   Table,
@@ -103,10 +103,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([]);
+    if (tasks === null) {
+      return;
+    }
+    const dataFrame = getDataFrameForTaskTable(tasks);
     setTasksDataFrame(dataFrame);
   }, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps