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 = (
-