{children && React.cloneElement(children, this.props)}
;
+ }
+}
+
+FunctionWrapper.propTypes = {
+ children: PropTypes.node,
+};
+
+const mapStateToProps = state => {
+ return {
+ functionList: state.tables.postgresFunctions,
+ functions: {
+ ...state.functions,
+ },
+ migrationMode: state.main.migrationMode,
+ };
+};
+
+const functionWrapperConnector = connect =>
+ connect(mapStateToProps)(FunctionWrapper);
+
+export default functionWrapperConnector;
diff --git a/console/src/components/Services/Data/Function/Modify/ModifyCustomFunction.js b/console/src/components/Services/Data/Function/Modify/ModifyCustomFunction.js
new file mode 100644
index 0000000000000..bfa752e5f80dd
--- /dev/null
+++ b/console/src/components/Services/Data/Function/Modify/ModifyCustomFunction.js
@@ -0,0 +1,208 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Helmet from 'react-helmet';
+import { push } from 'react-router-redux';
+import CommonTabLayout from '../../../Layout/CommonTabLayout/CommonTabLayout';
+
+import _push from '../../push';
+import { pageTitle, appPrefix } from './constants';
+
+import tabInfo from './tabInfo';
+import globals from '../../../../../Globals';
+
+const prefixUrl = globals.urlPrefix + appPrefix;
+
+import ReusableTextAreaWithCopy from '../../../Layout/ReusableTextAreaWithCopy/ReusableTextAreaWithCopy';
+
+import {
+ fetchCustomFunction,
+ deleteFunctionSql,
+ unTrackCustomFunction,
+} from '../customFunctionReducer';
+
+import { SET_SQL } from '../../RawSQL/Actions';
+
+class ModifyCustomFunction extends React.Component {
+ constructor() {
+ super();
+ this.state = {};
+ this.state.deleteConfirmationError = null;
+ }
+ componentDidMount() {
+ const { functionName, schema } = this.props.params;
+ if (!functionName) {
+ this.props.dispatch(push(prefixUrl));
+ }
+ Promise.all([
+ this.props.dispatch(fetchCustomFunction(functionName, schema)),
+ ]);
+ }
+ loadRunSQLAndLoadPage() {
+ const { functionDefinition } = this.props.functions;
+ Promise.all([
+ this.props.dispatch({ type: SET_SQL, data: functionDefinition }),
+ this.props.dispatch(_push('/sql')),
+ ]);
+ }
+ updateDeleteConfirmationError(data) {
+ this.setState({ ...this.state, deleteConfirmationError: data });
+ }
+ handleUntrackCustomFunction(e) {
+ e.preventDefault();
+ this.props.dispatch(unTrackCustomFunction());
+ }
+ handleDeleteCustomFunction(e) {
+ e.preventDefault();
+ const a = prompt(
+ 'Are you absolutely sure?\nThis action cannot be undone. This will permanently delete function. Please type "DELETE" (in caps, without quotes) to confirm.\n'
+ );
+ try {
+ if (a && typeof a === 'string' && a.trim() === 'DELETE') {
+ this.updateDeleteConfirmationError(null);
+ this.props.dispatch(deleteFunctionSql());
+ } else {
+ // Input didn't match
+ // Show an error message right next to the button
+ this.updateDeleteConfirmationError('user confirmation error!');
+ }
+ } catch (err) {
+ console.error(err);
+ }
+ }
+ render() {
+ const styles = require('./ModifyCustomFunction.scss');
+ const {
+ functionSchema: schema,
+ functionName,
+ functionDefinition,
+ isRequesting,
+ isDeleting,
+ isUntracking,
+ isFetching,
+ } = this.props.functions;
+
+ const { migrationMode } = this.props;
+
+ const baseUrl = `${appPrefix}/schema/${schema}/functions/${functionName}`;
+
+ const generateMigrateBtns = () => {
+ return (
+
+
+
+
+ {this.state.deleteConfirmationError ? (
+
+ * {this.state.deleteConfirmationError}
+
+ ) : null}
+
+ );
+ };
+ const breadCrumbs = [
+ {
+ title: 'Data',
+ url: appPrefix,
+ },
+ {
+ title: 'Schema',
+ url: appPrefix + '/schema',
+ },
+ {
+ title: schema,
+ url: appPrefix + '/schema/' + schema,
+ },
+ ];
+
+ if (functionName) {
+ breadCrumbs.push({
+ title: functionName,
+ url: appPrefix + '/schema/' + schema + '/functions/' + functionName,
+ });
+ breadCrumbs.push({
+ title: 'Modify',
+ url: '',
+ });
+ }
+ return (
+
+
+ {/* +
, generateMigrateBtns()] + : null} +
+ );
+ }
+}
+
+ModifyCustomFunction.propTypes = {
+ functions: PropTypes.array.isRequired,
+};
+
+export default ModifyCustomFunction;
diff --git a/console/src/components/Services/Data/Function/Modify/ModifyCustomFunction.scss b/console/src/components/Services/Data/Function/Modify/ModifyCustomFunction.scss
new file mode 100644
index 0000000000000..b8ed2d8d22dcf
--- /dev/null
+++ b/console/src/components/Services/Data/Function/Modify/ModifyCustomFunction.scss
@@ -0,0 +1,51 @@
+@import '../../../../Common/Common.scss';
+
+.modifyWrapper {
+ .commonBtn
+ {
+ // padding: 20px 0;
+ // padding-top: 40px;
+ .delete_confirmation_error {
+ margin-left: 15px;
+ color: #d9534f;
+ }
+ .yellow_button
+ {
+ margin-right: 20px;
+ }
+ .red_button {
+ margin-right: 20px;
+ color: #FFF;
+ }
+ .no_mr_right {
+ margin-right: 0px;
+ }
+ .white_button {
+ margin-right: 20px;
+ color: #333;
+ &:hover {
+ background-color: #d4d4d4;
+ }
+ border-color: #8c8c8c;
+ }
+ a
+ {
+ // margin-left: 20px;
+ }
+ .refresh_schema_btn {
+ margin-left: 20px;
+ }
+ span
+ {
+ i
+ {
+ cursor: pointer;
+ margin-left: 10px;
+ }
+ }
+ }
+ .sqlBlock {
+ position: relative;
+ width: 100%;
+ }
+}
diff --git a/console/src/components/Services/Data/Function/Modify/constants.js b/console/src/components/Services/Data/Function/Modify/constants.js
new file mode 100644
index 0000000000000..a8a05cb1fb2ba
--- /dev/null
+++ b/console/src/components/Services/Data/Function/Modify/constants.js
@@ -0,0 +1,4 @@
+const pageTitle = 'Custom Function';
+const appPrefix = '/data';
+
+export { pageTitle, appPrefix };
diff --git a/console/src/components/Services/Data/Function/Modify/tabInfo.js b/console/src/components/Services/Data/Function/Modify/tabInfo.js
new file mode 100644
index 0000000000000..addc491ea6b93
--- /dev/null
+++ b/console/src/components/Services/Data/Function/Modify/tabInfo.js
@@ -0,0 +1,10 @@
+const tabInfo = {
+ modify: {
+ display_text: 'Modify',
+ },
+ permissions: {
+ display_text: 'Permissions',
+ },
+};
+
+export default tabInfo;
diff --git a/console/src/components/Services/Data/Function/Permission/Permission.js b/console/src/components/Services/Data/Function/Permission/Permission.js
new file mode 100644
index 0000000000000..2c4ee9fbf3a09
--- /dev/null
+++ b/console/src/components/Services/Data/Function/Permission/Permission.js
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import Helmet from 'react-helmet';
+import CommonTabLayout from '../../../Layout/CommonTabLayout/CommonTabLayout';
+import { Link } from 'react-router';
+import { push } from 'react-router-redux';
+
+import { pageTitle, appPrefix } from '../Modify/constants';
+
+import tabInfo from '../Modify/tabInfo';
+import globals from '../../../../../Globals';
+
+const prefixUrl = globals.urlPrefix + appPrefix;
+
+import { fetchCustomFunction } from '../customFunctionReducer';
+
+class Permission extends React.Component {
+ componentDidMount() {
+ const { functionName } = this.props.params;
+ if (!functionName) {
+ this.props.dispatch(push(prefixUrl));
+ }
+ Promise.all([this.props.dispatch(fetchCustomFunction(functionName))]);
+ }
+ render() {
+ const styles = require('../Modify/ModifyCustomFunction.scss');
+ const {
+ functionSchema: schema,
+ functionName,
+ setOffTable,
+ } = this.props.functions;
+ const baseUrl = `${appPrefix}/schema/${schema}/functions/${functionName}`;
+ const permissionTableUrl = `${appPrefix}/schema/${schema}/tables/${setOffTable}/permissions`;
+
+ const breadCrumbs = [
+ {
+ title: 'Data',
+ url: appPrefix,
+ },
+ {
+ title: 'Schema',
+ url: appPrefix + '/schema',
+ },
+ {
+ title: schema,
+ url: appPrefix + '/schema/' + schema,
+ },
+ ];
+
+ if (functionName) {
+ breadCrumbs.push({
+ title: functionName,
+ url: appPrefix + '/schema/' + schema + '/functions/' + functionName,
+ });
+ breadCrumbs.push({
+ title: 'Permission',
+ url: '',
+ });
+ }
+ return (
+ + {/* +
Function Definition:
+ */} +
+
+ {migrationMode
+ ? [, generateMigrateBtns()] + : null} +
+
+
+ );
+ }
+}
+
+export default Permission;
diff --git a/console/src/components/Services/Data/Function/customFunctionReducer.js b/console/src/components/Services/Data/Function/customFunctionReducer.js
new file mode 100644
index 0000000000000..ef6e89d493643
--- /dev/null
+++ b/console/src/components/Services/Data/Function/customFunctionReducer.js
@@ -0,0 +1,365 @@
+/* Import default State */
+
+import { functionData } from './customFunctionState';
+
+import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+
+import requestAction from '../../../../utils/requestAction';
+import dataHeaders from '../Common/Headers';
+
+import globals from '../../../../Globals';
+
+import returnMigrateUrl from '../Common/getMigrateUrl';
+import { SERVER_CONSOLE_MODE } from '../../../../constants';
+import { loadMigrationStatus } from '../../../Main/Actions';
+import { handleMigrationErrors } from '../../EventTrigger/EventActions';
+
+import { showSuccessNotification } from '../Notification';
+// import { push } from 'react-router-redux';
+
+import { fetchTrackedFunctions } from '../DataActions';
+
+import _push from '../push';
+
+/* Constants */
+
+const RESET = '@customFunction/RESET';
+const FETCHING_INDIV_CUSTOM_FUNCTION =
+ '@customFunction/FETCHING_INDIV_CUSTOM_FUNCTION';
+const CUSTOM_FUNCTION_FETCH_SUCCESS =
+ '@customFunction/CUSTOM_FUNCTION_FETCH_SUCCESS';
+const CUSTOM_FUNCTION_FETCH_FAIL = '@customFunction/CUSTOM_FUNCTION_FETCH_FAIL';
+const DELETING_CUSTOM_FUNCTION = '@customFunction/DELETING_CUSTOM_FUNCTION';
+const DELETE_CUSTOM_FUNCTION_FAIL =
+ '@customFunction/DELETE_CUSTOM_FUNCTION_FAIL';
+
+const UNTRACKING_CUSTOM_FUNCTION = '@customFunction/UNTRACKING_CUSTOM_FUNCTION';
+const UNTRACK_CUSTOM_FUNCTION_FAIL =
+ '@customFunction/UNTRACK_CUSTOM_FUNCTION_FAIL';
+
+/* */
+
+const makeRequest = (
+ upQueries,
+ downQueries,
+ migrationName,
+ customOnSuccess,
+ customOnError,
+ requestMsg,
+ successMsg,
+ errorMsg
+) => {
+ return (dispatch, getState) => {
+ const upQuery = {
+ type: 'bulk',
+ args: upQueries,
+ };
+
+ const downQuery = {
+ type: 'bulk',
+ args: downQueries,
+ };
+
+ const migrationBody = {
+ name: migrationName,
+ up: upQuery.args,
+ down: downQuery.args,
+ };
+
+ const currMigrationMode = getState().main.migrationMode;
+
+ const migrateUrl = returnMigrateUrl(currMigrationMode);
+
+ let finalReqBody;
+ if (globals.consoleMode === SERVER_CONSOLE_MODE) {
+ finalReqBody = upQuery;
+ } else if (globals.consoleMode === 'cli') {
+ finalReqBody = migrationBody;
+ }
+ const url = migrateUrl;
+ const options = {
+ method: 'POST',
+ credentials: globalCookiePolicy,
+ headers: dataHeaders(getState),
+ body: JSON.stringify(finalReqBody),
+ };
+
+ const onSuccess = data => {
+ if (globals.consoleMode === 'cli') {
+ dispatch(loadMigrationStatus()); // don't call for server mode
+ }
+ if (successMsg) {
+ dispatch(showSuccessNotification(successMsg));
+ }
+ customOnSuccess(data);
+ };
+
+ const onError = err => {
+ dispatch(handleMigrationErrors(errorMsg, err));
+ customOnError(err);
+ };
+
+ dispatch(showSuccessNotification(requestMsg));
+ return dispatch(requestAction(url, options)).then(onSuccess, onError);
+ };
+};
+
+/* Action creators */
+const fetchCustomFunction = (functionName, schema) => {
+ return (dispatch, getState) => {
+ const url = Endpoints.getSchema;
+ const fetchCustomFunctionQuery = {
+ type: 'select',
+ args: {
+ table: {
+ name: 'hdb_function',
+ schema: 'hdb_catalog',
+ },
+ columns: ['*'],
+ where: {
+ function_schema: schema,
+ function_name: functionName,
+ },
+ },
+ };
+ const fetchCustomFunctionDefinition = {
+ type: 'select',
+ args: {
+ table: {
+ name: 'hdb_function_agg',
+ schema: 'hdb_catalog',
+ },
+ columns: ['*'],
+ where: {
+ function_schema: schema,
+ function_name: functionName,
+ },
+ },
+ };
+
+ const bulkQuery = {
+ type: 'bulk',
+ args: [fetchCustomFunctionQuery, fetchCustomFunctionDefinition],
+ };
+ const options = {
+ credentials: globalCookiePolicy,
+ method: 'POST',
+ headers: dataHeaders(getState),
+ body: JSON.stringify(bulkQuery),
+ };
+ dispatch({ type: FETCHING_INDIV_CUSTOM_FUNCTION });
+ return dispatch(requestAction(url, options)).then(
+ data => {
+ if (data[0].length > 0 && data[1].length > 0) {
+ dispatch({
+ type: CUSTOM_FUNCTION_FETCH_SUCCESS,
+ data: [[...data[0]], [...data[1]]],
+ });
+ return Promise.resolve();
+ }
+ return dispatch(_push('/'));
+ },
+ error => {
+ console.error('Failed to fetch resolver' + JSON.stringify(error));
+ return dispatch({ type: CUSTOM_FUNCTION_FETCH_FAIL, data: error });
+ }
+ );
+ };
+};
+
+const deleteFunctionSql = () => {
+ return (dispatch, getState) => {
+ const currentSchema = getState().tables.currentSchema;
+ const functionName = getState().functions.functionName;
+ const functionDefinition = getState().functions.functionDefinition;
+ const sqlDropFunction =
+ 'DROP FUNCTION ' +
+ '"' +
+ currentSchema +
+ '"' +
+ '.' +
+ '"' +
+ functionName +
+ '"';
+ const sqlUpQueries = [
+ {
+ type: 'run_sql',
+ args: { sql: sqlDropFunction },
+ },
+ ];
+ const sqlDownQueries = [];
+ if (functionDefinition && functionDefinition.length > 0) {
+ sqlDownQueries.push({
+ type: 'run_sql',
+ args: { sql: functionDefinition },
+ });
+ }
+
+ // Apply migrations
+ const migrationName = 'drop_function_' + currentSchema + '_' + functionName;
+
+ const requestMsg = 'Deleting function...';
+ const successMsg = 'Function deleted';
+ const errorMsg = 'Deleting function failed';
+
+ const customOnSuccess = () => {
+ dispatch(_push('/'));
+ };
+ const customOnError = () => {};
+
+ dispatch({ type: DELETING_CUSTOM_FUNCTION });
+ return dispatch(
+ makeRequest(
+ sqlUpQueries,
+ sqlDownQueries,
+ migrationName,
+ customOnSuccess,
+ customOnError,
+ requestMsg,
+ successMsg,
+ errorMsg
+ )
+ );
+ };
+};
+
+const unTrackCustomFunction = () => {
+ return (dispatch, getState) => {
+ const currentSchema = getState().tables.currentSchema;
+ const functionName = getState().functions.functionName;
+ // const url = Endpoints.getSchema;
+ /*
+ const customFunctionObj = {
+ function_name: functionName,
+ };
+ */
+ const migrationName = 'remove_custom_function_' + functionName;
+ const payload = {
+ type: 'untrack_function',
+ args: {
+ name: functionName,
+ schema: currentSchema,
+ },
+ };
+ const downPayload = {
+ type: 'track_function',
+ args: {
+ name: functionName,
+ schema: currentSchema,
+ },
+ };
+
+ const upQueryArgs = [];
+ upQueryArgs.push(payload);
+ const downQueryArgs = [];
+ downQueryArgs.push(downPayload);
+ const upQuery = {
+ type: 'bulk',
+ args: upQueryArgs,
+ };
+ const downQuery = {
+ type: 'bulk',
+ args: downQueryArgs,
+ };
+ const requestMsg = 'Deleting custom function...';
+ const successMsg = 'Custom function deleted successfully';
+ const errorMsg = 'Delete custom function failed';
+
+ const customOnSuccess = () => {
+ // dispatch({ type: REQUEST_SUCCESS });
+ Promise.all([
+ dispatch({ type: RESET }),
+ dispatch(_push('/')),
+ dispatch(fetchTrackedFunctions()),
+ ]);
+ };
+ const customOnError = error => {
+ Promise.all([
+ dispatch({ type: UNTRACK_CUSTOM_FUNCTION_FAIL, data: error }),
+ ]);
+ };
+
+ dispatch({ type: UNTRACKING_CUSTOM_FUNCTION });
+ return dispatch(
+ makeRequest(
+ upQuery.args,
+ downQuery.args,
+ migrationName,
+ customOnSuccess,
+ customOnError,
+ requestMsg,
+ successMsg,
+ errorMsg
+ )
+ );
+ };
+};
+
+/* */
+
+/* Reducer */
+
+const customFunctionReducer = (state = functionData, action) => {
+ switch (action.type) {
+ case RESET:
+ return {
+ ...functionData,
+ };
+ case FETCHING_INDIV_CUSTOM_FUNCTION:
+ return {
+ ...state,
+ isFetching: true,
+ isFetchError: null,
+ };
+ case CUSTOM_FUNCTION_FETCH_SUCCESS:
+ return {
+ ...state,
+ functionName: action.data[0][0].function_name,
+ functionSchema: action.data[0][0].function_schema || null,
+ functionDefinition: action.data[1][0].function_definition || null,
+ setOffTable: action.data[1][0].return_type_name || null,
+ isFetching: false,
+ isFetchError: null,
+ };
+ case CUSTOM_FUNCTION_FETCH_FAIL:
+ return {
+ ...state,
+ isFetching: false,
+ isFetchError: action.data,
+ };
+ case DELETE_CUSTOM_FUNCTION_FAIL:
+ return {
+ ...state,
+ isDeleting: false,
+ isError: action.data,
+ };
+ case DELETING_CUSTOM_FUNCTION:
+ return {
+ ...state,
+ isDeleting: true,
+ isError: null,
+ };
+
+ case UNTRACK_CUSTOM_FUNCTION_FAIL:
+ return {
+ ...state,
+ isUntracking: false,
+ isError: action.data,
+ };
+ case UNTRACKING_CUSTOM_FUNCTION:
+ return {
+ ...state,
+ isUntracking: true,
+ isError: null,
+ };
+ default:
+ return {
+ ...state,
+ };
+ }
+};
+
+/* End of it */
+
+export { RESET, fetchCustomFunction, deleteFunctionSql, unTrackCustomFunction };
+export default customFunctionReducer;
diff --git a/console/src/components/Services/Data/Function/customFunctionState.js b/console/src/components/Services/Data/Function/customFunctionState.js
new file mode 100644
index 0000000000000..7ee95fbe7e999
--- /dev/null
+++ b/console/src/components/Services/Data/Function/customFunctionState.js
@@ -0,0 +1,18 @@
+const asyncState = {
+ isRequesting: false,
+ isUntracking: false,
+ isDeleting: false,
+ isError: false,
+ isFetching: false,
+ isFetchError: null,
+};
+
+const functionData = {
+ functionName: '',
+ functionSchema: '',
+ functionDefinition: '',
+ setOffTable: '',
+ ...asyncState,
+};
+
+export { functionData };
diff --git a/console/src/components/Services/Data/PageContainer/PageContainer.js b/console/src/components/Services/Data/PageContainer/PageContainer.js
index 101acb69f2c9c..096ac2014dceb 100644
--- a/console/src/components/Services/Data/PageContainer/PageContainer.js
+++ b/console/src/components/Services/Data/PageContainer/PageContainer.js
@@ -6,27 +6,38 @@ import { Link } from 'react-router';
import globals from '../../../../Globals';
import Button from '../../Layout/Button/Button';
-import { LISTING_SCHEMA } from '../DataActions';
+import { LISTING_SCHEMA, UPDATE_TRACKED_FUNCTIONS } from '../DataActions';
+import semverCheck from '../../../../helpers/semver';
const appPrefix = '/data';
const PageContainer = ({
schema,
listingSchema,
+ functionsList,
+ listedFunctions,
currentTable,
schemaName,
migrationMode,
children,
dispatch,
location,
+ currentFunction,
+ serverVersion,
}) => {
const styles = require('./PageContainer.scss');
+ const functionSymbol = require('./function.svg');
+ const functionSymbolActive = require('./function_high.svg');
+
+ const handleFunc = semverCheck('customFunctionSection', serverVersion)
+ ? true
+ : false;
// Now schema might be null or an empty array
- let tableLinks = (
- +
+ Note: Permission defined for the setof table, {`${setOffTable}`}, are + applicable to the data returned by this function +
+
+
+
+
+
+ +
+ 
+
+ {f.function_name}
+
+ Track table{' '}
- checkbox below.
+ If you plan to create a Table/View
+ {functionText ? '/' + functionText : ''} using Raw SQL, remember
+ to link it to Hasura DB by checking the{' '}
+ Track {placeholderText} checkbox below.
+
+
+ Current postgres schema
+
+
+
+ -
-
+ Track supported functions to query them with GraphQL
+
+);
+
+export const nonTrackableFunctions = (
+ WIP
+);
diff --git a/console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css b/console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css
index 8e698cbb4fb60..8db330ee7dfe4 100644
--- a/console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css
+++ b/console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css
@@ -50,14 +50,12 @@
background-color: #ebf7de;
}
-.ReactTable .rt-table .rt-tbody
-{
+.ReactTable .rt-table .rt-tbody {
margin-bottom: 10px;
}
-.ReactTable .rt-tbody .rt-tr-group:last-child
-{
- border-bottom: solid 1px rgba(0,0,0,0.05);
+.ReactTable .rt-tbody .rt-tr-group:last-child {
+ border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-even:hover {
background-color: #ebf7de;
diff --git a/console/src/components/Services/Data/index.js b/console/src/components/Services/Data/index.js
index a83df28ac86d8..b31d0da28e42a 100644
--- a/console/src/components/Services/Data/index.js
+++ b/console/src/components/Services/Data/index.js
@@ -28,6 +28,12 @@ export dataReducer from './DataReducer';
export metadataConnector from './Metadata/Metadata.js';
+/* Function component */
+
+export functionWrapperConnector from './Function/FunctionWrapper';
+export ModifyCustomFunction from './Function/Modify/ModifyCustomFunction';
+export PermissionCustomFunction from './Function/Permission/Permission';
+
/*
export Logs from './Logs/Logs';
export BrowseTemplates from './QueryTemplates/BrowseTemplates';
diff --git a/console/src/components/Services/Layout/CommonTabLayout/CommonTabLayout.js b/console/src/components/Services/Layout/CommonTabLayout/CommonTabLayout.js
index 72f8500fb9023..902a14921ca89 100644
--- a/console/src/components/Services/Layout/CommonTabLayout/CommonTabLayout.js
+++ b/console/src/components/Services/Layout/CommonTabLayout/CommonTabLayout.js
@@ -14,6 +14,7 @@ class CommonTabLayout extends React.Component {
tabsInfo,
baseUrl,
showLoader,
+ testPrefix,
} = this.props;
return (
@@ -28,6 +29,7 @@ class CommonTabLayout extends React.Component {
tabsInfo={tabsInfo}
baseUrl={baseUrl}
showLoader={showLoader}
+ testPrefix={testPrefix}
/>
);
diff --git a/console/src/components/Services/Layout/ReusableTabs/ReusableTabs.js b/console/src/components/Services/Layout/ReusableTabs/ReusableTabs.js
index ee5e9aa5b0a9a..58123cdcb9d54 100644
--- a/console/src/components/Services/Layout/ReusableTabs/ReusableTabs.js
+++ b/console/src/components/Services/Layout/ReusableTabs/ReusableTabs.js
@@ -1,7 +1,15 @@
import React from 'react';
import { Link } from 'react-router';
-const Tabs = ({ appPrefix, tabsInfo, tabName, count, baseUrl, showLoader }) => {
+const Tabs = ({
+ appPrefix,
+ tabsInfo,
+ tabName,
+ count,
+ baseUrl,
+ showLoader,
+ testPrefix,
+}) => {
let showCount = '';
if (!(count === null || count === undefined)) {
showCount = '(' + count + ')';
@@ -25,7 +33,9 @@ const Tabs = ({ appPrefix, tabsInfo, tabName, count, baseUrl, showLoader }) => {
>
{tabsInfo[t].display_text} {tabName === t ? showCount : null}
{tabName === t && showLoader ? dataLoader() : null}
diff --git a/console/src/components/Services/Layout/ReusableTextAreaWithCopy/ReusableTextAreaWithCopy.js b/console/src/components/Services/Layout/ReusableTextAreaWithCopy/ReusableTextAreaWithCopy.js
new file mode 100644
index 0000000000000..d507d67b4ce9b
--- /dev/null
+++ b/console/src/components/Services/Layout/ReusableTextAreaWithCopy/ReusableTextAreaWithCopy.js
@@ -0,0 +1,93 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+class ReusableTextAreaWithCopy extends React.Component {
+ copyToClip(type, id) {
+ let text = '';
+ if (this.props.copyText.length > 0) {
+ text = window.sqlFormatter
+ ? window.sqlFormatter.format(this.props.copyText, {
+ language: this.props.textLanguage,
+ })
+ : this.props.copyText;
+ }
+ const textArea = document.createElement('textarea');
+ textArea.value = text;
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
+
+ try {
+ const successful = document.execCommand('copy');
+ // const msg = successful ? 'successful' : 'unsuccessful';
+ const tooltip = document.getElementById(id);
+ tooltip.innerHTML = 'Copied';
+ if (!successful) {
+ throw new Error('Copy was unsuccessful');
+ }
+ } catch (err) {
+ alert('Oops, unable to copy - ' + err);
+ }
+ document.body.removeChild(textArea);
+ }
+ resetCopy(id) {
+ const tooltip = document.getElementById(id);
+ tooltip.innerHTML = 'Copy';
+ }
+ render() {
+ const style = require('./style.scss');
+ const { copyText } = this.props;
+ return (
+
-
-
-
-
);
@@ -226,6 +384,10 @@ const mapStateToProps = state => ({
migrationMode: state.main.migrationMode,
untrackedRelations: state.tables.untrackedRelations,
currentSchema: state.tables.currentSchema,
+ functionsList: [...state.tables.postgresFunctions],
+ nonTrackableFunctionsList: [...state.tables.nonTrackablePostgresFunctions],
+ trackedFunctions: [...state.tables.trackedFunctions],
+ serverVersion: state.main.serverVersion ? state.main.serverVersion : '',
});
const schemaConnector = connect => connect(mapStateToProps)(Schema);
diff --git a/console/src/components/Services/Data/Schema/Tooltips.js b/console/src/components/Services/Data/Schema/Tooltips.js
index e3eac2e439d93..6ebd9b0000d10 100644
--- a/console/src/components/Services/Data/Schema/Tooltips.js
+++ b/console/src/components/Services/Data/Schema/Tooltips.js
@@ -32,3 +32,13 @@ export const quickDefaultReadOnly = (
The selected role can perform select on all rows of the table.
);
+
+export const trackableFunctions = (
+ - Untracked foreign-key relations -
-
-
, +
, +
-
+
+
+
+
+
+
+ {trackableFuncs.length > 0
+ ? [
+ + Untracked foreign-key relations +
+
+
+
, +
+
+
+
+
,
+ ]
+ : null}
+
+ {/* nonTrackableFunctionsList.length > 0
+ ? [
+ + Untracked custom functions +
+
+ {trackableFuncs.map((p, i) => (
+
+
+
+ ))}
+
+
+
+
+ {p.function_name}
+
+ , +
+
+
+
+
,
+ ]
+ : null */}
+ Non trackable custom functions +
+
+ {nonTrackableFunctionsList.map((p, i) => (
+
+
+
+ ))}
+
+ {p.function_name}
+
+
+
+ );
+ }
+}
+
+ReusableTextAreaWithCopy.propTypes = {
+ copyText: PropTypes.string.isRequired,
+ textLanguage: PropTypes.string,
+};
+
+export default ReusableTextAreaWithCopy;
diff --git a/console/src/components/Services/Layout/ReusableTextAreaWithCopy/style.scss b/console/src/components/Services/Layout/ReusableTextAreaWithCopy/style.scss
new file mode 100644
index 0000000000000..a176440ca1c7d
--- /dev/null
+++ b/console/src/components/Services/Layout/ReusableTextAreaWithCopy/style.scss
@@ -0,0 +1,104 @@
+.sqlBlock {
+ position: relative;
+ width: 80%;
+}
+.codeBlockCustom
+{
+ /* position: relative;
+ padding: 10px 20px; */
+ background-color: white;
+ /* margin: 20px;
+ width: 100%; */
+ width: auto;
+ border-radius: 5px;
+ // max-height: calc(100% - 60px);
+ overflow: auto;
+ margin-top: 0px;
+ // min-height: calc(100% - 60px);
+}
+
+.codeBlockCustom pre {
+ display: block;
+ padding: 10px 20px;
+ margin: 0px;
+ font-size: 13px;
+ line-height: unset;
+ word-break: unset;
+ word-wrap: unset;
+ color: #000;
+ background: none;
+ border: none;
+ border-radius: 0;
+ overflow: unset;
+ padding-bottom: 10px;
+}
+
+.codeBlockCustom code {
+ color: #000;
+ background: none;
+}
+
+.codeBlockCustom .formattedCode {
+ padding: 0px 0px !important;
+}
+
+.copyGenerated
+{
+ position: absolute;
+ bottom: 15px;
+ right: 30px;
+ cursor: pointer;
+}
+.copyGenerated img, .copyExecution img
+{
+ width: 20px;
+ opacity: .6;
+}
+.copyGenerated img:hover, .copyExecution img:hover
+{
+ opacity: 1;
+}
+.copyGenerated:focus, .copyExecution:focus
+{
+ outline: none;
+}
+
+.copyTooltip {
+ position: relative;
+ display: inline-block;
+}
+
+.copyTooltip .tooltiptext {
+ background-color: #555;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 4px 0px;
+ font-size: 14px;
+ position: absolute;
+ z-index: 1000000000;
+ right: -21px;
+ bottom: 30px;
+ opacity: 0;
+ -webkit-transition: opacity 0.3s;
+ transition: opacity 0.3s;
+ display: none;
+ width: 57px;
+}
+
+.copyTooltip .tooltiptext::after {
+ content: "";
+ position: absolute;
+ top: 24px;
+ right: 22px;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: #555 transparent transparent transparent;
+}
+
+.copyTooltip:hover .tooltiptext {
+ visibility: visible;
+ opacity: 1;
+ display: block;
+}
diff --git a/console/src/helpers/semver.js b/console/src/helpers/semver.js
index 765b4a5815421..a89af61509cad 100644
--- a/console/src/helpers/semver.js
+++ b/console/src/helpers/semver.js
@@ -13,6 +13,7 @@ const componentsSemver = {
webhookEnvSupport: '1.0.0-alpha29',
insertPermRestrictColumns: '1.0.0-alpha28',
permHideUpsertSection: '1.0.0-alpha32',
+ customFunctionSection: '1.0.0-alpha36',
};
const getPreRelease = version => {
diff --git a/docs/graphql/manual/api-reference/schema-metadata-api/custom-functions.rst b/docs/graphql/manual/api-reference/schema-metadata-api/custom-functions.rst
new file mode 100644
index 0000000000000..25b12937ed4f4
--- /dev/null
+++ b/docs/graphql/manual/api-reference/schema-metadata-api/custom-functions.rst
@@ -0,0 +1,78 @@
+Schema/Metadata API Reference: Custom Functions
+===============================================
+
+.. contents:: Table of contents
+ :backlinks: none
+ :depth: 1
+ :local:
+
+Add or remove a custom SQL function to Hasura GraphQL Engine's metadata using following API.
+
+.. Note::
+
+ Only custom functions added to metadata are available for ``querying/subscribing`` data over **GraphQL** API.
+
+.. _track_function:
+
+track_function
+--------------
+
+``track_function`` is used to add a custom SQL function.
+
+Refer :ref:`this
+
+
+ {window && window.sqlFormatter && window.hljs ? (
+
+
+ Copy
+
+
+ {/*
+ onClick={this.copyToClip.bind(this, 'plan', 'copyPlan')}
+ onMouseLeave={this.resetCopy.bind(this, 'copyPlan')}
+ */}
+
+
+
+ ) : (
+
+ {copyText}
+
+ )}
+