diff --git a/caravel/assets/javascripts/SqlLab/TODO.md b/caravel/assets/javascripts/SqlLab/TODO.md new file mode 100644 index 00000000000..8a83c57c463 --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/TODO.md @@ -0,0 +1,24 @@ +# Design +* Query Log, search, filter on active tab only +* Where to make the limit clear? + +# TODO +* collapse sql beyond 10 lines +* add [Visualize] icon to modal +* Security per-database +* Overwrite workspace query +* Async +* Refactor timer in to its own thing + + +## Cosmetic +* use icons for datatypes +* SqlEditor buttons +* use react-bootstrap-prompt for query title input +* make input:text more self-evident +* Tab cosmetic in theme + +# PROJECT +* Write Runbook +* Confirm backups +* merge chef branch diff --git a/caravel/assets/javascripts/SqlLab/actions.js b/caravel/assets/javascripts/SqlLab/actions.js new file mode 100644 index 00000000000..eb2b6d511bd --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/actions.js @@ -0,0 +1,102 @@ +export const RESET_STATE = 'RESET_STATE'; +export const ADD_QUERY_EDITOR = 'ADD_QUERY_EDITOR'; +export const REMOVE_QUERY_EDITOR = 'REMOVE_QUERY_EDITOR'; +export const ADD_TABLE = 'ADD_TABLE'; +export const REMOVE_TABLE = 'REMOVE_TABLE'; +export const START_QUERY = 'START_QUERY'; +export const STOP_QUERY = 'STOP_QUERY'; +export const END_QUERY = 'END_QUERY'; +export const REMOVE_QUERY = 'REMOVE_QUERY'; +export const EXPAND_TABLE = 'EXPAND_TABLE'; +export const COLLAPSE_TABLE = 'COLLAPSE_TABLE'; +export const QUERY_SUCCESS = 'QUERY_SUCCESS'; +export const QUERY_FAILED = 'QUERY_FAILED'; +export const QUERY_EDITOR_SETDB = 'QUERY_EDITOR_SETDB'; +export const QUERY_EDITOR_SET_SCHEMA = 'QUERY_EDITOR_SET_SCHEMA'; +export const QUERY_EDITOR_SET_TITLE = 'QUERY_EDITOR_SET_TITLE'; +export const QUERY_EDITOR_SET_AUTORUN = 'QUERY_EDITOR_SET_AUTORUN'; +export const QUERY_EDITOR_SET_SQL = 'QUERY_EDITOR_SET_SQL'; +export const SET_WORKSPACE_DB = 'SET_WORKSPACE_DB'; +export const ADD_WORKSPACE_QUERY = 'ADD_WORKSPACE_QUERY'; +export const REMOVE_WORKSPACE_QUERY = 'REMOVE_WORKSPACE_QUERY'; +export const SET_ACTIVE_QUERY_EDITOR = 'SET_ACTIVE_QUERY_EDITOR'; + +export function resetState() { + return { type: RESET_STATE }; +} + +export function addQueryEditor(queryEditor) { + return { type: ADD_QUERY_EDITOR, queryEditor }; +} + +export function setActiveQueryEditor(queryEditor) { + return { type: SET_ACTIVE_QUERY_EDITOR, queryEditor }; +} + +export function removeQueryEditor(queryEditor) { + return { type: REMOVE_QUERY_EDITOR, queryEditor }; +} + +export function removeQuery(query) { + return { type: REMOVE_QUERY, query }; +} + +export function queryEditorSetDb(queryEditor, dbId) { + return { type: QUERY_EDITOR_SETDB, queryEditor, dbId }; +} + +export function queryEditorSetSchema(queryEditor, schema) { + return { type: QUERY_EDITOR_SET_SCHEMA, queryEditor, schema }; +} + +export function queryEditorSetAutorun(queryEditor, autorun) { + return { type: QUERY_EDITOR_SET_AUTORUN, queryEditor, autorun }; +} + +export function queryEditorSetTitle(queryEditor, title) { + return { type: QUERY_EDITOR_SET_TITLE, queryEditor, title }; +} + +export function queryEditorSetSql(queryEditor, sql) { + return { type: QUERY_EDITOR_SET_SQL, queryEditor, sql }; +} + +export function addTable(table) { + return { type: ADD_TABLE, table }; +} + +export function expandTable(table) { + return { type: EXPAND_TABLE, table }; +} + +export function collapseTable(table) { + return { type: COLLAPSE_TABLE, table }; +} + +export function removeTable(table) { + return { type: REMOVE_TABLE, table }; +} + +export function startQuery(query) { + return { type: START_QUERY, query }; +} + +export function stopQuery(query) { + return { type: STOP_QUERY, query }; +} + +export function querySuccess(query, results) { + return { type: QUERY_SUCCESS, query, results }; +} + +export function queryFailed(query, msg) { + return { type: QUERY_FAILED, query, msg }; +} + +export function addWorkspaceQuery(query) { + return { type: ADD_WORKSPACE_QUERY, query }; +} + +export function removeWorkspaceQuery(query) { + return { type: REMOVE_WORKSPACE_QUERY, query }; +} diff --git a/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx b/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx new file mode 100644 index 00000000000..36220e6b4ff --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'; + + +class ButtonWithTooltip extends React.Component { + render() { + let tooltip = ( + + {this.props.tooltip} + + ); + return ( + + + + ); + } +} +ButtonWithTooltip.defaultProps = { + onClick: () => {}, + disabled: false, + placement: 'top', + bsStyle: 'default', +}; + +ButtonWithTooltip.propTypes = { + bsStyle: React.PropTypes.string, + children: React.PropTypes.element, + className: React.PropTypes.string, + disabled: React.PropTypes.bool, + onClick: React.PropTypes.func, + placement: React.PropTypes.string, + tooltip: React.PropTypes.string, +}; + +export default ButtonWithTooltip; diff --git a/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx b/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx new file mode 100644 index 00000000000..27e441aac11 --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { Alert, Button, Label } from 'react-bootstrap'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import * as Actions from '../actions'; +import QueryLink from './QueryLink'; + +// CSS +import 'react-select/dist/react-select.css'; + +class LeftPane extends React.Component { + render() { + let queryElements; + if (this.props.workspaceQueries.length > 0) { + queryElements = this.props.workspaceQueries.map((q) => ); + } else { + queryElements = ( + + Use the save button on the SQL editor to save a query into this section for + future reference + + ); + } + return ( +
+
+
+ + SQL Lab +
+
+
+
+
+ + + + Saved Queries +
+
+ {queryElements} +
+
+ +
+
+
+ ); + } +} +LeftPane.propTypes = { + workspaceQueries: React.PropTypes.array, +}; +LeftPane.defaultProps = { + workspaceQueries: [], +}; + +function mapStateToProps(state) { + return { + workspaceQueries: state.workspaceQueries, + }; +} +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators(Actions, dispatch), + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(LeftPane); diff --git a/caravel/assets/javascripts/SqlLab/components/Link.jsx b/caravel/assets/javascripts/SqlLab/components/Link.jsx new file mode 100644 index 00000000000..7c88b5a929c --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/Link.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { OverlayTrigger, Tooltip } from 'react-bootstrap'; + + +class Link extends React.Component { + render() { + let tooltip = ( + + {this.props.tooltip} + + ); + const link = ( + + {this.props.children} + + ); + if (this.props.tooltip) { + return ( + + {link} + + ); + } + return link; + } +} +Link.propTypes = { + className: React.PropTypes.string, + href: React.PropTypes.string, + onClick: React.PropTypes.func, + tooltip: React.PropTypes.string, + placement: React.PropTypes.string, + children: React.PropTypes.object, +}; +Link.defaultProps = { + disabled: false, + href: '#', + tooltip: null, + placement: 'top', + onClick: () => {}, +}; + +export default Link; diff --git a/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx b/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx new file mode 100644 index 00000000000..26a5d39bead --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { ButtonGroup } from 'react-bootstrap'; +import Link from './Link'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import * as Actions from '../actions'; +import shortid from 'shortid'; + +// CSS +import 'react-select/dist/react-select.css'; + +class QueryLink extends React.Component { + popTab() { + const qe = { + id: shortid.generate(), + title: this.props.query.title, + dbId: this.props.query.dbId, + autorun: false, + sql: this.props.query.sql, + }; + this.props.actions.addQueryEditor(qe); + } + render() { + return ( +
+ {this.props.query.title} + + + + +
+ ); + } +} + +QueryLink.propTypes = { + query: React.PropTypes.object, + actions: React.PropTypes.object, +}; + +QueryLink.defaultProps = { +}; + +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators(Actions, dispatch), + }; +} +export default connect(null, mapDispatchToProps)(QueryLink); + diff --git a/caravel/assets/javascripts/SqlLab/components/QueryLog.jsx b/caravel/assets/javascripts/SqlLab/components/QueryLog.jsx new file mode 100644 index 00000000000..bc83a4627c6 --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/QueryLog.jsx @@ -0,0 +1,51 @@ +import React from 'react'; + +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import * as Actions from '../actions'; + +import QueryTable from './QueryTable'; +import { Alert } from 'react-bootstrap'; + +class QueryLog extends React.Component { + render() { + const activeQeId = this.props.tabHistory[this.props.tabHistory.length - 1]; + const queries = this.props.queries.filter((q) => (q.sqlEditorId === activeQeId)); + if (queries.length > 0) { + return ( + + ); + } + return ( + + No query history yet... + + ); + } +} +QueryLog.defaultProps = { + queries: [], +}; + +QueryLog.propTypes = { + queries: React.PropTypes.array, + tabHistory: React.PropTypes.array, + actions: React.PropTypes.object, +}; + +function mapStateToProps(state) { + return { + queries: state.queries, + tabHistory: state.tabHistory, + }; +} +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators(Actions, dispatch), + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(QueryLog); diff --git a/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx b/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx new file mode 100644 index 00000000000..e0352f9363c --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx @@ -0,0 +1,74 @@ +import React from 'react'; +import SplitPane from 'react-split-pane'; +import Select from 'react-select'; +import { Button } from 'react-bootstrap'; + +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import * as Actions from '../actions'; +import QueryTable from './QueryTable'; + +class QuerySearch extends React.Component { + constructor(props) { + super(props); + this.state = { + queryText: '', + }; + } + changeQueryText(value) { + this.setState({ queryText: value }); + } + render() { + const queries = this.props.queries; + return ( + +
+
+
+
+ Search Queries +
+
+
+ + + ({ + column: col, + is_dimension: , + is_date: , + agg_func: ( +
+ + ); + } +} +QueryTable.propTypes = { + columns: React.PropTypes.array, + actions: React.PropTypes.object, + queries: React.PropTypes.object, +}; +QueryTable.defaultProps = { + columns: ['state', 'started', 'duration', 'rows', 'sql', 'actions'], + queries: [], +}; + +function mapStateToProps(state) { + return { + }; +} +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators(Actions, dispatch), + }; +} +export default connect(mapStateToProps, mapDispatchToProps)(QueryTable); diff --git a/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx b/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx new file mode 100644 index 00000000000..c3888723217 --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { Alert, Button } from 'react-bootstrap'; +import { Table } from 'reactable'; + + +class ResultSet extends React.Component { + shouldComponentUpdate() { + return false; + } + render() { + const results = this.props.query.results; + let controls =
; + if (this.props.showControls) { + controls = ( +
+
+
+ + +
+
+ +
+
+
+ ); + } + if (results.data.length > 0) { + return ( +
+ {controls} +
+ + ); + } + return (The query returned no data); + } +} +ResultSet.propTypes = { + query: React.PropTypes.object, + showControls: React.PropTypes.boolean, + search: React.PropTypes.boolean, +}; +ResultSet.defaultProps = { + showControls: true, + search: true, +}; + +export default ResultSet; diff --git a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx new file mode 100644 index 00000000000..d193ab9c76b --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx @@ -0,0 +1,44 @@ +import { Tab, Tabs } from 'react-bootstrap'; +import QueryLog from './QueryLog'; +import ResultSet from './ResultSet'; +import React from 'react'; + +class SouthPane extends React.Component { + render() { + let results; + if (this.props.latestQuery) { + if (this.props.latestQuery.state === 'running') { + results = ( + Loading.. + ); + } else if (this.props.latestQuery.state === 'failed') { + results =
{this.props.latestQuery.msg}
; + } else if (this.props.latestQuery.state === 'success') { + results = ; + } + } else { + results =
Run a query to display results here
; + } + return ( + + +
+ {results} +
+ + + + + + ); + } +} + +SouthPane.propTypes = { + latestQuery: React.PropTypes.object, +}; + +SouthPane.defaultProps = { +}; + +export default SouthPane; diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx new file mode 100644 index 00000000000..ba097a00d95 --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx @@ -0,0 +1,233 @@ +const $ = window.$ = require('jquery'); +import React from 'react'; +import { Button, ButtonGroup, DropdownButton, Label, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap'; + +import AceEditor from 'react-ace'; +import 'brace/mode/sql'; +import 'brace/theme/github'; +import 'brace/ext/language_tools'; + +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import * as Actions from '../actions'; +import shortid from 'shortid'; +import ButtonWithTooltip from './ButtonWithTooltip'; +import SouthPane from './SouthPane'; +import Timer from './Timer'; + +import SqlEditorTopToolbar from './SqlEditorTopToolbar'; + +// CSS +import 'react-select/dist/react-select.css'; + +class SqlEditor extends React.Component { + constructor(props) { + super(props); + this.state = { + autorun: props.queryEditor.autorun, + sql: props.queryEditor.sql, + }; + } + componentDidMount() { + if (this.state.autorun) { + this.setState({ autorun: false }); + this.props.actions.queryEditorSetAutorun(this.props.queryEditor, false); + this.startQuery(); + } + } + getTableOptions(input, callback) { + const url = '/tableasync/api/read?_oc_DatabaseAsync=database_name&_od_DatabaseAsync=asc'; + $.get(url, function (data) { + const options = []; + for (let i = 0; i < data.pks.length; i++) { + options.push({ value: data.pks[i], label: data.result[i].table_name }); + } + callback(null, { + options, + cache: false, + }); + }); + } + startQuery() { + const that = this; + const query = { + id: shortid.generate(), + sqlEditorId: this.props.queryEditor.id, + sql: this.state.sql, + state: 'running', + tab: this.props.queryEditor.title, + dbId: this.props.queryEditor.dbId, + startDttm: new Date(), + }; + const url = '/caravel/sql_json/'; + const data = { + sql: this.state.sql, + database_id: this.props.queryEditor.dbId, + schema: this.props.queryEditor.schema, + json: true, + }; + this.props.actions.startQuery(query); + $.ajax({ + type: 'POST', + dataType: 'json', + url, + data, + success(results) { + try { + that.props.actions.querySuccess(query, results); + } catch (e) { + that.props.actions.queryFailed(query, e); + } + }, + error(err) { + let msg = ''; + try { + msg = err.responseJSON.error; + } catch (e) { + msg = (err.responseText) ? err.responseText : e; + } + that.props.actions.queryFailed(query, msg); + }, + }); + } + stopQuery() { + this.props.actions.stopQuery(this.props.latestQuery); + } + textChange(text) { + this.setState({ sql: text }) + this.props.actions.queryEditorSetSql(this.props.queryEditor, text); + } + notImplemented() { + alert('Not implemented'); + } + addWorkspaceQuery() { + this.props.actions.addWorkspaceQuery({ + id: shortid.generate(), + sql: this.state.sql, + dbId: this.props.queryEditor.dbId, + schema: this.props.queryEditor.schema, + title: this.props.queryEditor.title, + }); + } + ctasChange() {} + visualize() {} + render() { + let runButtons = ( + + + + ); + if (this.props.latestQuery && this.props.latestQuery.state === 'running') { + runButtons = ( + + + + ); + } + const rightButtons = ( + + +   + + }> + + export to .csv + + + export to .json + + + + ); + let limitWarning = null; + const row_limit = 1000; + if (this.props.latestQuery && this.props.latestQuery.rows === row_limit) { + const tooltip = ( + + It appears that the number of rows in the query results displayed + was limited on the server side to the {row_limit} limit. + + ); + limitWarning = ( + + + + ); + } + const editorBottomBar = ( +
+
+ {runButtons} + + + +
+
+ {limitWarning} + + {rightButtons} +
+
+ ); + return ( +
+
+
+ + + {editorBottomBar} +
+ +
+
+
+
+ ); + } +} + +SqlEditor.propTypes = { + queryEditor: React.PropTypes.object, + actions: React.PropTypes.object, + latestQuery: React.PropTypes.object, +}; + +SqlEditor.defaultProps = { +}; + +function mapStateToProps(state) { + return { + }; +} + +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators(Actions, dispatch), + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(SqlEditor); diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx new file mode 100644 index 00000000000..0190241d338 --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx @@ -0,0 +1,280 @@ +const $ = window.$ = require('jquery'); +import React from 'react'; +import { Label, OverlayTrigger, Popover } from 'react-bootstrap'; + +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import * as Actions from '../actions'; +import shortid from 'shortid'; +import Select from 'react-select'; +import Link from './Link'; + +// CSS +import 'react-select/dist/react-select.css'; + +class SqlEditorTopToolbar extends React.Component { + constructor(props) { + super(props); + this.state = { + databaseLoading: false, + databaseOptions: [], + schemaLoading: false, + schemaOptions: [], + tableLoading: false, + tableOptions: [], + }; + } + componentWillMount() { + this.fetchDatabaseOptions(); + this.fetchSchemas(); + this.fetchTables(); + } + getTableOptions(input, callback) { + const url = '/tableasync/api/read?_oc_DatabaseAsync=database_name&_od_DatabaseAsync=asc'; + $.get(url, function (data) { + const options = []; + for (let i = 0; i < data.pks.length; i++) { + options.push({ value: data.pks[i], label: data.result[i].table_name }); + } + callback(null, { + options, + cache: false, + }); + }); + } + getSql(table) { + let cols = ''; + table.columns.forEach(function (col, i) { + cols += col.name; + if (i < table.columns.length - 1) { + cols += ', '; + } + }); + return `SELECT ${cols}\nFROM ${table.name}`; + } + selectStar(table) { + this.props.actions.queryEditorSetSql(this.props.queryEditor, this.getSql(table)); + } + popTab(table) { + const qe = { + id: shortid.generate(), + title: table.name, + dbId: table.dbId, + schema: table.schema, + autorun: true, + sql: this.getSql(table), + }; + this.props.actions.addQueryEditor(qe); + } + fetchTables(dbId, schema) { + const actualDbId = dbId || this.props.queryEditor.dbId; + if (actualDbId) { + const actualSchema = schema || this.props.queryEditor.schema; + const that = this; + this.setState({ tableLoading: true }); + this.setState({ tableOptions: [] }); + const url = `/caravel/tables/${actualDbId}/${actualSchema}`; + $.get(url, function (data) { + let tableOptions = data.tables.map((s) => ({ value: s, label: s })); + const views = data.views.map((s) => ({ value: s, label: '[view] ' + s })); + tableOptions = [...tableOptions, ...views]; + that.setState({ tableOptions }); + that.setState({ tableLoading: false }); + }); + } + } + changeSchema(schemaOpt) { + const schema = (schemaOpt) ? schemaOpt.value : null; + this.props.actions.queryEditorSetSchema(this.props.queryEditor, schema); + this.fetchTables(this.props.queryEditor.dbId, schema); + } + fetchSchemas(dbId) { + const that = this; + const actualDbId = dbId || this.props.queryEditor.dbId; + if (actualDbId) { + this.setState({ schemaLoading: true }); + const url = `/databasetablesasync/api/read?_flt_0_id=${actualDbId}`; + $.get(url, function (data) { + const schemas = data.result[0].all_schema_names; + const schemaOptions = schemas.map((s) => ({ value: s, label: s })); + that.setState({ schemaOptions }); + that.setState({ schemaLoading: false }); + }); + } + } + changeDb(db) { + const val = (db) ? db.value : null; + this.setState({ schemaOptions: [] }); + this.props.actions.queryEditorSetDb(this.props.queryEditor, val); + if (!(db)) { + this.setState({ tableOptions: [] }); + return; + } + this.fetchTables(val, this.props.queryEditor.schema); + this.fetchSchemas(val); + } + fetchDatabaseOptions() { + this.setState({ databaseLoading: true }); + const that = this; + const url = '/databaseasync/api/read'; + $.get(url, function (data) { + const options = data.result.map((db) => ({ value: db.id, label: db.database_name })); + that.setState({ databaseOptions: options }); + that.setState({ databaseLoading: false }); + }); + } + notImplemented() { + alert('Not implemented'); + } + closePopover(ref) { + this.refs[ref].hide(); + } + changeTable(tableOpt) { + const tableName = tableOpt.value; + const that = this; + const qe = this.props.queryEditor; + const url = `/caravel/table/${qe.dbId}/${tableName}/${qe.schema}/`; + $.get(url, function (data) { + that.props.actions.addTable({ + id: shortid.generate(), + dbId: that.props.queryEditor.dbId, + queryEditorId: that.props.queryEditor.id, + name: data.name, + schema: qe.schema, + columns: data.columns, + expanded: true, + showPopup: false, + }); + }); + } + render() { + const tables = this.props.tables.filter((t) => (t.queryEditorId === this.props.queryEditor.id)); + const tablesEls = tables.map((table) => { + let cols = []; + if (table.columns) { + cols = table.columns.map((col) => ( +
+
{col.name}
+
{col.type}
+
+ )); + } + const popoverId = 'tblPopover_' + table.name; + const popoverTop = ( +
+
+ + +
+
+ +
+
+ ); + const popover = ( + + {cols} + + ); + return ( + + ); + }); + return ( +
+
+ +
+
+