From 7c892b3b8da5cb7813b3b17f264d0ce7e0e62aaa Mon Sep 17 00:00:00 2001 From: blafond Date: Wed, 22 May 2019 15:55:07 -0500 Subject: [PATCH] TTOOLS-616 --- .../data/locales/data-translations.en.json | 17 +- .../data/locales/data-translations.it.json | 17 +- .../data/pages/VirtualizationCreatePage.tsx | 184 +++---- .../data/pages/VirtualizationViewsPage.tsx | 430 ++++++++-------- .../data/pages/VirtualizationsPage.tsx | 463 +++++++++++------- .../data/pages/viewCreate/SelectNamePage.tsx | 255 +++++----- .../pages/viewsImport/SelectViewsPage.tsx | 134 +++-- .../WithVirtualizationSqlClientForm.tsx | 183 ++++--- 8 files changed, 980 insertions(+), 703 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/data/locales/data-translations.en.json b/app/ui-react/syndesis/src/modules/data/locales/data-translations.en.json index 77018abed0c..93718ea4a8e 100644 --- a/app/ui-react/syndesis/src/modules/data/locales/data-translations.en.json +++ b/app/ui-react/syndesis/src/modules/data/locales/data-translations.en.json @@ -47,6 +47,21 @@ "viewSqlFormSqlStatement": "SQL Statement", "viewSqlFormSqlStatementDescription": "Enter SQL query and click SUBMIT (i.e. SELECT a, b FROM view1)", "queryResultsTableEmptyStateInfo": "Query has not yet been executed.\nSelect view, enter SQL query and click 'Submit'", - "queryResultsTableEmptyStateTitle": "NO DATA AVAILABLE" + "queryResultsTableEmptyStateTitle": "NO DATA AVAILABLE", + "queryViewFailed": "An error occurred querying the selected view. Details: {{details}}", + "queryViewSuccess": "The selected view was successfully queried.", + "createVirtualizationSuccess": "{{name}} virtualization created.", + "publishVirtualizationSuccess": "Virtualization {{name}} was submitted for publishing.", + "publishVirtualizatioFailed": "Publishing failed for virtualization {{name}}. Details: {{details}}", + "unpublishVirtualizationSuccess": "Virtualizaton {{name}} was unpublished.", + "unpublishVirtualizationFailed": "Unpublish virtualization {{name}} failed. Details: {{details}}", + "deleteVirtualizationSuccess": "Virtualization {{name}} was deleted.", + "deleteVirtualizationFailed": "Delete virtualization {{name}} failed. Details: {{details}}", + "deleteViewSuccess": "View {{name}} was deleted.", + "deleteViewFailed": "Delete view {{name}} failed. Details: {{details}}", + "importViewsSuccess": "Import data source completed for virtualization {{name}}.", + "importViewsFailed": "Import data source failed for virtualization {{name}}. Details: {{details}}", + "createViewSuccess": "Created view named: {{name}}.", + "createViewFailed": "Create view failed. Details: {{details}}" } } diff --git a/app/ui-react/syndesis/src/modules/data/locales/data-translations.it.json b/app/ui-react/syndesis/src/modules/data/locales/data-translations.it.json index d7bbfb3cc35..4afb6520dfd 100644 --- a/app/ui-react/syndesis/src/modules/data/locales/data-translations.it.json +++ b/app/ui-react/syndesis/src/modules/data/locales/data-translations.it.json @@ -46,6 +46,21 @@ "viewSqlFormSqlStatement": "SQL Statement", "viewSqlFormSqlStatementDescription": "Enter SQL query and click SUBMIT (i.e. SELECT a, b FROM view1)", "queryResultsTableEmptyStateInfo": "Query has not yet been executed.\nSelect view, enter SQL query and click 'Submit'", - "queryResultsTableEmptyStateTitle": "NO DATA AVAILABLE" + "queryResultsTableEmptyStateTitle": "NO DATA AVAILABLE", + "queryViewFailed": "An error occurred querying the selected view. Details: {{details}}", + "queryViewSuccess": "The selected view was successfully queried.", + "createVirtualizationSuccess": "{{name}} virtualization created.", + "publishVirtualizationSuccess": "Virtualization {{name}} was submitted for publishing.", + "publishVirtualizatioFailed": "Publishing failed for virtualization {{name}}. Details: {{details}}", + "unpublishVirtualizationSuccess": "Virtualizaton {{name}} was unpublished.", + "unpublishVirtualizationFailed": "Unpublish virtualization {{name}} failed. Details: {{details}}", + "deleteVirtualizationSuccess": "Virtualization {{name}} was deleted.", + "deleteVirtualizationFailed": "Delete virtualization {{name}} failed. Details: {{details}}", + "deleteViewSuccess": "View {{name}} was deleted.", + "deleteViewFailed": "Delete view {{name}} failed. Details: {{details}}", + "importViewsSuccess": "Import data source completed for virtualization {{name}}.", + "importViewsFailed": "Import data source failed for virtualization {{name}}. Details: {{details}}", + "createViewSuccess": "Created view named: {{name}}.", + "createViewFailed": "Create view failed. Details: {{details}}" } } diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx index 0b9d29a4ab4..4ee20aa000f 100644 --- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx +++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx @@ -5,7 +5,7 @@ import { WithRouteData } from '@syndesis/utils'; import * as React from 'react'; import { Translation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import { AppContext } from '../../../app'; +import { AppContext, UIContext } from '../../../app'; import i18n from '../../../i18n'; import resolvers from '../../resolvers'; @@ -47,94 +47,110 @@ export class VirtualizationCreatePage extends React.Component { }; return ( - > - {(p, s, { history }) => ( - - {({ user }) => ( - - {({ createVirtualization }) => { - const handleCreate = async (value: any) => { - const virtualization = await createVirtualization( - user.username || 'developer', - value.virtName, - value.virtDescription - ); - // TODO: post toast notification - history.push( - resolvers.data.virtualizations.views.root({ - virtualization, - }) - ); - }; - return ( - - {t => ( - <> - - - {t('shared:Home')} - - - {t('shared:DataVirtualizations')} - - - {t( - 'data:virtualization.createDataVirtualizationTitle' - )} - - - -

- {t( - 'data:virtualization.createDataVirtualizationTitle' - )} -

- - - - {({ fields, handleSubmit }) => ( - - {fields} - - - )} - - - + {t('shared:Home')} + + + {t('shared:DataVirtualizations')} + + + {t( + 'data:virtualization.createDataVirtualizationTitle' + )} + + + +

+ {t( + 'data:virtualization.createDataVirtualizationTitle' + )} +

+ + + + {({ fields, handleSubmit }) => ( + + {fields} + + + )} + + + + ); + }} + )} - - ); - }} - - )} - + + )} + + ); + }} + )} - + ); } } diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx index a2f0680e05e..7a7ccc4ee6e 100644 --- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx +++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx @@ -22,6 +22,7 @@ import { WithRouteData, } from '@syndesis/utils'; import { Translation } from 'react-i18next'; +import { UIContext } from '../../../app'; import resolvers from '../../resolvers'; /** @@ -99,206 +100,247 @@ export class VirtualizationViewsPage extends React.Component< public render() { return ( - > - {({ virtualizationId }, { virtualization }, { history }) => { - return ( - - {t => ( - <> - - - {t('shared:Home')} - - - {t('shared:DataVirtualizations')} - - - {virtualizationId + ' '} - {t('data:virtualization.views')} - - - - - {({ data, hasData, error, read }) => { - return ( - - {({ deleteView }) => { - const handleDeleteView = async ( - viewName: string - ) => { - await deleteView(virtualization, viewName).then( - read - ); - // TODO: post toast notification - }; + + {t => ( + + {({ pushNotification }) => { + return ( + > + {({ virtualizationId }, { virtualization }, { history }) => { + return ( + <> + + + {t('shared:Home')} + + + {t('shared:DataVirtualizations')} + + + {virtualizationId + ' '} + {t('data:virtualization.views')} + + + + + {({ data, hasData, error, read }) => { return ( - - {helpers => { - const viewDefns = data.map( - (editorState: ViewEditorState) => - editorState.viewDefinition - ); - const filteredAndSorted = getFilteredAndSortedViewDefns( - viewDefns, - helpers.activeFilters, - helpers.currentSortType, - helpers.isSortAscending - ); + + {({ deleteView }) => { + const handleDeleteView = async ( + viewName: string + ) => { + try { + await deleteView( + virtualization, + viewName + ).then(read); + pushNotification( + t('virtualization.deleteViewSuccess', { + name: viewName, + }), + 'success' + ); + } catch (error) { + const details = error.message + ? error.message + : ''; + pushNotification( + t('virtualization.deleteViewFailed', { + details, + name: viewName, + }), + 'error' + ); + } + }; return ( - <> - - - - 0} - > - - } - errorChildren={} - > - {() => - filteredAndSorted - .filter((viewDefinition: ViewDefinition) => - this.filterUndefinedId(viewDefinition) - ) - .map( - ( - viewDefinition: ViewDefinition, - index: number - ) => ( - - ) - ) - } - - - + + {helpers => { + const viewDefns = data.map( + (editorState: ViewEditorState) => + editorState.viewDefinition + ); + const filteredAndSorted = getFilteredAndSortedViewDefns( + viewDefns, + helpers.activeFilters, + helpers.currentSortType, + helpers.isSortAscending + ); + return ( + <> + + + + 0} + > + + } + errorChildren={} + > + {() => + filteredAndSorted + .filter( + ( + viewDefinition: ViewDefinition + ) => + this.filterUndefinedId( + viewDefinition + ) + ) + .map( + ( + viewDefinition: ViewDefinition, + index: number + ) => ( + + ) + ) + } + + + + ); + }} + ); }} - + ); }} - - ); - }} - - - )} - - ); - }} - + + + ); + }} + + ); + }} + + )} + ); } } diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx index 1c204aabafa..61fcbb9a831 100644 --- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx +++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx @@ -11,6 +11,7 @@ import { import { WithListViewToolbarHelpers, WithLoader } from '@syndesis/utils'; import * as React from 'react'; import { Translation } from 'react-i18next'; +import { UIContext } from '../../../app'; import i18n from '../../../i18n'; import { ApiError } from '../../../shared'; import resolvers from '../resolvers'; @@ -87,197 +88,283 @@ export class VirtualizationsPage extends React.Component { public render() { return ( - - {({ data, hasData, error, read }) => { - return ( - - {({ - deleteVirtualization, - publishVirtualization, - unpublishServiceVdb, - }) => { - const handleDelete = async (virtualizationName: string) => { - await deleteVirtualization(virtualizationName).then(read); - // TODO: post toast notification - }; - const handlePublish = async (virtualizationName: string) => { - await publishVirtualization(virtualizationName); - // TODO: post toast notification - }; - const handleUnpublish = async (serviceVdbName: string) => { - await unpublishServiceVdb(serviceVdbName); - // TODO: post toast notification - }; - return ( - - {helpers => { - const filteredAndSorted = getFilteredAndSortedVirtualizations( - data, - helpers.activeFilters, - helpers.currentSortType, - helpers.isSortAscending - ); + + {t => ( + + {({ pushNotification }) => { + return ( + + {({ data, hasData, error, read }) => { + return ( + + {({ + deleteVirtualization, + publishVirtualization, + unpublishServiceVdb, + }) => { + const handleDelete = async ( + virtualizationName: string + ) => { + try { + await deleteVirtualization( + virtualizationName + ).then(read); + pushNotification( + t( + 'virtualization.deleteVirtualizationSuccess', + { name: virtualizationName } + ), + 'success' + ); + } catch (error) { + const details = error.message + ? error.message + : ''; + pushNotification( + t('virtualization.deleteVirtualizationFailed', { + details, + name: virtualizationName, + }), + 'error' + ); + } + }; + const handlePublish = async ( + virtualizationName: string + ) => { + try { + await publishVirtualization(virtualizationName); - return ( - - {t => ( - 0} + pushNotification( + t( + 'virtualization.publishVirtualizationSuccess', + { name: virtualizationName } + ), + 'success' + ); + } catch (error) { + const details = error.message + ? error.message + : ''; + pushNotification( + t( + 'virtualization.publishVirtualizationFailed', + { name: virtualizationName, details } + ), + 'error' + ); + } + }; + const handleUnpublish = async ( + serviceVdbName: string + ) => { + try { + await unpublishServiceVdb(serviceVdbName); + + pushNotification( + t( + 'virtualization.unpublishVirtualizationSuccess', + { name: serviceVdbName } + ), + 'success' + ); + } catch (error) { + const details = error.message + ? error.message + : ''; + pushNotification( + t('virtualization.unpublishFailed', { + details, + name: serviceVdbName, + }), + 'error' + ); + } + }; + return ( + - - } - errorChildren={} - > - {() => - filteredAndSorted.map( - ( - virtualization: RestDataService, - index: number - ) => { - const publishingDetails = getPublishingDetails( - virtualization - ); - return ( - { + const filteredAndSorted = getFilteredAndSortedVirtualizations( + data, + helpers.activeFilters, + helpers.currentSortType, + helpers.isSortAscending + ); + + return ( + 0} + > + - ); - } - ) - } - - - )} - - ); - }} - - ); - }} - - ); - }} - + } + errorChildren={} + > + {() => + filteredAndSorted.map( + ( + virtualization: RestDataService, + index: number + ) => { + const publishingDetails = getPublishingDetails( + virtualization + ); + return ( + + ); + } + ) + } + + + ); + }} + + ); + }} + + ); + }} + + ); + }} + + )} + ); } } diff --git a/app/ui-react/syndesis/src/modules/data/pages/viewCreate/SelectNamePage.tsx b/app/ui-react/syndesis/src/modules/data/pages/viewCreate/SelectNamePage.tsx index fb2fc4f98f8..d8906480ddb 100644 --- a/app/ui-react/syndesis/src/modules/data/pages/viewCreate/SelectNamePage.tsx +++ b/app/ui-react/syndesis/src/modules/data/pages/viewCreate/SelectNamePage.tsx @@ -4,6 +4,8 @@ import { RestDataService, SchemaNodeInfo, ViewInfo } from '@syndesis/models'; import { ViewConfigurationForm, ViewCreateLayout } from '@syndesis/ui'; import { WithRouteData } from '@syndesis/utils'; import * as React from 'react'; +import { Translation } from 'react-i18next'; +import { UIContext } from '../../../../app'; import i18n from '../../../../i18n'; import { PageTitle } from '../../../../shared'; import resolvers from '../../../resolvers'; @@ -36,122 +38,153 @@ export class SelectNamePage extends React.Component { public render() { return ( - > - {( - { virtualizationId }, - { virtualization, schemaNodeInfo }, - { history } - ) => ( - - {({ refreshVirtualizationViews }) => { - const onSave = async ( - { name, description }: ISaveForm, - actions: any - ) => { - // ViewEditorState for the source - const viewEditorState = generateViewEditorState( - virtualization.serviceVdbName, - schemaNodeInfo, - name, - description - ); - await refreshVirtualizationViews(virtualization.keng__id, [ - viewEditorState, - ]); - // TODO: post toast notification - history.push( - resolvers.data.virtualizations.views.root({ virtualization }) - ); - }; - const definition: IFormDefinition = { - name: { - defaultValue: '', - displayName: i18n.t('data:virtualization.viewNameDisplay'), - required: true, - type: 'string', - }, - /* tslint:disable-next-line:object-literal-sort-keys */ - description: { - defaultValue: '', - displayName: i18n.t( - 'data:virtualization.viewDescriptionDisplay' - ), - type: 'textarea', - }, - }; + + {t => ( + + {({ pushNotification }) => { return ( - - {({ data, hasData, error }) => { - const validate = (v: { name: string }) => { - const errors: any = {}; - // TODO Improve name validation - if (v.name.includes('?')) { - errors.name = 'View name contains an illegal character'; - } - return errors; - }; - return ( - - i18nRequiredProperty={'* Required field'} - definition={definition} - initialValue={{ - description: '', - name: '', - }} - validate={validate} - onSave={onSave} - > - {({ - fields, - handleSubmit, - isSubmitting, - isValid, - submitForm, - }) => ( - } - content={ - <> - - > + {( + { virtualizationId }, + { virtualization, schemaNodeInfo }, + { history } + ) => ( + + {({ refreshVirtualizationViews }) => { + const onSave = async ( + { name, description }: ISaveForm, + actions: any + ) => { + // ViewEditorState for the source + const viewEditorState = generateViewEditorState( + virtualization.serviceVdbName, + schemaNodeInfo, + name, + description + ); + try { + await refreshVirtualizationViews( + virtualization.keng__id, + [viewEditorState] + ); + pushNotification( + t('virtualization.createViewSuccess', { + name: viewEditorState.viewDefinition.viewName, + }), + 'success' + ); + } catch (error) { + const details = error.message ? error.message : ''; + pushNotification( + t('virtualization.createViewFailed', { + details, + }), + 'error' + ); + } + history.push( + resolvers.data.virtualizations.views.root({ + virtualization, + }) + ); + }; + const definition: IFormDefinition = { + name: { + defaultValue: '', + displayName: i18n.t( + 'data:virtualization.viewNameDisplay' + ), + required: true, + type: 'string', + }, + /* tslint:disable-next-line:object-literal-sort-keys */ + description: { + defaultValue: '', + displayName: i18n.t( + 'data:virtualization.viewDescriptionDisplay' + ), + type: 'textarea', + }, + }; + return ( + + {({ data, hasData, error }) => { + const validate = (v: { name: string }) => { + const errors: any = {}; + // TODO Improve name validation + if (v.name.includes('?')) { + errors.name = + 'View name contains an illegal character'; + } + return errors; + }; + return ( + + i18nRequiredProperty={'* Required field'} + definition={definition} + initialValue={{ + description: '', + name: '', + }} + validate={validate} + onSave={onSave} > - {fields} - - - } - cancelHref={resolvers.data.virtualizations.views.root( - { - virtualization, - } - )} - backHref={resolvers.data.virtualizations.views.createView.selectSources( - { virtualization } - )} - onNext={submitForm} - isNextDisabled={!isValid} - isNextLoading={isSubmitting} - isLastStep={true} - /> - )} - - ); - }} - + {({ + fields, + handleSubmit, + isSubmitting, + isValid, + submitForm, + }) => ( + } + content={ + <> + + + {fields} + + + } + cancelHref={resolvers.data.virtualizations.views.root( + { + virtualization, + } + )} + backHref={resolvers.data.virtualizations.views.createView.selectSources( + { virtualization } + )} + onNext={submitForm} + isNextDisabled={!isValid} + isNextLoading={isSubmitting} + isLastStep={true} + /> + )} + + ); + }} + + ); + }} + + )} + ); }} - + )} - + ); } } diff --git a/app/ui-react/syndesis/src/modules/data/pages/viewsImport/SelectViewsPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/viewsImport/SelectViewsPage.tsx index caec4a97d81..dfad90e66e3 100644 --- a/app/ui-react/syndesis/src/modules/data/pages/viewsImport/SelectViewsPage.tsx +++ b/app/ui-react/syndesis/src/modules/data/pages/viewsImport/SelectViewsPage.tsx @@ -3,6 +3,8 @@ import { RestDataService, ViewEditorState, ViewInfo } from '@syndesis/models'; import { ViewsImportLayout } from '@syndesis/ui'; import { WithRouteData } from '@syndesis/utils'; import * as React from 'react'; +import { Translation } from 'react-i18next'; +import { UIContext } from '../../../../app'; import resolvers from '../../../resolvers'; import { ViewInfosContent, ViewsImportSteps } from '../../shared'; import { generateViewEditorStates } from '../../shared/VirtualizationUtils'; @@ -72,61 +74,93 @@ export class SelectViewsPage extends React.Component< public render() { return ( - > - {( - { virtualizationId }, - { virtualization, connectionId }, - { history } - ) => ( - - {({ refreshVirtualizationViews }) => { - const handleCreateViews = async () => { - const viewEditorStates = generateViewEditorStates( - virtualization.serviceVdbName, - this.selectedViews - ); - await refreshVirtualizationViews( - virtualization.keng__id, - viewEditorStates - ); - // TODO: post toast notification - history.push( - resolvers.data.virtualizations.views.root({ virtualization }) - ); - }; + + {t => ( + + {({ pushNotification }) => { return ( - - {({ data, hasData, error }) => ( - } - content={ - - } - cancelHref={resolvers.data.virtualizations.views.root({ - virtualization, - })} - backHref={resolvers.data.virtualizations.views.importSource.selectConnection( - { virtualization } - )} - onCreateViews={handleCreateViews} - isNextDisabled={!this.state.hasSelectedTables} - isNextLoading={false} - isLastStep={true} - /> + > + {( + { virtualizationId }, + { virtualization, connectionId }, + { history } + ) => ( + + {({ refreshVirtualizationViews }) => { + const handleCreateViews = async () => { + const viewEditorStates = generateViewEditorStates( + virtualization.serviceVdbName, + this.selectedViews + ); + try { + await refreshVirtualizationViews( + virtualization.keng__id, + viewEditorStates + ); + pushNotification( + t('virtualization.importViewsSuccess', { + name: virtualization.serviceVdbName, + }), + 'success' + ); + } catch (error) { + const details = error.message ? error.message : ''; + pushNotification( + t('virtualization.importViewsFailed', { + details, + name: virtualization.serviceVdbName, + }), + 'error' + ); + } + history.push( + resolvers.data.virtualizations.views.root({ + virtualization, + }) + ); + }; + return ( + + {({ data, hasData, error }) => ( + } + content={ + + } + cancelHref={resolvers.data.virtualizations.views.root( + { + virtualization, + } + )} + backHref={resolvers.data.virtualizations.views.importSource.selectConnection( + { virtualization } + )} + onCreateViews={handleCreateViews} + isNextDisabled={!this.state.hasSelectedTables} + isNextLoading={false} + isLastStep={true} + /> + )} + + ); + }} + )} - + ); }} - + )} - + ); } } diff --git a/app/ui-react/syndesis/src/modules/data/shared/WithVirtualizationSqlClientForm.tsx b/app/ui-react/syndesis/src/modules/data/shared/WithVirtualizationSqlClientForm.tsx index 303b4de9e1a..a1aefe74000 100644 --- a/app/ui-react/syndesis/src/modules/data/shared/WithVirtualizationSqlClientForm.tsx +++ b/app/ui-react/syndesis/src/modules/data/shared/WithVirtualizationSqlClientForm.tsx @@ -4,6 +4,8 @@ import * as H from '@syndesis/history'; import { QueryResults, ViewDefinition } from '@syndesis/models'; import { SqlClientContent, SqlClientForm } from '@syndesis/ui'; import * as React from 'react'; +import { Translation } from 'react-i18next'; +import { UIContext } from '../../../app'; import i18n from '../../../i18n'; import { getPreviewSql } from './VirtualizationUtils'; @@ -190,80 +192,113 @@ export class WithVirtualizationSqlClientForm extends React.Component< }; return ( - - {({ queryVirtualization }) => { - const doSubmit = async (value: any) => { - const viewDefn = this.props.views.find( - view => view.viewName === value.view - ); - let sqlStatement = ''; - if (viewDefn) { - sqlStatement = getPreviewSql(viewDefn); - } - const results: QueryResults = await queryVirtualization( - this.props.targetVdb, - sqlStatement, - value.rowLimit, - value.rowOffset - ); - this.setQueryResults(results); - }; - return ( - - {({ - fields, - handleSubmit, - isSubmitting, - isValid, - submitForm, - }) => ( - - {fields} - - } - viewNames={this.props.views.map( - (viewDefn: ViewDefinition) => viewDefn.viewName - )} - queryResultRows={this.buildRows(this.state.queryResults)} - queryResultCols={this.buildColumns(this.state.queryResults)} - targetVdb={'test'} - i18nEmptyStateInfo={i18n.t( - 'data:virtualization.viewEmptyStateInfo' - )} - i18nEmptyStateTitle={i18n.t( - 'data:virtualization.viewEmptyStateTitle' - )} - i18nImportViews={i18n.t( - 'data:virtualization.importDataSource' - )} - i18nImportViewsTip={i18n.t( - 'data:virtualization.importDataSourceTip' - )} - i18nCreateView={i18n.t('data:virtualization.createView')} - i18nCreateViewTip={i18n.t( - 'data:virtualization.createViewTip' - )} - linkCreateViewHRef={this.props.linkCreateView} - linkImportViewsHRef={this.props.linkImportViews} - i18nEmptyResultsTitle={i18n.t( - 'data:virtualization.queryResultsTableEmptyStateTitle' - )} - i18nEmptyResultsMsg={i18n.t( - 'data:virtualization.queryResultsTableEmptyStateInfo' - )} - /> - )} - - ); - }} - + + {t => ( + + {({ pushNotification }) => { + return ( + + {({ queryVirtualization }) => { + const doSubmit = async (value: any) => { + const viewDefn = this.props.views.find( + view => view.viewName === value.view + ); + try { + let sqlStatement = ''; + if (viewDefn) { + sqlStatement = getPreviewSql(viewDefn); + } + const results: QueryResults = await queryVirtualization( + this.props.targetVdb, + sqlStatement, + value.rowLimit, + value.rowOffset + ); + pushNotification( + t('virtualization.queryViewSuccess', { + name: value.viewName, + }), + 'success' + ); + this.setQueryResults(results); + } catch (error) { + const details = error.message ? error.message : ''; + pushNotification( + t('virtualization.queryViewFailed', { + details, + name: value.viewName, + }), + 'error' + ); + } + }; + return ( + + {({ + fields, + handleSubmit, + isSubmitting, + isValid, + submitForm, + }) => ( + + {fields} + + } + viewNames={this.props.views.map( + (viewDefn: ViewDefinition) => viewDefn.viewName + )} + queryResultRows={this.buildRows( + this.state.queryResults + )} + queryResultCols={this.buildColumns( + this.state.queryResults + )} + targetVdb={'test'} + i18nEmptyStateInfo={i18n.t( + 'data:virtualization.viewEmptyStateInfo' + )} + i18nEmptyStateTitle={i18n.t( + 'data:virtualization.viewEmptyStateTitle' + )} + i18nImportViews={i18n.t( + 'data:virtualization.importDataSource' + )} + i18nImportViewsTip={i18n.t( + 'data:virtualization.importDataSourceTip' + )} + i18nCreateView={i18n.t( + 'data:virtualization.createView' + )} + i18nCreateViewTip={i18n.t( + 'data:virtualization.createViewTip' + )} + linkCreateViewHRef={this.props.linkCreateView} + linkImportViewsHRef={this.props.linkImportViews} + i18nEmptyResultsTitle={i18n.t( + 'data:virtualization.queryResultsTableEmptyStateTitle' + )} + i18nEmptyResultsMsg={i18n.t( + 'data:virtualization.queryResultsTableEmptyStateInfo' + )} + /> + )} + + ); + }} + + ); + }} + + )} + ); } }