superset-notifications mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From GitBox <...@apache.org>
Subject [GitHub] [incubator-superset] nytai commented on a change in pull request #10745: feat: add/edit database modal form sections UI
Date Thu, 03 Sep 2020 23:08:15 GMT

nytai commented on a change in pull request #10745:
URL: https://github.com/apache/incubator-superset/pull/10745#discussion_r483295743



##########
File path: superset-frontend/src/views/CRUD/hooks.ts
##########
@@ -168,6 +168,167 @@ export function useListViewResource<D extends object = any>(
   };
 }
 
+// In the same vein as above, a hook for viewing a single instance of a resource (given id)
+interface SingleViewResourceState<D extends object = any> {
+  loading: boolean;
+  resource: D | null;
+  permissions: string[];
+}
+
+export function useSingleViewResource<D extends object = any>(
+  resourceName: string,
+  resourceLabel: string, // resourceLabel for translations
+  handleErrorMsg: (errorMsg: string) => void,
+) {
+  const [state, setState] = useState<SingleViewResourceState<D>>({
+    loading: false,
+    resource: null,
+    permissions: [],
+  });
+
+  function updateState(update: Partial<SingleViewResourceState<D>>) {
+    setState(currentState => ({ ...currentState, ...update }));
+  }
+
+  useEffect(() => {
+    SupersetClient.get({
+      endpoint: `/api/v1/${resourceName}/_info`,
+    }).then(
+      ({ json: infoJson = {} }) => {
+        updateState({
+          permissions: infoJson.permissions,
+        });
+      },
+      createErrorHandler(errMsg =>
+        handleErrorMsg(
+          t(
+            'An error occurred while fetching %ss info: %s',
+            resourceLabel,
+            errMsg,
+          ),
+        ),
+      ),
+    );
+  }, []);
+
+  function hasPerm(perm: string) {
+    if (!state.permissions.length) {
+      return false;
+    }
+
+    return Boolean(state.permissions.find(p => p === perm));
+  }
+
+  const fetchResource = useCallback((resourceID: number) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.get({
+      endpoint: `/api/v1/${resourceName}/${resourceID}`,
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  const createResource = useCallback((resource: D) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.post({
+      endpoint: `/api/v1/${resourceName}/`,
+      body: JSON.stringify(resource),
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  const updateResource = useCallback((resourceID: number, resource: D) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.put({
+      endpoint: `/api/v1/${resourceName}/${resourceID}`,
+      body: JSON.stringify(resource),
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  return {
+    state: {
+      loading: state.loading,
+      resource: state.resource,

Review comment:
       Perhaps out of scope for this PR, but it just occurred to me that it would be good
to also include and error state in these hooks, something like `{ hasError: boolean, error:
Error, errorMsg: string }`

##########
File path: superset-frontend/src/views/CRUD/hooks.ts
##########
@@ -168,6 +168,167 @@ export function useListViewResource<D extends object = any>(
   };
 }
 
+// In the same vein as above, a hook for viewing a single instance of a resource (given id)
+interface SingleViewResourceState<D extends object = any> {
+  loading: boolean;
+  resource: D | null;
+  permissions: string[];
+}
+
+export function useSingleViewResource<D extends object = any>(
+  resourceName: string,
+  resourceLabel: string, // resourceLabel for translations
+  handleErrorMsg: (errorMsg: string) => void,
+) {
+  const [state, setState] = useState<SingleViewResourceState<D>>({
+    loading: false,
+    resource: null,
+    permissions: [],
+  });
+
+  function updateState(update: Partial<SingleViewResourceState<D>>) {
+    setState(currentState => ({ ...currentState, ...update }));
+  }
+
+  useEffect(() => {
+    SupersetClient.get({
+      endpoint: `/api/v1/${resourceName}/_info`,
+    }).then(
+      ({ json: infoJson = {} }) => {
+        updateState({
+          permissions: infoJson.permissions,
+        });
+      },
+      createErrorHandler(errMsg =>
+        handleErrorMsg(
+          t(
+            'An error occurred while fetching %ss info: %s',
+            resourceLabel,
+            errMsg,
+          ),
+        ),
+      ),
+    );
+  }, []);
+
+  function hasPerm(perm: string) {
+    if (!state.permissions.length) {
+      return false;
+    }
+
+    return Boolean(state.permissions.find(p => p === perm));
+  }
+
+  const fetchResource = useCallback((resourceID: number) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.get({
+      endpoint: `/api/v1/${resourceName}/${resourceID}`,
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  const createResource = useCallback((resource: D) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.post({
+      endpoint: `/api/v1/${resourceName}/`,
+      body: JSON.stringify(resource),
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  const updateResource = useCallback((resourceID: number, resource: D) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.put({
+      endpoint: `/api/v1/${resourceName}/${resourceID}`,
+      body: JSON.stringify(resource),
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  return {
+    state: {
+      loading: state.loading,
+      resource: state.resource,
+    },
+    setResource: (update: D) =>
+      updateState({
+        resource: update,
+      }),
+    hasPerm,

Review comment:
       is this necessary? Looks like this method and the permissions state isn't being consumed.
If so, we should remove it as it is making a unnecessary network request to the `_info` endpoint.


##########
File path: superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
##########
@@ -82,53 +116,147 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   show,
   database = null,
 }) => {
-  // const [disableSave, setDisableSave] = useState(true);
-  const [disableSave] = useState<boolean>(true);
-  const [db, setDB] = useState<Partial<DatabaseObject> | null>(null);
+  const [disableSave, setDisableSave] = useState<boolean>(true);
+  const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
+  const isEditMode = database !== null;
+
+  // Database fetch logic
+  const {
+    state: { loading: dbLoading, resource: dbFetched },
+    fetchResource,
+    createResource,
+    updateResource,
+  } = useSingleViewResource<DatabaseObject>(
+    'database',
+    t('database'),
+    addDangerToast,
+  );
+
   // Functions
   const hide = () => {
     setIsHidden(true);
     onHide();
   };
 
   const onSave = () => {
-    if (onDatabaseAdd) {
-      onDatabaseAdd();
-    }
+    if (isEditMode) {
+      // Edit
+      const update: DatabaseObject = {
+        database_name: db ? db.database_name : '',
+        sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
+        ...db,
+      };
+
+      // Need to clean update object
+      if (update.id) {
+        delete update.id;
+      }
+
+      if (!update.cache_timeout) {
+        update.cache_timeout = '0';
+      }
 
-    hide();
+      if (!update.encrypted_extra) {
+        update.encrypted_extra = '';
+      }
+
+      if (!update.force_ctas_schema) {
+        update.force_ctas_schema = '';
+      }
+
+      if (!update.server_cert) {
+        update.server_cert = '';
+      }
+
+      if (db && db.id) {
+        updateResource(db.id, update).then(() => {
+          if (onDatabaseAdd) {
+            onDatabaseAdd();
+          }
+
+          hide();
+        });
+      }
+    } else if (db) {
+      // Create
+      createResource(db).then(() => {
+        if (onDatabaseAdd) {
+          onDatabaseAdd();
+        }
+
+        hide();
+      });
+    }
   };
 
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const target = event.target;
     const data = {
       database_name: db ? db.database_name : '',
-      uri: db ? db.uri : '',
+      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
       ...db,
     };
 
-    data[target.name] = target.value;
+    if (target.type === 'checkbox') {
+      data[target.name] = target.checked;
+    } else {
+      data[target.name] = target.value;
+    }
 
     setDB(data);
   };
 
-  const isEditMode = database !== null;
+  const onTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const target = event.target;
+    const data = {
+      database_name: db ? db.database_name : '',
+      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
+      ...db,
+    };
+
+    data[target.name] = target.value;
+    setDB(data);
+  };
+
+  const validate = () => {
+    if (
+      db &&
+      db.database_name.length &&
+      db.sqlalchemy_uri &&
+      db.sqlalchemy_uri.length
+    ) {
+      setDisableSave(false);
+    } else {
+      setDisableSave(true);
+    }
+  };
 
   // Initialize
   if (
     isEditMode &&
     (!db || !db.id || (database && database.id !== db.id) || (isHidden &&
show))
   ) {
-    setDB(database);
+    if (database && database.id !== null && !dbLoading) {
+      const id = database.id || 0;
+
+      fetchResource(id).then(() => {
+        setDB(dbFetched);
+      });
+    }
   } else if (!isEditMode && (!db || db.id || (isHidden && show))) {
     setDB({
       database_name: '',
-      uri: '',
+      sqlalchemy_uri: '',
     });
   }
 
+  // Validation
+  useEffect(() => {
+    validate();

Review comment:
       Do we really need to call this on every render? It's no an expensive operation now,
but it could become one. Would adding a dependency on `db` be a sensible optimization? 

##########
File path: superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
##########
@@ -203,16 +332,322 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> =
({
           </StyledInputContainer>
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Performance')}</span>} key="2">
-          Performance Form Data
+          <StyledInputContainer>
+            <div className="label">{t('Chart Cache Timeout')}</div>
+            <div className="input-container">
+              <input
+                type="number"
+                name="cache_timeout"
+                value={db ? db.cache_timeout || '' : ''}
+                placeholder={t('Chart Cache Timeout')}
+                onChange={onInputChange}
+              />
+            </div>
+            <div className="helper">
+              {t(
+                'Duration (in seconds) of the caching timeout for charts of this database.',
+              )}
+              {t(' A timeout of 0 indicates that the cache never expires.')}
+              {t(' Note this defaults to the global timeout if undefined.')}
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="allow_run_async"
+                indeterminate={false}
+                checked={db ? !!db.allow_run_async : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Asynchronous Query Execution')}</div>
+              <InfoTooltipWithTrigger
+                label="aqe"
+                tooltip={
+                  t(
+                    'Operate the database in asynchronous mode, meaning that the queries
',
+                  ) +
+                  t(
+                    'are executed on remote workers as opposed to on the web server itself.
',
+                  ) +
+                  t(
+                    'This assumes that you have a Celery worker setup as well as a results
',
+                  ) +
+                  t(
+                    'backend. Refer to the installation docs for more information.',

Review comment:
       I'm not sure translations work like this. Each of these will be extracted as separate
strings and not all language adhere to the same grammar rules. I think each of these sentences
needs to be wrapped in a single `t` so they're extracted as a single blob, I think something
like 
   
   ```js
   t('............very long string ...............' +
      '.............another long string ..........' + 
      ... 
   )
   ``` 
   
   should work. 




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


Mime
View raw message