fix(sqllab): hide tracking url when fetching (#20905)

This commit is contained in:
Jesse Yang 2022-07-29 08:47:53 -07:00 committed by GitHub
parent e739ff5076
commit 5ae0e83b8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -16,7 +16,7 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import React, { CSSProperties } from 'react'; import React from 'react';
import ButtonGroup from 'src/components/ButtonGroup'; import ButtonGroup from 'src/components/ButtonGroup';
import Alert from 'src/components/Alert'; import Alert from 'src/components/Alert';
import Button from 'src/components/Button'; import Button from 'src/components/Button';
@ -54,8 +54,6 @@ enum LIMITING_FACTOR {
NOT_LIMITED = 'NOT_LIMITED', NOT_LIMITED = 'NOT_LIMITED',
} }
const LOADING_STYLES: CSSProperties = { position: 'relative', minHeight: 100 };
interface ResultSetProps { interface ResultSetProps {
showControls?: boolean; showControls?: boolean;
actions: Record<string, any>; actions: Record<string, any>;
@ -80,6 +78,14 @@ interface ResultSetState {
alertIsOpen: boolean; alertIsOpen: boolean;
} }
const Styles = styled.div`
position: relative;
minheight: 100px;
.sql-result-track-job {
margin-top: ${({ theme }) => theme.gridUnit * 2}px;
}
`;
// Making text render line breaks/tabs as is as monospace, // Making text render line breaks/tabs as is as monospace,
// but wrapping text too so text doesn't overflow // but wrapping text too so text doesn't overflow
const MonospaceDiv = styled.div` const MonospaceDiv = styled.div`
@ -109,9 +115,6 @@ const ResultSetButtons = styled.div`
const ResultSetErrorMessage = styled.div` const ResultSetErrorMessage = styled.div`
padding-top: ${({ theme }) => 4 * theme.gridUnit}px; padding-top: ${({ theme }) => 4 * theme.gridUnit}px;
.sql-result-track-job {
margin-top: ${({ theme }) => 2 * theme.gridUnit}px;
}
`; `;
export default class ResultSet extends React.PureComponent< export default class ResultSet extends React.PureComponent<
@ -421,7 +424,11 @@ export default class ResultSet extends React.PureComponent<
exploreDBId = this.props.database.explore_database_id; exploreDBId = this.props.database.explore_database_id;
} }
let trackingUrl; let trackingUrl;
if (query.trackingUrl) { if (
query.trackingUrl &&
query.state !== 'success' &&
query.state !== 'fetching'
) {
trackingUrl = ( trackingUrl = (
<Button <Button
className="sql-result-track-job" className="sql-result-track-job"
@ -582,7 +589,7 @@ export default class ResultSet extends React.PureComponent<
: null; : null;
return ( return (
<div style={LOADING_STYLES}> <Styles>
<div>{!progressBar && <Loading position="normal" />}</div> <div>{!progressBar && <Loading position="normal" />}</div>
{/* show loading bar whenever progress bar is completed but needs time to render */} {/* show loading bar whenever progress bar is completed but needs time to render */}
<div>{query.progress === 100 && <Loading position="normal" />}</div> <div>{query.progress === 100 && <Loading position="normal" />}</div>
@ -591,8 +598,8 @@ export default class ResultSet extends React.PureComponent<
{progressMsg && <Alert type="success" message={progressMsg} />} {progressMsg && <Alert type="success" message={progressMsg} />}
</div> </div>
<div>{query.progress !== 100 && progressBar}</div> <div>{query.progress !== 100 && progressBar}</div>
<div>{trackingUrl}</div> {trackingUrl && <div>{trackingUrl}</div>}
</div> </Styles>
); );
} }
} }