mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 17:31:56 +03:00
parent
41f35c684e
commit
ad3cfb4681
@ -20,6 +20,7 @@ This release contains the [PDV refactor (#4111)](https://github.com/hasura/graph
|
|||||||
- server: miscellaneous description changes (#4111)
|
- server: miscellaneous description changes (#4111)
|
||||||
- server: treat the absence of `backend_only` configuration and `backend_only: false` equally (closing #5059) (#4111)
|
- server: treat the absence of `backend_only` configuration and `backend_only: false` equally (closing #5059) (#4111)
|
||||||
- console: allow user to cascade Postgres dependencies when dropping Postgres objects (close #5109) (#5248)
|
- console: allow user to cascade Postgres dependencies when dropping Postgres objects (close #5109) (#5248)
|
||||||
|
- console: mark inconsistent remote schemas in the UI (close #5093) (#5181)
|
||||||
- cli: add missing global flags for seeds command (#5565)
|
- cli: add missing global flags for seeds command (#5565)
|
||||||
- docs: add docs page on networking with docker (close #4346) (#4811)
|
- docs: add docs page on networking with docker (close #4346) (#4811)
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
|
@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
|
||||||
@import "../../Common.scss";
|
@import '../../Common.scss';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
}
|
}
|
||||||
@ -28,8 +28,8 @@
|
|||||||
// background: #444;
|
// background: #444;
|
||||||
// color: $navbar-inverse-color;
|
// color: $navbar-inverse-color;
|
||||||
color: #333;
|
color: #333;
|
||||||
border: 1px solid #E5E5E5;
|
border: 1px solid #e5e5e5;
|
||||||
background-color: #F8F8F8;
|
background-color: #f8f8f8;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
a,a:visited {
|
a,a:visited {
|
||||||
@ -66,7 +66,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #767E93;
|
color: #767e93;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -75,9 +75,9 @@
|
|||||||
padding: 7px 0;
|
padding: 7px 0;
|
||||||
// color: $navbar-inverse-link-hover-color;
|
// color: $navbar-inverse-link-hover-color;
|
||||||
transition: color 0.5s;
|
transition: color 0.5s;
|
||||||
pointer: cursor;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
@ -113,7 +113,7 @@
|
|||||||
.sidebarHeading {
|
.sidebarHeading {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #767E93;
|
color: #767e93;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -148,19 +148,23 @@
|
|||||||
padding-left: 5px !important;
|
padding-left: 5px !important;
|
||||||
display: initial !important;
|
display: initial !important;
|
||||||
|
|
||||||
.tableIcon, .functionIcon {
|
.tableIcon,
|
||||||
//display: inline;
|
.functionIcon {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon_mar_left {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.noChildren {
|
.noChildren {
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
padding-bottom: 10px !important;
|
padding-bottom: 10px !important;
|
||||||
color: #767E93 !important;
|
color: #767e93 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:first-child {
|
li:first-child {
|
||||||
@ -170,11 +174,16 @@
|
|||||||
|
|
||||||
.activeLink {
|
.activeLink {
|
||||||
a {
|
a {
|
||||||
// border-left: 4px solid #FFC627;
|
color: #fd9540 !important;
|
||||||
color: #FD9540!important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.padLeft4 {
|
||||||
|
margin-left: 8px;
|
||||||
|
top: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.floatRight {
|
.floatRight {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
@ -1,7 +1,4 @@
|
|||||||
/* */
|
|
||||||
import { listState } from './state';
|
import { listState } from './state';
|
||||||
/* */
|
|
||||||
|
|
||||||
import Endpoints, { globalCookiePolicy } from '../../../Endpoints';
|
import Endpoints, { globalCookiePolicy } from '../../../Endpoints';
|
||||||
import requestAction from '../../../utils/requestAction';
|
import requestAction from '../../../utils/requestAction';
|
||||||
import dataHeaders from '../Data/Common/Headers';
|
import dataHeaders from '../Data/Common/Headers';
|
||||||
@ -10,9 +7,7 @@ import returnMigrateUrl from '../Data/Common/getMigrateUrl';
|
|||||||
import { CLI_CONSOLE_MODE, SERVER_CONSOLE_MODE } from '../../../constants';
|
import { CLI_CONSOLE_MODE, SERVER_CONSOLE_MODE } from '../../../constants';
|
||||||
import { loadMigrationStatus } from '../../Main/Actions';
|
import { loadMigrationStatus } from '../../Main/Actions';
|
||||||
import { handleMigrationErrors } from '../../../utils/migration';
|
import { handleMigrationErrors } from '../../../utils/migration';
|
||||||
|
|
||||||
import { showSuccessNotification } from '../Common/Notification';
|
import { showSuccessNotification } from '../Common/Notification';
|
||||||
import { filterInconsistentMetadataObjects } from '../Settings/utils';
|
|
||||||
|
|
||||||
/* Action constants */
|
/* Action constants */
|
||||||
|
|
||||||
@ -51,20 +46,9 @@ const fetchRemoteSchemas = () => {
|
|||||||
dispatch({ type: FETCH_REMOTE_SCHEMAS });
|
dispatch({ type: FETCH_REMOTE_SCHEMAS });
|
||||||
return dispatch(requestAction(url, options)).then(
|
return dispatch(requestAction(url, options)).then(
|
||||||
data => {
|
data => {
|
||||||
let consistentRemoteSchemas = data;
|
|
||||||
const { inconsistentObjects } = getState().metadata;
|
|
||||||
|
|
||||||
if (inconsistentObjects.length > 0) {
|
|
||||||
consistentRemoteSchemas = filterInconsistentMetadataObjects(
|
|
||||||
data,
|
|
||||||
inconsistentObjects,
|
|
||||||
'remote_schemas'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({
|
dispatch({
|
||||||
type: REMOTE_SCHEMAS_FETCH_SUCCESS,
|
type: REMOTE_SCHEMAS_FETCH_SUCCESS,
|
||||||
data: consistentRemoteSchemas,
|
data,
|
||||||
});
|
});
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
},
|
},
|
||||||
|
@ -318,7 +318,6 @@ const modifyRemoteSchema = () => {
|
|||||||
return (dispatch, getState) => {
|
return (dispatch, getState) => {
|
||||||
const currState = getState().remoteSchemas.addData;
|
const currState = getState().remoteSchemas.addData;
|
||||||
const remoteSchemaName = currState.name.trim().replace(/ +/g, '');
|
const remoteSchemaName = currState.name.trim().replace(/ +/g, '');
|
||||||
// const url = Endpoints.getSchema;
|
|
||||||
const upQueryArgs = [];
|
const upQueryArgs = [];
|
||||||
const downQueryArgs = [];
|
const downQueryArgs = [];
|
||||||
const migrationName = 'update_remote_schema_' + remoteSchemaName;
|
const migrationName = 'update_remote_schema_' + remoteSchemaName;
|
||||||
@ -345,9 +344,10 @@ const modifyRemoteSchema = () => {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
resolveObj.definition.headers = [
|
resolveObj.definition.headers = getReqHeader(
|
||||||
...getReqHeader(getState().remoteSchemas.headerData.headers),
|
getState().remoteSchemas.headerData.headers
|
||||||
];
|
);
|
||||||
|
|
||||||
if (resolveObj.definition.url) {
|
if (resolveObj.definition.url) {
|
||||||
delete resolveObj.definition.url_from_env;
|
delete resolveObj.definition.url_from_env;
|
||||||
} else {
|
} else {
|
||||||
|
@ -22,6 +22,7 @@ import { NotFoundError } from '../../../Error/PageNotFound';
|
|||||||
|
|
||||||
import globals from '../../../../Globals';
|
import globals from '../../../../Globals';
|
||||||
import { getConfirmation } from '../../../Common/utils/jsUtils';
|
import { getConfirmation } from '../../../Common/utils/jsUtils';
|
||||||
|
import styles from '../RemoteSchema.scss';
|
||||||
|
|
||||||
const prefixUrl = globals.urlPrefix + appPrefix;
|
const prefixUrl = globals.urlPrefix + appPrefix;
|
||||||
|
|
||||||
@ -49,17 +50,17 @@ class Edit extends React.Component {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
componentDidUpdate(prevProps) {
|
||||||
if (
|
if (
|
||||||
nextProps.params.remoteSchemaName !== this.props.params.remoteSchemaName
|
prevProps.params.remoteSchemaName !== this.props.params.remoteSchemaName
|
||||||
) {
|
) {
|
||||||
Promise.all([
|
Promise.all([
|
||||||
this.props.dispatch(
|
this.props.dispatch(
|
||||||
fetchRemoteSchema(nextProps.params.remoteSchemaName)
|
fetchRemoteSchema(this.props.params.remoteSchemaName)
|
||||||
),
|
),
|
||||||
this.props.dispatch({
|
this.props.dispatch({
|
||||||
type: VIEW_REMOTE_SCHEMA,
|
type: VIEW_REMOTE_SCHEMA,
|
||||||
data: nextProps.params.remoteSchemaName,
|
data: this.props.params.remoteSchemaName,
|
||||||
}),
|
}),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
@ -120,11 +121,23 @@ class Edit extends React.Component {
|
|||||||
throw new NotFoundError();
|
throw new NotFoundError();
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = require('../RemoteSchema.scss');
|
const {
|
||||||
|
isFetching,
|
||||||
const { isFetching, isRequesting, editState } = this.props;
|
isRequesting,
|
||||||
|
editState,
|
||||||
|
inconsistentObjects,
|
||||||
|
} = this.props;
|
||||||
const { remoteSchemaName } = this.props.params;
|
const { remoteSchemaName } = this.props.params;
|
||||||
|
|
||||||
|
const inconsistencyDetails = inconsistentObjects.find(
|
||||||
|
inconObj =>
|
||||||
|
inconObj.type === 'remote_schema' &&
|
||||||
|
inconObj?.definition?.name === remoteSchemaName
|
||||||
|
);
|
||||||
|
|
||||||
|
const fixInconsistencyMsg =
|
||||||
|
'This remote schema is in an inconsistent state. Please fix inconsistencies and reload metadata first';
|
||||||
|
|
||||||
const generateMigrateBtns = () => {
|
const generateMigrateBtns = () => {
|
||||||
return 'isModify' in editState && !editState.isModify ? (
|
return 'isModify' in editState && !editState.isModify ? (
|
||||||
<div className={styles.commonBtn}>
|
<div className={styles.commonBtn}>
|
||||||
@ -137,7 +150,8 @@ class Edit extends React.Component {
|
|||||||
this.modifyClick();
|
this.modifyClick();
|
||||||
}}
|
}}
|
||||||
data-test={'remote-schema-edit-modify-btn'}
|
data-test={'remote-schema-edit-modify-btn'}
|
||||||
disabled={isRequesting}
|
disabled={isRequesting || inconsistencyDetails}
|
||||||
|
title={inconsistencyDetails ? fixInconsistencyMsg : ''}
|
||||||
>
|
>
|
||||||
Modify
|
Modify
|
||||||
</Button>
|
</Button>
|
||||||
@ -148,7 +162,8 @@ class Edit extends React.Component {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.handleDeleteRemoteSchema(e);
|
this.handleDeleteRemoteSchema(e);
|
||||||
}}
|
}}
|
||||||
disabled={isRequesting}
|
disabled={isRequesting || inconsistencyDetails}
|
||||||
|
title={inconsistencyDetails ? fixInconsistencyMsg : ''}
|
||||||
data-test={'remote-schema-edit-delete-btn'}
|
data-test={'remote-schema-edit-delete-btn'}
|
||||||
>
|
>
|
||||||
{isRequesting ? 'Deleting ...' : 'Delete'}
|
{isRequesting ? 'Deleting ...' : 'Delete'}
|
||||||
@ -254,6 +269,7 @@ const mapStateToProps = state => {
|
|||||||
...state.remoteSchemas.headerData,
|
...state.remoteSchemas.headerData,
|
||||||
allRemoteSchemas: state.remoteSchemas.listData.remoteSchemas,
|
allRemoteSchemas: state.remoteSchemas.listData.remoteSchemas,
|
||||||
dataHeaders: { ...state.tables.dataHeaders },
|
dataHeaders: { ...state.tables.dataHeaders },
|
||||||
|
inconsistentObjects: state.metadata.inconsistentObjects,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,28 +1,56 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import CommonTabLayout from '../../../Common/Layout/CommonTabLayout/CommonTabLayout';
|
import CommonTabLayout from '../../../Common/Layout/CommonTabLayout/CommonTabLayout';
|
||||||
import tabInfo from './tabInfo';
|
import tabInfo from './tabInfo';
|
||||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
|
||||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
|
||||||
import { push } from 'react-router-redux';
|
import { push } from 'react-router-redux';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
fetchRemoteSchema,
|
fetchRemoteSchema,
|
||||||
RESET,
|
RESET,
|
||||||
getHeaderEvents,
|
getHeaderEvents,
|
||||||
} from '../Add/addRemoteSchemaReducer';
|
} from '../Add/addRemoteSchemaReducer';
|
||||||
|
|
||||||
import { VIEW_REMOTE_SCHEMA } from '../Actions';
|
import { VIEW_REMOTE_SCHEMA } from '../Actions';
|
||||||
import ReloadRemoteSchema from '../../Settings/MetadataOptions/ReloadRemoteSchema';
|
import ReloadRemoteSchema from '../../Settings/MetadataOptions/ReloadRemoteSchema';
|
||||||
|
|
||||||
import { appPrefix } from '../constants';
|
import { appPrefix } from '../constants';
|
||||||
|
|
||||||
import { NotFoundError } from '../../../Error/PageNotFound';
|
|
||||||
|
|
||||||
import globals from '../../../../Globals';
|
import globals from '../../../../Globals';
|
||||||
|
import styles from '../RemoteSchema.scss';
|
||||||
|
import ToolTip from '../../../Common/Tooltip/Tooltip';
|
||||||
|
import WarningSymbol from '../../../Common/WarningSymbol/WarningSymbol';
|
||||||
|
|
||||||
const prefixUrl = globals.urlPrefix + appPrefix;
|
const prefixUrl = globals.urlPrefix + appPrefix;
|
||||||
|
|
||||||
|
const RSHeadersDisplay = ({ data }) =>
|
||||||
|
data.length > 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td>Headers</td>
|
||||||
|
<td>
|
||||||
|
{data &&
|
||||||
|
data
|
||||||
|
.filter(header => !!header.name)
|
||||||
|
.map((header, index) => [
|
||||||
|
<tr key={header}>
|
||||||
|
<td>
|
||||||
|
{`${header.name}: `}
|
||||||
|
{header.type === 'static'
|
||||||
|
? header.value
|
||||||
|
: '<' + header.value + '>'}
|
||||||
|
</td>
|
||||||
|
</tr>,
|
||||||
|
index !== data.length - 1 ? <hr /> : null,
|
||||||
|
])}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const RSReloadSchema = ({ readOnlyMode, remoteSchemaName, ...props }) =>
|
||||||
|
!readOnlyMode && remoteSchemaName && remoteSchemaName.length > 0 ? (
|
||||||
|
<div className={`${styles.commonBtn} ${styles.detailsRefreshButton}`}>
|
||||||
|
<ReloadRemoteSchema {...props} remoteSchemaName={remoteSchemaName} />
|
||||||
|
<ToolTip
|
||||||
|
placement="right"
|
||||||
|
message="If your remote schema has changed, you need to refresh the GraphQL Engine metadata to query the modified schema"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
|
||||||
class ViewStitchedSchema extends React.Component {
|
class ViewStitchedSchema extends React.Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { remoteSchemaName } = this.props.params;
|
const { remoteSchemaName } = this.props.params;
|
||||||
@ -35,17 +63,17 @@ class ViewStitchedSchema extends React.Component {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
componentDidUpdate(prevProps) {
|
||||||
if (
|
if (
|
||||||
nextProps.params.remoteSchemaName !== this.props.params.remoteSchemaName
|
prevProps.params.remoteSchemaName !== this.props.params.remoteSchemaName
|
||||||
) {
|
) {
|
||||||
Promise.all([
|
Promise.all([
|
||||||
this.props.dispatch(
|
this.props.dispatch(
|
||||||
fetchRemoteSchema(nextProps.params.remoteSchemaName)
|
fetchRemoteSchema(this.props.params.remoteSchemaName)
|
||||||
),
|
),
|
||||||
this.props.dispatch({
|
this.props.dispatch({
|
||||||
type: VIEW_REMOTE_SCHEMA,
|
type: VIEW_REMOTE_SCHEMA,
|
||||||
data: nextProps.params.remoteSchemaName,
|
data: this.props.params.remoteSchemaName,
|
||||||
}),
|
}),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
@ -69,19 +97,14 @@ class ViewStitchedSchema extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const currentRemoteSchema = this.props.allRemoteSchemas.find(
|
|
||||||
r => r.name === this.props.params.remoteSchemaName
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!currentRemoteSchema) {
|
|
||||||
// throw a 404 exception
|
|
||||||
throw new NotFoundError();
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = require('../RemoteSchema.scss');
|
|
||||||
|
|
||||||
const { remoteSchemaName } = this.props.params;
|
const { remoteSchemaName } = this.props.params;
|
||||||
const { manualUrl, envName, headers, readOnlyMode } = this.props;
|
const {
|
||||||
|
manualUrl,
|
||||||
|
envName,
|
||||||
|
headers,
|
||||||
|
readOnlyMode,
|
||||||
|
inconsistentObjects,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
const filterHeaders = headers.filter(h => !!h.name);
|
const filterHeaders = headers.filter(h => !!h.name);
|
||||||
|
|
||||||
@ -92,21 +115,14 @@ class ViewStitchedSchema extends React.Component {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Manage',
|
title: 'Manage',
|
||||||
url: appPrefix + '/' + 'manage',
|
url: `${appPrefix}/manage`,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
if (remoteSchemaName) {
|
if (remoteSchemaName) {
|
||||||
breadCrumbs.push({
|
breadCrumbs.push({
|
||||||
title: remoteSchemaName.trim(),
|
title: remoteSchemaName.trim(),
|
||||||
url:
|
url: `${appPrefix}/manage/${remoteSchemaName.trim()}/details`,
|
||||||
appPrefix +
|
|
||||||
'/' +
|
|
||||||
'manage' +
|
|
||||||
'/' +
|
|
||||||
remoteSchemaName.trim() +
|
|
||||||
'/' +
|
|
||||||
'details',
|
|
||||||
});
|
});
|
||||||
breadCrumbs.push({
|
breadCrumbs.push({
|
||||||
title: 'details',
|
title: 'details',
|
||||||
@ -114,33 +130,18 @@ class ViewStitchedSchema extends React.Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const refresh = (
|
let tabInfoCopy = tabInfo;
|
||||||
<Tooltip id="tooltip-cascade">
|
|
||||||
If your remote schema has changed, you need to refresh the GraphQL
|
|
||||||
Engine metadata to query the modified schema
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (readOnlyMode) {
|
if (readOnlyMode) {
|
||||||
delete tabInfo.modify;
|
const { modify, ...rest } = tabInfoCopy;
|
||||||
|
tabInfoCopy = rest;
|
||||||
}
|
}
|
||||||
|
|
||||||
const showReloadRemoteSchema =
|
const inconsistencyDetails = inconsistentObjects.find(
|
||||||
!readOnlyMode && remoteSchemaName && remoteSchemaName.length > 0 ? (
|
inconObj =>
|
||||||
<div className={styles.commonBtn + ' ' + styles.detailsRefreshButton}>
|
inconObj.type === 'remote_schema' &&
|
||||||
<span>
|
inconObj?.definition?.name === remoteSchemaName
|
||||||
<ReloadRemoteSchema
|
);
|
||||||
{...this.props}
|
|
||||||
remoteSchemaName={remoteSchemaName}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<OverlayTrigger placement="right" overlay={refresh}>
|
|
||||||
<i className="fa fa-question-circle" aria-hidden="true" />
|
|
||||||
</OverlayTrigger>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -150,7 +151,7 @@ class ViewStitchedSchema extends React.Component {
|
|||||||
appPrefix={appPrefix}
|
appPrefix={appPrefix}
|
||||||
currentTab="details"
|
currentTab="details"
|
||||||
heading={remoteSchemaName}
|
heading={remoteSchemaName}
|
||||||
tabsInfo={tabInfo}
|
tabsInfo={tabInfoCopy}
|
||||||
breadCrumbs={breadCrumbs}
|
breadCrumbs={breadCrumbs}
|
||||||
baseUrl={`${appPrefix}/manage/${remoteSchemaName}`}
|
baseUrl={`${appPrefix}/manage/${remoteSchemaName}`}
|
||||||
/>
|
/>
|
||||||
@ -164,37 +165,35 @@ class ViewStitchedSchema extends React.Component {
|
|||||||
<td>GraphQL Server URL</td>
|
<td>GraphQL Server URL</td>
|
||||||
<td>{manualUrl || `<${envName}>`}</td>
|
<td>{manualUrl || `<${envName}>`}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{filterHeaders.length > 0 ? (
|
<RSHeadersDisplay data={filterHeaders} />
|
||||||
<tr>
|
|
||||||
<td>Headers</td>
|
|
||||||
<td>
|
|
||||||
{filterHeaders &&
|
|
||||||
filterHeaders
|
|
||||||
.filter(k => !!k.name)
|
|
||||||
.map((h, i) => [
|
|
||||||
<tr key={i}>
|
|
||||||
<td>
|
|
||||||
{h.name} :{' '}
|
|
||||||
{h.type === 'static'
|
|
||||||
? h.value
|
|
||||||
: '<' + h.value + '>'}
|
|
||||||
</td>
|
|
||||||
</tr>,
|
|
||||||
i !== filterHeaders.length - 1 ? <hr /> : null,
|
|
||||||
])}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : null}
|
|
||||||
{/*
|
|
||||||
<tr>
|
|
||||||
<td>Webhook</td>
|
|
||||||
<td>in-use/bypassed</td>
|
|
||||||
</tr>
|
|
||||||
*/}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{showReloadRemoteSchema}
|
{inconsistencyDetails && (
|
||||||
|
<div className={styles.add_mar_bottom}>
|
||||||
|
<div className={styles.subheading_text}>
|
||||||
|
<WarningSymbol tooltipText={'Inconsistent schema'} />
|
||||||
|
<span className={styles.add_mar_left_mid}>
|
||||||
|
This remote schema is in an inconsistent state.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<b>Reason:</b> {inconsistencyDetails.reason}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<i>
|
||||||
|
(Please resolve the inconsistencies and reload the remote
|
||||||
|
schema. Fields from this remote schema are currently not
|
||||||
|
exposed over the GraphQL API)
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<RSReloadSchema
|
||||||
|
readOnlyMode={readOnlyMode}
|
||||||
|
remoteSchemaName={remoteSchemaName}
|
||||||
|
{...this.props}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
@ -210,6 +209,7 @@ const mapStateToProps = state => {
|
|||||||
allRemoteSchemas: state.remoteSchemas.listData.remoteSchemas,
|
allRemoteSchemas: state.remoteSchemas.listData.remoteSchemas,
|
||||||
dataHeaders: { ...state.tables.dataHeaders },
|
dataHeaders: { ...state.tables.dataHeaders },
|
||||||
readOnlyMode: state.main.readOnlyMode,
|
readOnlyMode: state.main.readOnlyMode,
|
||||||
|
inconsistentObjects: state.metadata.inconsistentObjects,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
@import "../../Common/Common.scss";
|
@import '../../Common/Common.scss';
|
||||||
|
|
||||||
.addPaddCommom {
|
.addPaddCommom {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
@ -42,17 +42,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// height: 200px;
|
|
||||||
// border: 1px solid #000;
|
|
||||||
|
|
||||||
img {
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.commonBtn {
|
.commonBtn {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
padding-bottom: 10px
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.readMore {
|
.readMore {
|
||||||
@ -61,7 +56,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconWrapper{
|
.iconWrapper {
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
@ -140,7 +135,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.red_button {
|
.red_button {
|
||||||
color: #FFF;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -166,7 +161,6 @@
|
|||||||
.set_line_height {
|
.set_line_height {
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.remoteSchemaImg {
|
.remoteSchemaImg {
|
||||||
@ -193,7 +187,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
a{
|
a {
|
||||||
color: #909090;
|
color: #909090;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -260,24 +254,24 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instructionsWrapper, .instructionsWrapperPos {
|
.instructionsWrapper,
|
||||||
|
.instructionsWrapperPos {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
border-top: 1px solid #DEDEDE;
|
border-top: 1px solid #dedede;
|
||||||
.instructions {
|
.instructions {
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.instructionsWrapper
|
.instructionsWrapper {
|
||||||
{
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.instructionsWrapperPos
|
.instructionsWrapperPos {
|
||||||
{
|
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
.instructionsWrapper:hover, .instructionsWrapperPos:hover {
|
.instructionsWrapper:hover,
|
||||||
|
.instructionsWrapperPos:hover {
|
||||||
.instructions {
|
.instructions {
|
||||||
color: #505050
|
color: #505050;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rightArrow {
|
.rightArrow {
|
||||||
|
@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
|
|||||||
import LeftContainer from '../../Common/Layout/LeftContainer/LeftContainer';
|
import LeftContainer from '../../Common/Layout/LeftContainer/LeftContainer';
|
||||||
import PageContainer from '../../Common/Layout/PageContainer/PageContainer';
|
import PageContainer from '../../Common/Layout/PageContainer/PageContainer';
|
||||||
import RemoteSchemaSubSidebar from './RemoteSchemaSubSidebar';
|
import RemoteSchemaSubSidebar from './RemoteSchemaSubSidebar';
|
||||||
|
import styles from '../../Common/TableCommon/Table.scss';
|
||||||
|
|
||||||
class RemoteSchemaPageContainer extends React.Component {
|
class RemoteSchemaPageContainer extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const styles = require('../../Common/TableCommon/Table.scss');
|
|
||||||
const { appPrefix, children } = this.props;
|
const { appPrefix, children } = this.props;
|
||||||
|
|
||||||
const currentLocation = location.pathname;
|
const currentLocation = location.pathname;
|
||||||
|
@ -2,6 +2,8 @@ import React from 'react';
|
|||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
import LeftSubSidebar from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar';
|
import LeftSubSidebar from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar';
|
||||||
|
import styles from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss';
|
||||||
|
import WarningSymbol from '../../Common/WarningSymbol/WarningSymbol';
|
||||||
|
|
||||||
const RemoteSchemaSubSidebar = ({
|
const RemoteSchemaSubSidebar = ({
|
||||||
appPrefix,
|
appPrefix,
|
||||||
@ -12,8 +14,12 @@ const RemoteSchemaSubSidebar = ({
|
|||||||
filterItem,
|
filterItem,
|
||||||
viewRemoteSchema,
|
viewRemoteSchema,
|
||||||
main,
|
main,
|
||||||
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
const styles = require('../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');
|
const { inconsistentObjects } = props.metadata;
|
||||||
|
const inconsistentRemoteSchemas = inconsistentObjects.filter(
|
||||||
|
inconObject => inconObject.type === 'remote_schema'
|
||||||
|
);
|
||||||
|
|
||||||
function tableSearch(e) {
|
function tableSearch(e) {
|
||||||
const searchTerm = e.target.value;
|
const searchTerm = e.target.value;
|
||||||
@ -35,7 +41,7 @@ const RemoteSchemaSubSidebar = ({
|
|||||||
const getChildList = () => {
|
const getChildList = () => {
|
||||||
const _dataList = searchQuery ? filtered : dataList;
|
const _dataList = searchQuery ? filtered : dataList;
|
||||||
|
|
||||||
let childList;
|
let childList = [];
|
||||||
if (_dataList.length === 0) {
|
if (_dataList.length === 0) {
|
||||||
childList = (
|
childList = (
|
||||||
<li
|
<li
|
||||||
@ -46,34 +52,51 @@ const RemoteSchemaSubSidebar = ({
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
childList = _dataList.map((d, i) => {
|
if (_dataList.length > 0) {
|
||||||
let activeTableClass = '';
|
childList = _dataList.map((d, i) => {
|
||||||
if (
|
let activeTableClass = '';
|
||||||
d.name === viewRemoteSchema &&
|
|
||||||
location.pathname.includes(viewRemoteSchema)
|
|
||||||
) {
|
|
||||||
activeTableClass = styles.activeLink;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
if (
|
||||||
<li
|
d.name === viewRemoteSchema &&
|
||||||
className={activeTableClass}
|
location.pathname.includes(viewRemoteSchema)
|
||||||
key={i}
|
) {
|
||||||
data-test={`remote-schema-sidebar-links-${i + 1}`}
|
activeTableClass = styles.activeLink;
|
||||||
>
|
}
|
||||||
<Link
|
|
||||||
to={appPrefix + '/manage/' + d.name + '/details'}
|
const inconsistentCurrentSchema = inconsistentRemoteSchemas.find(
|
||||||
data-test={d.name}
|
elem => elem.definition.name === d.name
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
className={activeTableClass}
|
||||||
|
key={i}
|
||||||
|
data-test={`remote-schema-sidebar-links-${i + 1}`}
|
||||||
>
|
>
|
||||||
<i
|
<Link
|
||||||
className={styles.tableIcon + ' fa fa-code-fork'}
|
to={`${appPrefix}/manage/${d.name}/details`}
|
||||||
aria-hidden="true"
|
data-test={d.name}
|
||||||
/>
|
>
|
||||||
{d.name}
|
<i
|
||||||
</Link>
|
className={`${styles.tableIcon} fa fa-code-fork`}
|
||||||
</li>
|
aria-hidden="true"
|
||||||
);
|
/>
|
||||||
});
|
{d.name}
|
||||||
|
{inconsistentCurrentSchema ? (
|
||||||
|
<WarningSymbol
|
||||||
|
customStyle={styles.padLeft4}
|
||||||
|
tooltipText={
|
||||||
|
'This remote schema is in an inconsistent state. ' +
|
||||||
|
'Fields from this remote schema are currently not exposed over the GraphQL API'
|
||||||
|
}
|
||||||
|
tooltipPlacement="right"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return childList;
|
return childList;
|
||||||
|
@ -208,11 +208,6 @@ const handleInconsistentObjects = inconsistentObjects => {
|
|||||||
inconsistentObjects,
|
inconsistentObjects,
|
||||||
'functions'
|
'functions'
|
||||||
);
|
);
|
||||||
const filteredRemoteSchemas = filterInconsistentMetadataObjects(
|
|
||||||
remoteSchemas,
|
|
||||||
inconsistentObjects,
|
|
||||||
'remote_schemas'
|
|
||||||
);
|
|
||||||
const filteredActions = filterInconsistentMetadataObjects(
|
const filteredActions = filterInconsistentMetadataObjects(
|
||||||
actions,
|
actions,
|
||||||
inconsistentObjects,
|
inconsistentObjects,
|
||||||
@ -221,7 +216,7 @@ const handleInconsistentObjects = inconsistentObjects => {
|
|||||||
|
|
||||||
dispatch(setConsistentSchema(filteredSchema));
|
dispatch(setConsistentSchema(filteredSchema));
|
||||||
dispatch(setConsistentFunctions(filteredFunctions));
|
dispatch(setConsistentFunctions(filteredFunctions));
|
||||||
dispatch(setConsistentRemoteSchemas(filteredRemoteSchemas));
|
dispatch(setConsistentRemoteSchemas(remoteSchemas));
|
||||||
dispatch(setActions(filteredActions));
|
dispatch(setActions(filteredActions));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -234,9 +229,7 @@ export const loadInconsistentObjects = (reloadConfig, successCb, failureCb) => {
|
|||||||
const { shouldReloadMetadata, shouldReloadRemoteSchemas } = reloadConfig;
|
const { shouldReloadMetadata, shouldReloadRemoteSchemas } = reloadConfig;
|
||||||
|
|
||||||
const loadQuery = shouldReloadMetadata
|
const loadQuery = shouldReloadMetadata
|
||||||
? getReloadCacheAndGetInconsistentObjectsQuery(
|
? getReloadCacheAndGetInconsistentObjectsQuery(shouldReloadRemoteSchemas)
|
||||||
shouldReloadRemoteSchemas === false ? false : true
|
|
||||||
)
|
|
||||||
: inconsistentObjectsQuery;
|
: inconsistentObjectsQuery;
|
||||||
|
|
||||||
dispatch({ type: LOADING_METADATA });
|
dispatch({ type: LOADING_METADATA });
|
||||||
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Button from '../../../Common/Button/Button';
|
import Button from '../../../Common/Button/Button';
|
||||||
import { reloadRemoteSchema } from '../Actions';
|
import { reloadRemoteSchema } from '../Actions';
|
||||||
|
import metaDataStyles from '../Settings.scss';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
showSuccessNotification,
|
showSuccessNotification,
|
||||||
@ -17,7 +18,6 @@ class ReloadRemoteSchema extends Component {
|
|||||||
render() {
|
render() {
|
||||||
const { dispatch, remoteSchemaName } = this.props;
|
const { dispatch, remoteSchemaName } = this.props;
|
||||||
const { isReloading } = this.state;
|
const { isReloading } = this.state;
|
||||||
const metaDataStyles = require('../Settings.scss');
|
|
||||||
const reloadRemoteMetadataHandler = () => {
|
const reloadRemoteMetadataHandler = () => {
|
||||||
this.setState({ isReloading: true });
|
this.setState({ isReloading: true });
|
||||||
dispatch(
|
dispatch(
|
||||||
|
@ -133,7 +133,7 @@ const MetadataStatus = ({ dispatch, metadata }) => {
|
|||||||
of the metadata
|
of the metadata
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.add_mar_top_small}>
|
<div className={styles.add_mar_top_small}>
|
||||||
The console will also not be able to display these inconsistent
|
The console might also not be able to display these inconsistent
|
||||||
objects
|
objects
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user