mirror of
https://github.com/netbox-community/netbox.git
synced 2024-05-10 07:54:54 +00:00
9856 Replace graphene with Strawberry (#15141)
* 9856 base strawberry integration * 9856 user and group * 9856 user and circuits base * 9856 extras and mixins * 9856 fk * 9856 update strawberry version * 9856 update imports * 9856 compatability fixes * 9856 compatability fixes * 9856 update strawberry types * 9856 update strawberry types * 9856 core schema * 9856 dcim schema * 9856 extras schema * 9856 ipam and tenant schema * 9856 virtualization, vpn, wireless schema * 9856 fix old decorator * 9856 cleanup * 9856 cleanup * 9856 fixes to circuits type specifiers * 9856 fixes to circuits type specifiers * 9856 update types * 9856 GFK working * 9856 GFK working * 9856 _name * 9856 misc fixes * 9856 type updates * 9856 _name to types * 9856 update types * 9856 update types * 9856 update types * 9856 update types * 9856 update types * 9856 update types * 9856 update types * 9856 update types * 9856 update types * 9856 GraphQLView * 9856 GraphQLView * 9856 fix OrganizationalObjectType * 9856 single item query for schema * 9856 circuits graphql tests working * 9856 test fixes * 9856 test fixes * 9856 test fixes * 9856 test fix vpn * 9856 test fixes * 9856 test fixes * 9856 test fixes * 9856 circuits test sans DjangoModelType * 9856 core test sans DjangoModelType * 9856 temp checkin * 9856 fix extas FK * 9856 fix tenancy FK * 9856 fix virtualization FK * 9856 fix vpn FK * 9856 fix wireless FK * 9856 fix ipam FK * 9856 fix partial dcim FK * 9856 fix dcim FK * 9856 fix virtualization FK * 9856 fix tests / remove debug code * 9856 fix test imagefield * 9856 cleanup graphene * 9856 fix plugin schema * 9856 fix requirements * 9856 fix requirements * 9856 fix docs * 9856 fix docs * 9856 temp fix tests * 9856 first filterset * 9856 first filterset * 9856 fix tests * 9856 fix tests * 9856 working auto filter generation * 9856 filter types * 9856 filter types * 9856 filter types * 9856 fix graphiql test * 9856 fix counter fields and merge feature * 9856 temp fix tests * 9856 fix tests * 9856 fix tenancy, ipam filter definitions * 9856 cleanup * 9856 cleanup * 9856 cleanup * 9856 review changes * 9856 review changes * 9856 review changes * 9856 fix base-requirements * 9856 add wrapper to graphiql * 9856 remove old graphiql debug toolbar * 9856 review changes * 9856 update strawberry * 9856 remove superfluous check --------- Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
This commit is contained in:
Arthur Hanson
GitHub
@@ -1,6 +1,6 @@
|
||||
{% comment %}
|
||||
This template derives from the graphene-django project:
|
||||
https://github.com/graphql-python/graphene-django/blob/main/graphene_django/templates/graphene/graphiql.html
|
||||
This template derives from the strawberry-graphql project:
|
||||
https://github.com/strawberry-graphql/strawberry/blob/main/strawberry/static/graphiql.html
|
||||
{% endcomment %}
|
||||
<!--
|
||||
The request to this GraphQL server provided the header "Accept: text/html"
|
||||
@@ -11,36 +11,130 @@ add "&raw" to the end of the URL within a browser.
|
||||
-->
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<title>GraphiQL | NetBox</title>
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,
|
||||
<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
|
||||
<!-- Strawberry Emoji as a HTML Entity (hex) -->
|
||||
<text y=%22.9em%22 font-size=%2280%22>🍓</text>
|
||||
</svg>"
|
||||
/>
|
||||
<style>
|
||||
html, body, #editor {
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#graphiql {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.docExplorerHide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doc-explorer-contents {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.docExplorerWrap {
|
||||
width: unset !important;
|
||||
min-width: unset !important;
|
||||
}
|
||||
|
||||
.graphiql-explorer-actions select {
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
<link href="{% static 'graphiql.css'%}" rel="stylesheet" />
|
||||
<link rel="icon" type="image/png" href="{% static 'graphql.ico' %}" />
|
||||
<title>GraphiQL | NetBox</title>
|
||||
|
||||
<script src="{% static 'graphiql/react.production.min.js' %}"></script>
|
||||
<script src="{% static 'graphiql/react-dom.production.min.js' %}"></script>
|
||||
<script src="{% static 'graphiql/js.cookie.min.js' %}"></script>
|
||||
|
||||
<link rel="stylesheet" href="{% static 'graphiql/graphiql.min.css' %}"/>
|
||||
<link rel="stylesheet" href="{% static 'graphiql/plugin-explorer-style.css' %}"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor"></div>
|
||||
{% csrf_token %}
|
||||
<script type="application/javascript">
|
||||
window.GRAPHENE_SETTINGS = {
|
||||
{% if subscription_path %}
|
||||
subscriptionPath: "{{subscription_path}}",
|
||||
{% endif %}
|
||||
graphiqlHeaderEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
|
||||
};
|
||||
<div id="graphiql" class="graphiql-container">Loading...</div>
|
||||
<script src="{% static 'graphiql/graphiql.min.js' %}"></script>
|
||||
<script src="{% static 'graphiql/index.umd.js' %}"></script>
|
||||
|
||||
<script>
|
||||
const EXAMPLE_QUERY = `# Welcome to GraphiQL 🍓
|
||||
#
|
||||
# GraphiQL is an in-browser tool for writing, validating, and
|
||||
# testing GraphQL queries.
|
||||
#
|
||||
# Type queries into this side of the screen, and you will see intelligent
|
||||
# typeaheads aware of the current GraphQL type schema and live syntax and
|
||||
# validation errors highlighted within the text.
|
||||
#
|
||||
# GraphQL queries typically start with a "{" character. Lines that starts
|
||||
# with a # are ignored.
|
||||
#
|
||||
# An example GraphQL query might look like:
|
||||
#
|
||||
# {
|
||||
# field(arg: "value") {
|
||||
# subField
|
||||
# }
|
||||
# }
|
||||
#
|
||||
# Keyboard shortcuts:
|
||||
#
|
||||
# Run Query: Ctrl-Enter (or press the play button above)
|
||||
#
|
||||
# Auto Complete: Ctrl-Space (or just start typing)
|
||||
#
|
||||
`;
|
||||
|
||||
const fetchURL = window.location.href;
|
||||
|
||||
function httpUrlToWebSockeUrl(url) {
|
||||
const parsedURL = new URL(url);
|
||||
const protocol = parsedURL.protocol === "http:" ? "ws:" : "wss:";
|
||||
parsedURL.protocol = protocol;
|
||||
parsedURL.hash = "";
|
||||
return parsedURL.toString();
|
||||
}
|
||||
|
||||
const headers = {};
|
||||
const csrfToken = Cookies.get("csrftoken");
|
||||
|
||||
if (csrfToken) {
|
||||
headers["x-csrftoken"] = csrfToken;
|
||||
}
|
||||
|
||||
const subscriptionsEnabled = JSON.parse("{{ SUBSCRIPTION_ENABLED }}");
|
||||
const subscriptionUrl = subscriptionsEnabled
|
||||
? httpUrlToWebSockeUrl(fetchURL)
|
||||
: null;
|
||||
|
||||
const fetcher = GraphiQL.createFetcher({
|
||||
url: fetchURL,
|
||||
headers: headers,
|
||||
subscriptionUrl,
|
||||
});
|
||||
|
||||
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("graphiql"));
|
||||
|
||||
root.render(
|
||||
React.createElement(GraphiQL, {
|
||||
fetcher: fetcher,
|
||||
defaultEditorToolsVisibility: true,
|
||||
plugins: [explorerPlugin],
|
||||
inputValueDeprecation: true,
|
||||
}),
|
||||
);
|
||||
</script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="{% static 'graphiql.js' %}"
|
||||
onerror="window.location='{% url 'media_failure' %}?filename=graphiql.js'">
|
||||
</script>
|
||||
<script src="{% static 'graphene_django/graphiql.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user