[ENHANCEMENT] Add UnsavedDatasourceStore and DatasourceTestConnection…

dashboards/src/views/ViewDashboard/ViewDashboard.tsx

@@ -20,6 +20,7 @@ import {
   useInitialRefreshInterval,
   useInitialTimeRange,
   usePluginBuiltinVariableDefinitions,
+  UnsavedDatasourceProvider,
 } from '@perses-dev/plugin-system';
 import { ReactElement, useMemo } from 'react';
 import {
@@ -103,54 +104,60 @@ export function ViewDashboard(props: ViewDashboardProps): ReactElement {
   }, [dashboardResource.metadata.name, dashboardResource.metadata.project, data]);
 
   return (
-    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>
-      <DashboardProviderWithQueryParams
-        initialState={{
-          isEditMode: !!isEditing,
-          dashboardResource,
-        }}
-      >
-        <TimeRangeProviderWithQueryParams
-          initialTimeRange={initialTimeRange}
-          initialRefreshInterval={initialRefreshInterval}
+    <UnsavedDatasourceProvider
+      datasourceApi={datasourceApi}
+      project={dashboardResource.metadata.project}
+      dashboard={dashboardResource.metadata.name}
+    >
+      <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>
+        <DashboardProviderWithQueryParams
+          initialState={{
+            isEditMode: !!isEditing,
+            dashboardResource,
+          }}
         >
-          <VariableProviderWithQueryParams
-            initialVariableDefinitions={spec.variables}
-            externalVariableDefinitions={externalVariableDefinitions}
-            builtinVariableDefinitions={builtinVariables}
+          <TimeRangeProviderWithQueryParams
+            initialTimeRange={initialTimeRange}
+            initialRefreshInterval={initialRefreshInterval}
           >
-            <Box
-              sx={combineSx(
-                {
-                  display: 'flex',
-                  width: '100%',
-                  height: '100%',
-                  position: 'relative',
-                  overflow: 'hidden',
-                },
-                sx
-              )}
-              {...others}
+            <VariableProviderWithQueryParams
+              initialVariableDefinitions={spec.variables}
+              externalVariableDefinitions={externalVariableDefinitions}
+              builtinVariableDefinitions={builtinVariables}
             >
-              <ErrorBoundary FallbackComponent={ErrorAlert}>
-                <DashboardApp
-                  dashboardResource={dashboardResource}
-                  emptyDashboardProps={emptyDashboardProps}
-                  isReadonly={isReadonly}
-                  isVariableEnabled={isVariableEnabled}
-                  isDatasourceEnabled={isDatasourceEnabled}
-                  isCreating={isCreating}
-                  isInitialVariableSticky={isInitialVariableSticky}
-                  isLeavingConfirmDialogEnabled={isLeavingConfirmDialogEnabled}
-                  dashboardTitleComponent={dashboardTitleComponent}
-                  onSave={onSave}
-                  onDiscard={onDiscard}
-                />
-              </ErrorBoundary>
-            </Box>
-          </VariableProviderWithQueryParams>
-        </TimeRangeProviderWithQueryParams>
-      </DashboardProviderWithQueryParams>
-    </DatasourceStoreProvider>
+              <Box
+                sx={combineSx(
+                  {
+                    display: 'flex',
+                    width: '100%',
+                    height: '100%',
+                    position: 'relative',
+                    overflow: 'hidden',
+                  },
+                  sx
+                )}
+                {...others}
+              >
+                <ErrorBoundary FallbackComponent={ErrorAlert}>
+                  <DashboardApp
+                    dashboardResource={dashboardResource}
+                    emptyDashboardProps={emptyDashboardProps}
+                    isReadonly={isReadonly}
+                    isVariableEnabled={isVariableEnabled}
+                    isDatasourceEnabled={isDatasourceEnabled}
+                    isCreating={isCreating}
+                    isInitialVariableSticky={isInitialVariableSticky}
+                    isLeavingConfirmDialogEnabled={isLeavingConfirmDialogEnabled}
+                    dashboardTitleComponent={dashboardTitleComponent}
+                    onSave={onSave}
+                    onDiscard={onDiscard}
+                  />
+                </ErrorBoundary>
+              </Box>
+            </VariableProviderWithQueryParams>
+          </TimeRangeProviderWithQueryParams>
+        </DashboardProviderWithQueryParams>
+      </DatasourceStoreProvider>
+    </UnsavedDatasourceProvider>
   );
 }

plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx

@@ -0,0 +1,60 @@
+import { ReactElement, useCallback } from 'react';
+import { Button, ButtonProps } from '@mui/material';
+import { useUnsavedDatasourceStore } from '@perses-dev/plugin-system';
+import { useSnackbar } from '@perses-dev/components';
+import { DatasourceSpec } from '@perses-dev/core';
+
+type DatasourceTestConnectionButtonProps = (
+  | {
+      connectionType: 'proxy';
+      spec: DatasourceSpec;
+      directUrl?: undefined;
+      healthCheckPath: string;
+    }
+  | {
+      connectionType: 'direct';
+      spec?: undefined;
+      directUrl: string;
+      healthCheckPath: string;
+    }
+) &
+  Omit<ButtonProps, 'onClick'>;
+export const DatasourceTestConnectionButton = ({
+  healthCheckPath,
+  connectionType,
+  spec,
+  directUrl,
+  ...buttonProps
+}: DatasourceTestConnectionButtonProps): ReactElement => {
+  const datasourceStore = useUnsavedDatasourceStore();
+  const { successSnackbar, exceptionSnackbar } = useSnackbar();
+
+  const testConnection = useCallback(
+    async function isHealthy(): Promise<boolean> {
+      switch (connectionType) {
+        case 'direct':
+          return datasourceStore.testDirectConnection(directUrl, healthCheckPath);
+        case 'proxy':
+          return datasourceStore.testProxyConnection(spec, healthCheckPath);
+      }
+    },
+    [connectionType, datasourceStore, directUrl, healthCheckPath, spec]
+  );
+
+  const handleTestConnection = useCallback(
+    async function handleTestConnection(): Promise<void> {
+      const isHealthy = await testConnection();
+      if (isHealthy) {
+        successSnackbar('Datasource is healthy');
+      } else {
+        exceptionSnackbar(new Error('Datasource is not healthy'));
+      }
+    },
+    [exceptionSnackbar, testConnection, successSnackbar]
+  );
+  return (
+    <Button onClick={handleTestConnection} color="info" variant="outlined" {...buttonProps}>
+      Test Connection
+    </Button>
+  );
+};

plugin-system/src/components/DatasourceTestConnectionButton/index.ts

@@ -0,0 +1 @@
+export * from './DatasourceTestConnectionButton';