This is an automated email from the ASF dual-hosted git repository. shuber pushed a commit to branch UNOMI-296-graphql-playground in repository https://gitbox.apache.org/repos/asf/unomi.git
commit 3f5669b0f84eff5956dd105c12cf17b39003fd80 Author: Serge Huber <[email protected]> AuthorDate: Wed Jul 1 10:12:16 2020 +0200 UNOMI-296 Integrate GraphQL Playground Also contains some feature refactoring to make Swagger UI and GraphQL Playground separate Karaf features that could be uninstalled. --- graphql/graphql-playground/.babelrc | 6 ++ graphql/graphql-playground/package.json | 32 ++++++ graphql/graphql-playground/pom.xml | 115 +++++++++++++++++++++ .../graphql-playground/src/javascript/index.jsx | 30 ++++++ .../graphql-playground/src/main/webapp/index.css | 45 ++++++++ .../graphql-playground/src/main/webapp/index.html | 67 ++++++++++++ graphql/graphql-playground/webpack.config.js | 50 +++++++++ graphql/pom.xml | 1 + kar/src/main/feature/feature.xml | 11 +- package/pom.xml | 2 + wab/src/main/webapp/index.html | 6 ++ 11 files changed, 364 insertions(+), 1 deletion(-) diff --git a/graphql/graphql-playground/.babelrc b/graphql/graphql-playground/.babelrc new file mode 100644 index 0000000..0960c01 --- /dev/null +++ b/graphql/graphql-playground/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} \ No newline at end of file diff --git a/graphql/graphql-playground/package.json b/graphql/graphql-playground/package.json new file mode 100644 index 0000000..d3537d9 --- /dev/null +++ b/graphql/graphql-playground/package.json @@ -0,0 +1,32 @@ +{ + "name": "unomi-graphql-playground", + "version": "1.0.0", + "description": "The Apache Unomi GraphQL Playground integration.", + "main": "target/javascript/unomi-graphql-playground.js", + "keywords": [ + "unomi", + "graphql-playground", + "apache" + ], + "author": "Apache Software Foundation", + "license": "Apache-2.0", + "scripts": { + "build": "webpack" + }, + "dependencies": { + "graphql": "^15.2.0", + "graphql-playground-react": "^1.7.23", + "react": "^16.13.1" + }, + "devDependencies": { + "@babel/core": "^7.10.4", + "@babel/preset-env": "^7.10.4", + "@babel/preset-react": "^7.10.4", + "babel-loader": "^8.1.0", + "css-loader": "^3.6.0", + "file-loader": "^6.0.0", + "style-loader": "^1.2.1", + "webpack": "^4.43.0", + "webpack-cli": "^3.3.12" + } +} diff --git a/graphql/graphql-playground/pom.xml b/graphql/graphql-playground/pom.xml new file mode 100644 index 0000000..70dd054 --- /dev/null +++ b/graphql/graphql-playground/pom.xml @@ -0,0 +1,115 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + --> + +<project xmlns="http://maven.apache.org/POM/4.0.0"; xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd";> + <modelVersion>4.0.0</modelVersion> + <parent> + <groupId>org.apache.unomi</groupId> + <artifactId>unomi-graphql</artifactId> + <version>2.0.0-SNAPSHOT</version> + </parent> + + <artifactId>unomi-graphql-playground</artifactId> + <name>Apache Unomi :: GraphQL API :: GraphQL Playground</name> + <description>An integrated GraphQL playground UI</description> + <packaging>bundle</packaging> + + <properties> + <yarn.arguments>build</yarn.arguments> + </properties> + + <dependencies> + <dependency> + <groupId>org.apache.unomi</groupId> + <artifactId>unomi-api</artifactId> + <version>${project.version}</version> + <scope>provided</scope> + </dependency> + <dependency> + <groupId>org.apache.httpcomponents</groupId> + <artifactId>httpclient-osgi</artifactId> + <scope>provided</scope> + </dependency> + <dependency> + <groupId>org.apache.httpcomponents</groupId> + <artifactId>httpcore-osgi</artifactId> + <scope>provided</scope> + </dependency> + <dependency> + <groupId>com.fasterxml.jackson.core</groupId> + <artifactId>jackson-databind</artifactId> + <scope>provided</scope> + </dependency> + </dependencies> + + <build> + <plugins> + <plugin> + <groupId>com.github.eirslett</groupId> + <artifactId>frontend-maven-plugin</artifactId> + <version>1.8.0</version> + <executions> + <execution> + <id>npm install node and yarn</id> + <phase>generate-resources</phase> + <goals> + <goal>install-node-and-yarn</goal> + </goals> + <configuration> + <nodeVersion>v11.11.0</nodeVersion> + <yarnVersion>v1.19.1</yarnVersion> + </configuration> + </execution> + <execution> + <id>yarn install</id> + <phase>generate-resources</phase> + <goals> + <goal>yarn</goal> + </goals> + </execution> + <execution> + <id>yarn post-install</id> + <phase>generate-resources</phase> + <goals> + <goal>yarn</goal> + </goals> + <configuration> + <arguments>${yarn.arguments}</arguments> + </configuration> + </execution> + </executions> + </plugin> + <plugin> + <groupId>org.apache.felix</groupId> + <artifactId>maven-bundle-plugin</artifactId> + <extensions>true</extensions> + <configuration> + <instructions> + <_wab>src/main/webapp,target/javascript</_wab> + <Embed-Dependency>*;scope=compile|runtime</Embed-Dependency> + <Import-Package> + * + </Import-Package> + <Web-ContextPath>/graphql-ui</Web-ContextPath> + </instructions> + </configuration> + </plugin> + </plugins> + </build> + +</project> diff --git a/graphql/graphql-playground/src/javascript/index.jsx b/graphql/graphql-playground/src/javascript/index.jsx new file mode 100644 index 0000000..15c13f5 --- /dev/null +++ b/graphql/graphql-playground/src/javascript/index.jsx @@ -0,0 +1,30 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import {Provider} from 'react-redux'; +import {Playground, store} from 'graphql-playground-react'; + +document.addEventListener('DOMContentLoaded', function() { + ReactDOM.render( + <Provider store={store}> + <Playground endpoint='http://localhost:8181/graphql'/> + </Provider>, + document.body + ) +}, false); diff --git a/graphql/graphql-playground/src/main/webapp/index.css b/graphql/graphql-playground/src/main/webapp/index.css new file mode 100644 index 0000000..054969a --- /dev/null +++ b/graphql/graphql-playground/src/main/webapp/index.css @@ -0,0 +1,45 @@ +@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700"; + +body { + margin: 0; + padding: 0; + font-family: sans-serif; + overflow: hidden; +} + +#root { + height: 100%; +} + +body { + font-family: 'Open Sans', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: rgba(0,0,0,.8); + line-height: 1.5; + height: 100vh; + letter-spacing: 0.53px; + margin-right: -1px !important; +} + +html, body, p, a, h1, h2, h3, h4, ul, pre, code { + margin: 0; + padding: 0; + color: inherit; +} + +a:active, a:focus, button:focus, input:focus { + outline: none; +} + +input, button, submit { + border: none; +} + +input, button, pre { + font-family: 'Open Sans', sans-serif; +} + +code { + font-family: Consolas, monospace; +} \ No newline at end of file diff --git a/graphql/graphql-playground/src/main/webapp/index.html b/graphql/graphql-playground/src/main/webapp/index.html new file mode 100644 index 0000000..f581719 --- /dev/null +++ b/graphql/graphql-playground/src/main/webapp/index.html @@ -0,0 +1,67 @@ +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + --> +<!DOCTYPE html> +<html> + +<head> + <meta charset=utf-8 /> + <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> + <title>GraphQL Playground</title> + <link href="index.css" rel="stylesheet" /> + <script src="unomi-graphql-playground.js"></script> +</head> + +<body> +<div id="root"> + <style> + body { + background-color: rgb(23, 42, 58); + font-family: Open Sans, sans-serif; + height: 90vh; + } + + #root { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .loading { + font-size: 32px; + font-weight: 200; + color: rgba(255, 255, 255, .6); + margin-left: 20px; + } + + img { + width: 78px; + height: 78px; + } + + .title { + font-weight: 400; + } + </style> + <div class="loading"> Loading + <span class="title">GraphQL Playground</span> + </div> +</div> +</body> + +</html> \ No newline at end of file diff --git a/graphql/graphql-playground/webpack.config.js b/graphql/graphql-playground/webpack.config.js new file mode 100644 index 0000000..9b6e335 --- /dev/null +++ b/graphql/graphql-playground/webpack.config.js @@ -0,0 +1,50 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +const path = require('path'); + +module.exports = { + entry: './src/javascript/index.jsx', + module: { + rules: [ + { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: ['babel-loader'] + }, + { + test: /\.(png|svg|jpg|gif)$/, + use: [ + 'file-loader', + ], + }, + { + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader', + ], + }, + ] + }, + resolve: { + extensions: ['*', '.js', '.jsx'] + }, + output: { + path: path.resolve(__dirname, 'target/javascript'), + filename: 'unomi-graphql-playground.js' + } +}; \ No newline at end of file diff --git a/graphql/pom.xml b/graphql/pom.xml index eaa4219..822a215 100644 --- a/graphql/pom.xml +++ b/graphql/pom.xml @@ -41,6 +41,7 @@ <modules> <module>cxs-impl</module> + <module>graphql-playground</module> <module>karaf-feature</module> </modules> diff --git a/kar/src/main/feature/feature.xml b/kar/src/main/feature/feature.xml index 69ecb29..f000558 100644 --- a/kar/src/main/feature/feature.xml +++ b/kar/src/main/feature/feature.xml @@ -82,11 +82,20 @@ <bundle start-level="85" start="false">mvn:org.apache.unomi/unomi-web-tracker-wab/${project.version}</bundle> <bundle start-level="99">mvn:org.apache.unomi/shell-commands/${project.version}</bundle> - <bundle start-level="85">mvn:org.webjars/swagger-ui/3.23.8</bundle> </feature> <feature name="unomi-documentation" description="Documentation of Unomi in HTML" version="${project.version}"> <feature>war</feature> <bundle>mvn:org.apache.unomi/manual/${project.version}</bundle> </feature> + + <feature name="unomi-rest-ui" description="Enables Swagger UI to browse the REST API" version="${project.version"> + <feature>unomi-kar</feature> + <bundle start-level="85">mvn:org.webjars/swagger-ui/3.23.8</bundle> + </feature> + + <feature name="unomi-graphql-ui" description="Enables GraphQL UI to browse the GraphQL API" version="${project.version}"> + <feature>unomi-kar</feature> + <bundle start-level="85">mvn:org.apache.unomi/unomi-graphql-playground/${project.version}</bundle> + </feature> </features> diff --git a/package/pom.xml b/package/pom.xml index c995048..2e31641 100644 --- a/package/pom.xml +++ b/package/pom.xml @@ -344,6 +344,8 @@ <feature>unomi-router-karaf-feature</feature> <feature>unomi-web-tracker-karaf-kar</feature> <feature>cdp-graphql-feature</feature> + <feature>unomi-rest-ui</feature> + <feature>unomi-graphql-ui</feature> </bootFeatures> <!-- <libraries> diff --git a/wab/src/main/webapp/index.html b/wab/src/main/webapp/index.html index dec81a4..56363a7 100644 --- a/wab/src/main/webapp/index.html +++ b/wab/src/main/webapp/index.html @@ -67,6 +67,12 @@ <li> Try Apache Unomi's <a href="/tracker/">integrated tracker</a> </li> + <li> + Access the <a href="/graphql-ui">GraphQL Playground UI</a> to browse and test GraphQL API requests + </li> + <li> + Access <a href="/cxs/api-docs?url=openapi.json">Swagger REST API UI</a> to browse and test the REST API + </li> <li>Checkout some cool <a href="http://unomi.apache.org/resources.html"; target="_blank">videos & tutorials</a> </li> <li>Read <a href="http://unomi.apache.org/manual/latest/index.html"; target="_blank">Apache Unomi's manual</a>
