From eced51070803cf20c89da86a2bfc001ed50e7b47 Mon Sep 17 00:00:00 2001 From: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Date: Tue, 1 Jun 2021 14:53:12 -0400 Subject: [PATCH] fix: Query History cosmetic issues (#14885) * easiest fix * Query History Cosmetic Issues * added revisions * beto revisions --- .../{QueryTable.jsx => QueryTable/index.jsx} | 143 ++++++++++++++---- .../SqlLab/components/QueryTable/styles.ts | 41 +++++ 2 files changed, 152 insertions(+), 32 deletions(-) rename superset-frontend/src/SqlLab/components/{QueryTable.jsx => QueryTable/index.jsx} (66%) create mode 100644 superset-frontend/src/SqlLab/components/QueryTable/styles.ts diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable/index.jsx similarity index 66% rename from superset-frontend/src/SqlLab/components/QueryTable.jsx rename to superset-frontend/src/SqlLab/components/QueryTable/index.jsx index e9414e59c2..b3bbed99cd 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable.jsx +++ b/superset-frontend/src/SqlLab/components/QueryTable/index.jsx @@ -22,16 +22,18 @@ import moment from 'moment'; import Card from 'src/components/Card'; import ProgressBar from 'src/components/ProgressBar'; import Label from 'src/components/Label'; -import { t, css } from '@superset-ui/core'; +import { t, styled } from '@superset-ui/core'; import { useSelector } from 'react-redux'; import TableView from 'src/components/TableView'; import Button from 'src/components/Button'; import { fDuration } from 'src/modules/dates'; -import { IconTooltip } from '../../components/IconTooltip'; -import ResultSet from './ResultSet'; -import ModalTrigger from '../../components/ModalTrigger'; -import HighlightedSql from './HighlightedSql'; -import QueryStateLabel from './QueryStateLabel'; +import Icons from 'src/components/Icons'; +import Icon from 'src/components/Icon'; +import { Tooltip } from 'src/components/Tooltip'; +import ResultSet from '../ResultSet'; +import ModalTrigger from '../../../components/ModalTrigger'; +import HighlightedSql from '../HighlightedSql'; +import { StaticPosition, verticalAlign, StyledTooltip } from './styles'; const propTypes = { columns: PropTypes.array, @@ -53,16 +55,78 @@ const openQuery = id => { window.open(url); }; -const StaticPosition = css` - position: static; +const statusAttributes = { + success: { + color: ({ theme }) => theme.colors.success.base, + config: { + name: 'check', + label: t('Success'), + status: 'success', + }, + }, + failed: { + color: ({ theme }) => theme.colors.error.base, + config: { + name: 'x-small', + label: t('Failed'), + status: 'failed', + }, + }, + stopped: { + color: ({ theme }) => theme.colors.error.base, + config: { + name: 'x-small', + label: t('Failed'), + status: 'failed', + }, + }, + running: { + color: ({ theme }) => theme.colors.primary.base, + config: { + name: 'running', + label: t('Running'), + status: 'running', + }, + }, + timed_out: { + color: ({ theme }) => theme.colors.grayscale.light1, + config: { + name: 'offline', + label: t('Offline'), + status: 'offline', + }, + }, + scheduled: { + name: 'queued', + label: t('Scheduled'), + status: 'queued', + }, + pending: { + name: 'queued', + label: t('Scheduled'), + status: 'queued', + }, +}; + +const StatusIcon = styled(Icon, { + shouldForwardProp: prop => prop !== 'status', +})` + color: ${({ status, theme }) => + statusAttributes[status]?.color || theme.colors.grayscale.base}; `; const QueryTable = props => { + const setHeaders = column => { + if (column === 'sql') { + return column.toUpperCase(); + } + return column.charAt(0).toUpperCase().concat(column.slice(1)); + }; const columns = useMemo( () => props.columns.map(column => ({ accessor: column, - Header: column, + Header: () => setHeaders(column), disableSortBy: true, })), [props.columns], @@ -176,44 +240,59 @@ const QueryTable = props => { q.ctas && q.tempTable && q.tempTable.includes('.') ? '' : q.schema; q.output = [schemaUsed, q.tempTable].filter(v => v).join('.'); } - q.progress = ( - - ); - let errorTooltip; - if (q.errorMessage) { - errorTooltip = ( - - - + q.progress = + q.state === 'success' ? ( + + ) : ( + ); - } q.state = ( -
- - {errorTooltip} -
+ + + + + ); q.actions = (
- restoreSql(query)} tooltip={t( 'Overwrite text in the editor with a query on this table', )} placement="top" - /> - + + + openQueryInNewTab(query)} tooltip={t('Run query in a new tab')} placement="top" - /> - + + + removeQuery(query)} - /> + > + +
); return q; diff --git a/superset-frontend/src/SqlLab/components/QueryTable/styles.ts b/superset-frontend/src/SqlLab/components/QueryTable/styles.ts new file mode 100644 index 0000000000..2800f09945 --- /dev/null +++ b/superset-frontend/src/SqlLab/components/QueryTable/styles.ts @@ -0,0 +1,41 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { styled, css } from '@superset-ui/core'; +import { IconTooltip } from '../../../components/IconTooltip'; + +export const StaticPosition = css` + position: static; +`; + +export const verticalAlign = css` + vertical-align: 0em; + svg { + height: 0.9em; + } +`; + +export const StyledTooltip = styled(IconTooltip)` + padding-right: ${({ theme }) => theme.gridUnit * 2}px; + span { + color: ${({ theme }) => theme.colors.grayscale.base}; + &: hover { + color: ${({ theme }) => theme.colors.primary.base}; + } + } +`;