You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/06/26 23:47:43 UTC
[incubator-superset] branch master updated: fix sqllab
css, fix double AddSliceCard margin and drag border (#5293)
This is an automated email from the ASF dual-hosted git repository.
ccwilliams pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 05a39b3 fix sqllab <Loading /> css, fix double AddSliceCard margin and drag border (#5293)
05a39b3 is described below
commit 05a39b395a1e4843cf284a57d081843548367d00
Author: Chris Williams <wi...@users.noreply.github.com>
AuthorDate: Tue Jun 26 16:47:41 2018 -0700
fix sqllab <Loading /> css, fix double AddSliceCard margin and drag border (#5293)
* fix sqllab <Loading /> css, fix double AddSliceCard margin and drag border
* [dashboard v2] improve cached visual indicator, add last fetched messaging
* [dashboard v2] fix ctrl + cmd + z + UndoRedoKeylisteners
---
superset/assets/src/SqlLab/TODO.md | 19 ---------------
.../assets/src/SqlLab/components/ResultSet.jsx | 6 +++--
.../assets/src/SqlLab/components/SouthPane.jsx | 2 +-
superset/assets/src/SqlLab/main.less | 4 ++--
.../dashboard/components/BuilderComponentPane.jsx | 2 --
.../src/dashboard/components/SliceHeader.jsx | 4 ++++
.../dashboard/components/SliceHeaderControls.jsx | 27 +++++++++++-----------
.../dashboard/components/UndoRedoKeylisteners.jsx | 7 +++---
.../components/dnd/AddSliceDragPreview.jsx | 1 -
.../dashboard/components/gridComponents/Chart.jsx | 3 ++-
superset/assets/src/dashboard/containers/Chart.jsx | 4 +++-
.../dashboard/stylesheets/builder-sidepane.less | 4 ++--
.../dashboard/stylesheets/components/chart.less | 5 ----
13 files changed, 34 insertions(+), 54 deletions(-)
diff --git a/superset/assets/src/SqlLab/TODO.md b/superset/assets/src/SqlLab/TODO.md
deleted file mode 100644
index db8f247..0000000
--- a/superset/assets/src/SqlLab/TODO.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-# TODO
-* Figure out how to organize the left panel, integrate Search
-* collapse sql beyond 10 lines
-* Security per-database (dropdown)
-* Get a to work
-
-## Cosmetic
-* Result set font is too big
-* lmiit/timer/buttons wrap
-* table label is transparent
-* SqlEditor buttons
-* use react-bootstrap-prompt for query title input
-* Make tabs look great
-
-# PROJECT
-* Write Runbook
-* Confirm backups
-* merge chef branch
diff --git a/superset/assets/src/SqlLab/components/ResultSet.jsx b/superset/assets/src/SqlLab/components/ResultSet.jsx
index 67c8fd5..6f502ea 100644
--- a/superset/assets/src/SqlLab/components/ResultSet.jsx
+++ b/superset/assets/src/SqlLab/components/ResultSet.jsx
@@ -31,6 +31,8 @@ const defaultProps = {
const SEARCH_HEIGHT = 46;
+const LOADING_STYLES = { position: 'relative', height: 50 };
+
export default class ResultSet extends React.PureComponent {
constructor(props) {
super(props);
@@ -238,9 +240,9 @@ export default class ResultSet extends React.PureComponent {
);
}
return (
- <div>
- <Loading />
+ <div style={LOADING_STYLES}>
<QueryStateLabel query={query} />
+ {!progressBar && <Loading />}
{progressBar}
<div>
{trackingUrl}
diff --git a/superset/assets/src/SqlLab/components/SouthPane.jsx b/superset/assets/src/SqlLab/components/SouthPane.jsx
index 55ff2a3..7102880 100644
--- a/superset/assets/src/SqlLab/components/SouthPane.jsx
+++ b/superset/assets/src/SqlLab/components/SouthPane.jsx
@@ -86,7 +86,7 @@ class SouthPane extends React.PureComponent {
title={t('Query History')}
eventKey="History"
>
- <div style={{ height: `${innerTabHeight}px`, overflow: 'scroll' }}>
+ <div style={{ height: `${innerTabHeight}px`, overflow: 'auto' }}>
<QueryHistory queries={props.editorQueries} actions={props.actions} />
</div>
</Tab>
diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less
index df3ba9b..be6d364 100644
--- a/superset/assets/src/SqlLab/main.less
+++ b/superset/assets/src/SqlLab/main.less
@@ -45,7 +45,7 @@ body {
left: 0px;
right: 0px;
bottom: 0px;
- overflow: scroll;
+ overflow: auto;
margin-right: 0px;
margin-bottom: 0px;
}
@@ -302,7 +302,7 @@ a.Link {
margin-top: 10px;
position: absolute;
width: 100%;
- overflow: scroll;
+ overflow: auto;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
diff --git a/superset/assets/src/dashboard/components/BuilderComponentPane.jsx b/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
index aafee5d..a21ec11 100644
--- a/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
+++ b/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
@@ -87,11 +87,9 @@ class BuilderComponentPane extends React.PureComponent {
<i className="fa fa-arrow-right trigger" />
</div>
-
<NewTabs />
<NewRow />
<NewColumn />
-
<NewHeader />
<NewMarkdown />
<NewDivider />
diff --git a/superset/assets/src/dashboard/components/SliceHeader.jsx b/superset/assets/src/dashboard/components/SliceHeader.jsx
index d812181..f2d715b 100644
--- a/superset/assets/src/dashboard/components/SliceHeader.jsx
+++ b/superset/assets/src/dashboard/components/SliceHeader.jsx
@@ -12,6 +12,7 @@ const propTypes = {
isExpanded: PropTypes.bool,
isCached: PropTypes.bool,
cachedDttm: PropTypes.string,
+ updatedDttm: PropTypes.number,
updateSliceName: PropTypes.func,
toggleExpandSlice: PropTypes.func,
forceRefresh: PropTypes.func,
@@ -37,6 +38,7 @@ const defaultProps = {
annotationQuery: {},
annotationError: {},
cachedDttm: null,
+ updatedDttm: null,
isCached: false,
isExpanded: false,
sliceName: '',
@@ -51,6 +53,7 @@ class SliceHeader extends React.PureComponent {
isExpanded,
isCached,
cachedDttm,
+ updatedDttm,
toggleExpandSlice,
forceRefresh,
exploreChart,
@@ -102,6 +105,7 @@ class SliceHeader extends React.PureComponent {
isCached={isCached}
isExpanded={isExpanded}
cachedDttm={cachedDttm}
+ updatedDttm={updatedDttm}
toggleExpandSlice={toggleExpandSlice}
forceRefresh={forceRefresh}
exploreChart={exploreChart}
diff --git a/superset/assets/src/dashboard/components/SliceHeaderControls.jsx b/superset/assets/src/dashboard/components/SliceHeaderControls.jsx
index 7d25ab0..4116a34 100644
--- a/superset/assets/src/dashboard/components/SliceHeaderControls.jsx
+++ b/superset/assets/src/dashboard/components/SliceHeaderControls.jsx
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-import cx from 'classnames';
import moment from 'moment';
import { Dropdown, MenuItem } from 'react-bootstrap';
import {
@@ -17,6 +16,7 @@ const propTypes = {
isCached: PropTypes.bool,
isExpanded: PropTypes.bool,
cachedDttm: PropTypes.string,
+ updatedDttm: PropTypes.number,
supersetCanExplore: PropTypes.bool,
sliceCanEdit: PropTypes.bool,
toggleExpandSlice: PropTypes.func,
@@ -31,6 +31,7 @@ const defaultProps = {
exploreChart: () => ({}),
exportCSV: () => ({}),
cachedDttm: null,
+ updatedDttm: null,
isCached: false,
isExpanded: false,
supersetCanExplore: false,
@@ -101,19 +102,20 @@ class SliceHeaderControls extends React.PureComponent {
}
render() {
- const slice = this.props.slice;
- const isCached = this.props.isCached;
- const cachedWhen = moment.utc(this.props.cachedDttm).fromNow();
- const refreshTooltip = isCached ? t('Cached %s', cachedWhen) : '';
-
- // @TODO account for
- // dashboard.dashboard.superset_can_explore
- // dashboard.dashboard.slice_can_edit
+ const { slice, isCached, cachedDttm, updatedDttm } = this.props;
+ const cachedWhen = moment.utc(cachedDttm).fromNow();
+ const updatedWhen = updatedDttm ? moment.utc(updatedDttm).fromNow() : '';
+ const refreshTooltip = isCached
+ ? t('Cached %s', cachedWhen)
+ : (updatedWhen && t('Fetched %s', updatedWhen)) || '';
+
return (
<Dropdown
id={`slice_${slice.slice_id}-controls`}
- className={cx(isCached && 'is-cached')}
pullRight
+ // react-bootstrap handles visibility, but call toggle to force a re-render
+ // and update the fetched/cached timestamps
+ onToggle={this.toggleControls}
>
<Dropdown.Toggle className="slice-header-controls-trigger" noCaret>
<VerticalDotsTrigger />
@@ -121,11 +123,8 @@ class SliceHeaderControls extends React.PureComponent {
<Dropdown.Menu>
<MenuItem onClick={this.refreshChart}>
- {isCached && <span className="dot" />}
{t('Force refresh')}
- {isCached && (
- <div className="refresh-tooltip">{refreshTooltip}</div>
- )}
+ <div className="refresh-tooltip">{refreshTooltip}</div>
</MenuItem>
<MenuItem divider />
diff --git a/superset/assets/src/dashboard/components/UndoRedoKeylisteners.jsx b/superset/assets/src/dashboard/components/UndoRedoKeylisteners.jsx
index 5af0934..c6de151 100644
--- a/superset/assets/src/dashboard/components/UndoRedoKeylisteners.jsx
+++ b/superset/assets/src/dashboard/components/UndoRedoKeylisteners.jsx
@@ -21,13 +21,12 @@ class UndoRedoKeylisteners extends React.PureComponent {
}
handleKeydown(event) {
- const controlOrCommand = event.keyCode === 90 || event.metaKey;
+ const controlOrCommand = event.ctrlKey || event.metaKey;
if (controlOrCommand) {
const isZChar = event.key === 'z' || event.keyCode === 90;
const isYChar = event.key === 'y' || event.keyCode === 89;
- const isEditingMarkdown = document.querySelector(
- '.dashboard-markdown--editing',
- );
+ const isEditingMarkdown =
+ document && document.querySelector('.dashboard-markdown--editing');
if (!isEditingMarkdown && (isZChar || isYChar)) {
event.preventDefault();
diff --git a/superset/assets/src/dashboard/components/dnd/AddSliceDragPreview.jsx b/superset/assets/src/dashboard/components/dnd/AddSliceDragPreview.jsx
index 2c1128e..485e4e3 100644
--- a/superset/assets/src/dashboard/components/dnd/AddSliceDragPreview.jsx
+++ b/superset/assets/src/dashboard/components/dnd/AddSliceDragPreview.jsx
@@ -11,7 +11,6 @@ import {
const staticCardStyles = {
position: 'fixed',
- background: 'rgba(255, 255, 255, 0.7)',
pointerEvents: 'none',
top: 0,
left: 0,
diff --git a/superset/assets/src/dashboard/components/gridComponents/Chart.jsx b/superset/assets/src/dashboard/components/gridComponents/Chart.jsx
index 39c1e81..4713c43 100644
--- a/superset/assets/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset/assets/src/dashboard/components/gridComponents/Chart.jsx
@@ -160,7 +160,7 @@ class Chart extends React.Component {
if (!chart || !slice) return null;
const { width } = this.state;
- const { queryResponse } = chart;
+ const { queryResponse, chartUpdateEndTime } = chart;
const isCached = queryResponse && queryResponse.is_cached;
const cachedDttm = queryResponse && queryResponse.cached_dttm;
const isOverflowable = OVERFLOWABLE_VIZ_TYPES.has(slice && slice.viz_type);
@@ -173,6 +173,7 @@ class Chart extends React.Component {
isExpanded={!!isExpanded}
isCached={isCached}
cachedDttm={cachedDttm}
+ updatedDttm={chartUpdateEndTime}
toggleExpandSlice={toggleExpandSlice}
forceRefresh={this.forceRefresh}
editMode={editMode}
diff --git a/superset/assets/src/dashboard/containers/Chart.jsx b/superset/assets/src/dashboard/containers/Chart.jsx
index b2f0795..97b2bb8 100644
--- a/superset/assets/src/dashboard/containers/Chart.jsx
+++ b/superset/assets/src/dashboard/containers/Chart.jsx
@@ -28,7 +28,9 @@ function mapStateToProps(
return {
chart,
- datasource: (chart && datasources[chart.form_data.datasource]) || {},
+ datasource:
+ (chart && chart.form_data && datasources[chart.form_data.datasource]) ||
+ {},
slice: sliceEntities.slices[id],
timeout: dashboardInfo.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
filters: filters[id] || EMPTY_FILTERS,
diff --git a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
index e807bcc..17c87a8 100644
--- a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
+++ b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
@@ -29,7 +29,6 @@
.viewport {
position: absolute;
transform: none !important;
- background: white;
overflow: hidden;
width: @builder-pane-width;
height: 100%;
@@ -77,9 +76,10 @@
border: 1px solid @gray-light;
font-weight: 200;
padding: 16px;
- margin: 16px;
+ margin: 0 16px 16px 16px;
position: relative;
cursor: move;
+ background: rgba(255, 255, 255, 0.4);
&:hover {
background: @gray-bg;
diff --git a/superset/assets/src/dashboard/stylesheets/components/chart.less b/superset/assets/src/dashboard/stylesheets/components/chart.less
index bc0005d..b4e0f77 100644
--- a/superset/assets/src/dashboard/stylesheets/components/chart.less
+++ b/superset/assets/src/dashboard/stylesheets/components/chart.less
@@ -83,11 +83,6 @@
margin: 2px 0;
display: inline-block;
- .is-cached & {
- background-color: @pink;
- box-shadow: 0 0 5px 1.5px rgba(255, 0, 0, 0.3);
- }
-
.vertical-dots-container & {
display: block;
}