Panel UI/UX fixes

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

@@ -59,6 +59,8 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
   const [selectedTimeRange, setTimeRange] = useState<TimeRange>(timeRange);
 
   const [panelStatus, setPanelStatus] = useState<PanelStatus>(PanelStatus.LOADING);
+  const [isStatusError, setStatusError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const timeZoneName = convertTimeZoneTypeToName(timeZone);
 
@@ -121,6 +123,16 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
     setTasksDataFrame(dataFrame);
   }, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (isStatusError) {
+      return;
+    }
+    setPanelStatus(panelStatus);
+    if (panelStatus === PanelStatus.DATASOURCE_ERROR || panelStatus === PanelStatus.PERMISSION_ERROR) {
+      setStatusError(true);
+    }
+  }, [panelStatus]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(refresh, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -145,6 +157,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
       .catch((err) => {
         setPanelStatus(PanelStatus.DATASOURCE_ERROR);
         console.error('some error', err);
+        setErrorMessage(`${err.name}: ${err.message}`);
       });
   }
 
@@ -271,48 +284,59 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
   }
 
   function getDataFrameForTaskTable(tasks: ExportTask[]): DataFrame {
+    const sortedTasks = _.orderBy(tasks, (task) => task.progress?.time, 'desc');
     const dataFrame = toDataFrame({
       name: 'A',
       fields: [
         {
           name: 'Time',
           type: FieldType.number,
-          values: _.map(tasks, (task) => convertTimestampToDate(task.progress?.time)),
+          values: _.map(sortedTasks, (task) => convertTimestampToDate(task.progress?.time)),
+        },
+        {
+          name: 'From',
+          type: FieldType.number,
+          values: _.map(sortedTasks, (task) => convertTimestampToDate(task.timeRange.from)),
+        },
+        {
+          name: 'To',
+          type: FieldType.number,
+          values: _.map(sortedTasks, (task) => convertTimestampToDate(task.timeRange.to)),
         },
         {
           name: 'User',
           type: FieldType.string,
-          values: _.map(tasks, (task) => task.username),
+          values: _.map(sortedTasks, (task) => task.username),
         },
         {
           name: 'Datasource',
           type: FieldType.string,
-          values: _.map(tasks, (task) => task.queries.map((query) => query.datasource?.name).join(',')),
+          values: _.map(sortedTasks, (task) => task.queries.map((query) => query.datasource?.name).join(',')),
         },
         {
           name: 'Exported Rows',
           type: FieldType.number,
-          values: _.map(tasks, (task) => task.progress?.exportedRowsCount),
+          values: _.map(sortedTasks, (task) => task.progress?.exportedRowsCount),
         },
         {
           name: 'Progress',
           type: FieldType.string,
-          values: _.map(tasks, (task) => `${((task.progress?.progress || 0) * 100).toFixed(0)}%`),
+          values: _.map(sortedTasks, (task) => `${((task.progress?.progress || 0) * 100).toFixed(0)}%`),
         },
         {
           name: 'Status',
           type: FieldType.string,
-          values: _.map(tasks, (task) => task.progress?.status),
+          values: _.map(sortedTasks, (task) => task.progress?.status),
         },
         {
           name: 'Error',
           type: FieldType.string,
-          values: _.map(tasks, (task) => task.progress?.errorMessage || '-'),
+          values: _.map(sortedTasks, (task) => task.progress?.errorMessage || '-'),
         },
         {
           name: 'Download CSV',
           type: FieldType.string,
-          values: _.map(tasks, () => `data:image/png;base64,${DOWNLOAD_ICON_BASE_64}`),
+          values: _.map(sortedTasks, () => `data:image/png;base64,${DOWNLOAD_ICON_BASE_64}`),
           config: {
             custom: {
               filterable: false,
@@ -396,9 +420,13 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
     <div>
       <p>Datasource is unavailable.</p>
       <div>
-        Click <a href={`/plugins/${APP_ID}`}>here</a> to configure DataExporter.
+        If you have not setup the plugin click
+        <a className={styles.customLink} href={`/plugins/${APP_ID}`}>
+          here
+        </a>
+        to configure DataExporter.
       </div>
-      {/* TODO: display error message? */}
+      <p style={{ marginTop: '16px' }}>{errorMessage}</p>
     </div>
   );
   const permissionErrorDiv = (
@@ -422,8 +450,9 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
         </Button>
         <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>
+              <p>There are no queries to export.</p>
+            </div>
           ) : (
             <div>
               <VerticalGroup spacing="xs">
@@ -480,4 +509,11 @@ const getStyles = () => ({
       z-index: 1061;
     }
   `,
+  customLink: css`
+    color: #6e9fff;
+    margin: 0 4px;
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
 });