Merge pull request 'UX improvements for bad cases' (#9) from ui-ux-improvements into master

Reviewed-on: #9

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

@@ -1,4 +1,4 @@
-import { PanelOptions, ExportTask, DashboardQuery, DatasourceType, ExportStatus } from '../types';
+import { PanelOptions, ExportTask, DashboardQuery, DatasourceType, ExportStatus, PanelStatus } from '../types';
 
 import { convertTimestampToDate, getDashboardUid } from '../../../utils';
 import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons';
@@ -31,12 +31,16 @@ import {
   DataQuery,
   DataSourceSettings,
   TimeRange,
+  OrgRole,
 } from '@grafana/data';
 import { RefreshEvent } from '@grafana/runtime';
 
 import React, { useState, useEffect } from 'react';
 import * as _ from 'lodash';
 
+const PANEL_ID = 'corpglory-dataexporter-panel';
+const APP_ID = 'corpglory-dataexporter-app';
+
 interface Props extends PanelProps<PanelOptions> {}
 
 export function Panel({ width, height, timeRange, eventBus }: Props) {
@@ -54,6 +58,13 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
 
   const [selectedTimeRange, setTimeRange] = useState<TimeRange>(timeRange);
 
+  const [panelStatus, setPanelStatus] = useState<PanelStatus>(PanelStatus.LOADING);
+
+  if (contextSrv.user.orgRole !== OrgRole.Admin) {
+    // TODO: it shouldn't be overriten
+    setPanelStatus(PanelStatus.PERMISSION_ERROR);
+  }
+
   useEffect(() => {
     async function getCurrentDashboard(): Promise<any> {
       const currentDashboardUid = getDashboardUid(window.location.toString());
@@ -80,8 +91,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
       const queries: DashboardQuery[] = [];
 
       // @ts-ignore
-      // TODO: move plugin id to const
-      if (panel.type === 'corpglory-dataexporter-panel') {
+      if (panel.type === PANEL_ID) {
         return;
       }
 
@@ -123,6 +133,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
     getTasks()
       .then((tasks) => {
         setTasks(tasks);
+        setPanelStatus(PanelStatus.OK);
         for (let task of tasks) {
           if (task.progress?.status === ExportStatus.EXPORTING) {
             setTimeout(refresh, 1000);
@@ -130,7 +141,10 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
           }
         }
       })
-      .catch((err) => console.error(err));
+      .catch((err) => {
+        setPanelStatus(PanelStatus.DATASOURCE_ERROR);
+        console.error('some error', err);
+      });
   }
 
   eventBus.subscribe(RefreshEvent, refresh);
@@ -164,8 +178,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
         from: timerange[0] * 1000,
         to: timerange[1] * 1000,
       },
-      queries: selectedQueries
-    }
+      queries: selectedQueries,
+    };
     // TODO: move this function to API Service
     await queryApi('/task', {
       method: 'POST',
@@ -189,6 +203,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
   }
 
   function openDatasourceModal(): void {
+    setTimeRange(timeRange);
     setModalVisibility(true);
   }
 
@@ -270,7 +285,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
         {
           name: 'Datasource',
           type: FieldType.string,
-          values: _.map(tasks, (task) => task.queries.map(query => query.datasource?.name).join(',')),
+          values: _.map(tasks, (task) => task.queries.map((query) => query.datasource?.name).join(',')),
         },
         {
           name: 'Exported Rows',
@@ -373,14 +388,26 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
 
   const styles = useStyles2(getStyles);
 
-  return (
+  const loadingDiv = <LoadingPlaceholder text="Loading..."></LoadingPlaceholder>;
+  // TODO: add styles
+  const datasourceErrorDiv = (
     <div>
-      {tasksDataFrame === null ? (
-        // TODO: if datasource responds with error, display the error
-        <LoadingPlaceholder text="Loading..."></LoadingPlaceholder>
-      ) : (
+      <p>Datasource is unavailable.</p>
       <div>
-          <Table width={width} height={height - 40} data={tasksDataFrame} />
+        Click <a href={`/plugins/${APP_ID}`}>here</a> to configure DataExporter.
+      </div>
+      {/* TODO: display error message? */}
+    </div>
+  );
+  const permissionErrorDiv = (
+    <div>
+      <p>Permission Error.</p>
+      <div> DataExporter panel availabel only for Admins </div>
+    </div>
+  );
+  const mainDiv = (
+    <div>
+      <Table width={width} height={height - 40} data={tasksDataFrame as DataFrame} />
       <HorizontalGroup justify="flex-end">
         <Button
           variant="primary"
@@ -391,12 +418,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
         >
           Add Task
         </Button>
-            <Modal
-              title="Select Queries"
-              isOpen={isModalOpen}
-              onDismiss={onCloseModal}
-              className={styles.calendarModal}
-            >
+        <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>
@@ -429,9 +451,23 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
         </Modal>
       </HorizontalGroup>
     </div>
-      )}
-    </div>
   );
+
+  function renderSwitch(panelStatus: PanelStatus): JSX.Element {
+    switch (panelStatus) {
+      case PanelStatus.LOADING:
+        return loadingDiv;
+      case PanelStatus.DATASOURCE_ERROR:
+        return datasourceErrorDiv;
+      case PanelStatus.PERMISSION_ERROR:
+        return permissionErrorDiv;
+      case PanelStatus.OK:
+        return mainDiv;
+      default:
+        return datasourceErrorDiv;
+    }
+  }
+  return <div>{renderSwitch(panelStatus)}</div>;
 }
 
 const getStyles = () => ({

src/panels/corpglory-dataexporter-panel/types.ts

@@ -11,6 +11,13 @@ export enum DatasourceType {
   MYSQL = 'mysql',
 }
 
+export enum PanelStatus {
+  LOADING = 'Loading',
+  DATASOURCE_ERROR = 'Datasource Error',
+  PERMISSION_ERROR = 'Permission Error',
+  OK = 'Ok',
+}
+
 export enum ExportStatus {
   EXPORTING = 'exporting',
   FINISHED = 'finished',