mirror of
https://github.com/apache/superset.git
synced 2024-09-18 03:29:38 -04:00
refactor: Move ProgressBar to Antd (#11875)
* Move ProgressBar to Antd * Remove trailing space * Fix linting issues * Export enhanced Progress only
This commit is contained in:
parent
54bf70733f
commit
5b1939802d
@ -19,7 +19,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import { Alert, ProgressBar } from 'react-bootstrap';
|
import { Alert } from 'react-bootstrap';
|
||||||
|
import ProgressBar from 'src/common/components/ProgressBar';
|
||||||
|
|
||||||
import FilterableTable from 'src/components/FilterableTable/FilterableTable';
|
import FilterableTable from 'src/components/FilterableTable/FilterableTable';
|
||||||
import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
|
import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
|
||||||
|
@ -19,7 +19,8 @@
|
|||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { ProgressBar, Well } from 'react-bootstrap';
|
import { Well } from 'react-bootstrap';
|
||||||
|
import ProgressBar from 'src/common/components/ProgressBar';
|
||||||
import Label from 'src/components/Label';
|
import Label from 'src/components/Label';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
|
|
||||||
@ -169,11 +170,7 @@ const QueryTable = props => {
|
|||||||
q.output = [schemaUsed, q.tempTable].filter(v => v).join('.');
|
q.output = [schemaUsed, q.tempTable].filter(v => v).join('.');
|
||||||
}
|
}
|
||||||
q.progress = (
|
q.progress = (
|
||||||
<ProgressBar
|
<ProgressBar percent={parseInt(q.progress.toFixed(0), 10)} striped />
|
||||||
striped
|
|
||||||
now={q.progress}
|
|
||||||
label={`${q.progress.toFixed(0)}%`}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
let errorTooltip;
|
let errorTooltip;
|
||||||
if (q.errorMessage) {
|
if (q.errorMessage) {
|
||||||
|
@ -17,7 +17,8 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { CSSProperties } from 'react';
|
import React, { CSSProperties } from 'react';
|
||||||
import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap';
|
import { Alert, ButtonGroup } from 'react-bootstrap';
|
||||||
|
import ProgressBar from 'src/common/components/ProgressBar';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import shortid from 'shortid';
|
import shortid from 'shortid';
|
||||||
import { styled, t } from '@superset-ui/core';
|
import { styled, t } from '@superset-ui/core';
|
||||||
@ -356,9 +357,8 @@ export default class ResultSet extends React.PureComponent<
|
|||||||
if (query.progress > 0) {
|
if (query.progress > 0) {
|
||||||
progressBar = (
|
progressBar = (
|
||||||
<ProgressBar
|
<ProgressBar
|
||||||
|
percent={parseInt(query.progress.toFixed(0), 10)}
|
||||||
striped
|
striped
|
||||||
now={query.progress}
|
|
||||||
label={`${query.progress.toFixed(0)}%`}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
54
superset-frontend/src/common/components/ProgressBar.tsx
Normal file
54
superset-frontend/src/common/components/ProgressBar.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
/**
|
||||||
|
* 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 React from 'react';
|
||||||
|
import { styled } from '@superset-ui/core';
|
||||||
|
// eslint-disable-next-line no-restricted-imports
|
||||||
|
import { Progress as AntdProgress } from 'antd';
|
||||||
|
import { ProgressProps } from 'antd/lib/progress/progress';
|
||||||
|
|
||||||
|
interface ProgressBarProps extends ProgressProps {
|
||||||
|
striped?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const ProgressBar = styled(({ striped, ...props }: ProgressBarProps) => (
|
||||||
|
<AntdProgress {...props} />
|
||||||
|
))`
|
||||||
|
line-height: 0;
|
||||||
|
.ant-progress-outer {
|
||||||
|
${({ percent }) => !percent && `display: none;`}
|
||||||
|
}
|
||||||
|
.ant-progress-text {
|
||||||
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
|
}
|
||||||
|
.ant-progress-bg {
|
||||||
|
${({ striped }) =>
|
||||||
|
striped &&
|
||||||
|
`
|
||||||
|
background-image: linear-gradient(45deg,
|
||||||
|
rgba(255, 255, 255, 0.15) 25%,
|
||||||
|
transparent 25%, transparent 50%,
|
||||||
|
rgba(255, 255, 255, 0.15) 50%,
|
||||||
|
rgba(255, 255, 255, 0.15) 75%,
|
||||||
|
transparent 75%, transparent);
|
||||||
|
background-size: 1rem 1rem; `};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default ProgressBar;
|
@ -32,6 +32,7 @@ import {
|
|||||||
DatePicker as AntdDatePicker,
|
DatePicker as AntdDatePicker,
|
||||||
RangePicker as AntdRangePicker,
|
RangePicker as AntdRangePicker,
|
||||||
} from './DatePicker';
|
} from './DatePicker';
|
||||||
|
import ProgressBar from './ProgressBar';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'Common Components',
|
title: 'Common Components',
|
||||||
@ -239,6 +240,10 @@ export const DateRangePicker = () => (
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const Progress = () => <ProgressBar percent={90} />;
|
||||||
|
export const ProgressStriped = () => <ProgressBar percent={90} striped />;
|
||||||
|
export const ProgressSuccess = () => <ProgressBar percent={100} />;
|
||||||
|
|
||||||
export const Switch = () => (
|
export const Switch = () => (
|
||||||
<>
|
<>
|
||||||
<AntdSwitch defaultChecked />
|
<AntdSwitch defaultChecked />
|
||||||
|
@ -48,6 +48,8 @@ export {
|
|||||||
Tooltip,
|
Tooltip,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
|
|
||||||
|
export { default as Progress } from 'src/common/components/ProgressBar';
|
||||||
|
|
||||||
export const MenuItem = styled(AntdMenu.Item)`
|
export const MenuItem = styled(AntdMenu.Item)`
|
||||||
> a {
|
> a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
Loading…
Reference in New Issue
Block a user