hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-15 17:31:56 +03:00
Code Issues Projects Releases Wiki Activity

console: mark inconsistent schemas in the UI (close #5093) (#5181)

Browse Source
This commit is contained in:
Sameer Kolhar 2020-08-24 17:01:45 +05:30 committed by GitHub
parent 41f35c684e
commit ad3cfb4681
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 208 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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)

35
console/src/components/Common/Layout/LeftSubSidebar/LeftSubSidebar.scss
View File

@ -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;

18
console/src/components/Services/RemoteSchema/Actions.js
View File

@ -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();
}, },

8
console/src/components/Services/RemoteSchema/Add/addRemoteSchemaReducer.js
View File

@ -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 {

34
console/src/components/Services/RemoteSchema/Edit/Edit.js
View File

@ -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,
}; };
}; };

172
console/src/components/Services/RemoteSchema/Edit/View.js
View File

@ -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,
}; };
}; };

32
console/src/components/Services/RemoteSchema/RemoteSchema.scss
View File

@ -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 {

2
console/src/components/Services/RemoteSchema/RemoteSchemaPageContainer.js
View File

@ -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;

79
console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js
View File

@ -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;

11
console/src/components/Services/Settings/Actions.js
View File

@ -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
console/src/components/Services/Settings/MetadataOptions/ReloadRemoteSchema.js
View File

@ -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(

2
console/src/components/Services/Settings/MetadataStatus/MetadataStatus.js
View File

@ -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>