New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use UI Server GraphQL endpoint for suites #72
Conversation
@dwsutherland I believe you have not had the chance to write JS code for Vue.js app. But I think you are the best person to review this PR, as you will understand where we are coming from for these changes. I will annotate the pull request with some comments that may be helpful 👍 If you would like, you can also start Below my verification that it worked locally. |
Codecov Report
@@ Coverage Diff @@
## master #72 +/- ##
=======================================
Coverage 78.22% 78.22%
=======================================
Files 13 13
Lines 124 124
=======================================
Hits 97 97
Misses 27 27
Continue to review full report at Codecov.
|
this.name = name; | ||
this.user = user; | ||
this.owner = owner; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure why but I used user
for a Suite
(which will be renamed to Workflow in another change #73 ).
workflows { | ||
id, name, owner, host, port | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The GraphQL query. gql
is a special syntax which some day I will distill to understand how that works in JavaScript. But that comes from this apollo library to parse graphql queries.
createGraphqlClient(host, port) { | ||
return createApolloClient(`http://${host}:${port}/graphql`); | ||
createGraphqlClient() { | ||
return createApolloClient(`${window.location.pathname}/graphql`); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here we were sending requests to whatever cylc scan
returned for host:port
. That's because we were sending the queries to cylc/cylc-flow
. Instead now we copy the URL + /graphql
, which should match the Tornado Handler for GraphQL.
return store.dispatch('suites/setSuites', suites); | ||
}).catch((error) => { | ||
const alert = new Alert(error.message, null, 'error'); | ||
return store.dispatch('addAlert', alert); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here is the change to query from GraphQL, removing the query to REST (I copied the existing call to retrieve tasks, which is broken, but will be fixed in #70 )
getSuiteTasks(suite) { | ||
const apolloClient = this.createGraphqlClient(suite.host, suite.port); | ||
getSuiteTasks() { | ||
const apolloClient = this.createGraphqlClient(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No more need for information from the suite, we know we will talk to the UI Server used by this Vue.js app, not to a Cylc Workflow Service anymore.
}; | ||
sandbox.stub(axios, 'get').rejects(e); | ||
sandbox.stub(SuiteService, 'createGraphqlClient').returns(stubClient); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The rest here are just changes for tests to match what was changed before 👍 hope that helps you reviewing this.
Yes, use the
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM at a glance XD
One review ruling for now :) merging it 👍 |
Close #71
In the past during our first experiments with GraphQL, the endpoint was in
cylc/cylc-flow
. Now it resides incylc/cylc-uiserver
. Thecylc scan
was executed actually in a REST endpoint, that was executing the process locally in Python.So this pull request removes the need to maintain that REST endpoint in
cylc-uiserver
(follow up PR after this one), and changes the Vue.js app to send a GraphQL query to the UI Server instead. The query used is:This change is based on the pull request by @dwsutherland to
cylc-uiserver
, which is still pending review. And while I believe we may have code changes, the data model proposed by @dwsutherland has received little negative feedback. So I believe it is safe now to start work on the Vue.js app based on that data model - furthermore, once we are pointing GraphQL queries to the right endpoint, changing the query and model is a 5 minutes job.