Add a data source description as hover text

.circleci/docker-compose.cypress.yml

@@ -23,7 +23,7 @@ services:
       REDASH_LOG_LEVEL: "INFO"
       REDASH_REDIS_URL: "redis://redis:6379/0"
       REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-      QUEUES: "queries,scheduled_queries,celery"
+      QUEUES: "queries,scheduled_queries,celery,schemas"
       WORKERS_COUNT: 2
   cypress:
     build:

bin/docker-entrypoint

@@ -3,7 +3,7 @@ set -e
 
 worker() {
   WORKERS_COUNT=${WORKERS_COUNT:-2}
-  QUEUES=${QUEUES:-queries,scheduled_queries,celery}
+  QUEUES=${QUEUES:-queries,scheduled_queries,celery,schemas}
 
   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

client/app/assets/less/ant.less

@@ -13,6 +13,7 @@
 @import '~antd/lib/radio/style/index';
 @import '~antd/lib/time-picker/style/index';
 @import '~antd/lib/pagination/style/index';
+@import '~antd/lib/drawer/style/index';
 @import '~antd/lib/table/style/index';
 @import '~antd/lib/popover/style/index';
 @import '~antd/lib/icon/style/index';

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

@@ -1,5 +1,7 @@
 .popover {
     box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
+    color: #000000;
+    z-index: 1000000001; // So that it can popover a dropdown menu
 }
 
 .popover-title {

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

@@ -7,14 +7,14 @@ div.table-name {
   border-radius: @redash-radius;
   position: relative;
 
-  .copy-to-editor {
+  .copy-to-editor, .info {
     display: none;
   }
 
   &:hover {
     background: fade(@redash-gray, 10%);
 
-    .copy-to-editor {
+    .copy-to-editor, .info {
       display: flex;
     }
   }
@@ -36,7 +36,7 @@ div.table-name {
     background: transparent;
   }
 
-  .copy-to-editor {
+  .copy-to-editor, .info {
     color: fade(@redash-gray, 90%);
     cursor: pointer;
     position: absolute;
@@ -49,21 +49,25 @@ div.table-name {
     justify-content: center;
   }
 
+  .info {
+    right: 20px
+  }
+
   .table-open {
     padding: 0 22px 0 26px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     position: relative;
 
-    .copy-to-editor {
+    .copy-to-editor, .info {
       display: none;
     }
 
     &:hover {
       background: fade(@redash-gray, 10%);
 
-      .copy-to-editor {
+      .copy-to-editor, .info {
         display: flex;
       }
     }

client/app/assets/less/redash/query.less

@@ -678,3 +678,17 @@ nav .rg-bottom {
 
   }
 }
+
+.ui-select-choices-row .info {
+  display: none;
+}
+
+.ui-select-choices-row {
+    &:hover {
+        .info {
+            cursor: pointer;
+            width: 20px;
+            display: inline;
+        }
+    }
+}

client/app/assets/less/redash/redash-newstyle.less

@@ -101,6 +101,10 @@ body {
   }
 }
 
+.admin-schema-editor {
+  padding: 50px 0;
+}
+
 .creation-container {
   h5 {
     color: #a7a7a7;

client/app/components/dynamic-form/dynamicFormHelper.js

@@ -56,6 +56,13 @@ function getFields(configurationSchema, target) {
       required: true,
       initialValue: target.name,
     },
+    {
+      name: 'description',
+      title: 'Description',
+      type: 'text',
+      required: false,
+      initialValue: target.description,
+    },
     ...orderedInputs(configurationSchema.properties, configurationSchema.order, target.options),
   ];
 
@@ -64,6 +71,7 @@ function getFields(configurationSchema, target) {
 
 function updateTargetWithValues(target, values) {
   target.name = values.name;
+  target.description = values.description;
   Object.keys(values).forEach((key) => {
     if (key !== 'name') {
       target.options[key] = values[key];

client/app/components/proptypes.js

@@ -11,8 +11,16 @@ export const DataSource = PropTypes.shape({
   type_name: PropTypes.string,
 });
 
+export const DataSourceMetadata = PropTypes.shape({
+  key: PropTypes.number,
+  name: PropTypes.string,
+  type: PropTypes.string,
+  example: PropTypes.string,
+  column_description: PropTypes.string,
+});
+
 export const Table = PropTypes.shape({
-  columns: PropTypes.arrayOf(PropTypes.string).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
 });
 
 export const Schema = PropTypes.arrayOf(Table);
@@ -31,6 +39,18 @@ export const RefreshScheduleDefault = {
   until: null,
 };
 
+export const TableMetadata = PropTypes.shape({
+  key: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  table_description: PropTypes.string.isRequired,
+  table_visible: PropTypes.bool.isRequired,
+});
+
+export const Query = PropTypes.shape({
+  id: PropTypes.number,
+  name: PropTypes.string,
+});
+
 export const Field = PropTypes.shape({
   name: PropTypes.string.isRequired,
   title: PropTypes.string,

client/app/components/queries/SchemaData.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import Drawer from 'antd/lib/drawer';
+import Table from 'antd/lib/table';
+
+import { DataSourceMetadata, Query } from '@/components/proptypes';
+
+class SchemaData extends React.PureComponent {
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    tableName: PropTypes.string,
+    tableDescription: PropTypes.string,
+    sampleQueries: PropTypes.arrayOf(Query),
+    tableMetadata: PropTypes.arrayOf(DataSourceMetadata),
+  };
+
+  static defaultProps = {
+    tableName: '',
+    tableDescription: '',
+    tableMetadata: [],
+    sampleQueries: [],
+  };
+
+  render() {
+    const tableDataColumns = [{
+      title: 'Metadata',
+      dataIndex: 'metadata',
+      width: 400,
+      key: 'metadata',
+    }, {
+      title: 'Value',
+      dataIndex: 'value',
+      width: 400,
+      key: 'value',
+      render: (text) => {
+        if (typeof text === 'string') {
+          return text;
+        }
+        return (
+          <ul style={{ margin: 0, paddingLeft: '15px' }}>
+            {Object.values(text).map(query => (
+              <li><a target="_blank" rel="noopener noreferrer" href={`queries/${query.id}/source`}>{query.name}</a></li>
+            ))}
+          </ul>
+        );
+      },
+    }];
+
+    const columnDataColumns = [{
+      title: 'Column Name',
+      dataIndex: 'name',
+      width: 400,
+      key: 'name',
+    }, {
+      title: 'Column Type',
+      dataIndex: 'type',
+      width: 400,
+      key: 'type',
+    }, {
+      title: 'Example',
+      dataIndex: 'example',
+      width: 400,
+      key: 'example',
+    }, {
+      title: 'Description',
+      dataIndex: 'column_description',
+      width: 400,
+      key: 'column_description',
+    }];
+
+    const tableData = [{
+      metadata: 'Table Description',
+      value: this.props.tableDescription || 'N/A',
+    }, {
+      metadata: 'Sample Usage',
+      value: this.props.sampleQueries.length > 0 ? this.props.sampleQueries : 'N/A',
+    }];
+
+    return (
+      <Drawer
+        closable={false}
+        placement="bottom"
+        height={500}
+        onClose={this.props.onClose}
+        visible={this.props.show}
+      >
+        <h4 style={{ margin: 0 }}>{this.props.tableName}</h4>
+        <hr />
+        <h5>Table Data</h5>
+        <Table
+          dataSource={tableData}
+          pagination={false}
+          scroll={{ y: 350 }}
+          size="small"
+          showHeader={false}
+          columns={tableDataColumns}
+        />
+        <br />
+        <h5>Column Data</h5>
+        <Table
+          dataSource={this.props.tableMetadata}
+          pagination={false}
+          scroll={{ y: 175 }}
+          size="small"
+          columns={columnDataColumns}
+        />
+      </Drawer>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('schemaData', react2angular(SchemaData, null, []));
+}
+
+init.init = true;

client/app/components/queries/schema-browser.html

@@ -9,22 +9,32 @@
   </div>
 
   <div class="schema-browser" vs-repeat vs-size="$ctrl.getSize(table)">
-    <div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilterObject track by table.name">
+    <div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilterObject | filter:$ctrl.itemExists track by table.name">
       <div class="table-name" ng-click="$ctrl.showTable(table)">
         <i class="fa fa-table"></i>
         <strong>
           <span title="{{table.name}}">{{table.name}}</span>
           <span ng-if="table.size !== undefined"> ({{table.size}})</span>
         </strong>
+        <i ng-if="table.hasColumnMetadata" class="fa fa-question-circle info" title="More Info" aria-hidden="true"
+          ng-click="openSchemaInfo($event, table)"></i>
         <i class="fa fa-angle-double-right copy-to-editor" aria-hidden="true"
           ng-click="$ctrl.itemSelected($event, [table.name])"></i>
       </div>
       <div uib-collapse="table.collapsed">
-        <div ng-repeat="column in table.columns | filter:$ctrl.schemaFilterColumn track by column" class="table-open">{{column}}
+        <div ng-repeat="column in table.columns | filter:$ctrl.schemaFilterColumn | filter:$ctrl.itemExists track by column.key" class="table-open">{{column.name}}
           <i class="fa fa-angle-double-right copy-to-editor" aria-hidden="true"
-            ng-click="$ctrl.itemSelected($event, [column])"></i>
+            ng-click="$ctrl.itemSelected($event, [column.name])"></i>
         </div>
       </div>
     </div>
   </div>
+  <schema-data
+    show="showSchemaInfo"
+    table-name="tableName"
+    table-description="tableDescription"
+    table-metadata="tableMetadata"
+    sample-queries="sampleQueries"
+    on-close="closeSchemaInfo"
+  ></schema-data>
 </div>

client/app/components/queries/schema-browser.js

@@ -8,6 +8,19 @@ function SchemaBrowserCtrl($rootScope, $scope) {
     $scope.$broadcast('vsRepeatTrigger');
   };
 
+  $scope.showSchemaInfo = false;
+  $scope.openSchemaInfo = ($event, table) => {
+    $scope.tableName = table.name;
+    $scope.tableDescription = table.table_description;
+    $scope.tableMetadata = table.columns;
+    $scope.sampleQueries = Object.values(table.sample_queries);
+    $scope.showSchemaInfo = true;
+    $event.stopPropagation();
+  };
+  $scope.closeSchemaInfo = () => {
+    $scope.$apply(() => { $scope.showSchemaInfo = false; });
+  };
+
   this.getSize = (table) => {
     let size = 22;
 
@@ -22,6 +35,13 @@ function SchemaBrowserCtrl($rootScope, $scope) {
     return this.schema === undefined || this.schema.length === 0;
   };
 
+  this.itemExists = (item) => {
+    if ('visible' in item) {
+      return item.exists && item.visible;
+    }
+    return item.exists;
+  };
+
   this.itemSelected = ($event, hierarchy) => {
     $rootScope.$broadcast('query-editor.command', 'paste', hierarchy.join('.'));
     $event.preventDefault();