MayUWish commented on a change in pull request #17944:
URL: https://github.com/apache/superset/pull/17944#discussion_r788203080
##########
File path: superset-frontend/src/SqlLab/components/QueryTable/index.tsx
##########
@@ -29,133 +28,166 @@ import Button from 'src/components/Button';
import { fDuration } from 'src/modules/dates';
import Icons from 'src/components/Icons';
import { Tooltip } from 'src/components/Tooltip';
+import { Query } from 'src/SqlLab/types';
+import ModalTrigger from 'src/components/ModalTrigger';
+import rootReducer from 'src/SqlLab/reducers';
import ResultSet from '../ResultSet';
-import ModalTrigger from '../../../components/ModalTrigger';
import HighlightedSql from '../HighlightedSql';
import { StaticPosition, verticalAlign, StyledTooltip } from './styles';
-const propTypes = {
- columns: PropTypes.array,
- actions: PropTypes.object,
- queries: PropTypes.array,
- onUserClicked: PropTypes.func,
- onDbClicked: PropTypes.func,
- displayLimit: PropTypes.number.isRequired,
-};
-const defaultProps = {
- columns: ['started', 'duration', 'rows'],
- queries: [],
- onUserClicked: () => {},
- onDbClicked: () => {},
-};
+// Acquire redux rootstate type, to be used in useSelector
+type RootState = ReturnType<typeof rootReducer>;
+
+// query's type is original Query; Shallow-copy of query, q's type is
QueryTableQuery. So that prop, sql passed to another component will remain
string, the type of original Query
+interface QueryTableQuery extends Omit<Query, 'state' | 'sql' | 'progress'> {
+ state?: Record<string, any>;
+ sql?: Record<string, any>;
+ progress?: Record<string, any>;
+}
+
+interface QueryTableProps {
+ columns?: string[];
+ actions: {
+ queryEditorSetSql: any;
+ cloneQueryToNewTab: any;
+ fetchQueryResults: any;
+ clearQueryResults: any;
+ removeQuery: any;
+ };
+ queries?: Query[];
+ onUserClicked?: Function;
+ onDbClicked?: Function;
+ displayLimit: number;
+}
-const openQuery = id => {
+const openQuery = (id: number) => {
const url = `/superset/sqllab?queryId=${id}`;
window.open(url);
};
-const QueryTable = props => {
+const QueryTable = ({
+ columns = ['started', 'duration', 'rows'],
+ actions,
+ queries = [],
+ onUserClicked = () => undefined,
+ onDbClicked = () => undefined,
+ displayLimit = Infinity,
+}: QueryTableProps) => {
const theme = useTheme();
- const statusAttributes = {
- success: {
- config: {
- icon: <Icons.Check iconColor={theme.colors.success.base} />,
- label: t('Success'),
- },
- },
- failed: {
- config: {
- icon: <Icons.XSmall iconColor={theme.colors.error.base} />,
- label: t('Failed'),
- },
- },
- stopped: {
- config: {
- icon: <Icons.XSmall iconColor={theme.colors.error.base} />,
- label: t('Failed'),
- },
- },
- running: {
- config: {
- icon: <Icons.Running iconColor={theme.colors.primary.base} />,
- label: t('Running'),
- },
- },
- fetching: {
- config: {
- icon: <Icons.Queued iconColor={theme.colors.primary.base} />,
- label: t('fetching'),
- },
- },
- timed_out: {
- config: {
- icon: <Icons.Offline iconColor={theme.colors.grayscale.light1} />,
- label: t('Offline'),
- },
- },
- scheduled: {
- config: {
- icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />,
- label: t('Scheduled'),
- },
- },
- pending: {
- config: {
- icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />,
- label: t('Scheduled'),
- },
- },
- error: {
- config: {
- icon: <Icons.Error iconColor={theme.colors.error.base} />,
- label: t('Unknown Status'),
- },
- },
- };
- const setHeaders = column => {
+ const setHeaders = (column: string) => {
if (column === 'sql') {
return column.toUpperCase();
}
return column.charAt(0).toUpperCase().concat(column.slice(1));
};
- const columns = useMemo(
+ const columnsOfTable = useMemo(
() =>
- props.columns.map(column => ({
+ columns.map(column => ({
accessor: column,
Header: () => setHeaders(column),
disableSortBy: true,
})),
- [props.columns],
+ [columns],
);
- const user = useSelector(({ sqlLab: { user } }) => user);
+ const user = useSelector((state: RootState) => state.sqlLab.user);
+
+ // As 5 actions are required, deconstruction is used here. The aliasName is
provided for clearQueryResults and removeQuery to have a difference from
function name declared later. Deconstruction is not made at function parameter,
bc actions are passed in as prop at ResultSet.
+ // const {
+ // queryEditorSetSql,
+ // cloneQueryToNewTab,
+ // fetchQueryResults,
+ // clearQueryResults: clearQueryResultsAlias,
+ // removeQuery: removeQueryAlias,
+ // } = actions;
const data = useMemo(() => {
- const restoreSql = query => {
- props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
+ const restoreSql = (query: Query) => {
+ actions?.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
};
- const openQueryInNewTab = query => {
- props.actions.cloneQueryToNewTab(query, true);
+ const openQueryInNewTab = (query: Query) => {
+ actions?.cloneQueryToNewTab(query, true);
};
- const openAsyncResults = (query, displayLimit) => {
- props.actions.fetchQueryResults(query, displayLimit);
+ const openAsyncResults = (query: Query, displayLimit: number) => {
+ actions?.fetchQueryResults(query, displayLimit);
};
- const clearQueryResults = query => {
- props.actions.clearQueryResults(query);
+ const clearQueryResults = (query: Query) => {
+ actions?.clearQueryResults(query);
};
- const removeQuery = query => {
- props.actions.removeQuery(query);
+ const removeQuery = (query: Query) => {
+ actions?.removeQuery(query);
};
- return props.queries
+ const statusAttributes = {
+ success: {
+ config: {
+ icon: <Icons.Check iconColor={theme.colors.success.base} />,
+ label: t('Success'),
+ },
+ },
+ failed: {
+ config: {
+ icon: <Icons.XSmall iconColor={theme.colors.error.base} />,
+ label: t('Failed'),
+ },
+ },
+ stopped: {
+ config: {
+ icon: <Icons.XSmall iconColor={theme.colors.error.base} />,
+ label: t('Failed'),
+ },
+ },
+ running: {
+ config: {
+ icon: <Icons.Running iconColor={theme.colors.primary.base} />,
+ label: t('Running'),
+ },
+ },
+ fetching: {
+ config: {
+ icon: <Icons.Queued iconColor={theme.colors.primary.base} />,
+ label: t('fetching'),
+ },
+ },
+ timed_out: {
+ config: {
+ icon: <Icons.Offline iconColor={theme.colors.grayscale.light1} />,
+ label: t('Offline'),
+ },
+ },
+ scheduled: {
+ config: {
+ icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />,
+ label: t('Scheduled'),
+ },
+ },
+ pending: {
+ config: {
+ icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />,
+ label: t('Scheduled'),
+ },
+ },
+ error: {
+ config: {
+ icon: <Icons.Error iconColor={theme.colors.error.base} />,
+ label: t('Unknown Status'),
+ },
+ },
+ };
+
+ return queries
.map(query => {
- const q = { ...query };
- const status = statusAttributes[q.state] || statusAttributes.error;
+ // query's type is original Query; Shallow-copy of query, q's type is
QueryTableQuery. So that prop, sql passed to another component will remain
string, the type of original Query.
+ // qTemp is used to bring in the properties that you don't overwrite,
which will be assigned to q, so that q.state/q.sql/q.progress will be later
object.
+ const { state, sql, progress, ...qTemp } = query;
+ const q: QueryTableQuery = { ...qTemp };
Review comment:
I guess I would need qTemp, bc only having { state, sql, progress, ...q
} = query, I cannot add extra property/ key-value-pair to it, such as
q.sql/state/progress as object. Please let me know if my understanding is not
correct or there is other way to do it. Thank you very much.
--
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.
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
