mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix: Query History cosmetic issues (#14885)
* easiest fix * Query History Cosmetic Issues * added revisions * beto revisions
This commit is contained in:
parent
eef489c667
commit
eced510708
@ -22,16 +22,18 @@ import moment from 'moment';
|
|||||||
import Card from 'src/components/Card';
|
import Card from 'src/components/Card';
|
||||||
import ProgressBar from 'src/components/ProgressBar';
|
import ProgressBar from 'src/components/ProgressBar';
|
||||||
import Label from 'src/components/Label';
|
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 { useSelector } from 'react-redux';
|
||||||
import TableView from 'src/components/TableView';
|
import TableView from 'src/components/TableView';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { fDuration } from 'src/modules/dates';
|
import { fDuration } from 'src/modules/dates';
|
||||||
import { IconTooltip } from '../../components/IconTooltip';
|
import Icons from 'src/components/Icons';
|
||||||
import ResultSet from './ResultSet';
|
import Icon from 'src/components/Icon';
|
||||||
import ModalTrigger from '../../components/ModalTrigger';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import HighlightedSql from './HighlightedSql';
|
import ResultSet from '../ResultSet';
|
||||||
import QueryStateLabel from './QueryStateLabel';
|
import ModalTrigger from '../../../components/ModalTrigger';
|
||||||
|
import HighlightedSql from '../HighlightedSql';
|
||||||
|
import { StaticPosition, verticalAlign, StyledTooltip } from './styles';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
columns: PropTypes.array,
|
columns: PropTypes.array,
|
||||||
@ -53,16 +55,78 @@ const openQuery = id => {
|
|||||||
window.open(url);
|
window.open(url);
|
||||||
};
|
};
|
||||||
|
|
||||||
const StaticPosition = css`
|
const statusAttributes = {
|
||||||
position: static;
|
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 QueryTable = props => {
|
||||||
|
const setHeaders = column => {
|
||||||
|
if (column === 'sql') {
|
||||||
|
return column.toUpperCase();
|
||||||
|
}
|
||||||
|
return column.charAt(0).toUpperCase().concat(column.slice(1));
|
||||||
|
};
|
||||||
const columns = useMemo(
|
const columns = useMemo(
|
||||||
() =>
|
() =>
|
||||||
props.columns.map(column => ({
|
props.columns.map(column => ({
|
||||||
accessor: column,
|
accessor: column,
|
||||||
Header: column,
|
Header: () => setHeaders(column),
|
||||||
disableSortBy: true,
|
disableSortBy: true,
|
||||||
})),
|
})),
|
||||||
[props.columns],
|
[props.columns],
|
||||||
@ -176,44 +240,59 @@ const QueryTable = props => {
|
|||||||
q.ctas && q.tempTable && q.tempTable.includes('.') ? '' : q.schema;
|
q.ctas && q.tempTable && q.tempTable.includes('.') ? '' : q.schema;
|
||||||
q.output = [schemaUsed, q.tempTable].filter(v => v).join('.');
|
q.output = [schemaUsed, q.tempTable].filter(v => v).join('.');
|
||||||
}
|
}
|
||||||
q.progress = (
|
q.progress =
|
||||||
<ProgressBar percent={parseInt(q.progress.toFixed(0), 10)} striped />
|
q.state === 'success' ? (
|
||||||
);
|
<ProgressBar
|
||||||
let errorTooltip;
|
percent={parseInt(q.progress.toFixed(0), 10)}
|
||||||
if (q.errorMessage) {
|
striped
|
||||||
errorTooltip = (
|
showInfo={false}
|
||||||
<IconTooltip tooltip={q.errorMessage}>
|
/>
|
||||||
<i className="fa fa-exclamation-circle text-danger" />
|
) : (
|
||||||
</IconTooltip>
|
<ProgressBar
|
||||||
|
percent={parseInt(q.progress.toFixed(0), 10)}
|
||||||
|
striped
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
q.state = (
|
q.state = (
|
||||||
<div>
|
<Tooltip
|
||||||
<QueryStateLabel query={query} />
|
title={statusAttributes[q.state].config.label}
|
||||||
{errorTooltip}
|
placement="bottom"
|
||||||
</div>
|
>
|
||||||
|
<span>
|
||||||
|
<StatusIcon
|
||||||
|
name={statusAttributes[q.state].config.name}
|
||||||
|
status={statusAttributes[q.state].config.status}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
);
|
);
|
||||||
q.actions = (
|
q.actions = (
|
||||||
<div>
|
<div>
|
||||||
<IconTooltip
|
<StyledTooltip
|
||||||
className="fa fa-pencil m-r-3 pointer"
|
|
||||||
onClick={() => restoreSql(query)}
|
onClick={() => restoreSql(query)}
|
||||||
tooltip={t(
|
tooltip={t(
|
||||||
'Overwrite text in the editor with a query on this table',
|
'Overwrite text in the editor with a query on this table',
|
||||||
)}
|
)}
|
||||||
placement="top"
|
placement="top"
|
||||||
/>
|
>
|
||||||
<IconTooltip
|
<Icons.Edit iconSize="small" />
|
||||||
className="fa fa-plus-circle m-r-3 pointer"
|
</StyledTooltip>
|
||||||
|
<StyledTooltip
|
||||||
onClick={() => openQueryInNewTab(query)}
|
onClick={() => openQueryInNewTab(query)}
|
||||||
tooltip={t('Run query in a new tab')}
|
tooltip={t('Run query in a new tab')}
|
||||||
placement="top"
|
placement="top"
|
||||||
/>
|
>
|
||||||
<IconTooltip
|
<Icons.PlusCircleOutlined
|
||||||
className="fa fa-trash m-r-3 pointer"
|
iconSize="x-small"
|
||||||
|
css={verticalAlign}
|
||||||
|
/>
|
||||||
|
</StyledTooltip>
|
||||||
|
<StyledTooltip
|
||||||
tooltip={t('Remove query from log')}
|
tooltip={t('Remove query from log')}
|
||||||
onClick={() => removeQuery(query)}
|
onClick={() => removeQuery(query)}
|
||||||
/>
|
>
|
||||||
|
<Icons.Trash iconSize="x-small" />
|
||||||
|
</StyledTooltip>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
return q;
|
return q;
|
41
superset-frontend/src/SqlLab/components/QueryTable/styles.ts
Normal file
41
superset-frontend/src/SqlLab/components/QueryTable/styles.ts
Normal file
@ -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};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
Loading…
Reference in New Issue
Block a user