Rich query editor (graphiql)

[retzkek]

Provide a rich schema-aware query editor. We should be able to leverage the graphiql components.

[retrodaredevil]

I was looking into this (again) and was attempting to get this working from my limited React and NPM/Yarn knowledge.

I spent way to long trying to get a newer version of graphql and graphiql to build via yarn dev.

I ended up getting

    "graphiql": "1.0.6",
    "graphql": "15.4.0"

to work as dependencies, which is what Grafana abandon GraphQL Datasource uses. The important part was making sure my yarn.lock had older a graphql-language-service-interface version that doesn't use the new JavaScript optional chaining stuff.

After getting yarn dev to build, I played with replacing the QueryField in QueryEditor.tsx with GraphiQL:

        <GraphiQL
          query={queryText || ''}
          fetcher={fetcher}
          editorTheme={'dracula'}
          onEditQuery={this.onChangeQuery}
        />

The fetcher I copied from here.

After all that, it... does something. I guess the functionality is technically there, since I can see something that resembles the documentation of my GraphQL schema in the editor, but the CSS is seriously messed up or I'm just not using the GraphiQL tag correctly.

I'm gonna keep attempting to figure this out for a little while longer, but if anyone wants to add on to the knowledge of navigating whatever the heck is going on here, leave another comment.

[retrodaredevil]

So all I had to do was throw a stylesheet reference in there, and it looks correct.

@retzkek the default GraphiQL stuff has a result viewer window and a tab to edit query variables. I was thinking that I would remove both of those tabs, as this doesn't support query variables yet, and the result viewer isn't helpful because you can just do it in Grafana, plus the query button inside the editor doesn't replace the variables inside the query.

Here's a picture of my progress:

The doc tab is a little glitchy when typing in the query, but other than that it works pretty well. I think to remove some of the stuff I'll have to create my own react component, which will likely just be me copy-pasting stuff until it works.

[retzkek]

@retrodaredevil awesome, thanks for continuing to plug away at this.

the default GraphiQL stuff has a result viewer window and a tab to edit query variables. I was thinking that I would remove both of those tabs

I agree.

[retrodaredevil]

More progress today. I will be attempting to upgrade the GraphiQL version again soon. I ended up using CSS to hide the stuff I didn't want to see.

@retzkek it looks like they added support for react for annotations in Grafana 7.2. I'm not going to update it to use the same default query editor because that will break users' custom text. But when we do want to make that change, it's as simple as adding this.annotations = {} in DataSource's constructor. I will try and have some code sharing between VariableQueryEditor.tsx and QueryEditor.tsx, but I think this is mostly done. Hoping for a PR in the next week as I'm pretty busy these next few days.

[retzkek]

You can make the annotations editor change in the same PR, we'll announce it as a breaking change, and I think most people will be fine with it since it's a huge improvement. Take your time on the PR, I probably won't be able to review it for at least a week or two.

[retrodaredevil]

I wasn't going to make that change because it would take away a feature that I use. I like that I'm able to create custom text with data from the query substituted in, but the new way by default only allows you to select a field to be the title, text and tags. I would like to keep that feature.

It also doesn't make sense to have "Group by" and "Alias by" in annotation queries. I might get around to looking at the best way to do this, or I might not. It will likely be something I do eventually. There might be a way to do it without having it be a breaking change.

[retrodaredevil]

@retzkek I've begun making many changes to getting annotation stuff working. Grafana provides these options for setting many of the properties we were setting ourselves.

Since it now requires a field to provide for title, text and tags, I am going to create another setting for users to configure called something like "additional text fields". Users will be able to name these fields whatever they want and provide text for these fields that will be substituted just like the title, text and tags fields were. Doing this will even allow old configurations to be recognized and automatically converted to the new format, so there won't be any breaking changes.

I'm debating making the "additional text fields" available to variable and regular queries, but not sure how useful that would be.

This is the direction I'm going. Let me know if you have any feedback. I'm also waiting on graphiql to be updated so that I can use the newer version, which is basically a requirement before releasing this change because the version right now has a vulnerability.

I'm also making changes to remove some of the legacy options such as "constant" and "endTimePath", so the resulting JSON should be much cleaner for each type of query and won't have any unnecessary fields.