Merge pull request #3196 from getredash/master

Sync release/6.0.x branch with master

.circleci/Dockerfile.cypress

@@ -1,12 +0,0 @@
-FROM cypress/browsers:node14.0.0-chrome84
-
-ENV APP /usr/src/app
-WORKDIR $APP
-
-COPY package.json package-lock.json $APP/
-COPY viz-lib $APP/viz-lib
-RUN npm ci > /dev/null
-
-COPY . $APP
-
-RUN ./node_modules/.bin/cypress verify

.circleci/config.yml

@@ -1,25 +1,18 @@
 version: 2.0
 
-build-docker-image-job: &build-docker-image-job
-  docker:
-    - image: circleci/node:12
-  steps:
-    - setup_remote_docker
-    - checkout
-    - run: sudo apt update
-    - run: sudo apt install python3-pip
-    - run: sudo pip3 install -r requirements_bundles.txt
-    - run: .circleci/update_version
-    - run: npm run bundle
-    - run: .circleci/docker_build
+flake8-steps: &steps
+  - checkout
+  - run: sudo pip install flake8
+  - run: ./bin/flake8_tests.sh
 jobs:
-  backend-lint:
+  python-flake8-tests:
     docker:
       - image: circleci/python:3.7.0
-    steps:
-      - checkout
-      - run: sudo pip install flake8
-      - run: ./bin/flake8_tests.sh
+    steps: *steps
+  legacy-python-flake8-tests:
+    docker:
+      - image: circleci/python:2.7.15
+    steps: *steps
   backend-unit-tests:
     environment:
       COMPOSE_FILE: .circleci/docker-compose.circle.yml
@@ -33,15 +26,12 @@ jobs:
           name: Build Docker Images
           command: |
             set -x
-            docker-compose build --build-arg skip_ds_deps=true --build-arg skip_frontend_build=true
+            docker-compose build --build-arg skip_ds_deps=true
             docker-compose up -d
             sleep 10
       - run:
           name: Create Test Database
           command: docker-compose run --rm postgres psql -h postgres -U postgres -c "create database tests;"
-      - run:
-          name: List Enabled Query Runners
-          command: docker-compose run --rm redash manage ds list_types
       - run:
           name: Run Tests
           command: docker-compose run --name tests redash tests --junitxml=junit.xml --cov-report xml --cov=redash --cov-config .coveragerc tests/
@@ -49,129 +39,91 @@ jobs:
           name: Copy Test Results
           command: |
             mkdir -p /tmp/test-results/unit-tests
-            docker cp tests:/app/coverage.xml ./coverage.xml
+            docker cp tests:/app/coverage.xml ./coverage.xml 
             docker cp tests:/app/junit.xml /tmp/test-results/unit-tests/results.xml
-          when: always
       - store_test_results:
           path: /tmp/test-results
       - store_artifacts:
           path: coverage.xml
-  frontend-lint:
-    environment:
-      CYPRESS_INSTALL_BINARY: 0
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
-    docker:
-      - image: circleci/node:12
-    steps:
-      - checkout
-      - run: mkdir -p /tmp/test-results/eslint
-      - run: npm ci
-      - run: npm run lint:ci
-      - store_test_results:
-          path: /tmp/test-results
   frontend-unit-tests:
-    environment:
-      CYPRESS_INSTALL_BINARY: 0
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
     docker:
-      - image: circleci/node:12
+      - image: circleci/node:8
     steps:
       - checkout
-      - run: sudo apt update
-      - run: sudo apt install python3-pip
-      - run: sudo pip3 install -r requirements_bundles.txt
-      - run: npm ci
+      - run: sudo apt install python-pip
+      - run: npm install
       - run: npm run bundle
-      - run:
-          name: Run App Tests
-          command: npm test
-      - run:
-          name: Run Visualizations Tests
-          command: (cd viz-lib && npm test)
-      - run: npm run lint
+      - run: npm test
   frontend-e2e-tests:
     environment:
       COMPOSE_FILE: .circleci/docker-compose.cypress.yml
       COMPOSE_PROJECT_NAME: cypress
-      PERCY_TOKEN_ENCODED: ZGRiY2ZmZDQ0OTdjMzM5ZWE0ZGQzNTZiOWNkMDRjOTk4Zjg0ZjMxMWRmMDZiM2RjOTYxNDZhOGExMjI4ZDE3MA==
-      CYPRESS_PROJECT_ID_ENCODED: OTI0Y2th
-      CYPRESS_RECORD_KEY_ENCODED: YzA1OTIxMTUtYTA1Yy00NzQ2LWEyMDMtZmZjMDgwZGI2ODgx
-      CYPRESS_INSTALL_BINARY: 0
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+      PERCY_TOKEN_ENCODED: MWM3OGUzNzk4ZWQ2NTE4YTBhMDAwZDNiNWE1Nzc4ZjEzZjYyMzY1MjE0NjY0NDRiOGE5ODc5ZGYzYTU4ZmE4NQ==
     docker:
-      - image: circleci/node:12
+      - image: circleci/node:8
     steps:
       - setup_remote_docker
       - checkout
-      - run:
-          name: Enable Code Coverage report for master branch
-          command: |
-            if [ "$CIRCLE_BRANCH" = "master" ]; then
-              echo 'export CODE_COVERAGE=true' >> $BASH_ENV
-              source $BASH_ENV
-            fi
       - run:
           name: Install npm dependencies
           command: |
-            npm ci
+            npm install
       - run:
           name: Setup Redash server
           command: |
-            npm run cypress build
-            npm run cypress start -- --skip-db-seed
-            docker-compose run cypress npm run cypress db-seed
+            npm run cypress start
+            docker-compose run cypress node ./cypress/cypress.js db-seed
       - run:
           name: Execute Cypress tests
           command: npm run cypress run-ci
-      - run:
-          name: "Failure: output container logs to console"
-          command: |
-            docker-compose logs
-          when: on_fail
-      - run:
-          name: Copy Code Coverage results
-          command: |
-            docker cp cypress:/usr/src/app/coverage ./coverage || true
-          when: always
+  build-tarball:
+    docker:
+      - image: circleci/node:8
+    steps:
+      - checkout
+      - run: sudo apt install python-pip
+      - run: npm install
+      - run: .circleci/update_version
+      - run: npm run bundle
+      - run: npm run build
+      - run: .circleci/pack
       - store_artifacts:
-          path: coverage
-  build-docker-image: *build-docker-image-job
-  build-preview-docker-image: *build-docker-image-job
+          path: /tmp/artifacts/
+  build-docker-image:
+    docker:
+      - image: circleci/buildpack-deps:xenial
+    steps:
+      - setup_remote_docker
+      - checkout
+      - run: .circleci/update_version
+      - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
+      - run: docker build -t redash/redash:$(.circleci/docker_tag) .
+      - run: docker push redash/redash:$(.circleci/docker_tag)
 workflows:
   version: 2
   build:
     jobs:
-      - backend-lint
-      - backend-unit-tests:
-          requires:
-            - backend-lint
-      - frontend-lint
-      - frontend-unit-tests:
-          requires:
-            - backend-lint
-            - frontend-lint
-      - frontend-e2e-tests:
-          requires:
-            - frontend-lint
-      - build-preview-docker-image:
-          requires:
-            - backend-unit-tests
-            - frontend-unit-tests
-            - frontend-e2e-tests
-          filters:
-            branches:
-              only:
-                - master
-      - hold:
-          type: approval
-          requires:
-            - backend-unit-tests
-            - frontend-unit-tests
-            - frontend-e2e-tests
-          filters:
-            branches:
-              only:
-                - /release\/.*/
+      - python-flake8-tests
+      - legacy-python-flake8-tests
+      - backend-unit-tests
+      - frontend-unit-tests
+      - frontend-e2e-tests
+      - build-tarball:
+           requires:
+             - backend-unit-tests
+           filters:
+             tags:
+               only: /v[0-9]+(\.[0-9\-a-z]+)*/
+             branches:
+               only:
+                 - master
+                 - /release\/.*/
       - build-docker-image:
-          requires:
-            - hold
+           requires:
+             - backend-unit-tests
+           filters:
+             branches:
+               only:
+                 - master
+                 - preview-build
+                 - /release\/.*/

.circleci/docker-compose.circle.yml

@@ -1,4 +1,4 @@
-version: '2.2'
+version: '3'
 services:
   redash:
     build: ../

.circleci/docker-compose.cypress.yml

@@ -1,67 +1,43 @@
-version: "2.2"
-x-redash-service: &redash-service
-  build:
-    context: ../
-    args:
-      skip_dev_deps: "true"
-      skip_ds_deps: "true"
-      code_coverage: ${CODE_COVERAGE}
-x-redash-environment: &redash-environment
-  REDASH_LOG_LEVEL: "INFO"
-  REDASH_REDIS_URL: "redis://redis:6379/0"
-  REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-  REDASH_RATELIMIT_ENABLED: "false"
-  REDASH_ENFORCE_CSRF: "true"
+version: '3'
 services:
   server:
-    <<: *redash-service
-    command: server
+    build: ../
+    command: dev_server
     depends_on:
       - postgres
       - redis
     ports:
       - "5000:5000"
     environment:
-      <<: *redash-environment
       PYTHONUNBUFFERED: 0
-  scheduler:
-    <<: *redash-service
+      REDASH_LOG_LEVEL: "INFO"
+      REDASH_REDIS_URL: "redis://redis:6379/0"
+      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
+  worker:
+    build: ../
     command: scheduler
     depends_on:
       - server
     environment:
-      <<: *redash-environment
-  worker:
-    <<: *redash-service
-    command: worker
-    depends_on:
-      - server
-    environment:
-      <<: *redash-environment
       PYTHONUNBUFFERED: 0
+      REDASH_LOG_LEVEL: "INFO"
+      REDASH_REDIS_URL: "redis://redis:6379/0"
+      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
+      QUEUES: "queries,scheduled_queries,celery"
+      WORKERS_COUNT: 2
   cypress:
-    ipc: host
     build:
       context: ../
-      dockerfile: .circleci/Dockerfile.cypress
+      dockerfile: Dockerfile.cypress
     depends_on:
       - server
       - worker
-      - scheduler
     environment:
       CYPRESS_baseUrl: "http://server:5000"
-      CYPRESS_coverage: ${CODE_COVERAGE}
       PERCY_TOKEN: ${PERCY_TOKEN}
       PERCY_BRANCH: ${CIRCLE_BRANCH}
       PERCY_COMMIT: ${CIRCLE_SHA1}
       PERCY_PULL_REQUEST: ${CIRCLE_PR_NUMBER}
-      COMMIT_INFO_BRANCH: ${CIRCLE_BRANCH}
-      COMMIT_INFO_MESSAGE: ${COMMIT_INFO_MESSAGE}
-      COMMIT_INFO_AUTHOR: ${CIRCLE_USERNAME}
-      COMMIT_INFO_SHA: ${CIRCLE_SHA1}
-      COMMIT_INFO_REMOTE: ${CIRCLE_REPOSITORY_URL}
-      CYPRESS_PROJECT_ID: ${CYPRESS_PROJECT_ID}
-      CYPRESS_RECORD_KEY: ${CYPRESS_RECORD_KEY}
   redis:
     image: redis:3.0-alpine
     restart: unless-stopped

.circleci/docker_build

@@ -1,17 +0,0 @@
-#!/bin/bash
-VERSION=$(jq -r .version package.json)
-VERSION_TAG=$VERSION.b$CIRCLE_BUILD_NUM
-
-docker login -u $DOCKER_USER -p $DOCKER_PASS
-
-if [ $CIRCLE_BRANCH = master ] || [ $CIRCLE_BRANCH = preview-image ]
-then
-    docker build --build-arg skip_dev_deps=true -t redash/redash:preview -t redash/preview:$VERSION_TAG .
-    docker push redash/redash:preview
-    docker push redash/preview:$VERSION_TAG
-else
-    docker build --build-arg skip_dev_deps=true -t redash/redash:$VERSION_TAG .
-    docker push redash/redash:$VERSION_TAG
-fi
-
-echo "Built: $VERSION_TAG"

.circleci/docker_tag

@@ -0,0 +1,10 @@
+#!/bin/bash
+if [ $CIRCLE_BRANCH = master ] || [ $CIRCLE_BRANCH = preview-build ]
+then
+    FULL_VERSION='preview'
+else
+    VERSION=$(jq -r .version package.json)
+    FULL_VERSION=$VERSION.b$CIRCLE_BUILD_NUM
+fi
+
+echo $FULL_VERSION

.circleci/pack

@@ -6,4 +6,4 @@ FILENAME=$NAME.$FULL_VERSION.tar.gz
 
 mkdir -p /tmp/artifacts/
 
-tar -zcv -f /tmp/artifacts/$FILENAME --exclude=".git" --exclude="optipng*" --exclude="cypress" --exclude="*.pyc" --exclude="*.pyo" --exclude="venv" *
+tar -zcv -f /tmp/artifacts/$FILENAME --exclude="optipng*" --exclude=".git*" --exclude="*.pyc" --exclude="*.pyo" --exclude="venv" --exclude="node_modules" *

.codeclimate.yml

@@ -0,0 +1,22 @@
+engines:
+  pep8:
+    enabled: true
+  eslint:
+    enabled: true
+    channel: "eslint-3"
+    config:
+      config: client/.eslintrc.js
+    checks:
+      import/no-unresolved:
+        enabled: false
+ratings:
+  paths:
+  - "redash/**/*.py"
+  - "client/**/*.js"
+exclude_paths:
+- tests/**/*.py
+- migrations/**/*.py
+- old_migrations/**/*.py
+- setup/**/*
+- bin/**/*
+

.dockerignore

@@ -1,15 +1,6 @@
 client/.tmp/
 client/dist/
 node_modules/
-viz-lib/node_modules/
 .tmp/
 .venv/
-venv/
 .git/
-/.codeclimate.yml
-/.coverage
-/coverage.xml
-/.circleci/
-/.github/
-/netlify.toml
-/setup/

.editorconfig

@@ -9,6 +9,6 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.{js,jsx,css,less,html}]
+[*.{js,css,html}]
 indent_style = space
 indent_size = 2

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,15 +0,0 @@
-## What type of PR is this? (check all applicable)
-<!-- Please leave only what's applicable -->
-
-- [ ] Refactor
-- [ ] Feature
-- [ ] Bug Fix
-- [ ] New Query Runner (Data Source)
-- [ ] New Alert Destination
-- [ ] Other
-
-## Description
-
-## Related Tickets & Documents
-
-## Mobile & Desktop Screenshots/Recordings (if there are UI changes)

.github/support.yml

