From 4ff9aac1fae2d88fd7667317c706256d3cfcb4f4 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Thu, 12 Dec 2024 15:30:50 -0800 Subject: [PATCH] feat(sqllab): giving the query history pane a facelift (#31316) --- .../src/SqlLab/actions/sqlLab.js | 4 +- .../SqlLab/components/QueryTable/index.tsx | 96 +++++++++++++------ .../src/components/Icons/Icons.stories.tsx | 13 ++- .../src/components/Label/Label.stories.tsx | 9 +- .../src/components/Label/index.tsx | 54 +++++++---- 5 files changed, 121 insertions(+), 55 deletions(-) diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js index 568dbb9b1..4fd770833 100644 --- a/superset-frontend/src/SqlLab/actions/sqlLab.js +++ b/superset-frontend/src/SqlLab/actions/sqlLab.js @@ -421,9 +421,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 to stop query.')))); }; } diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx index 916c04aec..43cc5da7b 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx @@ -16,11 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { useMemo } from 'react'; +import { useMemo, ReactNode } from 'react'; import moment from 'moment'; import Card from 'src/components/Card'; import ProgressBar from 'src/components/ProgressBar'; -import Label from 'src/components/Label'; import { t, useTheme, QueryResponse } from '@superset-ui/core'; import { useDispatch, useSelector } from 'react-redux'; @@ -35,6 +34,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'; @@ -44,11 +44,16 @@ import HighlightedSql from '../HighlightedSql'; import { StaticPosition, verticalAlign, StyledTooltip } from './styles'; interface QueryTableQuery - extends Omit { + extends Omit< + QueryResponse, + 'state' | 'sql' | 'progress' | 'results' | 'duration' | 'started' + > { state?: Record; sql?: Record; progress?: Record; results?: Record; + duration?: ReactNode; + started?: ReactNode; } interface QueryTableProps { @@ -125,55 +130,95 @@ const QueryTable = ({ const statusAttributes = { success: { config: { - icon: , + icon: ( + + ), + // icon: , label: t('Success'), }, }, failed: { config: { - icon: , + icon: ( + + ), label: t('Failed'), }, }, stopped: { config: { - icon: , + icon: ( + + ), label: t('Failed'), }, }, running: { config: { - icon: , + icon: ( + + ), label: t('Running'), }, }, fetching: { config: { - icon: , + icon: ( + + ), label: t('Fetching'), }, }, timed_out: { config: { - icon: , + icon: ( + + ), label: t('Offline'), }, }, scheduled: { config: { - icon: , + icon: ( + + ), label: t('Scheduled'), }, }, pending: { config: { - icon: , + icon: ( + + ), label: t('Scheduled'), }, }, error: { config: { - icon: , + icon: ( + + ), label: t('Unknown Status'), }, }, @@ -187,16 +232,10 @@ const QueryTable = ({ const status = statusAttributes[state] || statusAttributes.error; if (q.endDttm) { - q.duration = fDuration(q.startDttm, q.endDttm); + q.duration = ( + + ); } - const time = moment(q.startDttm).format().split('T'); - q.time = ( -
- - {time[0]}
{time[1]} - -
- ); q.user = ( } modalTitle={t('Data preview')} beforeOpen={() => openAsyncResults(query, displayLimit)} @@ -275,9 +316,7 @@ const QueryTable = ({ ); q.state = ( - - {status.config.icon} - + {status.config.icon} ); q.actions = (
@@ -287,6 +326,7 @@ const QueryTable = ({ 'Overwrite text in the editor with a query on this table', )} placement="top" + className="pointer" > @@ -294,6 +334,7 @@ const QueryTable = ({ onClick={() => openQueryInNewTab(query)} tooltip={t('Run query in a new tab')} placement="top" + className="pointer" > @@ -301,6 +342,7 @@ const QueryTable = ({ dispatch(removeQuery(query))} + className="pointer" > diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx b/superset-frontend/src/components/Icons/Icons.stories.tsx index db7410ca6..5a21daf5f 100644 --- a/superset-frontend/src/components/Icons/Icons.stories.tsx +++ b/superset-frontend/src/components/Icons/Icons.stories.tsx @@ -44,10 +44,19 @@ const IconBlock = styled.div` flex-direction: column; align-items: center; padding: ${({ theme }) => theme.gridUnit * 2}px; + + span { + margin-top: ${({ theme }) => + 2 * theme.gridUnit}px; // Add spacing between icon and name + font-size: ${({ theme }) => + theme.typography.sizes.m}; // Optional: adjust font size for elegance + color: ${({ theme }) => + theme.colors.grayscale.base}; // Optional: subtle color for the name + } `; export const InteractiveIcons = ({ - showNames, + showNames = true, ...rest }: IconType & { showNames: boolean }) => ( @@ -56,7 +65,7 @@ export const InteractiveIcons = ({ return ( - {showNames && k} + {showNames && {k}} ); })} diff --git a/superset-frontend/src/components/Label/Label.stories.tsx b/superset-frontend/src/components/Label/Label.stories.tsx index d502e160c..5c4618246 100644 --- a/superset-frontend/src/components/Label/Label.stories.tsx +++ b/superset-frontend/src/components/Label/Label.stories.tsx @@ -55,9 +55,13 @@ export const LabelGallery = () => ( ); export const InteractiveLabel = (args: any) => { - const { hasOnClick, label, ...rest } = args; + const { hasOnClick, label, monospace, ...rest } = args; return ( -