[WiP] Thumbnails!

requirements.txt

@@ -54,6 +54,7 @@ numpy==1.15.2             # via pandas
 pandas==0.23.4
 parsedatetime==2.0.0
 pathlib2==2.3.0
+pillow==5.4.1
 polyline==1.3.2
 prison==0.1.0             # via flask-appbuilder
 py==1.7.0                 # via retry

setup.py

@@ -92,6 +92,7 @@ def get_git_sha():
         'pandas>=0.18.0, <0.24.0',  # `pandas`>=0.24.0 changes datetimelike API
         'parsedatetime',
         'pathlib2',
+        'pillow==5.4.1',
         'polyline',
         'pydruid>=0.5.2',
         'python-dateutil',

superset/__init__.py

@@ -115,6 +115,10 @@ def get_manifest():
 if conf.get('SILENCE_FAB'):
     logging.getLogger('flask_appbuilder').setLevel(logging.ERROR)
 
+logging.getLogger('urllib3').setLevel(logging.ERROR)
+logging.getLogger('selenium').setLevel(logging.ERROR)
+logging.getLogger('PIL').setLevel(logging.ERROR)
+
 if app.debug:
     app.logger.setLevel(logging.DEBUG)  # pylint: disable=no-member
 else:
@@ -135,6 +139,7 @@ def get_manifest():
 
 cache = setup_cache(app, conf.get('CACHE_CONFIG'))
 tables_cache = setup_cache(app, conf.get('TABLE_NAMES_CACHE_CONFIG'))
+thumbnail_cache = setup_cache(app, conf.get('THUMBNAIL_CACHE_CONFIG'))
 
 migrate = Migrate(app, db, directory=APP_DIR + '/migrations')
 

superset/assets/package.json

@@ -127,6 +127,7 @@
     "react-select-fast-filter-options": "^0.2.1",
     "react-sortable-hoc": "^0.8.3",
     "react-split": "^2.0.4",
+    "react-stack-grid": "^0.7.1",
     "react-sticky": "^6.0.2",
     "react-syntax-highlighter": "^7.0.4",
     "react-transition-group": "^2.5.3",

superset/assets/spec/javascripts/welcome/DashboardTable_spec.jsx

@@ -23,7 +23,7 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { Table } from 'reactable-arc';
 
-import DashboardTable from '../../../src/welcome/DashboardTable';
+import DashboardCardTable from '../../../src/welcome/DashboardCardTable';
 import Loading from '../../../src/components/Loading';
 
 // store needed for withToasts(TableLoader)
@@ -39,10 +39,10 @@ fetchMock.get(dashboardsEndpoint, { result: mockDashboards });
 
 function setup() {
   // use mount because data fetching is triggered on mount
-  return mount(<DashboardTable />, { context: { store } });
+  return mount(<DashboardCardTable />, { context: { store } });
 }
 
-describe('DashboardTable', () => {
+describe('DashboardCardTable', () => {
   beforeEach(fetchMock.resetHistory);
 
   it('renders a Loading initially', () => {

superset/assets/spec/javascripts/welcome/Welcome_spec.jsx

@@ -33,6 +33,6 @@ describe('Welcome', () => {
     const wrapper = shallow(<Welcome {...mockedProps} />);
     expect(wrapper.find(Tab)).toHaveLength(3);
     expect(wrapper.find(Panel)).toHaveLength(3);
-    expect(wrapper.find(Row)).toHaveLength(3);
+    expect(wrapper.find(Row)).toHaveLength(2);
   });
 });

superset/assets/src/components/Card.css

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+.card {
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 0 1px 1px 0 rgba(60,64,67,.16), 0 1px 3px 1px rgba(60,64,67,.25);
+  overflow: hidden;
+  transition: box-shadow 0.5s ease-in-out;
+}
+.card:hover {
+  box-shadow: 0 2px 2px 0 rgba(60,64,67,.30), 0 2px 4px 2px rgba(60,64,67,.55);
+}
+.card-header {
+  padding-top: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 0px;
+}
+.card-body {
+  padding-top: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 15px;
+}
+.card-body .text-muted{
+  color: #888;
+}
+
+.card-header .fa {
+  margin-top: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.card img {
+  border-top: 1px solid #EEE;
+  border-bottom: 1px solid #EEE;
+}
+.card-title {
+  white-space: nowrap;
+  width: 100px;
+}

superset/assets/src/components/Card.jsx

@@ -0,0 +1,102 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { Dropdown, Fade } from 'react-bootstrap';
+
+import ToggleWrapper from './ToggleWrapper';
+import './Card.css';
+
+const propTypes = {
+  title: PropTypes.string.isRequired,
+  body: PropTypes.node.isRequired,
+  imageSource: PropTypes.string.isRequired,
+  cardWidth: PropTypes.number,
+  imageAspectRatio: PropTypes.number,
+  dropdownMenu: PropTypes.node.isRequired,
+  onTitleClick: PropTypes.func,
+};
+const defaultProps = {
+  onTitleClick: () => {},
+  imageAspectRatio: 4/3,
+};
+
+export default class Card extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hovered: false,
+    };
+  }
+  renderActionDropdown() {
+    return (
+      <Dropdown id="card-action" pullRight>
+        <ToggleWrapper bsRole="toggle">
+          <Fade in>
+            <i className="fa fa-ellipsis-v text-muted pointer" />
+          </Fade>
+        </ToggleWrapper>
+        {this.props.dropdownMenu}
+      </Dropdown>);
+  }
+  render() {
+    const {
+      body,
+      cardWidth,
+      imageAspectRatio,
+      imageSource,
+      onTitleClick,
+      title,
+    } = this.props;
+    const imgHeight = cardWidth / imageAspectRatio;
+    return (
+      <div
+        className="card"
+        onMouseOver={() => this.setState({ hovered: true })}
+        onMouseOut={() => this.setState({ hovered: false })}
+      >
+        <div className="card-header clearfix">
+          <div
+            className="card-title float-left pointer"
+            onClick={() => onTitleClick()}
+          >
+            <h5>{title}</h5>
+          </div>
+          <div className="float-right">
+            {this.renderActionDropdown()}
+          </div>
+        </div>
+        <div className="card-image" onClick={() => onTitleClick()}>
+          <img
+            className="pointer m-b-10"
+            alt=""
+            src={imageSource}
+            width={cardWidth}
+            height={imgHeight}
+          />
+        </div>
+        <div className="card-body">
+          {body}
+        </div>
+      </div>
+    );
+  }
+}
+Card.propTypes = propTypes;
+Card.defaultProps = defaultProps;