@@ -1,23 +0,0 @@
-# Configuration for Support Requests - https://github.com/dessant/support-requests
-
-# Label used to mark issues as support requests
-supportLabel: Support Question
-
-# Comment to post on issues marked as support requests, `{issue-author}` is an
-# optional placeholder. Set to `false` to disable
-supportComment: >
-  :wave: @{issue-author}, we use the issue tracker exclusively for bug reports
-  and planned work. However, this issue appears to be a support request.
-  Please use [our forum](https://discuss.redash.io) to get help.
-
-# Close issues marked as support requests
-close: true
-
-# Lock issues marked as support requests
-lock: false
-
-# Assign `off-topic` as the reason for locking. Set to `false` to disable
-setLockReason: true
-
-# Repository to extend settings from
-# _extends: repo

.github/weekly-digest.yml

@@ -1,7 +0,0 @@
-# Configuration for weekly-digest - https://github.com/apps/weekly-digest
-publishDay: mon
-canPublishIssues: true
-canPublishPullRequests: true
-canPublishContributors: true
-canPublishStargazers: true
-canPublishCommits: true

.gitignore

@@ -5,12 +5,11 @@ venv/
 .coveralls.yml
 .idea
 *.pyc
-.nyc_output
-coverage
 .coverage
 coverage.xml
 client/dist
 .DS_Store
+celerybeat-schedule*
 .#*
 \#*#
 *~
@@ -25,5 +24,5 @@ node_modules
 .sass-cache
 npm-debug.log
 
-client/cypress/screenshots
-client/cypress/videos
+cypress/screenshots
+cypress/videos

.restyled.yaml

@@ -1,63 +0,0 @@
-enabled: true
-
-auto: false
-
-# Open Restyle PRs?
-pull_requests: true
-
-# Leave comments on the original PR linking to the Restyle PR?
-comments: true
-
-# Set commit statuses on the original PR?
-statuses:
-  # Red status in the case of differences found
-  differences: true
-  # Green status in the case of no differences found
-  no_differences: true
-  # Red status if we encounter errors restyling
-  error: true
-
-# Request review on the Restyle PR?
-#
-# Possible values:
-#
-#   author: From the author of the original PR
-#   owner: From the owner of the repository
-#   none: Don't
-#
-# One value will apply to both origin and forked PRs, but you can also specify
-# separate values.
-#
-#   request_review:
-#     origin: author
-#     forked: owner
-#
-request_review: author
-
-# Add labels to any created Restyle PRs
-#
-# These can be used to tell other automation to avoid our PRs.
-#
-labels: ["Skip CI"]
-
-# Labels to ignore
-#
-# PRs with any of these labels will be ignored by Restyled.
-#
-# ignore_labels:
-#   - restyled-ignore
-
-# Restylers to run, and how
-restylers:
-  - name: black
-    image: restyled/restyler-black:v19.10b0
-    include:
-      - redash
-      - tests
-      - migrations/versions
-  - name: prettier
-    image: restyled/restyler-prettier:v1.19.1-2
-    include:
-      - client/app/**/*.js
-      - client/app/**/*.jsx
-      - client/cypress/**/*.js

CONTRIBUTING.md

@@ -6,6 +6,7 @@ The following is a set of guidelines for contributing to Redash. These are guide
 
 ## Quick Links:
 
+- [Feature Roadmap](https://trello.com/b/b2LUHU7A/redash-roadmap)
 - [Feature Requests](https://discuss.redash.io/c/feature-requests)
 - [Documentation](https://redash.io/help/)
 - [Blog](https://blog.redash.io/)
@@ -46,8 +47,8 @@ When creating a new bug report, please make sure to:
 
 If you would like to suggest an enhancement or ask for a new feature:
 
-- Please check [the forum](https://discuss.redash.io/c/feature-requests/5) for existing threads about what you want to suggest/ask. If there is, feel free to upvote it to signal interest or add your comments.
-- If there is no open thread, you're welcome to start one to have a discussion about what you want to suggest. Try to provide as much details and context as possible and include information about *the problem you want to solve* rather only *your proposed solution*.
+- Please check [the roadmap](https://trello.com/b/b2LUHU7A/redash-roadmap) for existing Trello card for what you want to suggest/ask. If there is, feel free to upvote it to signal interest or add your comments.
+- If there is no existing card, open a thread in [the forum](https://discuss.redash.io/c/feature-requests) to start a discussion about what you want to suggest. Try to provide as much details and context as possible and include information about *the problem you want to solve* rather only *your proposed solution*.
 
 ### Pull Requests
 
@@ -55,20 +56,20 @@ If you would like to suggest an enhancement or ask for a new feature:
 - Include screenshots and animated GIFs in your pull request whenever possible.
 - Please add [documentation](#documentation) for new features or changes in functionality along with the code.
 - Please follow existing code style:
-  - Python: we use [Black](https://github.com/psf/black) to auto format the code.
-  - Javascript: we use [Prettier](https://github.com/prettier/prettier) to auto-format the code.
-  
+  - Python: we use PEP8 for Python.
+  - Javascript: we use Airbnb's style guides for [JavaScript](https://github.com/airbnb/javascript#naming-conventions) and [React](https://github.com/airbnb/javascript/blob/master/react) (currently we don't follow Airbnb's convention for naming files, but we're gradually fixing this). To make it automatic and easy, we recommend using [Prettier](https://github.com/prettier/prettier).
+
 ### Documentation
 
-The project's documentation can be found at [https://redash.io/help/](https://redash.io/help/). The [documentation sources](https://github.com/getredash/website/tree/master/src/pages/kb) are hosted on GitHub. To contribute edits / new pages, you can use GitHub's interface. Click the "Edit on GitHub" link on the documentation page to quickly open the edit interface.
+The project's documentation can be found at [https://redash.io/help/](https://redash.io/help/). The [documentation sources](https://github.com/getredash/website/tree/master/website/_kb) are hosted on GitHub. To contribute edits / new pages, you can use GitHub's interface. Click the "Edit on GitHub" link on the documentation page to quickly open the edit interface.
 
 ## Additional Notes
 
 ### Release Method
 
-We publish a stable release every ~3-4 months, although the goal is to get to a stable release every month. 
+We publish a stable release every ~2 months, although the goal is to get to a stable release every month. You can see the change log on [GitHub releases page](https://github.com/getredash/redash/releases).
 
-Every build of the master branch updates the *redash/redash:preview* Docker Image. These releases are usually stable, but might contain regressions and therefore recommended for "advanced users" only.
+Every build of the master branch updates the latest *RC release*. These releases are usually stable, but might contain regressions and therefore recommended for "advanced users" only.
 
 When we release a new stable release, we also update the *latest* Docker image tag, the EC2 AMIs and GCE images.
 

Dockerfile

@@ -1,94 +1,18 @@
-FROM node:12 as frontend-builder
-
-# Controls whether to build the frontend assets
-ARG skip_frontend_build
-
-ENV CYPRESS_INSTALL_BINARY=0
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
-
-RUN useradd -m -d /frontend redash
-USER redash
-
-WORKDIR /frontend
-COPY --chown=redash package.json package-lock.json /frontend/
-COPY --chown=redash viz-lib /frontend/viz-lib
-
-# Controls whether to instrument code for coverage information
-ARG code_coverage
-ENV BABEL_ENV=${code_coverage:+test}
-
-RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
-
-COPY --chown=redash client /frontend/client
-COPY --chown=redash webpack.config.js /frontend/
-RUN if [ "x$skip_frontend_build" = "x" ] ; then npm run build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
-FROM python:3.7-slim
-
-EXPOSE 5000
+FROM redash/base:latest
 
 # Controls whether to install extra dependencies needed for all data sources.
 ARG skip_ds_deps
-# Controls whether to install dev dependencies.
-ARG skip_dev_deps
-
-RUN useradd --create-home redash
-
-# Ubuntu packages
-RUN apt-get update && \
-  apt-get install -y \
-    curl \
-    gnupg \
-    build-essential \
-    pwgen \
-    libffi-dev \
-    sudo \
-    git-core \
-    wget \
-    # Postgres client
-    libpq-dev \
-    # ODBC support:
-    g++ unixodbc-dev \
-    # for SAML
-    xmlsec1 \
-    # Additional packages required for data sources:
-    libssl-dev \
-    default-libmysqlclient-dev \
-    freetds-dev \
-    libsasl2-dev \
-    unzip \
-    libsasl2-modules-gssapi-mit && \
-  # MSSQL ODBC Driver:  
-  curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add - && \
-  curl https://packages.microsoft.com/config/debian/10/prod.list > /etc/apt/sources.list.d/mssql-release.list && \
-  apt-get update && \
-  ACCEPT_EULA=Y apt-get install -y msodbcsql17 && \
-  apt-get clean && \
-  rm -rf /var/lib/apt/lists/*
-
-ARG databricks_odbc_driver_url=https://databricks.com/wp-content/uploads/2.6.10.1010-2/SimbaSparkODBC-2.6.10.1010-2-Debian-64bit.zip
-ADD $databricks_odbc_driver_url /tmp/simba_odbc.zip
-RUN unzip /tmp/simba_odbc.zip -d /tmp/ \
-  && dpkg -i /tmp/SimbaSparkODBC-*/*.deb \
-  && echo "[Simba]\nDriver = /opt/simba/spark/lib/64/libsparkodbc_sb64.so" >> /etc/odbcinst.ini \
-  && rm /tmp/simba_odbc.zip \
-  && rm -rf /tmp/SimbaSparkODBC*
-
-WORKDIR /app
-
-# Disalbe PIP Cache and Version Check
-ENV PIP_DISABLE_PIP_VERSION_CHECK=1
-ENV PIP_NO_CACHE_DIR=1
 
 # We first copy only the requirements file, to avoid rebuilding on every file
 # change.
-COPY requirements.txt requirements_bundles.txt requirements_dev.txt requirements_all_ds.txt ./
-RUN if [ "x$skip_dev_deps" = "x" ] ; then pip install -r requirements.txt -r requirements_dev.txt; else pip install -r requirements.txt; fi
+COPY requirements.txt requirements_dev.txt requirements_all_ds.txt ./
+RUN pip install -r requirements.txt -r requirements_dev.txt
 RUN if [ "x$skip_ds_deps" = "x" ] ; then pip install -r requirements_all_ds.txt ; else echo "Skipping pip install -r requirements_all_ds.txt" ; fi
 
-COPY . /app
-COPY --from=frontend-builder /frontend/client/dist /app/client/dist
+COPY . ./
+RUN npm install && npm run bundle && npm run build && rm -rf node_modules
 RUN chown -R redash /app
 USER redash
 
 ENTRYPOINT ["/app/bin/docker-entrypoint"]
-CMD ["server"]
+CMD ["server"]

Dockerfile.cypress

@@ -0,0 +1,11 @@
+FROM cypress/browsers:chrome67
+
+ENV APP /usr/src/app
+WORKDIR $APP
+
+RUN npm install --no-save cypress @percy/cypress > /dev/null
+
+COPY cypress $APP/cypress
+COPY cypress.json $APP/cypress.json
+
+RUN ./node_modules/.bin/cypress verify

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2013-2020, Arik Fraimovich.
+Copyright (c) 2013-2018, Arik Fraimovich.
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, 

Makefile

@@ -1,4 +1,4 @@
-.PHONY: compose_build up test_db create_database clean down bundle tests lint backend-unit-tests frontend-unit-tests test build watch start redis-cli bash
+.PHONY: compose_build up test_db create_database clean down bundle tests lint backend-unit-tests frontend-unit-tests test build watch start
 
 compose_build:
 	docker-compose build
@@ -35,7 +35,7 @@ backend-unit-tests: up test_db
 	docker-compose run --rm --name tests server tests
 
 frontend-unit-tests: bundle
-	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm ci
+	npm install
 	npm run bundle
 	npm test
 
@@ -49,9 +49,3 @@ watch: bundle
 
 start: bundle
 	npm run start
-
-redis-cli:
-	docker-compose run --rm redis redis-cli -h redis
-
-bash:
-	docker-compose run --rm server bash

README.md

@@ -1,82 +1,34 @@
 <p align="center">
   <img title="Redash" src='https://redash.io/assets/images/logo.png' width="200px"/>
 </p>
+<p align="center">
+    <img title="Build Status" src='https://circleci.com/gh/getredash/redash.png?circle-token=8a695aa5ec2cbfa89b48c275aea298318016f040'/>
+</p>
 
 [![Documentation](https://img.shields.io/badge/docs-redash.io/help-brightgreen.svg)](https://redash.io/help/)
-[![Datree](https://s3.amazonaws.com/catalog.static.datree.io/datree-badge-20px.svg)](https://datree.io/?src=badge)
-[![Build Status](https://circleci.com/gh/getredash/redash.png?style=shield&circle-token=8a695aa5ec2cbfa89b48c275aea298318016f040)](https://circleci.com/gh/getredash/redash/tree/master)
 
-Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users leverage Redash to explore, query, visualize, and share data from any data sources. Their work in turn enables anybody in their organization to use the data. Every day, millions of users at thousands of organizations around the world use Redash to develop insights and make data-driven decisions.
+**_Redash_** is our take on freeing the data within our company in a way that will better fit our culture and usage patterns.
 
-Redash features:
+Prior to **_Redash_**, we tried to use traditional BI suites and discovered a set of bloated, technically challenged and slow tools/flows. What we were looking for was a more hacker'ish way to look at data, so we built one.
 
-1. **Browser-based**: Everything in your browser, with a shareable URL.
-2. **Ease-of-use**: Become immediately productive with data without the need to master complex software.
-3. **Query editor**: Quickly compose SQL and NoSQL queries with a schema browser and auto-complete.
-4. **Visualization and dashboards**: Create [beautiful visualizations](https://redash.io/help/user-guide/visualizations/visualization-types) with drag and drop, and combine them into a single dashboard.
-5. **Sharing**: Collaborate easily by sharing visualizations and their associated queries, enabling peer review of reports and queries.
-6. **Schedule refreshes**: Automatically update your charts and dashboards at regular intervals you define.
-7. **Alerts**: Define conditions and be alerted instantly when your data changes.
-8. **REST API**: Everything that can be done in the UI is also available through REST API.
-9. **Broad support for data sources**: Extensible data source API with native support for a long list of common databases and platforms.
+**_Redash_** was built to allow fast and easy access to billions of records, that we process and collect using Amazon Redshift ("petabyte scale data warehouse" that "speaks" PostgreSQL).
+Today **_Redash_** has support for querying multiple databases, including: Redshift, Google BigQuery, PostgreSQL, MySQL, Graphite, Presto, Google Spreadsheets, Cloudera Impala, Hive and custom scripts.
+
+**_Redash_** consists of two parts:
+
+1. **Query Editor**: think of [JS Fiddle](https://jsfiddle.net) for SQL queries. It's your way to share data in the organization in an open way, by sharing both the dataset and the query that generated it. This way everyone can peer review not only the resulting dataset but also the process that generated it. Also it's possible to fork it and generate new datasets and reach new insights.
+2. **Visualizations and Dashboards**: once you have a dataset, you can create different visualizations out of it, and then combine several visualizations into a single dashboard. Currently Redash supports charts, pivot table, cohorts and [more](https://redash.io/help/user-guide/visualizations/visualization-types).
 
 <img src="https://raw.githubusercontent.com/getredash/website/8e820cd02c73a8ddf4f946a9d293c54fd3fb08b9/website/_assets/images/redash-anim.gif" width="80%"/>
 
 ## Getting Started
 
-* [Setting up Redash instance](https://redash.io/help/open-source/setup) (includes links to ready-made AWS/GCE images).
+* [Setting up Redash instance](https://redash.io/help/open-source/setup) (includes links to ready made AWS/GCE images).
 * [Documentation](https://redash.io/help/).
 
 ## Supported Data Sources
 
-Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help/data-sources/supported-data-sources). It can also be extended to support more. Below is a list of built-in sources:
-
-- Amazon Athena
-- Amazon DynamoDB
-- Amazon Redshift
-- Axibase Time Series Database
-- Cassandra
-- ClickHouse
-- CockroachDB
-- CSV
-- Databricks (Apache Spark)
-- DB2 by IBM
-- Druid
-- Elasticsearch
-- Google Analytics
-- Google BigQuery
-- Google Spreadsheets
-- Graphite
-- Greenplum
-- Hive
-- Impala
-- InfluxDB
-- JIRA
-- JSON
-- Apache Kylin
-- OmniSciDB (Formerly MapD)
-- MemSQL
-- Microsoft Azure Data Warehouse / Synapse
-- Microsoft Azure SQL Database
-- Microsoft SQL Server
-- MongoDB
-- MySQL
-- Oracle
-- PostgreSQL
-- Presto
-- Prometheus
-- Python
-- Qubole
-- Rockset
-- Salesforce
-- ScyllaDB
-- Shell Scripts
-- Snowflake
-- SQLite
-- TreasureData
-- Vertica
-- Yandex AppMetrrica
-- Yandex Metrica
+Redash supports more than 35 [data sources](https://redash.io/help/data-sources/supported-data-sources). 
 
 ## Getting Help
 
@@ -86,7 +38,7 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 ## Reporting Bugs and Contributing Code
 
 * Want to report a bug or request a feature? Please open [an issue](https://github.com/getredash/redash/issues/new).
-* Want to help us build **_Redash_**? Fork the project, edit in a [dev environment](https://redash.io/help-onpremise/dev/guide.html) and make a pull request. We need all the help we can get!
+* Want to help us build **_Redash_**? Fork the project, edit in a [dev environment](https://redash.io/help-onpremise/dev/guide.html), and make a pull request. We need all the help we can get!
 
 ## Security
 

SECURITY.md

@@ -1,5 +0,0 @@
-# Security Policy
-
-## Reporting a Vulnerability
-
-Please email security@redash.io to report any security vulnerabilities. We will acknowledge receipt of your vulnerability and strive to send you regular updates about our progress. If you're curious about the status of your disclosure please feel free to email us again. If you want to encrypt your disclosure email, you can use [this PGP key](https://keybase.io/arikfr/key.asc).

bin/bundle-extensions

@@ -1,115 +1,39 @@
-#!/usr/bin/env python3
-"""Copy bundle extension files to the client/app/extension directory"""
-import logging
+#!/usr/bin/env python
+
 import os
-from pathlib import Path
-from shutil import copy
-from collections import OrderedDict as odict
+from subprocess import call
+from distutils.dir_util import copy_tree
 
-import importlib_metadata
-import importlib_resources
+from pkg_resources import iter_entry_points, resource_filename, resource_isdir
 
-# Name of the subdirectory
-BUNDLE_DIRECTORY = "bundle"
-
-logger = logging.getLogger(__name__)
 
 
 # Make a directory for extensions and set it as an environment variable
 # to be picked up by webpack.
-extensions_relative_path = Path("client", "app", "extensions")
-extensions_directory = Path(__file__).parent.parent / extensions_relative_path
+EXTENSIONS_RELATIVE_PATH = os.path.join('client', 'app', 'extensions')
+EXTENSIONS_DIRECTORY = os.path.join(
+    os.path.dirname(os.path.dirname(__file__)),
+    EXTENSIONS_RELATIVE_PATH)
 
-if not extensions_directory.exists():
-    extensions_directory.mkdir()
-os.environ["EXTENSIONS_DIRECTORY"] = str(extensions_relative_path)
+if not os.path.exists(EXTENSIONS_DIRECTORY):
+    os.makedirs(EXTENSIONS_DIRECTORY)
+os.environ["EXTENSIONS_DIRECTORY"] = EXTENSIONS_RELATIVE_PATH
 
+for entry_point in iter_entry_points('redash.extensions'):
+    # This is where the frontend code for an extension lives
+    # inside of its package.
+    content_folder_relative = os.path.join(
+        entry_point.name, 'bundle')
+    (root_module, _) = os.path.splitext(entry_point.module_name)
 
-def entry_point_module(entry_point):
-    """Returns the dotted module path for the given entry point"""
-    return entry_point.pattern.match(entry_point.value).group("module")
-
-
-def load_bundles():
-    """"Load bundles as defined in Redash extensions.
-
-    The bundle entry point can be defined as a dotted path to a module
-    or a callable, but it won't be called but just used as a means
-    to find the files under its file system path.
-
-    The name of the directory it looks for files in is "bundle".
-
-    So a Python package with an extension bundle could look like this::
-
-        my_extensions/
-        ├── __init__.py
-        └── wide_footer
-            ├── __init__.py
-            └── bundle
-                ├── extension.js
-                └── styles.css
-
-    and would then need to register the bundle with an entry point
-    under the "redash.bundles" group, e.g. in your setup.py::
-
-        setup(
-            # ...
-            entry_points={
-                "redash.bundles": [
-                    "wide_footer = my_extensions.wide_footer",
-                ]
-                # ...
-            },
-            # ...
-        )
-
-    """
-    bundles = odict()
-    for entry_point in importlib_metadata.entry_points().get("redash.bundles", []):
-        logger.info('Loading Redash bundle "%s".', entry_point.name)
-        module = entry_point_module(entry_point)
-        # Try to get a list of bundle files
-        try:
-            bundle_dir = importlib_resources.files(module).joinpath(BUNDLE_DIRECTORY)
-        except (ImportError, TypeError):
-            # Module isn't a package, so can't have a subdirectory/-package
-            logger.error(
-                'Redash bundle module "%s" could not be imported: "%s"',
-                entry_point.name,
-                module,
-            )
-            continue
-        if not bundle_dir.is_dir():
-            logger.error(
-                'Redash bundle directory "%s" could not be found or is not a directory: "%s"',
-                entry_point.name,
-                bundle_dir,
-            )
-            continue
-        bundles[entry_point.name] = list(bundle_dir.rglob("*"))
-    return bundles
-
-
-bundles = load_bundles().items()
-if bundles:
-    print("Number of extension bundles found: {}".format(len(bundles)))
-else:
-    print("No extension bundles found.")
-
-for bundle_name, paths in bundles:
-    # Shortcut in case not paths were found for the bundle
-    if not paths:
-        print('No paths found for bundle "{}".'.format(bundle_name))
+    if not resource_isdir(root_module, content_folder_relative):
         continue
 
-    # The destination for the bundle files with the entry point name as the subdirectory
-    destination = Path(extensions_directory, bundle_name)
-    if not destination.exists():
-        destination.mkdir()
+    content_folder = resource_filename(root_module, content_folder_relative)
 
-    # Copy the bundle directory from the module to its destination.
-    print('Copying "{}" bundle to {}:'.format(bundle_name, destination.resolve()))
-    for src_path in paths:
-        dest_path = destination / src_path.name
-        print(" - {} -> {}".format(src_path, dest_path))
-        copy(str(src_path), str(dest_path))
+    # This is where we place our extensions folder.
+    destination = os.path.join(
+        EXTENSIONS_DIRECTORY,
+        entry_point.name)
+
+    copy_tree(content_folder, destination)

bin/docker-entrypoint

@@ -1,38 +1,25 @@
 #!/bin/bash
 set -e
 
-scheduler() {
-  echo "Starting RQ scheduler..."
-
-  exec /app/manage.py rq scheduler
-}
-
-dev_scheduler() {
-  echo "Starting dev RQ scheduler..."
-
-  exec watchmedo auto-restart --directory=./redash/ --pattern=*.py --recursive -- ./manage.py rq scheduler
-}
-
 worker() {
-  echo "Starting RQ worker..."
+  WORKERS_COUNT=${WORKERS_COUNT:-2}
+  QUEUES=${QUEUES:-queries,scheduled_queries,celery}
 
-  export WORKERS_COUNT=${WORKERS_COUNT:-2}
-  export QUEUES=${QUEUES:-}
-
-  exec supervisord -c worker.conf
+  echo "Starting $WORKERS_COUNT workers for queues: $QUEUES..."
+  exec /usr/local/bin/celery worker --app=redash.worker -c$WORKERS_COUNT -Q$QUEUES -linfo --maxtasksperchild=10 -Ofair
 }
 
-dev_worker() {
-  echo "Starting dev RQ worker..."
+scheduler() {
+  WORKERS_COUNT=${WORKERS_COUNT:-1}
+  QUEUES=${QUEUES:-celery}
 
-  exec watchmedo auto-restart --directory=./redash/ --pattern=*.py --recursive -- ./manage.py rq worker $QUEUES
+  echo "Starting scheduler and $WORKERS_COUNT workers for queues: $QUEUES..."
+
+  exec /usr/local/bin/celery worker --app=redash.worker --beat -c$WORKERS_COUNT -Q$QUEUES -linfo --maxtasksperchild=10 -Ofair
 }
 
 server() {
-  # Recycle gunicorn workers every n-th request. See http://docs.gunicorn.org/en/stable/settings.html#max-requests for more details.
-  MAX_REQUESTS=${MAX_REQUESTS:-1000}
-  MAX_REQUESTS_JITTER=${MAX_REQUESTS_JITTER:-100}
-  exec /usr/local/bin/gunicorn -b 0.0.0.0:5000 --name redash -w${REDASH_WEB_WORKERS:-4} redash.wsgi:app --max-requests $MAX_REQUESTS --max-requests-jitter $MAX_REQUESTS_JITTER
+  exec /usr/local/bin/gunicorn -b 0.0.0.0:5000 --name redash -w${REDASH_WEB_WORKERS:-4} redash.wsgi:app
 }
 
 create_db() {
@@ -46,14 +33,11 @@ help() {
   echo ""
 
   echo "server -- start Redash server (with gunicorn)"
-  echo "worker -- start a single RQ worker"
-  echo "dev_worker -- start a single RQ worker with code reloading"
-  echo "scheduler -- start an rq-scheduler instance"
-  echo "dev_scheduler -- start an rq-scheduler instance with code reloading"
+  echo "worker -- start Celery worker"
+  echo "scheduler -- start Celery worker with a beat (scheduler) process"
   echo ""
   echo "shell -- open shell"
   echo "dev_server -- start Flask development server with debugger and auto reload"
-  echo "debug -- start Flask development server with remote debugger via ptvsd"
   echo "create_db -- create database tables"
   echo "manage -- CLI to manage redash"
   echo "tests -- run tests"
@@ -83,27 +67,10 @@ case "$1" in
     shift
     scheduler
     ;;
-  dev_scheduler)
-    shift
-    dev_scheduler
-    ;;
-  dev_worker)
-    shift
-    dev_worker
-    ;;
-  celery_healthcheck)
-    shift
-    echo "DEPRECATED: Celery has been replaced with RQ and now performs healthchecks autonomously as part of the 'worker' entrypoint."
-    ;;
   dev_server)
     export FLASK_DEBUG=1
     exec /app/manage.py runserver --debugger --reload -h 0.0.0.0
     ;;
-  debug)
-    export FLASK_DEBUG=1
-    export REMOTE_DEBUG=1
-    exec /app/manage.py runserver --debugger --no-reload -h 0.0.0.0
-    ;;
   shell)
     exec /app/manage.py shell
     ;;
@@ -126,3 +93,4 @@ case "$1" in
     exec "$@"
     ;;
 esac
+

bin/flake8_tests.sh

@@ -1,9 +1,7 @@
 #!/bin/sh
 
-set -o errexit  # fail the build if any task fails
-
 flake8 --version ; pip --version
 # stop the build if there are Python syntax errors or undefined names
-flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
+flake8 . --count --select=E901,E999,F821,F822,F823 --show-source --statistics
 # exit-zero treats all errors as warnings.  The GitHub editor is 127 chars wide      
 flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics

bin/get_changes.py

@@ -1,10 +1,9 @@
-#!/bin/env python3
-
+#!/bin/env python
+from __future__ import print_function
 import sys
 import re
 import subprocess
 
-
 def get_change_log(previous_sha):
     args = ['git', '--no-pager', 'log', '--merges', '--grep', 'Merge pull request', '--pretty=format:"%h|%s|%b|%p"', 'master...{}'.format(previous_sha)]
     log = subprocess.check_output(args)
@@ -34,4 +33,4 @@ if __name__ == '__main__':
     changes = get_change_log(previous_sha)
 
     for change in changes:
-        print(change)
+        print(change)

bin/pack

@@ -0,0 +1,8 @@
+#!/bin/bash
+NAME=redash
+VERSION=$(python ./manage.py version)
+FULL_VERSION=$VERSION+b$CIRCLE_BUILD_NUM
+FILENAME=$NAME.$FULL_VERSION.tar.gz
+
+sed -ri "s/^__version__ = '([A-Za-z0-9.-]*)'/__version__ = '$FULL_VERSION'/" redash/__init__.py
+tar -zcv -f $FILENAME --exclude="optipng*" --exclude=".git*" --exclude="*.pyc" --exclude="*.pyo" --exclude="venv" --exclude="node_modules" *

bin/pre_compile

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+# Heroku pre_compile script
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+pushd $DIR/..
+
+# heroku requires cffi to be in requirements.txt in order for libffi to be installed.
+# https://github.com/heroku/heroku-buildpack-python/blob/master/bin/steps/cryptography
+# to avoid making it a requirement for other build systems, we'll inject it now
+# into the requirements.txt file
+
+# Remove Heroku unsupported Python packages:
+grep -v -E "^(pymssql|thrift|sasl|pyhive)" requirements_all_ds.txt >> requirements.txt
+
+# make the heroku Procfile the active one
+cp Procfile.heroku Procfile
+
+popd

bin/release_manager.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env python3
+from __future__ import print_function
 import os
 import sys
 import re

bin/upgrade

@@ -1,4 +1,4 @@
-#!/usr/bin/env python3
+#!/usr/bin/env python
 import urllib
 import argparse
 import os
@@ -27,7 +27,7 @@ def run(cmd, cwd=None):
 
 
 def confirm(question):
-    reply = str(input(question + ' (y/n): ')).lower().strip()
+    reply = str(raw_input(question + ' (y/n): ')).lower().strip()
 
     if reply[0] == 'y':
         return True

client/.babelrc

@@ -1,29 +1,10 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "exclude": ["@babel/plugin-transform-async-to-generator", "@babel/plugin-transform-arrow-functions"],
-        "corejs": "2",
-        "useBuiltIns": "usage"
-      }
-    ],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
+  "presets": ["env", "react", "stage-2"],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-object-assign",
-    [
-      "babel-plugin-transform-builtin-extend",
-      {
-        "globals": ["Error"]
-      }
-    ]
-  ],
-  "env": {
-    "test": {
-      "plugins": ["istanbul"]
-    }
-  }
+    "angularjs-annotate",
+    "transform-object-assign",
+    ["babel-plugin-transform-builtin-extend", {
+      "globals": ["Error"]
+    }]
+  ]
 }

client/.eslintignore

@@ -1,4 +1,3 @@
 build/*.js
-dist
 config/*.js
-client/dist
+node_modules

client/.eslintrc.js

@@ -1,57 +1,44 @@
 module.exports = {
   root: true,
-  parser: "@typescript-eslint/parser",
-  extends: [
-    "react-app",
-    "plugin:compat/recommended",
-    "prettier",
-    // Remove any typescript-eslint rules that would conflict with prettier
-    "prettier/@typescript-eslint",
-  ],
-  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint"],
+  extends: ["airbnb", "plugin:jest/recommended"],
+  plugins: ["jest", "cypress"],
   settings: {
-    "import/resolver": "webpack",
+    "import/resolver": "webpack"
   },
+  parser: "babel-eslint",
   env: {
-    browser: true,
-    node: true,
+    "jest/globals": true,
+    "cypress/globals": true,
+    "browser": true,
+    "node": true
   },
   rules: {
     // allow debugger during development
-    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-param-reassign': 0,
+    'no-mixed-operators': 0,
+    'no-underscore-dangle': 0,
+    "prefer-destructuring": "off",
+    "prefer-template": "off",
+    "no-restricted-properties": "off",
+    "no-restricted-globals": "off",
+    "no-multi-assign": "off",
+    "no-lonely-if": "off",
+    "consistent-return": "off",
+    "no-control-regex": "off",
+    "react/jsx-filename-extension": "off",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "react/prefer-stateless-function": "warn",
+    "react/forbid-prop-types": "warn",
+    "react/prop-types": "warn",
     "jsx-a11y/anchor-is-valid": "off",
-    "no-restricted-imports": [
-      "error",
-      {
-        paths: [
-          {
-            name: "antd",
-            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
-          },
-          {
-            name: "antd/lib",
-            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
-          },
-        ],
-      },
-    ],
-  },
-  overrides: [
-    {
-      // Only run typescript-eslint on TS files
-      files: ["*.ts", "*.tsx", ".*.ts", ".*.tsx"],
-      extends: ["plugin:@typescript-eslint/recommended"],
-      rules: {
-        // Do not require functions (especially react components) to have explicit returns
-        "@typescript-eslint/explicit-function-return-type": "off",
-        // Do not require to type every import from a JS file to speed up development
-        "@typescript-eslint/no-explicit-any": "off",
-        // Do not complain about useless contructors in declaration files
-        "no-useless-constructor": "off",
-        "@typescript-eslint/no-useless-constructor": "error",
-        // Many API fields and generated types use camelcase
-        "@typescript-eslint/camelcase": "off",
-      },
-    },
-  ],
+    "max-len": ['error', 120, 2, {
+      ignoreUrls: true,
+      ignoreComments: false,
+      ignoreRegExpLiterals: true,
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true,
+    }]
+  }
 };

client/app/.eslintrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-  extends: ["plugin:jest/recommended"],
-  plugins: ["jest"],
-  env: {
-    "jest/globals": true,
-  },
-  rules: {
-    "jest/no-focused-tests": "off",
-  },
-};

client/app/__tests__/enzyme_setup.js

@@ -1,4 +0,0 @@
-import { configure } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-
-configure({ adapter: new Adapter() });

client/app/__tests__/mocks.js

@@ -1,5 +0,0 @@
-import MockDate from "mockdate";
-
-const date = new Date("2000-01-01T02:00:00.000");
-
-MockDate.set(date);

client/app/assets/images/illustrations/no-query-results.svg

@@ -1,13 +0,0 @@
-<svg width="274" height="199" viewBox="0 0 274 199" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.5" d="M57.9111 49.2668L202.769 30" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
-<path opacity="0.5" d="M39.2842 92.7371L244.24 64.886" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
-<path opacity="0.5" d="M30 136.299L232.813 107.734" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
-<path opacity="0.5" d="M86.4541 169.149L234.166 150.596" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
-<path d="M167.829 69.1349H96.458L117.605 51.9531H183.028L167.829 69.1349Z" fill="#C0D5FF"/>
-<path d="M171.133 70.4566H92.4933V85.6559V143.149H171.133V70.4566Z" fill="#E8F4FF"/>
-<path d="M190.298 48.6489L171.133 70.4566L186.993 94.9076L192.28 89.9514L206.818 73.7608L190.298 48.6489Z" fill="#E8F4FF"/>
-<path d="M171.133 70.4566V143.149L192.28 118.037V89.9514L186.993 94.9076L171.133 70.4566Z" fill="#E8F4FF"/>
-<path d="M92.4933 70.4566L81.9199 89.9514L92.4933 85.6559V70.4566Z" fill="#E8F4FF"/>
-<path d="M92.4933 70.4566H171.133M92.4933 70.4566L118.927 48.6489H190.298M92.4933 70.4566L81.9199 89.9514L92.4933 85.6559M92.4933 70.4566V85.6559M171.133 70.4566V143.149M171.133 70.4566L190.298 48.6489M171.133 70.4566L186.993 94.9076L192.28 89.9514M171.133 143.149H92.4933V85.6559M171.133 143.149L192.28 118.037V89.9514M190.298 48.6489L206.818 73.7608L192.28 89.9514" stroke="black" stroke-width="3" stroke-linejoin="round"/>
-<path d="M117.605 89.6208H147.343" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

client/app/assets/less/ant.less

@@ -1,414 +0,0 @@
-@import "~antd/lib/style/core/iconfont";
-@import "~antd/lib/style/core/motion";
-@import "~antd/lib/alert/style/index";
-@import "~antd/lib/input/style/index";
-@import "~antd/lib/input-number/style/index";
-@import "~antd/lib/date-picker/style/index";
-@import "~antd/lib/modal/style/index";
-@import "~antd/lib/tooltip/style/index";
-@import "~antd/lib/select/style/index";
-@import "~antd/lib/checkbox/style/index";
-@import "~antd/lib/upload/style/index";
-@import "~antd/lib/form/style/index";
-@import "~antd/lib/button/style/index";
-@import "~antd/lib/radio/style/index";
-@import "~antd/lib/time-picker/style/index";
-@import "~antd/lib/pagination/style/index";
-@import "~antd/lib/table/style/index";
-@import "~antd/lib/popover/style/index";
-@import "~antd/lib/tag/style/index";
-@import "~antd/lib/grid/style/index";
-@import "~antd/lib/switch/style/index";
-@import "~antd/lib/empty/style/index";
-@import "~antd/lib/drawer/style/index";
-@import "~antd/lib/card/style/index";
-@import "~antd/lib/steps/style/index";
-@import "~antd/lib/divider/style/index";
-@import "~antd/lib/dropdown/style/index";
-@import "~antd/lib/menu/style/index";
-@import "~antd/lib/list/style/index";
-@import "~antd/lib/badge/style/index";
-@import "~antd/lib/card/style/index";
-@import "~antd/lib/spin/style/index";
-@import "~antd/lib/skeleton/style/index";
-@import "~antd/lib/tabs/style/index";
-@import "~antd/lib/notification/style/index";
-@import "~antd/lib/collapse/style/index";
-@import "~antd/lib/progress/style/index";
-@import "~antd/lib/typography/style/index";
-@import "~antd/lib/descriptions/style/index";
-@import "inc/ant-variables";
-
-// Increase z-indexes to avoid conflicts with some other libraries (e.g. Plotly)
-@zindex-modal: 2000;
-@zindex-modal-mask: 2000;
-@zindex-message: 2010;
-@zindex-notification: 2010;
-@zindex-popover: 2030;
-@zindex-dropdown: 2050;
-@zindex-picker: 2050;
-@zindex-tooltip: 2060;
-@item-hover-bg: #e5f8ff;
-
-.@{drawer-prefix-cls} {
-  &.help-drawer {
-    z-index: @zindex-tooltip; // help drawer should be topmost
-  }
-}
-
-// Remove bold in labels for Ant checkboxes and radio buttons
-.ant-checkbox-wrapper,
-.ant-radio-wrapper {
-  font-weight: normal;
-}
-
-.ant-select-dropdown-menu-item em {
-  color: @input-color-placeholder;
-  font-size: 11px;
-}
-
-// Fix for disabled button styles inside Tooltip component.
-// Tooltip wraps disabled buttons with `<span>` and moves all styles
-// and classes to that `<span>`. This resets all button styles and
-// turns it into simple inline element (because now it's wrapper is a button)
-.btn {
-  button[disabled] {
-    -moz-appearance: none !important;
-    -webkit-appearance: none !important;
-    appearance: none !important;
-    border: 0 !important;
-    outline: none !important;
-    background: transparent !important;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-}
-
-// Button overrides
-.@{btn-prefix-cls} {
-  transition-duration: 150ms;
-
-  &.icon-button {
-    width: 32px;
-    padding: 0 10px;
-  }
-}
-
-// Fix ant input number showing duplicate arrows
-.ant-input-number-input::-webkit-outer-spin-button,
-.ant-input-number-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-// Pagination overrides (based on existing Bootstrap overrides)
-.@{pagination-prefix-cls} {
-  display: inline-block;
-  margin-top: 18px;
-  margin-bottom: 18px;
-  vertical-align: top;
-
-  &-item {
-    background-color: @pagination-bg;
-    border-color: transparent;
-    color: @pagination-color;
-    font-size: 14px;
-    margin-right: 5px;
-
-    a {
-      color: inherit;
-    }
-
-    &:focus,
-    &:hover {
-      background-color: @pagination-hover-bg;
-      border-color: transparent;
-      color: @pagination-hover-color;
-      a {
-        color: inherit;
-      }
-    }
-
-    &-active {
-      &,
-      &:hover,
-      &:focus {
-        background-color: @pagination-active-bg;
-        color: @pagination-active-color;
-        border-color: transparent;
-        pointer-events: none;
-        cursor: default;
-
-        a {
-          color: inherit;
-        }
-      }
-    }
-  }
-
-  &-disabled {
-    &,
-    &:hover,
-    &:focus {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-
-  &-prev,
-  &-next {
-    .@{pagination-prefix-cls}-item-link {
-      background-color: @pagination-bg;
-      border-color: transparent;
-      color: @pagination-color;
-      line-height: @pagination-item-size - 2px;
-
-      .@{pagination-prefix-cls}.mini & {
-        line-height: @pagination-item-size-sm - 2px;
-      }
-    }
-
-    &:focus .@{pagination-prefix-cls}-item-link,
-    &:hover .@{pagination-prefix-cls}-item-link {
-      background-color: @pagination-hover-bg;
-      border-color: transparent;
-      color: @pagination-hover-color;
-    }
-  }
-
-  &-prev,
-  &-jump-prev,
-  &-jump-next {
-    margin-right: 5px;
-  }
-
-  &-jump-prev,
-  &-jump-next {
-    .@{pagination-prefix-cls}-item-container {
-      .@{pagination-prefix-cls}-item-link-icon {
-        color: @pagination-color;
-      }
-    }
-  }
-}
-
-// Table
-
-.@{table-prefix-cls} {
-  color: inherit;
-
-  tr,
-  th,
-  td {
-    transition: none !important;
-  }
-
-  &-thead > tr > th {
-    padding: @table-padding-vertical * 2 @table-padding-horizontal;
-  }
-
-  .@{table-prefix-cls}-column-sorters {
-    &:before,
-    &:hover:before {
-      content: none;
-    }
-  }
-
-  &-thead > tr > th {
-    .@{table-prefix-cls}-column-sorter {
-      &-up,
-      &-down {
-        &.on {
-          color: @table-header-icon-active-color;
-        }
-      }
-    }
-  }
-
-  // Custom styles
-
-  &-headerless &-tbody > tr:first-child > td {
-    border-top: @border-width-base @border-style-base @border-color-split;
-  }
-}
-
-// List
-
-.@{list-prefix-cls} {
-  &-item {
-    // custom rule
-    &.selected {
-      background-color: #f6f8f9;
-    }
-
-    &.disabled {
-      background-color: fade(#f6f8f9, 40%);
-
-      & > * {
-        opacity: 0.4;
-      }
-    }
-  }
-}
-
-.@{dialog-prefix-cls} {
-  // styling for short modals (no lines)
-  &.shortModal {
-    .@{dialog-prefix-cls} {
-      &-header,
-      &-footer {
-        border: none;
-        padding: 16px;
-      }
-
-      &-body {
-        padding: 10px 16px;
-      }
-
-      &-close-x {
-        width: 46px;
-        height: 46px;
-        line-height: 46px;
-      }
-    }
-  }
-
-  // fullscreen modals
-  &-fullscreen {
-    .@{dialog-prefix-cls} {
-      position: absolute;
-      left: 15px;
-      top: 15px;
-      right: 15px;
-      bottom: 15px;
-      width: auto !important;
-      height: auto !important;
-      max-width: none;
-      max-height: none;
-      margin: 0;
-      padding: 0;
-
-      .@{dialog-prefix-cls}-content {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: auto;
-        height: auto;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .@{dialog-prefix-cls}-body {
-        flex: 1 1 auto;
-        overflow: auto;
-      }
-    }
-  }
-}
-
-// description in modal header
-.modal-header-desc {
-  font-size: @font-size-base;
-  color: @text-color-secondary;
-  font-weight: normal;
-  margin-top: 4px;
-}
-
-// Notification overrides
-.@{notification-prefix-cls} {
-  // vertical centering
-  &-notice-close {
-    top: 20px;
-    right: 20px;
-  }
-
-  &-notice-description {
-    max-width: 484px;
-  }
-}
-
-.@{btn-prefix-cls} .@{iconfont-css-prefix}-ellipsis {
-  margin: 0 -7px 0 -8px;
-}
-
-// Collapse
-
-.@{collapse-prefix-cls} {
-  &&-headerless {
-    border: 0;
-    background: none;
-
-    .@{collapse-prefix-cls}-header {
-      display: none;
-    }
-
-    .@{collapse-prefix-cls}-item,
-    .@{collapse-prefix-cls}-content {
-      border: 0;
-    }
-
-    .@{collapse-prefix-cls}-content-box {
-      padding: 0;
-    }
-  }
-}
-
-// overrides for tall form components such as ace editor
-.@{form-prefix-cls}-item {
-  &-children {
-    display: block; // so feeback icon positions correctly
-  }
-
-  // no change for short components, sticks to body for tall ones
-  &-children-icon {
-    top: auto !important;
-    bottom: 8px;
-
-    // makes the icon white instead of see-through
-    & svg {
-      background: white;
-      border-radius: 50%;
-    }
-  }
-
-  // for form items that contain text
-  &.form-item-line-height-normal .@{form-prefix-cls}-item-control {
-    line-height: 20px;
-    margin-top: 9px;
-  }
-}
-
-.@{menu-prefix-cls} {
-  // invert stripe position with class .invert-stripe-position
-  &-inline.invert-stripe-position {
-    .@{menu-prefix-cls}-item {
-      &::after {
-        right: auto;
-        left: 0;
-      }
-    }
-  }
-}
-
-// overrides for checkbox
-@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox";
-
-.@{checkbox-prefix-cls}-wrapper + span,
-.@{checkbox-prefix-cls} + span {
-  padding-right: 0;
-}
-
-// make sure Multiple select has room for icons
-.@{select-prefix-cls}-multiple {
-  &.@{select-prefix-cls}-show-arrow,
-  &.@{select-prefix-cls}-show-search,
-  &.@{select-prefix-cls}-loading {
-    .@{select-prefix-cls}-selector {
-      padding-right: 30px;
-    }
-  }
-}

client/app/assets/less/inc/ace-editor.less

@@ -1,25 +1,7 @@
 .ace_editor {
-  border: 1px solid fade(@redash-gray, 15%);
+  border: 1px solid #eee;
   height: 100%;
   margin-bottom: 10px;
-
-  &.ace_autocomplete .ace_completion-highlight {
-    text-shadow: none !important;
-    background: #ffff005e;
-    font-weight: 600;
-  }
-
-  &.ace-tm {
-    .ace_gutter {
-      background: #fff !important;
-    }
-
-    .ace_gutter-active-line {
-      background-color: fade(@redash-gray, 20%) !important;
-    }
-
-    .ace_marker-layer .ace_active-line {
-      background: fade(@redash-gray, 9%) !important;
-    }
-  }
 }
+
+

client/app/assets/less/inc/alert.less

@@ -1,49 +1,45 @@
-.alert-page h3 {
-  flex-grow: 1;
-
-  input {
-    margin: -0.2em 0;
-    width: 100%;
-    min-width: 170px;
-  }
+.alert {
+    padding-left: 30px;
+    padding-right: 30px;
+    
+    span {
+        cursor: pointer;
+    }
 }
 
-.btn-create-alert[disabled] {
-  display: block;
-  margin-top: -20px;
+.alert-dismissable,
+.alert-dismissible {
+    padding-right: 44px;
+} 
+
+.alert-inverse {
+    .alert-variant(@alert-inverse-bg; @alert-inverse-border; @alert-inverse-text);
 }
 
-.alert-state {
-  border-bottom: 1px solid @input-border;
-  padding-bottom: 30px;
-
-  .alert-state-indicator {
-    text-transform: uppercase;
-    font-size: 14px;
-    padding: 5px 8px;
-  }
-
-  .ant-form-item-explain {
-    margin-top: 10px;
-  }
-
-  .alert-last-triggered {
-    color: @headings-color;
-  }
+.alert-link {
+    color: #fff !important;
+    font-weight: normal !important;
+    text-decoration: underline;
 }
 
-.alert-query-selector {
-  min-width: 250px;
-  width: auto !important;
-}
+.growl-animated {
+    &.alert-inverse {
+        box-shadow: 0 0 5px fade(@alert-inverse-bg, 50%);
+    }
+    
+    &.alert-info {
+        box-shadow: 0 0 5px fade(@alert-info-bg, 50%);
+    }
 
-// allow form item labels to gracefully break line
-.alert-form-item label {
-  white-space: initial;
-  padding-right: 8px;
-  line-height: 21px;
+    &.alert-success {
+        box-shadow: 0 0 5px fade(@alert-success-bg, 50%);
+    }
 
-  &::after {
-    margin-right: 0 !important;
-  }
+    &.alert-warning {
+        box-shadow: 0 0 5px fade(@alert-warning-bg, 50%);
+    }
+
+    &.alert-danger {
+        box-shadow: 0 0 5px fade(@alert-danger-bg, 50%);
+    }
 }

client/app/assets/less/inc/angular.less

@@ -0,0 +1,8 @@
+a[ng-click] {
+  cursor: pointer;
+}
+
+/* Immediately apply ng-cloak, instead of waiting for angular.js to load: */
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}

client/app/assets/less/inc/ant-variables.less

@@ -1,76 +0,0 @@
-/* --------------------------------------------------------
-    Colors
------------------------------------------------------------*/
-@lightblue: #03a9f4;
-@primary-color: #2196f3;
-
-@redash-gray: rgba(102, 136, 153, 1);
-@redash-orange: rgba(255, 120, 100, 1);
-@redash-black: rgba(0, 0, 0, 1);
-@redash-yellow: rgba(252, 252, 161, 0.75);
-
-/* --------------------------------------------------------
-    Font
------------------------------------------------------------*/
-@redash-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
-  sans-serif;
-@font-family-no-number: @redash-font;
-@font-family: @redash-font;
-@code-family: @redash-font;
-@font-size-base: 13px;
-
-/* --------------------------------------------------------
-    Borders
------------------------------------------------------------*/
-@border-color-split: #f0f0f0;
-
-/* --------------------------------------------------------
-    Typograpgy
------------------------------------------------------------*/
-@text-color: #595959;
-
-/* --------------------------------------------------------
-    Form
------------------------------------------------------------*/
-@input-height-base: 35px;
-@input-color: #595959;
-@input-color-placeholder: #b4b4b4;
-@border-radius-base: 2px;
-@border-color-base: #e8e8e8;
-
-/* --------------------------------------------------------
-    Pagination
------------------------------------------------------------*/
-@pagination-item-size: 33px;
-@pagination-font-family: @redash-font;
-@pagination-font-weight-active: normal;
-
-@pagination-bg: fade(@redash-gray, 15%);
-@pagination-color: #7e7e7e;
-@pagination-active-bg: @lightblue;
-@pagination-active-color: #fff;
-@pagination-disabled-bg: fade(@redash-gray, 15%);
-@pagination-hover-color: #333;
-@pagination-hover-bg: fade(@redash-gray, 25%);
-
-/* --------------------------------------------------------
-    Table
------------------------------------------------------------*/
-@table-border-radius-base: 0;
-@table-header-color: #333;
-@table-header-bg: fade(@redash-gray, 3%);
-@table-header-icon-color: fade(@text-color, 20%);
-@table-header-icon-active-color: @text-color;
-@table-header-sort-bg: @table-header-bg;
-@table-header-sort-active-bg: @table-header-bg;
-@table-header-filter-active-bg: @table-header-bg;
-@table-body-sort-bg: transparent;
-@table-row-hover-bg: fade(@redash-gray, 5%);
-@table-padding-vertical: 7px;
-@table-padding-horizontal: 10px;
-
-/* --------------------------------------------------------
-    Notification
------------------------------------------------------------*/
-@notification-padding: @notification-padding-vertical 48px @notification-padding-vertical 17px;
-@notification-width: auto;

client/app/assets/less/inc/base.less

@@ -1,227 +1,88 @@
-*,
-button,
-input,
-i,
-a {
-  -webkit-font-smoothing: antialiased;
+*, button, input, i, a {
+    -webkit-font-smoothing: antialiased;
 }
 
 *,
 *:active,
 *:hover {
-  outline: none !important;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+    outline: none !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 }
 
 html {
-  overflow-x: ~"hidden\0/";
-  -ms-overflow-style: auto;
+    overflow-x: ~"hidden\0/";
+    -ms-overflow-style: auto;
 }
 
-html,
-body {
-  min-height: 100vh;
+html, body {
+    min-height: 100vh;
 }
 
 body {
-  padding-top: 0;
-  background: #f6f8f9;
-  font-family: @redash-font;
-  position: relative;
-
-  #application-root {
-    padding-bottom: 15px;
-  }
-}
-
-#application-root {
-  min-height: 100vh;
-}
-
-#application-root,
-#app-content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
+    padding-top: @header-height;
+    position: relative;
+    padding-bottom: @footer-height;
+    &.headless {
+        padding-top: 0;
+        padding-bottom: 0;
+        .nav.app-header {
+            display: none;
+        }
+        div#footer {
+            display: none;
+        }
+    }
 }
 
 strong {
-  font-weight: 500;
+    font-weight: 500;
 }
 
 #content {
-  position: relative;
-  padding-top: 30px;
-  padding-bottom: 30px;
+    position: relative;
+    padding-top: 30px;
+    padding-bottom: 30px;
 
-  @media (min-width: (@screen-sm-min + 1)) {
-    padding-right: 15px;
-    padding-left: 15px;
-  }
+    @media (min-width: (@screen-sm-min + 1)) {
+        padding-right: 15px;
+        padding-left: 15px;
+    }
 
-  @media (min-width: (@screen-lg-min + 80px)) {
-    margin-left: @sidebar-left-width;
-  }
+    @media (min-width: (@screen-lg-min + 80px)) {
+        margin-left: @sidebar-left-width;
+    }
 
-  @media (min-width: @screen-sm-min) and (max-width: (@screen-md-max + 80px)) {
-    margin-left: @sidebar-left-mid-width;
-  }
+    @media (min-width: @screen-sm-min) and (max-width: (@screen-md-max + 80px)) {
+        margin-left: @sidebar-left-mid-width;
+    }
 
-  @media (max-width: (@screen-sm-min)) {
-    margin-left: 0;
-  }
+    @media (max-width: (@screen-sm-min)) {
+        margin-left: 0;
+    }
 }
 
 .container {
-  &.c-boxed {
-    max-width: @boxed-width;
-  }
-}
-
-.settings-screen,
-.home-page,
-.page-dashboard-list,
-.page-queries-list,
-.page-alerts-list,
-.alert-page,
-.admin-page-layout {
-  .container {
-    width: 100%;
-    max-width: none;
-  }
+    &.c-boxed {
+        max-width: @boxed-width;
+    }
 }
 
 .scrollbox {
-  overflow: auto;
-  position: relative;
-}
+    overflow: auto;
+    position: relative;
 
-.clickable {
-  cursor: pointer;
 }
 
 .resize-vertical {
-  resize: vertical !important;
-  transition: height 0s !important;
+    resize: vertical !important;
+    transition: height 0s !important;
 }
 .resize-horizontal {
-  resize: horizontal !important;
-  transition: width 0s !important;
+    resize: horizontal !important;
+    transition: width 0s !important;
 }
 .resize-both,
 .resize-vertical.resize-horizontal {
-  resize: both !important;
-  transition: height 0s, width 0s !important;
-}
-
-.bg-ace {
-  background-color: fade(@redash-gray, 12%) !important;
-}
-
-// resizeable
-.rg-top span,
-.rg-bottom span {
-  height: 3px;
-  border-color: #b1c1ce; // TODO: variable
-}
-
-.rg-bottom {
-  bottom: 15px;
-
-  span {
-    margin: 1.5px 0 0 -10px;
-  }
-}
-
-// Plotly
-text.slicetext {
-  text-shadow: 1px 1px 5px #333;
-}
-
-// markdown
-.markdown strong {
-  font-weight: bold;
-}
-
-.markdown img {
-  max-width: 100%;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-  background-color: fade(@redash-gray, 15%);
-  color: #111;
-}
-
-.profile__image--sidebar {
-  border-radius: 100%;
-  margin-right: 3px;
-  margin-top: -2px;
-}
-
-.profile__image--settings {
-  border-radius: 100%;
-}
-
-.profile__image_thumb {
-  border-radius: 100%;
-  margin-right: 3px;
-  margin-top: -2px;
-  width: 20px;
-  height: 20px;
-}
-
-// Error state
-.error-state {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  text-align: center;
-  margin-top: 25vh;
-  padding: 35px;
-  font-size: 14px;
-  line-height: 21px;
-
-  .error-state__icon {
-    .zmdi {
-      font-size: 64px;
-      color: @redash-gray;
-    }
-  }
-
-  @media (max-width: 767px) {
-    margin-top: 10vh;
-  }
-}
-
-.warning-icon-danger {
-  color: @red !important;
-}
-
-// page
-.page-title {
-  display: flex;
-  align-items: center;
-
-  .label {
-    margin-top: 3px;
-    display: inline-block;
-  }
-
-  .favorites-control {
-    font-size: 19px;
-    margin-right: 10px;
-  }
-}
-
-.page-header--new {
-  h3 {
-    margin: 0.2em 0;
-    line-height: 1.3;
-    font-weight: 500;
-  }
-}
-
-.select-option-divider {
-  margin: 10px 0 !important;
+    resize: both !important;
+    transition: height 0s, width 0s !important;
 }

client/app/assets/less/inc/bootstrap-overrides.less

@@ -31,7 +31,7 @@
 
 .collapsing,
 .collapse.in {
-    padding: 0;
+    padding: 5px 10px;
     transition: all 0.35s ease;
 }
 

client/app/assets/less/inc/button.less

@@ -122,21 +122,3 @@
   top: 1px;
   position: relative;
 }
-
-
-.btn-default {
-    background-color: fade(@redash-gray, 15%);
-}
-
-.btn-transparent {
-    background-color: transparent !important;
-}
-
-.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
-    background-color: fade(@redash-gray, 25%);
-}
-
-.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
-    color: #333;
-    background-color: fade(@redash-gray, 45%);
-}

client/app/assets/less/inc/edit-in-place.less

@@ -7,7 +7,6 @@
 }
 
 .edit-in-place span.editable {
-  display: inline-block;
   cursor: pointer;
 }
 
@@ -24,3 +23,32 @@
 .edit-in-place {
   display: inline-block;
 }
+
+.edit-in-place {
+  .rd-form-control {
+    padding: 0px 6px;
+    width: 30vw;
+  }
+
+  &.active {
+    textarea.rd-form-control {
+      height: 29px;
+      width: 40vw;
+    }
+  }
+}
+
+
+@media (max-width: 880px) {
+  .edit-in-place {
+    .rd-form-control {
+      width: 50vw;
+    }
+
+    &.active {
+      textarea.rd-form-control {
+        width: 50vw;
+      }
+    }
+  }
+}

client/app/assets/less/inc/footer.less

@@ -0,0 +1,48 @@
+#footer {
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    width: 100%;
+    height: @footer-height;
+    color: #a2a2a2;
+    padding-top: 10px;
+    padding-bottom: 15px;
+
+    .f-menu {
+        display: block;
+        width: 100%;
+        .list-inline();
+        margin-top: 8px;
+
+        & > li > a {
+            color: #a2a2a2;
+
+            &:hover {
+                color: #777;
+            }
+        }
+    }
+
+    @media (min-width: (@screen-lg-min + 80px)) {
+        padding-left: (@sidebar-left-width + @grid-gutter-width);
+    }
+
+    @media (min-width: @screen-sm-min) and (max-width: (@screen-md-max + 80px)) {
+        padding-left: (@sidebar-left-mid-width + @grid-gutter-width);
+    }
+
+    @media (max-width: (@screen-sm-min)) {
+        padding-left: @grid-gutter-width/2;
+    }
+}
+
+.footer {
+  color: #818d9f;
+  padding-bottom: 30px;
+  a {
+    color: #818d9f;
+    margin-left: 20px;
+  }
+}
+
+

client/app/assets/less/inc/form.less

@@ -1,9 +1,9 @@
 label {
-  font-weight: 500;
+    font-weight: 500;
 }
 
 textarea.v-resizable {
-  resize: vertical;
+    resize: vertical;
 }
 
 .form-group {
@@ -29,266 +29,282 @@ textarea.v-resizable {
   }
 }
 
+/* light version of bootstrap's form-control */
+.rd-form-control {
+  display: block;
+  padding: 6px 12px;
+  line-height: 1.428571429;
+  color: #555555;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  width: 90%;
+}
+
+
 /* --------------------------------------------------------
     Input Fields
 -----------------------------------------------------------*/
 .form-control {
-  .transition(all);
-  .transition-duration(300ms);
-  resize: none;
-  box-shadow: 0 0 0 40px rgba(0, 0, 0, 0) !important;
-  border-radius: @redash-input-radius;
+    .transition(all);
+    .transition-duration(300ms);
+    resize: none;
+    box-shadow: 0 0 0 40px rgba(0, 0, 0, 0) !important;
+    border-radius: 0;
 
-  &:focus {
-    box-shadow: none !important;
-    border-color: @blue;
-  }
-  &:hover {
-    border-color: @blue;
-  }
+    &:focus {
+        box-shadow: 0 0 1px -2px rgba(121,194,255,0.5) !important;
+    }
 }
 
+
 /* --------------------------------------------------------
     Custom Checkbox + Radio
 -----------------------------------------------------------*/
 .cra-validatation(@color) {
-  input[type="checkbox"],
-  input[type="radio"] {
-    & + .input-helper {
-      border-color: @color;
-    }
+    input[type="checkbox"], input[type="radio"] {
+        & + .input-helper {
+            border-color: @color;
+        }
 
-    &:checked + .input-helper:before {
-      background: @color;
+        &:checked + .input-helper:before {
+            background: @color;
+        }
     }
-  }
 }
 
 .cr-alt {
-  position: relative;
-  padding-top: 0;
-  margin: 0;
-
-  label {
     position: relative;
-    padding-left: 28px;
-  }
-
-  &.has-success {
-    .cra-validatation(@green);
-  }
-
-  &.has-warning {
-    .cra-validatation(@orange);
-  }
-
-  &.has-error {
-    .cra-validatation(@red);
-  }
-
-  input[type="checkbox"],
-  input[type="radio"] {
-    .opacity(0);
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    z-index: 10;
+    padding-top: 0;
     margin: 0;
-    top: 0;
-    left: 0;
-    cursor: pointer;
 
-    & + .input-helper {
-      border: 1px solid @input-border;
-      width: 19px;
-      height: 19px;
-      background: #fff;
-      position: absolute;
-      left: 0;
-      top: -1px;
-      cursor: pointer;
+    label {
+        position: relative;
+        padding-left: 28px;
     }
 
-    &:checked + .input-helper:before {
-      content: "";
-      width: 9px;
-      height: 9px;
-      background: #31acff;
-      position: absolute;
-      left: 4px;
-      top: 4px;
-    }
-  }
-
-  input[type="radio"] {
-    & + i {
-      border-radius: 50%;
+    &.has-success {
+        .cra-validatation(@green);
     }
 
-    &:checked + i:before {
-      border-radius: 50%;
-    }
-  }
+    &.has-warning {
+        .cra-validatation(@orange);
 
-  &.disabled {
-    .opacity(0.7);
-  }
+    }
+
+    &.has-error {
+        .cra-validatation(@red);
+
+    }
+
+    input[type="checkbox"], input[type="radio"] {
+        .opacity(0);
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        z-index: 10;
+        margin: 0;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+
+        & + .input-helper {
+            border: 1px solid @input-border;
+            width: 19px;
+            height: 19px;
+            background: #fff;
+            position: absolute;
+            left: 0;
+            top: -1px;
+            cursor: pointer;
+        }
+
+        &:checked + .input-helper:before {
+            content: "";
+            width: 9px;
+            height: 9px;
+            background: #31ACFF;
+            position: absolute;
+            left: 4px;
+            top: 4px;
+        }
+    }
+
+    input[type="radio"] {
+        & + i {
+            border-radius: 50%;
+        }
+
+        &:checked + i:before {
+            border-radius: 50%;
+        }
+    }
+
+    &.disabled {
+        .opacity(0.7);
+    }
 }
 
 .checkbox-inline,
 .radio-inline {
-  padding-left: 27px;
+    padding-left: 27px;
 }
 
+
 /* --------------------------------------------------------
     Input Addon
 -----------------------------------------------------------*/
 .input-group {
-  .input-group-addon {
-    min-width: 40px;
-    color: #333;
-    padding: 0;
-  }
-
-  &:not([class*="input-group-"]) {
     .input-group-addon {
-      font-size: 15px;
+        min-width: 40px;
+        color: #333;
+        padding: 0;
+    }
+
+    &:not([class*="input-group-"]) {
+        .input-group-addon {
+            font-size: 15px;
+        }
     }
-  }
 }
 
+
 /* --------------------------------------------------------
     Toggle Switch
 -----------------------------------------------------------*/
-.ts-color(@color) {
-  input {
-    &:not(:disabled) {
-      &:checked {
-        & + .ts-helper {
-          background: fade(@color, 50%);
+.ts-color(@color){
+    input {
+        &:not(:disabled) {
+            &:checked {
+                & + .ts-helper {
+                    background: fade(@color, 50%);
 
-          &:before {
-            background: @color;
-          }
+                    &:before {
+                        background: @color;
+                    }
 
-          &:active {
-            &:before {
-              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px fade(@color, 20%);
+                    &:active {
+                        &:before {
+                            box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px fade(@color, 20%);
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 
 .toggle-switch {
-  display: inline-block;
-  vertical-align: top;
-  .user-select(none);
-
-  .ts-label {
     display: inline-block;
-    margin: 0 20px 0 0;
     vertical-align: top;
-    -webkit-transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
-    transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
-  }
+    .user-select(none);
 
-  .ts-helper {
-    display: inline-block;
-    position: relative;
-    width: 40px;
-    height: 16px;
-    border-radius: 8px;
-    background: rgba(0, 0, 0, 0.26);
-    -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    vertical-align: middle;
-    cursor: pointer;
-
-    &:before {
-      content: "";
-      position: absolute;
-      top: -4px;
-      left: -4px;
-      width: 24px;
-      height: 24px;
-      background: #fafafa;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
-      border-radius: 50%;
-      webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
-        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-      transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
-        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    .ts-label {
+        display: inline-block;
+        margin: 0 20px 0 0;
+        vertical-align: top;
+        -webkit-transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
     }
-  }
 
-  &:not(.disabled) {
     .ts-helper {
-      &:active {
+        display: inline-block;
+        position: relative;
+        width: 40px;
+        height: 16px;
+        border-radius: 8px;
+        background: rgba(0,0,0,0.26);
+        -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        vertical-align: middle;
+        cursor: pointer;
+
         &:before {
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(128, 128, 128, 0.1);
+            content: '';
+            position: absolute;
+            top: -4px;
+            left: -4px;
+            width: 24px;
+            height: 24px;
+            background: #fafafa;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.28);
+            border-radius: 50%;
+            webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+            transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
         }
-      }
     }
-  }
 
-  input {
-    position: absolute;
-    z-index: 1;
-    width: 46px;
-    margin: 0 0 0 -4px;
-    height: 24px;
-    .opacity(0);
-    cursor: pointer;
-
-    &:checked {
-      & + .ts-helper {
-        &:before {
-          left: 20px;
+    &:not(.disabled) {
+        .ts-helper {
+            &:active {
+                &:before {
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
+                }
+            }
         }
-      }
     }
-  }
 
-  &:not([data-ts-color]) {
-    .ts-color(@teal);
-  }
+    input {
+        position: absolute;
+        z-index: 1;
+        width: 46px;
+        margin: 0 0 0 -4px;
+        height: 24px;
+        .opacity(0);
+        cursor: pointer;
 
-  &.disabled {
-    .opacity(0.6);
-  }
+        &:checked {
+            & + .ts-helper {
+                &:before {
+                    left: 20px;
+                }
+            }
+        }
+    }
 
-  &[data-ts-color="red"] {
-    .ts-color(@red);
-  }
+    &:not([data-ts-color]){
+        .ts-color(@teal);
+    }
 
-  &[data-ts-color="blue"] {
-    .ts-color(@blue);
-  }
+    &.disabled {
+        .opacity(0.6);
+    }
 
-  &[data-ts-color="amber"] {
-    .ts-color(@amber);
-  }
+    &[data-ts-color="red"] {
+        .ts-color(@red);
+    }
 
-  &[data-ts-color="purple"] {
-    .ts-color(@purple);
-  }
+    &[data-ts-color="blue"] {
+        .ts-color(@blue);
+    }
 
-  &[data-ts-color="pink"] {
-    .ts-color(@pink);
-  }
+    &[data-ts-color="amber"] {
+        .ts-color(@amber);
+    }
 
-  &[data-ts-color="lime"] {
-    .ts-color(@lime);
-  }
+    &[data-ts-color="purple"] {
+        .ts-color(@purple);
+    }
 
-  &[data-ts-color="cyan"] {
-    .ts-color(@cyan);
-  }
+    &[data-ts-color="pink"] {
+        .ts-color(@pink);
+    }
+
+    &[data-ts-color="lime"] {
+        .ts-color(@lime);
+    }
+
+    &[data-ts-color="cyan"] {
+        .ts-color(@cyan);
+    }
+
+    &[data-ts-color="green"] {
+        .ts-color(@green);
+    }
 
-  &[data-ts-color="green"] {
-    .ts-color(@green);
-  }
 }

client/app/assets/less/inc/generics.less

@@ -76,8 +76,6 @@
 
 .font-size(20, 8px, 8);
 
-.f-inherit { font-size: inherit !important; }
-
 
 /* --------------------------------------------------------
     Font Weight
@@ -148,17 +146,9 @@
     Width
 -----------------------------------------------------------*/
 .w-100 { width: 100% !important; }
-.w-50 { width: 50% !important; }
-.w-25 { width: 25% !important; }
 
 
 /* --------------------------------------------------------
     Border Radius
 -----------------------------------------------------------*/
-.brd-2 { border-radius: 2px; }
-
-
-/* --------------------------------------------------------
-    Alignment
------------------------------------------------------------*/
-.va-top { vertical-align: top; }
+.brd-2 { border-radius: 2px; }

client/app/assets/less/inc/growl.less

@@ -0,0 +1,28 @@
+/* angular-growl */
+.growl {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  float: right;
+  width: 250px;
+  z-index: 10000;
+}
+
+.growl-item.ng-enter,
+.growl-item.ng-leave {
+  -webkit-transition: 0.5s linear all;
+  -moz-transition: 0.5s linear all;
+  -o-transition: 0.5s linear all;
+  transition: 0.5s linear all;
+}
+
+.growl-item.ng-enter,
+.growl-item.ng-leave.ng-leave-active {
+  opacity: 0;
+}
+
+.growl-item.ng-leave,
+.growl-item.ng-enter.ng-enter-active {
+  opacity: 1;
+
+}

client/app/assets/less/inc/label.less

@@ -1,37 +1,14 @@
 .label {
-    border-radius: 2px;
-    padding: 3px 6px 4px;
-    font-weight: 500;
-    font-size: 11px;
+    border-radius: 1px;
+    padding: 4px 5px 3px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    .label {
+        border-radius: 2px;
+    }
 }
 
 .badge {
     border-radius: 1px;
-}
-
-.label-default {
-    background: fade(@redash-gray, 85%);
-}
-
-.label-tag-unpublished {
-    background: fade(@redash-gray, 85%);
-}
-
-.label-tag-archived {
-    .label-warning();
-}
-
-.label-tag {
-    background: fade(@redash-gray, 10%);
-    color: fade(@redash-gray, 75%);
-}
-
-.label-tag-unpublished,
-.label-tag-archived,
-.label-tag {
-    margin-right: 3px;
-    display: inline;
-    margin-top: 2px;
-    max-width: 24ch;
-    .text-overflow();
 }

client/app/assets/less/inc/list-group.less

@@ -17,6 +17,20 @@
     }
 }
 
+tags-list {
+  a {
+    line-height: 1.1;
+  }
+}
+
+.tags-list__name {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 88%;
+  line-height: 1.3;
+}
+
 .max-character {
   .text-overflow();
 }
@@ -31,11 +45,6 @@
       line-height: 100%;
       margin-top: 2px;
   }
-
-  &.active, &.active:hover, &.active:focus {
-    background-color: #fff;
-    box-shadow: inset 3px 0px 0px @brand-primary;
-  }
 }
 
 .list-group-item-heading {
@@ -67,18 +76,3 @@
     height: 38px;
     border-radius: 2px;
 }
-
-.ui-select-choices-row.disabled > span {
-  background-color: inherit !important;
-}
-
-.list-group-item.inactive,
-.ui-select-choices-row.disabled {
-  background-color: #eee !important;
-  border-color: transparent;
-  opacity: 0.5;
-  box-shadow: none;
-  color: #333;
-  pointer-events: none;
-  cursor: not-allowed;
-}

client/app/assets/less/inc/misc.less

@@ -225,18 +225,4 @@
     height: 37px;
     border-radius: 2px;
     width: 37px;
-}
-
-/* --------------------------------------------------------
-    Percy
------------------------------------------------------------*/
-@media only percy {
-    .hide-in-percy, .pace {
-        visibility: hidden;
-    }
-
-    // hide tooltips in Percy
-    .ant-tooltip {
-        display: none !important;
-    }
 }

client/app/assets/less/inc/navbar.less

@@ -0,0 +1,33 @@
+a.navbar-brand {
+  padding: 5px 5px 0px 0px;
+  margin-left: 0px !important;
+}
+
+.navbar .fa {
+  font-size: 18px;
+}
+
+.navbar .collapse.in {
+  background: #222;
+}
+
+a.navbar-brand img {
+  height: 40px;
+}
+
+.avatar {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.avatar img {
+  width: 40px;
+  height: 40px;
+}
+
+#logout {
+  color: white;
+  position: relative;
+  left: -9px;
+  bottom: -11px;
+}

client/app/assets/less/inc/overlay.less

@@ -0,0 +1,11 @@
+.overlay {
+  background-color: #808080;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  z-index: 1000;
+  opacity: 0.8;
+}

client/app/assets/less/inc/pagination.less

@@ -0,0 +1,54 @@
+.pagination {
+    border-radius: 0;
+    
+    & > li {
+        margin: 0 2px;
+        display: inline-block;
+        vertical-align: top;
+        
+        & > a,
+        & > span {
+            border-radius: 50% !important;
+            padding: 0;
+            width: 40px;
+            height: 40px;
+            line-height: 38px;
+            text-align: center;
+            font-size: 14px;
+            z-index: 1;
+            position: relative;
+            
+            & > .zmdi {
+                font-size: 22px;
+                line-height: 39px;
+            }
+        }
+        
+        &.disabled {
+            .opacity(0.5);
+        }  
+    }
+} 
+
+
+/* --------------------------------------------------------
+    Listview Pagination
+-----------------------------------------------------------*/
+.lv-pagination {
+    width: 100%;
+    text-align: center;
+    padding: 40px 0;
+    border-top: 1px solid #F0F0F0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+
+/* --------------------------------------------------------
+    Pager
+-----------------------------------------------------------*/
+.pager li > a, .pager li > span {
+    padding: 5px 10px 6px; 
+    color: @pagination-color;
+}
+

client/app/assets/less/inc/popover.less

@@ -1,5 +1,5 @@
 .popover {
-    box-shadow: fade(@redash-gray, 25%) 0px 0px 15px 0px;
+    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
 }
 
 .popover-title {

client/app/assets/less/inc/print.less

@@ -12,6 +12,7 @@
     
     
     #header,
+    #footer,
     #sidebar,
     #chat,
     .growl-animated,

client/app/assets/less/inc/schema-browser.less

@@ -6,7 +6,6 @@ div.table-name {
   padding: 2px 22px 2px 10px;
   border-radius: @redash-radius;
   position: relative;
-  height: 22px;
 
   .copy-to-editor {
     display: none;
@@ -28,18 +27,10 @@ div.table-name {
 }
 
 .schema-browser {
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
   border: none;
-  padding-top: 10px;
-  position: relative;
-  height: 100%;
-
-  .schema-loading-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
+  margin-top: 10px;
 
   .collapse.in {
     background: transparent;
@@ -64,14 +55,6 @@ div.table-name {
     text-overflow: ellipsis;
     white-space: nowrap;
     position: relative;
-    height: 18px;
-
-    .column-type {
-      color: fade(@text-color, 80%);
-      font-size: 10px;
-      margin-left: 2px;
-      text-transform: uppercase;
-    }
 
     .copy-to-editor {
       display: none;
@@ -89,12 +72,11 @@ div.table-name {
 
 .schema-control {
   display: flex;
-  flex-wrap: nowrap;
   padding: 0;
 
-  .ant-btn {
-    height: auto;
-  }
+ .form-control {
+   margin-right: 5px;
+ }
 }
 
 .parameter-label {

client/app/assets/less/inc/tab.less

@@ -0,0 +1,140 @@
+.tab-nav {
+    list-style: none;
+    padding: 0;
+    white-space: nowrap;
+    margin: 0 0 10px 0;
+    overflow: auto;
+    box-shadow: inset 0 -2px 0 0 #eee;
+
+    & > li {
+        display: inline-block;
+        vertical-align: top;
+
+        & > a {
+            display: inline-block;
+            color: #7a7a7a;
+            text-transform: uppercase;
+            position: relative;
+            width: 100%;
+            font-weight: 500;
+
+            &:after {
+                content: "";
+                height: 2px;
+                position: absolute;
+                width: 100%;
+                left: 0;
+                bottom: 0;
+                display: none;
+            }
+
+            @media (min-width: @screen-sm-min) {
+                padding: 15px;
+            }
+
+            @media (max-width: @screen-sm-min) {
+                padding: 15px 8px;
+            }
+        }
+
+        &.active {
+            & > a {
+                color: #000;
+
+                &:after {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    &.tab-nav-right {
+        text-align: right;
+    }
+
+    &.tn-justified {
+        & > li {
+            display: table-cell;
+            width: 1%;
+            text-align: center;
+        }
+    }
+
+    &.tn-icon {
+        & > li {
+            .zmdi {
+                font-size: 22px;
+                line-height: 100%;
+                min-height: 25px;
+            }
+        }
+    }
+
+    &:not([data-tab-color]) {
+        & > li > a:after {
+            background: @blue;
+        }
+    }
+
+    &[data-tab-color="green"] {
+        & > li > a:after {
+            background: @green;
+        }
+    }
+
+    &[data-tab-color="red"] {
+        & > li > a:after {
+            background: @red;
+        }
+    }
+
+    &[data-tab-color="teal"] {
+        & > li > a:after {
+            background: @teal;
+        }
+    }
+
+    &[data-tab-color="amber"] {
+        & > li > a:after {
+            background: @amber;
+        }
+    }
+
+    &[data-tab-color="black"] {
+        & > li > a:after {
+            background: @black;
+        }
+    }
+
+    &[data-tab-color="cyan"] {
+        & > li > a:after {
+            background: @cyan;
+        }
+    }
+}
+
+.tab-content {
+    padding: 20px 0;
+}
+
+.rd-tab {
+  .remove {
+    cursor: pointer;
+    color: #A09797;
+    padding: 0 3px 1px 4px;
+    font-size: 11px;
+    &:hover {
+      color: white;
+      background-color: #FF8080;
+      border-radius: 50%;
+    }
+  }
+}
+
+.tab-nav {
+  > li.rd-tab-btn {
+    float: right;
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+}

client/app/assets/less/inc/table.less

@@ -1,153 +1,99 @@
 .table {
-  margin-bottom: 0;
+    margin-bottom: 0;
 
-  th.sortable-column {
-    cursor: pointer;
-  }
-
-  &:not(.table-striped) > thead > tr > th {
-    background-color: #fafafa;
-  }
-
-  [class*="bg-"] {
-    & > tr > th {
-      color: #fff;
-      border-bottom: 0;
-      background: transparent !important;
+    th.sortable-column {
+      cursor: pointer;
     }
 
-    & + tbody > tr:first-child > td {
-      border-top: 0;
+    &:not(.table-striped) > thead > tr > th {
+        background-color: #FAFAFA;
     }
-  }
 
-  & > thead > tr > th {
-    vertical-align: middle;
-    font-weight: 500;
-    color: #333;
-    border-width: 1px;
-    text-transform: uppercase;
-    padding: 15px 10px;
-  }
+    [class*="bg-"] {
+        & > tr > th {
+            color: #fff;
+            border-bottom: 0;
+            background: transparent !important;
+        }
 
-  & > thead > tr,
-  & > tbody > tr,
-  & > tfoot > tr {
-    & > th,
-    & > td {
-      &:first-child {
-        padding-left: 30px;
-      }
-
-      &:last-child {
-        padding-right: 30px;
-      }
+        & + tbody > tr:first-child > td {
+            border-top: 0;
+        }
     }
-  }
 
-  tbody > tr:last-child > td {
-    padding-bottom: 20px;
-  }
+    & > thead > tr > th {
+        vertical-align: middle;
+        font-weight: 500;
+        color: #333;
+        border-width: 1px;
+        text-transform: uppercase;
+        padding: 15px 10px;
+    }
+
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+
+        & > th, & > td {
+
+            &:first-child {
+                padding-left: 30px;
+            }
+
+            &:last-child {
+                padding-right: 30px;
+            }
+
+        }
+    }
+
+    tbody > tr:last-child > td {
+        padding-bottom: 20px;
+    }
 }
 
 .table-bordered {
-  border: 0;
+    border: 0;
 
-  & > tbody > tr {
-    & > td,
-    & > th {
-      border-bottom: 0;
-      border-left: 0;
+    & > tbody > tr {
+        & > td, & > th {
+            border-bottom: 0;
+            border-left: 0;
 
-      &:last-child {
-        border-right: 0;
-      }
+            &:last-child {
+                border-right: 0;
+            }
+        }
     }
-  }
 
-  & > thead > tr > th {
-    border-left: 0;
+    & > thead > tr > th {
+        border-left: 0;
 
-    &:last-child {
-      border-right: 0;
+        &:last-child {
+            border-right: 0;
+        }
     }
-  }
 }
 
 .table-vmiddle {
-  td {
-    vertical-align: middle !important;
-  }
+    td {
+        vertical-align: middle !important;
+    }
 }
 
 .table-responsive {
-  border: 0;
+    border: 0;
 }
 
-.tile .table {
-  & > thead:not([class*="bg-"]) > tr > th {
-    border-top: 1px solid @table-border-color;
-  }
+.tile .table  {
+
+    & > thead:not([class*="bg-"]) > tr > th {
+        border-top: 1px solid @table-border-color;
+
+    }
 }
 
 .table-hover > tbody > tr:hover {
   background-color: #f4f4f4;
 }
 
-.table-data {
-  thead > tr > th {
-    white-space: nowrap;
-  }
-
-  tbody > tr > td {
-    padding-top: 5px !important;
-  }
-
-  .btn-favourite,
-  .btn-archive {
-    font-size: 15px;
-  }
-}
-
-.table-main-title {
-  font-weight: 500;
-  line-height: 1.7 !important;
-}
-
-.btn-favourite {
-  color: #d4d4d4;
-  transition: all 0.25s ease-in-out;
-
-  &:hover,
-  &:focus {
-    color: @yellow-darker;
-    cursor: pointer;
-  }
-
-  .fa-star {
-    color: @yellow-darker;
-  }
-}
-
-.btn-archive {
-  color: #d4d4d4;
-  transition: all 0.25s ease-in-out;
-
-  &:hover,
-  &:focus {
-    color: @gray-light;
-  }
-
-  .fa-archive {
-    color: @gray-light;
-  }
-}
-
-.table > thead > tr > th {
-  text-transform: none;
-}
-
-.table-data .label-tag {
-  display: inline-block;
-  max-width: 135px;
-}

client/app/assets/less/inc/tile.less

@@ -2,8 +2,7 @@
     background-color: #fff;
     margin-bottom: @grid-gutter-width;
     position: relative;
-    border-radius: 3px;
-    box-shadow: fade(@redash-gray, 15%) 0px 4px 9px -3px;
+    box-shadow: @tile-shadow;
     
     &[class*="bg-"] {
         color: #fff;
@@ -13,10 +12,6 @@
         margin-bottom: @grid-gutter-width/2;
     }
 }
-.tiled {
-    border-radius: 3px;
-    box-shadow: fade(@redash-gray, 15%) 0px 4px 9px -3px;
-}
 
 .t-header {
     .th-title {
@@ -79,15 +74,6 @@
     }
 }
 
-.t-header:not(.th-alt) {
-    padding: 15px;
-  
-    ul {
-      margin-bottom: 0;
-      line-height: 2.2;
-    }
-  }
-
 .tb-padding {
     padding: 20px 23px 30px;
 }

client/app/assets/less/inc/toast.less

@@ -0,0 +1,29 @@
+#toast-container .toast {
+  margin: 0 6px 6px 0;
+  box-shadow: none;
+  color: #ffffff;
+  opacity: 0.75;
+  border-radius: 2px;
+  transition: opacity 0.35s ease-in-out;
+}
+#toast-container .toast:hover {
+  box-shadow: none;
+  opacity: 1;
+  cursor: pointer;
+}
+
+.toast {
+  background-color: #030303;
+}
+.toast-success {
+  background-color: #3BD973;
+}
+.toast-error {
+  background-color: #E92828;
+}
+.toast-info {
+  background-color: #356AFF;
+}
+.toast-warning {
+  background-color: #FB8D3D;
+}

client/app/assets/less/inc/variables.less

@@ -17,14 +17,13 @@
     Template Variables
 -----------------------------------------------------------*/
 @header-height:                         60px;
+@footer-height:                         95px;
 @sidebar-left-width:                    240px;
 @sidebar-left-mid-width:                64px;
 @logo-width:                            @sidebar-left-width;
 @logo-height:                           @header-height;
 @boxed-width:                           1170px;
 @body-bg:                               #edecec;
-@spacing:                               15px;
-@redash-radius:                         3px;
 
 
 /* --------------------------------------------------------
@@ -41,7 +40,6 @@
 -----------------------------------------------------------*/
 @font-icon:                             'Material-Design-Iconic-Font';
 @font-family-sans-serif:                'Roboto', sans-serif;
-@redash-font:                            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @font-size-base:                        13px;
 
 
@@ -57,12 +55,10 @@
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
-@input-color:                           #595959;
 @input-color-placeholder:               #b4b4b4;
 @input-border:                          #e8e8e8;
 @input-border-radius:                   0;
 @input-border-radius-large:             0px;
-@redash-input-radius:                   2px;
 @input-height-large:                    40px;
 @input-height-base:                     35px;
 @input-height-small:                    30px;
@@ -98,15 +94,11 @@
 @gray-light:                            #828282;
 @ace:                                   #f8f8f8;
 
-@redash-gray: rgba(102, 136, 153, 1);
-@redash-orange: rgba(255, 120, 100, 1);
-@redash-black: rgba(0, 0, 0, 1);
-@redash-yellow: rgba(252, 252, 161, 0.75);
-
  /** Form States **/
 @state-success-text:                    @green;
 @state-info-text:                       @blue;
 @state-danger-text:                     lighten(@red, 5%);
+@state-warning-text:                    @orange;
 
 
 /* --------------------------------------------------------
@@ -114,16 +106,19 @@
 -----------------------------------------------------------*/
 @alert-success-border:                  transparent;
 @alert-info-border:                     transparent;
+@alert-warning-border:		 	        transparent;
 @alert-danger-border:		 	        transparent;
 @alert-inverse-border:		 	        transparent;
 
 @alert-success-bg:                      fade(@green, 70%);
 @alert-info-bg:		 		            fade(@blue, 70%);
+@alert-warning-bg:                      fade(@amber, 70%);
 @alert-danger-bg:                       fade(@red, 70%);
 @alert-inverse-bg:                      #333;
 
 @alert-success-text:                    #fff;
 @alert-info-text:                       #fff;
+@alert-warning-text:                    #fff;
 @alert-danger-text:                     #fff;
 @alert-inverse-text:                    #fff;
 
@@ -201,6 +196,7 @@
 @pagination-hover-color:                #333;
 @pagination-hover-bg:                   #d7d7d7;
 @pagination-hover-border:               @pagination-border;
+@pager-border-radius:                   5px;
 
 
 /* --------------------------------------------------------

client/app/assets/less/inc/vendor-overrides/bootgrid.less

@@ -0,0 +1,125 @@
+.bootgrid-table {
+    margin: 0;
+    box-shadow: none;
+}
+
+.bootgrid-footer .infoBar,
+.bootgrid-header .actionBar {
+    text-align: left;
+}
+
+.bootgrid-footer .search,
+.bootgrid-header .search {
+    vertical-align: top;
+}
+
+.bootgrid-header {
+    margin: 0;
+    padding: 25px;
+
+    .search {
+        border: 1px solid @input-border;
+
+        .form-control, .input-group-addon {
+            border: 0;
+        }
+
+        .input-group-addon {
+            font-size: 18px;
+            color: #333;
+            padding-right: 0 !important;
+            min-width: 26px;
+            text-align: right;
+        }
+
+        @media (min-width: @screen-xs-min) {
+            width: 300px;
+        }
+
+        @media (max-width: @screen-xs-min) {
+            width: 100%;
+            padding-right: 90px;
+        }
+
+
+    }
+
+    .actions {
+        box-shadow: none;
+
+        .btn-group {
+            .btn {
+                height: 37px;
+                background: #fff;
+                border-radius: 0;
+                border: 1px solid @input-border;
+            }
+
+            .dropdown-menu {
+                @media (min-width: @screen-sm-min) {
+                    left: 0;
+                    margin-top: 1px;
+                }
+
+                .dropdown-item {
+                    padding: 5px 10px;
+
+                    .input-helper {
+                        top: 5px;
+                    }
+                }
+            }
+
+            .caret {
+                display: none;
+            }
+
+            .zmdi {
+                line-height: 100%;
+                font-size: 18px;
+                vertical-align: top;
+            }
+
+        }
+
+        @media (max-width: @screen-xs-min) {
+            position: absolute;
+            top: 0;
+            right: 15px;
+        }
+    }
+}
+
+.bootgrid-footer {
+    border-top: 1px solid @table-border-color;
+    margin-top: 0;
+
+    .col-sm-6 {
+        padding: 25px;
+
+        @media (max-width: @screen-sm-min) {
+            text-align: center;
+        }
+    }
+
+    .infoBar {
+        @media (max-width: @screen-sm-min) {
+            display: none;
+        }
+
+            .infos {
+                border: 1px solid #EEE;
+                display: inline-block;
+                float: right;
+                padding: 7px 30px;
+                font-size: 12px;
+                margin-top: 3px;
+            }
+    }
+}
+
+.select-cell .checkbox {
+    margin: 0px 0 0 -19px;
+    top: 3px;
+}
+

client/app/assets/less/inc/vendor-overrides/bootstrap-datetimepicker.less

@@ -0,0 +1,215 @@
+.bootstrap-datetimepicker-widget {
+    padding: 0 !important;
+    margin: 0 !important;
+    width: auto !important;
+    
+    &:after, &:before { display: none !important; }
+    
+    table td {
+        text-shadow: none;
+        
+        span {
+            margin: 0;
+            
+            &:hover { background: transparent; }
+        }
+    }
+    
+    .glyphicon { font-family: @font-icon; font-size: 18px; }
+    .glyphicon-chevron-left:before { content: "\f2ff"; }
+    .glyphicon-chevron-right:before { content: "\f301"; }
+    .glyphicon-time:before { content: "\f337"; }
+    .glyphicon-calendar:before { content: "\f32e"; }
+    .glyphicon-chevron-up:before { content: "\f1e5"; }
+    .glyphicon-chevron-down:before { content: "\f1e4"; }
+    
+    [data-action="togglePicker"] span {
+        font-size: 25px;
+        color: #ccc;
+        
+        &:hover {
+            color: #333;
+        }
+    }
+    
+    a[data-action] {
+        color: @blue;
+    }
+}
+
+.timepicker-picker {
+    .btn { box-shadow: none !important; }
+    
+    table {
+        tbody tr + tr:not(:last-child) {
+            background: @blue;
+            color: #fff;
+            
+            td {
+                border-radius: 0;
+            }
+        }
+    }
+    
+    .btn {
+        background: #fff; 
+        color: #333; 
+    }
+}
+
+.datepicker {    
+    &.top {
+        .transform-origin(0 100%) !important;
+    }
+     
+    table {
+        thead {
+            tr {
+                th {
+                    border-radius: 0;
+                    color: #fff;
+                    
+                    .glyphicon {
+                        width: 30px;
+                        height: 30px;
+                        border-radius: 50%;
+                        line-height: 29px;
+                    }
+                    
+                    &:hover .glyphicon {
+                        background: rgba(0, 0, 0, 0.2);
+                    }
+                }
+                
+                &:first-child {
+                    th {
+                        background: @blue;
+                        padding: 20px 0;
+                        
+                        &:hover {
+                            background: @blue;
+                        }
+                        
+                        &.picker-switch { 
+                            font-size: 16px;
+                            font-weight: 400;
+                            text-transform: uppercase;
+                        }
+                    }
+                }
+                
+                &:last-child {
+                    th {
+                        &:first-child { padding-left: 20px; }
+                        &:last-child { padding-right: 20px; }
+                        
+                        text-transform: uppercase;
+                        font-weight: normal;
+                        font-size: 11px;
+                    }
+                    
+                    &:not(:only-child) {
+                        background: darken(@blue, 3%);  
+                    }
+                }
+            } 
+        }
+        
+        tbody {
+            tr {
+                &:last-child {
+                    td {
+                        padding-bottom: 25px;
+                    }
+                }
+                    
+                td {
+                    &:first-child {
+                        padding-left: 13px;
+                    }
+                    
+                    &:last-child {
+                        padding-right: 13px;
+                    } 
+                }
+            }
+        }
+        
+        td {
+    
+            &.day {
+                width: 35px;
+                height: 35px;
+                line-height: 20px;
+                color: #333;
+                position: relative;
+                padding: 0;
+                background: transparent;
+                
+                &:hover {
+                    background: none;
+                }
+                
+                &:before {
+                    content: "";
+                    width: 35px;
+                    height: 35px;
+                    border-radius: 50%;
+                    margin-bottom: -33px;
+                    display: inline-block;
+                    background: transparent;
+                    position: static;
+                    text-shadow: none;
+                }
+                
+                &.old, &.new {
+                    color: #CDCDCD;
+                }
+            }
+            
+            &:not(.today):not(.active) {
+                &:hover:before {
+                    background: #F0F0F0;
+                }
+            }
+            
+            &.today {
+                color: #333;
+                
+                &:before {
+                    background-color: #E2E2E2;
+                }
+            }
+            
+            &.active {
+                color: #fff;
+                
+                &:before {
+                    background-color: @blue;
+                }
+            }
+        }
+    }
+}
+
+.datepicker-months .month,
+.datepicker-years .year,
+.timepicker-minutes .minute,
+.timepicker-hours .hour {
+    border-radius: 50%;
+    
+    &:not(.active) {
+        &:hover {
+            background: #F0F0F0;
+        }
+    }
+    
+    &.active {
+        background: @blue;
+    }
+}
+
+.timepicker-minutes .minute,
+.timepicker-hours .hour {
+    padding: 0;
+}

client/app/assets/less/inc/vendor-overrides/bootstrap-select.less

@@ -0,0 +1,72 @@
+.bootstrap-select {    
+
+    .bs-searchbox {
+        padding: 0 18px;
+        margin: 5px 0 10px;
+        position: relative;
+        
+        &:before {
+            position: absolute;
+            left: 14px;
+            top: 2px;
+            width: 30px;
+            height: 100%;
+            content: "\f1c3";
+            font-family: @font-icon;
+            font-size: 25px;
+        }
+        
+        input {
+            padding-left: 25px;
+            border: 0;
+        }
+    }
+    
+    &.btn-group {
+        .dropdown-menu li a.opt {
+            padding-left: 17px;
+        }
+    }
+    
+    .check-mark {
+        margin-top: -5px !important;
+        font-size: 19px;
+        display: none;
+        position: absolute;
+        top: 11px;
+        right: 15px; 
+        
+        &:before {
+            content: "\f26b";
+            font-family: @font-icon;
+        }
+    }
+    
+    .selected {
+        .check-mark {
+            display: block !important;
+        }
+    }
+    
+    .notify {
+        bottom: 0 !important;
+        margin: 0 !important;
+        width: 100% !important;
+        border: 0 !important;
+        background: @red !important;
+        color: #fff !important;
+        text-align: center;
+    }
+    
+    &:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+        width: 100%;
+    }
+    
+    .btn-default {
+        background-color: #fff;
+        border-radius: 0;
+        border: 1px solid @input-border;
+    }
+}
+
+

client/app/assets/less/inc/vendor-overrides/chosen.less

@@ -0,0 +1,114 @@
+.chosen-container {
+    .chosen-drop {
+        border-color: @input-border;
+        border-radius: 0;
+    }
+    
+    .chosen-results {
+        margin: 10px 0 0 0;
+        padding: 0;
+        
+        li {
+            padding: 10px 17px;
+            width: 100%;
+            
+            &.highlighted {
+                background: @dropdown-link-hover-bg;
+                color: @dropdown-link-hover-color;
+            }
+            
+            &.result-selected {
+                background: @lightblue;
+                color: @white;
+                position: relative;
+                
+                &:before {
+                    content: "\f26b";
+                    font-family: @font-icon;
+                    position: absolute;
+                    right: 15px;
+                    top: 10px;
+                    font-size: 19px;
+                }
+            }
+            
+            &.group-result {
+                &:not(:first-child) {
+                    border-top: 1px solid #eee;
+                }
+                
+                color: #B2B2B2;
+                font-weight: normal;
+                padding: 16px 15px 6px;
+                margin-top: 9px;
+            }
+        }
+    }
+}
+
+.chosen-container-single {
+    .chosen-single { 
+        border-radius: 0;
+        height: 35px;
+        padding: 7px 12px 6px;
+        line-height: 1.42857143;
+        border-color: @input-border;
+    }
+    
+    .chosen-search {
+        padding: 5px 12px;
+        
+        &:before {
+            content: "\f1c3";
+            font-family: @font-icon;
+            position: absolute;
+            left: 25px;
+            top: 9px;
+            font-size: 19px;
+        }
+        
+        input[type=text] {
+            border-color: @input-border;
+            padding: 8px 10px 8px 35px;
+        }
+    }
+}
+
+.chosen-container-multi {
+    .chosen-choices {
+        padding: 0 4px;
+        border-color: @input-border;
+        
+        li { 
+            &.search-choice {
+                border-radius: 0;
+                margin: 4px 4px 0 0;
+                background: @blue; 
+                border-color: @blue;
+                color: #fff;
+                padding: 5px 23px 5px 8px;
+
+                .search-choice-close {
+                    &:before {
+                        display: inline-block;
+                        font-family: @font-icon;
+                        content: "\f135";
+                        position: relative;
+                        top: 1px;
+                        color: #fff;
+                        z-index: 2;
+                        font-size: 12px;
+                    }
+                }
+            }
+            
+            &.search-field {
+                input[type=text] {
+                    padding: 0 8px;
+                    height: 31px;
+                }
+            }
+        }        
+    }
+}
+

client/app/assets/less/inc/vendor-overrides/farbtastic.less

@@ -0,0 +1,25 @@
+.cp-container {
+    position: relative;
+    
+    & > .input-group {
+        
+        input.cp-value {
+            color: #000 !important;
+            background: transparent !important;
+        }
+        
+        .dropdown-menu {
+            padding: 20px;
+            margin-top: 30px;
+        }
+    }
+    
+    i.cp-value {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+    }
+} 

client/app/assets/less/inc/vendor-overrides/fileinput.less

@@ -0,0 +1,51 @@
+.fileinput {
+    position: relative;
+    padding-right: 35px;
+    
+    .close {
+          position: absolute;
+          top: 5px;
+          font-size: 12px;
+          float: none;
+          opacity: 1;
+          font-weight: 500;
+          border: 1px solid #ccc;
+          width: 19px;
+          text-align: center;
+          height: 19px;
+          line-height: 15px;
+          border-radius: 50%;
+          right: 0;
+        
+          &:hover {
+            background: #eee;
+          }
+    }
+     
+    .btn-file {
+        
+    }
+    
+    .input-group-addon {
+        padding: 0 10px;
+        vertical-align: middle; 
+    }
+    
+    .fileinput-preview {
+        width: 200px;
+        height: 150px;
+        position: relative;
+        
+        img {
+            display: inline-block;
+            vertical-align: middle;
+            margin-top: -13px;
+        }
+        
+        &:after {
+            content: "";
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+} 

client/app/assets/less/inc/vendor-overrides/fullcalendar.less

@@ -0,0 +1,207 @@
+/** CALENDAR WIDGET **/
+#calendar-widget {
+    margin-bottom: 30px;
+    box-shadow: 0 1px 1px rgba(0,0,0,.15);
+}
+
+#fc-actions {
+	position: absolute;
+	bottom: 23px;
+	right: 22px;
+    
+    & > li > a {
+        font-size: 20px;
+        color: #fff;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        line-height: 30px; 
+        
+        
+    }
+    
+    & > li.open > a,
+    & > li > a:hover {
+        background: darken(@teal, 7%);
+    }
+}
+
+.fc {
+	background-color: #fff;
+	margin-bottom: 20px;
+
+	td {
+		border-color: @table-border-color !important;
+	}
+    
+	th {
+	    background: darken(@teal, 7%);
+	    color: #fff;
+	    font-weight: 400;
+	    padding: 6px 0;
+	}
+
+	table tr {
+		& > td:first-child {
+			border-left-width: 0;
+		}
+	}
+
+	.ui-widget-header {
+		border-width: 0;
+	}
+    
+    .fc-day-number {
+        color: #CCC;
+    }
+    
+    .fc-event-container {
+        padding: 0 2px 2px;
+    }
+}
+
+.fc-toolbar {
+    background: @teal;
+    margin-bottom: 0;
+    padding: 25px 7px 25px;
+    position: relative;
+    .user-select(none);
+    
+    &:before {
+        content: "";
+        bottom: -30px;
+        height: 30px;
+        width: 100%;
+        background: darken(@teal, 7%);
+        position: absolute;
+        left: 0;
+        z-index: 0;
+    }
+    
+    h2 {
+		color: rgba(255, 255, 255, 0.9);
+		margin-top: 7px;
+		font-size: 19px;
+		font-weight: 400;
+    }
+    
+    .ui-button  {
+		border: 0;
+		background: 0 0;
+		padding: 0;
+		outline: none !important;
+		text-align: center;
+		
+		& > span {
+		    position: relative;
+		    font-family: @font-icon;
+		    font-size: 20px;
+		    color: #FFF;
+		    line-height: 100%;
+		    width: 31px;
+            height: 31px;
+            border-radius: 50%;
+		    padding-top: 6px;
+		    display: block;
+		    margin-top: 2px;
+		    
+		    &:before {
+				position: relative;
+				z-index: 1;
+		    }
+		    
+		    &.ui-icon-circle-triangle-w:before {
+				content: "\f2fa";
+		    }
+		    
+		    &.ui-icon-circle-triangle-e:before {
+				content: "\f2fb"; 
+		    }
+            
+            &:hover {
+                background: darken(@teal, 7%);
+                color: #fff;
+            }
+		}
+    }
+}
+.fc-event {
+	padding: 0;
+    font-size: 11px;
+    border-radius: 0;
+    border: 0;
+    
+    .fc-title {
+		padding: 3px 5px 2px;
+		display: block;
+    }
+    
+    .fc-time {
+		float: left;
+		background: rgba(0, 0, 0, 0.2);
+		padding: 2px 6px;
+		margin: 0 0 0 -1px;
+    }
+}
+
+.fc-view, .fc-view > table {
+    border: 0;
+    overflow: hidden;
+}
+
+.fc-content-skeleton {
+    table {
+        background: transparent;
+    }
+}
+
+#calendar {
+    .fc-day-number {
+        @media screen and (min-width: @screen-sm-max) {
+            font-size: 25px;
+            letter-spacing: -2px; 
+        }
+    
+        padding-left: 10px !important;
+        text-align: left !important;
+        
+    }
+}
+
+
+/* Even Tag Color */
+.event-tag {
+    margin-top: 5px;
+    
+    & > span {
+	border-radius: 50%;
+	width: 30px;
+	height: 30px;
+    margin-right: 3px;
+	position: relative;
+	display: inline-block; 
+	cursor: pointer;
+	
+	&:hover {
+	    .opacity(0.8);
+	}
+	
+	&.selected {
+	    &:before {
+            font-family: @font-icon;
+            content: "\f26b";
+            position: absolute;
+            text-align: center;
+            top: 3px;
+            width: 100%;
+            font-size: 17px;
+            color: #FFF;
+            }
+        }
+    }
+}
+
+/* Height Fix */
+.fc-day-grid-container {
+    height: auto !important;
+}

client/app/assets/less/inc/vendor-overrides/light-gallery.less

@@ -0,0 +1,69 @@
+.lg-outer .lg-item {
+    background-image: none;
+}
+
+.lg-slide {    
+    &:after {
+        content: "";
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        height: 50px;
+        width: 50px;
+        border-radius: 100%;
+        border: 2px solid @white;
+        -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
+        animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
+        position: absolute;
+        left: 50%;
+        margin-left: -25px;
+        top: 50%;
+        margin-top: -25px;
+        z-index: -1;
+    }
+    
+    em {
+        font-style: normal;
+        display: block;
+        margin-bottom: 20px;
+        
+        h3 {
+            margin-bottom: 5px;
+            color: #D2D2D2;
+            font-weight: 100;
+        }
+        
+        p {
+            color: #6B6B6B;
+        }
+    }
+}
+@-webkit-keyframes ball-scale-ripple {
+  0% {
+    -webkit-transform: scale(0.1);
+            transform: scale(0.1);
+    opacity: 1; }
+
+  70% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.7; }
+
+  100% {
+    opacity: 0.0; } 
+}
+
+@keyframes ball-scale-ripple {
+  0% {
+    -webkit-transform: scale(0.1);
+            transform: scale(0.1);
+    opacity: 1; }
+
+  70% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.7; }
+
+  100% {
+    opacity: 0.0; } 
+}
+

client/app/assets/less/inc/vendor-overrides/malihu-custom-scrollbar.less

@@ -0,0 +1,25 @@
+.mCSB_container,
+.mCustomScrollBox {
+    overflow: visible;
+}
+
+.mCSB_scrollTools {
+    width: 12px;
+    
+    .mCSB_draggerRail,
+    .mCSB_dragger .mCSB_dragger_bar {
+        border-radius: 0;
+    }
+    
+    .mCSB_draggerRail {
+        background: transparent !important;
+    }
+}
+
+.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+    background: rgba(0,0,0,0.4); 
+}
+
+.mCSB_inside > .mCSB_container {
+    margin-right: 0;
+}

client/app/assets/less/inc/vendor-overrides/noUiSlider.less

@@ -0,0 +1,172 @@
+.noUi-target {
+    border-radius: 0;
+    box-shadow: none;
+    border: 0;
+}
+
+.noUi-background {
+    background: #d4d4d4;
+    box-shadow: none;
+}
+
+.noUi-horizontal {
+    height: 3px;
+    
+    .noUi-handle {
+        top: -8px;
+    }
+}
+
+.noUi-vertical {
+    width: 3px;
+}
+
+.noUi-horizontal,
+.noUi-vertical {
+    .noUi-handle {
+        width: 19px;
+        height: 19px;
+        border: 0;
+        border-radius: 100%;
+        box-shadow: none;
+        .transition(box-shadow);
+        .transition-duration(200ms);
+        cursor: pointer;
+        position: relative;
+        
+        &:before,
+        &:after {
+            display: none;
+        }
+        
+        &:active {
+            background: #ccc !important;
+        }
+        
+        .is-tooltip {
+            position: absolute;
+            bottom: 32px;
+            height: 35px;
+            border-radius: 2px;
+            color: #fff;
+            text-align: center;
+            line-height: 33px;
+            width: 50px;
+            left: 50%;
+            margin-left: -25px;
+            padding: 0 10px;
+            .transition(all);
+            .transition-duration(200ms);
+            .backface-visibility(hidden);
+            .opacity(0);
+            .scale(0);
+            
+            &:after {
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-width: 15px 10px 0 10px;
+                position: absolute;
+                bottom: -8px;
+                left: 50%;
+                margin-left: -9px;
+                content: "";
+
+            }
+        }
+    }
+    
+    .noUi-active {
+        box-shadow: 0 0 0 13px rgba(0,0,0,0.1);
+        
+        .is-tooltip {
+            .scale(1);
+            bottom: 40px;
+            .opacity(1);
+        }
+    }
+}  
+
+.input-slider,
+.input-slider-range,
+.input-slider-values {
+    &:not([data-is-color]) {
+        .noUi-handle,
+        .noUi-connect, {
+            background: @teal !important;
+        }
+        
+        .is-tooltip {
+            background: @teal;
+            
+            &:after {
+                border-color: @teal transparent transparent transparent;
+            }
+        }
+    }
+    
+    &[data-is-color=red] {
+        .is-color-handle(@red);
+    }
+    
+    &[data-is-color=blue] {
+        .is-color-handle(@blue);
+    }
+    
+    &[data-is-color=cyan] {
+        .is-color-handle(@cyan);
+    }
+    
+    &[data-is-color=amber] {
+        .is-color-handle(@amber);
+    }
+    
+    &[data-is-color=green] {
+        .is-color-handle(@green);
+    }
+}
+
+.input-slider {
+    .noUi-origin {
+        background: #d4d4d4;
+    }
+    
+    &:not([data-is-color]) {
+        .noUi-base {
+            background: @teal !important;
+        }
+    }
+    
+    &[data-is-color=red] {
+        .is-color-base(@red);
+    }
+    
+    &[data-is-color=blue] {
+        .is-color-base(@blue);
+    }
+    
+    &[data-is-color=cyan] {
+        .is-color-base(@cyan);
+    }
+    
+    &[data-is-color=amber] {
+        .is-color-base(@amber);
+    }
+    
+    &[data-is-color=green] {
+        .is-color-base(@green);
+    }
+}
+
+.is-color-handle(@color) {
+    .noUi-handle,
+    .noUi-connect {
+        background: @color !important;
+    }
+}
+
+.is-color-base(@color) {
+    .noUi-base {
+        background: @color !important;
+    }
+}

client/app/assets/less/inc/vendor-overrides/summernote.less

@@ -0,0 +1,194 @@
+.note-editor,
+.note-popover {
+    .note-toolbar,
+    .popover-content {
+        background: #fff;
+        border-color: #e4e4e4;
+        margin: 0;
+        padding: 10px 0 15px;
+        text-align: center;
+        
+        & > .btn-group {
+            display: inline-block;
+            float: none;
+            box-shadow: none;
+            
+            .btn {
+                margin: 0 1px;
+                border: 0;
+            }
+            
+            & > .active {
+                background: @cyan;
+                color: #fff;
+            }
+        }
+        
+            
+        .btn {
+            height: 40px;
+            border-radius: 2px !important;
+            box-shadow: none !important;
+            background: #fff;
+            
+            &:active {
+                box-shadow: none;
+            }
+        }
+
+        .note-palette-title {
+            margin: 0 !important;
+            padding: 10px 0 !important;
+            font-size: 13px !important;
+            text-align: center !important;  
+            border: 0 !important;
+        }
+        
+        .note-color-reset {
+            padding: 0 0 10px !important;
+            margin: 0 !important;
+            background: none;
+            text-align: center;
+        }
+         
+        .note-color {
+            .dropdown-menu {
+                min-width: 335px;
+            }
+        }
+    }
+    
+    .note-statusbar {
+        .note-resizebar {
+            border-color: #E8E8E8;
+            
+            .note-icon-bar {
+                border-color: #BCBCBC;
+            }
+        }
+    }
+    
+    .fa {
+        font-style: normal;
+        font-size: 20px;
+        vertical-align: middle;
+        
+        &:before {
+            font-family: @font-icon;
+        }
+        
+        &.fa-magic:before {
+            content: "\f16a";
+        }
+        
+        &.fa-bold:before {
+            content: "\f23d";
+        }
+        
+        &.fa-italic:before {
+            content: "\f245";
+        }
+        
+        &.fa-underline:before {
+            content: "\f24f";
+        }
+        
+        &.fa-font:before {
+            content: "\f242";
+        }
+        
+        &.fa-list-ul:before {
+            content: "\f247";
+        }
+        
+        &.fa-list-ol:before {
+            content: "\f248";
+        }
+
+        &.fa-align-left:before {
+            content: "\f23b";
+        }
+        
+        &.fa-align-right:before {
+            content: "\f23c";
+        }
+
+        &.fa-align-center:before {
+            content: "\f239";
+        }
+
+        &.fa-align-justify:before {
+            content: "\f23a";
+        }
+        
+        &.fa-indent:before {
+            content: "\f244";
+        }
+        
+        &.fa-outdent:before {
+            content: "\f243";
+        }
+        
+        &.fa-text-height:before {
+            content: "\f246";
+        }
+        
+        &.fa-table:before {
+            content: "\f320";
+        }
+        
+        &.fa-link:before {
+            content: "\f18e";
+        }
+        
+        &.fa-picture-o:before {
+            content: "\f17f";
+        }
+        
+        &.fa-minus:before {
+            content: "\f22f";
+        }
+        
+        &.fa-arrows-alt:before {
+            content: "\f16d";
+        }
+        
+        &.fa-code:before {
+            content: "\f13a";
+        }
+        
+        &.fa-question:before {
+            content: "\f1f5";
+        }
+        
+        &.fa-eraser:before {
+            content: "\f23f";
+        }
+        
+        &.fa-square:before {
+            content: "\f279";
+        }
+        
+        &.fa-circle-o:before {
+            content: "\f26c";
+        }
+        
+        &.fa-times:before {
+            content: "\f136";
+        }
+    }
+    
+    .note-air-popover {
+        .arrow {
+            left: 20px;
+        }
+    }
+}
+
+.note-editor {
+    border: 1px solid #e4e4e4;
+
+    .note-editable {
+        padding: 20px 23px;
+    }
+}

client/app/assets/less/inc/vendor-overrides/sweetalert.less

@@ -0,0 +1,21 @@
+.sweet-alert {
+    border-radius: 2px;
+    padding: 10px 30px;
+    
+    h2 {
+        font-size: 16px;
+        font-weight: 400;
+        position: relative;
+        z-index: 1;
+    }
+    
+    .lead {
+        font-size: 13px;
+    }
+    
+    .btn {
+        padding: 6px 12px; 
+        font-size: 13px;
+        margin: 20px 2px 0;
+    }
+}

client/app/assets/less/inc/vendor-overrides/typeahead.less

@@ -0,0 +1,24 @@
+.twitter-typeahead {
+    width: 100%;
+    
+    .tt-menu {
+        min-width: 200px;
+        background: #fff;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    }
+    
+    .tt-suggestion:hover,
+    .tt-cursor {
+        background-color: rgba(0,0,0,0.075);
+    }
+    
+    .tt-suggestion {
+        padding: 8px 17px;
+        color: #333;
+        cursor: pointer;
+    }
+    
+    .tt-hint {
+        color: #818181 !important;
+    }
+}

client/app/assets/less/inc/vendor-overrides/ui-select.less

@@ -0,0 +1,35 @@
+/* ui-select adjustments for SuperFlat */
+.clearable button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+
+/* Same definition as .form-control */
+.ui-select-toggle.btn-default {
+  height: 35px;
+  padding: 6px 12px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #9E9E9E;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+
+  &:hover, &:active, &.active, &:focus, &.focus {
+    background: #fff;
+  }
+}
+
+.btn-default-focus {
+  outline: none;
+  outline-offset: 0;
+  box-shadow: none;
+  background: none;
+}
+

client/app/assets/less/inc/visualizations/chart.less

@@ -1,4 +1,4 @@
-.chart-visualization-container {
+.plotly-chart-container {
   height: 400px;
   overflow: hidden;
 }

client/app/assets/less/inc/visualizations/cohort.less

@@ -0,0 +1,28 @@
+cohort-renderer {
+  display: block;
+}
+
+.cornelius-container {
+  padding: 0;
+  margin: 0;
+
+  .cornelius-table {
+    width: 100%;
+    margin: 0;
+    box-shadow: none;
+    border-radius: 0;
+    background: transparent;
+
+    tr, th, td {
+      border-color: @table-border-color;
+    }
+
+    td {
+      border-radius: 0 !important;
+    }
+
+    .cornelius-time, .cornelius-label, .cornelius-people {
+      background-color: fade(@redash-gray, 3%) !important;
+    }
+  }
+}

client/app/assets/less/inc/visualizations/counter-render.less

@@ -0,0 +1,45 @@
+counter-renderer {
+  display: block;
+  text-align: center;
+  padding: 15px 10px;
+  overflow: hidden;
+
+  counter {
+    margin: 0;
+    padding: 0;
+    font-size: 80px;
+    line-height: normal;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    value,
+    counter-target {
+      font-size: 1em;
+      display: block;
+    }
+
+    counter-name {
+      font-size: 0.5em;
+      display: block;
+    }
+
+    &.positive value {
+      color: #5cb85c;
+    }
+
+    &.negative value {
+      color: #d9534f;
+    }
+  }
+
+  counter-target {
+    color: #ccc;
+  }
+
+  counter-name {
+    font-size: 0.5em;
+    display: block;
+  }
+}