You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2024/12/06 03:02:49 UTC
(superset) 01/01: feat(sqllab): giving the query history pane a facelift
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch query-history-facelift
in repository https://gitbox.apache.org/repos/asf/superset.git
commit c27e29bf3a64f229fcc9409e6e2ecc5d2f032059
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Thu Dec 5 19:01:51 2024 -0800
feat(sqllab): giving the query history pane a facelift
Fixing some styling and UI components in the query history pane in SQL Lab
---
superset-frontend/src/SqlLab/actions/sqlLab.js | 5 +-
.../src/SqlLab/components/QueryTable/index.tsx | 53 ++++++++++++----------
2 files changed, 32 insertions(+), 26 deletions(-)
diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js
index 568dbb9b1f..b639d5ca9c 100644
--- a/superset-frontend/src/SqlLab/actions/sqlLab.js
+++ b/superset-frontend/src/SqlLab/actions/sqlLab.js
@@ -384,6 +384,7 @@ export function runQueryFromSqlEditor(
ctas,
ctasMethod,
) {
+ console.log('YOYO', queryEditor);
return function (dispatch, getState) {
const qe = getUpToDateQuery(getState(), queryEditor, queryEditor.id);
const query = {
@@ -421,9 +422,7 @@ export function postStopQuery(query) {
})
.then(() => dispatch(stopQuery(query)))
.then(() => dispatch(addSuccessToast(t('Query was stopped.'))))
- .catch(() =>
- dispatch(addDangerToast(t('Failed at stopping query. %s', query.id))),
- );
+ .catch(() => dispatch(addDangerToast(t('Failed at stopping query.'))));
};
}
diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
index 916c04aece..1d132cb22d 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
@@ -35,6 +35,7 @@ import TableView from 'src/components/TableView';
import Button from 'src/components/Button';
import { fDuration } from 'src/utils/dates';
import Icons from 'src/components/Icons';
+import Label from 'src/components/Label';
import { Tooltip } from 'src/components/Tooltip';
import { SqlLabRootState } from 'src/SqlLab/types';
import ModalTrigger from 'src/components/ModalTrigger';
@@ -125,49 +126,52 @@ const QueryTable = ({
const statusAttributes = {
success: {
config: {
- icon: <Icons.Check iconColor={theme.colors.success.base} />,
+ icon: <Icons.CheckOutlined iconColor={theme.colors.success.base} />,
+ //icon: <Icons.Edit iconSize="xl" />,
label: t('Success'),
},
},
failed: {
config: {
- icon: <Icons.XSmall iconColor={theme.colors.error.base} />,
+ icon: <Icons.CloseOutlined iconColor={theme.colors.error.base} />,
label: t('Failed'),
},
},
stopped: {
config: {
- icon: <Icons.XSmall iconColor={theme.colors.error.base} />,
+ icon: <Icons.CloseOutlined iconColor={theme.colors.error.base} />,
label: t('Failed'),
},
},
running: {
config: {
- icon: <Icons.Running iconColor={theme.colors.primary.base} />,
+ icon: <Icons.LoadingOutlined iconColor={theme.colors.primary.base} />,
label: t('Running'),
},
},
fetching: {
config: {
- icon: <Icons.Queued iconColor={theme.colors.primary.base} />,
+ icon: (
+ <Icons.HourglassOutlined iconColor={theme.colors.primary.base} />
+ ),
label: t('Fetching'),
},
},
timed_out: {
config: {
- icon: <Icons.Offline iconColor={theme.colors.grayscale.light1} />,
+ icon: <Icons.Clock iconColor={theme.colors.error.base} />,
label: t('Offline'),
},
},
scheduled: {
config: {
- icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />,
+ icon: <Icons.Clock iconColor={theme.colors.warning.base} />,
label: t('Scheduled'),
},
},
pending: {
config: {
- icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />,
+ icon: <Icons.Clock iconColor={theme.colors.warning.base} />,
label: t('Scheduled'),
},
},
@@ -187,16 +191,14 @@ const QueryTable = ({
const status = statusAttributes[state] || statusAttributes.error;
if (q.endDttm) {
- q.duration = fDuration(q.startDttm, q.endDttm);
+ q.duration = (
+ <Label
+ style={{ 'font-family': theme.typography.families.monospace }}
+ >
+ {fDuration(q.startDttm, q.endDttm)}
+ </Label>
+ );
}
- const time = moment(q.startDttm).format().split('T');
- q.time = (
- <div>
- <span>
- {time[0]} <br /> {time[1]}
- </span>
- </div>
- );
q.user = (
<Button
buttonSize="small"
@@ -215,7 +217,11 @@ const QueryTable = ({
{q.db}
</Button>
);
- q.started = moment(q.startDttm).format('L HH:mm:ss');
+ q.started = (
+ <Label style={{ 'font-family': theme.typography.families.monospace }}>
+ {moment(q.startDttm).format('L HH:mm:ss')}
+ </Label>
+ );
q.querylink = (
<Button
buttonSize="small"
@@ -241,9 +247,9 @@ const QueryTable = ({
<ModalTrigger
className="ResultsModal"
triggerNode={
- <Label type="info" className="pointer">
+ <Button buttonSize="xsmall" buttonStyle="tertiary">
{t('View')}
- </Label>
+ </Button>
}
modalTitle={t('Data preview')}
beforeOpen={() => openAsyncResults(query, displayLimit)}
@@ -275,9 +281,7 @@ const QueryTable = ({
<ProgressBar percent={parseInt(progress.toFixed(0), 10)} striped />
);
q.state = (
- <Tooltip title={status.config.label} placement="bottom">
- <span>{status.config.icon}</span>
- </Tooltip>
+ <Tooltip title={status.config.label}>{status.config.icon}</Tooltip>
);
q.actions = (
<div>
@@ -287,6 +291,7 @@ const QueryTable = ({
'Overwrite text in the editor with a query on this table',
)}
placement="top"
+ className="pointer"
>
<Icons.Edit iconSize="xl" />
</StyledTooltip>
@@ -294,6 +299,7 @@ const QueryTable = ({
onClick={() => openQueryInNewTab(query)}
tooltip={t('Run query in a new tab')}
placement="top"
+ className="pointer"
>
<Icons.PlusCircleOutlined iconSize="xl" css={verticalAlign} />
</StyledTooltip>
@@ -301,6 +307,7 @@ const QueryTable = ({
<StyledTooltip
tooltip={t('Remove query from log')}
onClick={() => dispatch(removeQuery(query))}
+ className="pointer"
>
<Icons.Trash iconSize="xl" />
</StyledTooltip>