├── .DS_Store ├── .gitignore ├── LICENSE ├── README.md ├── __tests__ ├── backend │ └── route.test.js └── frontend │ └── jest.test.js ├── client ├── .DS_Store ├── components │ ├── .DS_Store │ ├── App.js │ ├── Header.js │ ├── Metric.js │ ├── QueryHistory.js │ ├── QueryInput.js │ ├── Result.js │ ├── Schema.js │ ├── SchemaVisual.js │ ├── SideBar.js │ └── URILink.js └── context │ ├── global-context.js │ └── global-reducer.js ├── jest.config.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js └── index.js ├── postcss.config.js ├── public ├── .DS_Store ├── demo.gif ├── gif-4.gif ├── graph.gif ├── metricql-transparent.png ├── metricql.png ├── query-history.gif ├── schema.gif └── visualizer.gif ├── server ├── controllers │ ├── postgreSQLController.js │ └── schemaFunc.js ├── generator │ ├── generateTypes.js │ ├── generatorResolver.js │ ├── resolverFunc.js │ ├── schema.js │ ├── testPSQL.js │ └── typesFunc.js ├── graphQLServer │ └── schema.js ├── query │ └── tables.sql ├── router.js └── server.js ├── styles ├── SideBar.module.css ├── URILink.module.css └── globals.css └── tailwind.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MetriQL/a94ace09255761003f81003d420b3640be4649c0/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env 3 | .next 4 | .DS_store 5 | .next -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 OSLabs Beta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MetricQL 2 | ## A GraphQL Migration Tool 3 | 4 | ### Table of Contents 5 | 6 | About MetricQL 7 | Getting Started 8 | Contributors 9 | To Do 10 | Usage 11 | Built With 12 | Developers 13 | Acknowledgments 14 | License 15 | 16 | 17 | ### About MetricQL 18 | MetricQL is a migration assistance tool that facilitates the transition from REST to GraphQL. Generate, customize, and export GraphQL schemas from existing PostgreSQL databases and visualize performance metrics. 19 | 20 | Transform existing PostgresQL databases into GraphQL code, including query resolvers and types. 21 | Visualize PostgresQL entity-relational diagrams to view and analyze database relationships. 22 | Edit, test and compare queries with the code playground and query history panel. 23 | Analyze query response times to optimize GraphQL performance. 24 | 25 | 26 | 27 | Accelerated by OS Labs. 28 | 29 | ### Getting Started is Easy! 30 | You can access our tool's URL input in-browser, or download the application for access to all additional features. Initial instructions for both methods are detailed below: 31 | 32 | #### In-Browser #### 33 | Visit metricql.com for easy access. Navigate to the ‘Generate Schema’ page to access our URL input form. Copy a relational database link (i.e., PostgresQL) and paste into the input box. After clicking submit, you will see your GraphQL types on the left, and your resolvers on the right. For access to the full host of MetricQL’s features, fork & clone our repo for an easy spin-up. 34 | 35 | #### Download Instructions #### 36 | * Clone our repo onto your personal machine 37 | * Once the file has been cloned and opened, run 'npm install' in your CLI 38 | * After installation, run 'npm build' 39 | * If you run into any issues with the option to install with "--legacy-peer-deps", do so 40 | * Once the build is complete, use the 'npm run dev' command to spin up the application, accessing it through localhost:3000 41 | 42 | 43 | ### Database Connection 44 | 45 | Connect to MetricQL by inputting an existing PostgreSQL URI to auto-populate data, or use our sample database to test our utilities. 46 | 47 | ![](/public/demo.gif) 48 | 49 | ### Accessing Customized GraphQL Code* 50 | 51 | Input your specific query under Query Input (code playground) and click Submit to generate customized GraphQL code based on your needs. 52 | 53 | ![](/public/gif-4.gif) 54 | 55 | Access query history via the left panel. 56 | 57 | ![](/public/query-history.gif) 58 | 59 | Export or highlight and copy the auto-generated GraphQL code that displays beneath the performance graph. 60 | Visit the sidebar on the left to view GraphQL Types and Resolvers. 61 | Click on Export or highlight and copy/paste. 62 | 63 | ![](/public/schema.gif) 64 | 65 | ### ER Visualizer* 66 | 67 | The PostgreSQL entity-relational diagram is also accessible via the sidebar on the left, simply click on “View Visualizer” to manipulate and analyze relationships. 68 | 69 | ![](/public/visualizer.gif) 70 | 71 | ### Performance* 72 | 73 | Easily view performance metrics on the top right panel and start analyzing and comparing the efficiency of your GraphQL queries. 74 | 75 | ![](/public/graph.gif) 76 | 77 | ### Contributions 78 | MetricQL greatly welcomes any contributions from the open source community! Please click here to view our contribution FAQ page. A big thank you for your interest and passion in contributing to MetricQL! 79 | 80 | 81 | ### Contributing to MetricQL 82 | 83 | The MetricQL team would like to thank you for your interest in helping to maintain and improve our app! 84 | Please follow these steps for a seamless contribution experience: 85 | There are 3 npm actions you need to run before working: 86 | npm install 87 | npm run build 88 | npm run dev (to launch website) 89 | Reporting Bugs and Adding New Features 90 | All code changes happen through Github Pull Requests and we actively welcome them! To submit your pull request, follow the steps below: 91 | 92 | 93 | ### Fork the Project 94 | 95 | Create your Feature Branch from dev (git checkout -b feature/NewFeature) 96 | Commit your Changes (git commit -m 'Add some NewFeature') 97 | Push to the Branch on your Fork (git push origin feature/NewFeature) 98 | Open a Pull Request from the Branch on your Fork to the dev branch on the MetricQL Dev Branch 99 | We will review Pull Requests on an ongoing basis. 100 | 101 | ### Pull Requests 102 | 103 | Fork the repo and create your branch from dev. 104 | If you've added code that should be tested, add tests. 105 | If you've changed APIs, please update the documentation. 106 | Ensure the tests pass by running npm run tests. 107 | Make sure your code lints. 108 | Submit a pull request. 109 | To-Dos 110 | Non-Relational Database Integration to extend users' options by allowing non-relational DB imports 111 | TypeScript code refactoring 112 | Add support for all SQL data types 113 | 114 | ### Built With 115 | 116 | MetricQL was built using the following frameworks and libraries: 117 | 118 | Next.js 119 | React 120 | React ContextAPI 121 | GraphQL 122 | Node.js 123 | Express 124 | PostgreSQL 125 | Jest 126 | Supertest 127 | 128 | 129 | ### Contributors 130 | 131 | Rehema Armorer 132 | 133 | Diana Li 134 | 135 | Raymond Huang 136 | 137 | Eric Rodgers 138 | 139 | Alfonso Zamarripa 140 | 141 | ### Acknowledgments 142 | 143 | A big thank you to the tech accelerator Open Source Labs for their continued support and sponsorship throughout this whole process. 144 | 145 | This project is licensed under the MIT License - see the License.MD file for details 146 | -------------------------------------------------------------------------------- /__tests__/backend/route.test.js: -------------------------------------------------------------------------------- 1 | const request = require('supertest'); 2 | 3 | const server = 'http://localhost:3001' 4 | 5 | describe('Route integration', () => { 6 | describe('/schema', () => { 7 | describe('POST', () => { 8 | it('responds with 200 status and application/json content type', () => { 9 | return request(server) 10 | .post('/schema') 11 | .expect('Content-Type', /application\/json/) 12 | .expect(200) 13 | }) 14 | }) 15 | describe('GET', () => { 16 | it('responds with 200 status and text/html content type', () => { 17 | return request(server) 18 | .get('/') 19 | .expect('Content-Type', /text\/html/) 20 | .expect(200) 21 | }) 22 | }) 23 | }) 24 | }) 25 | -------------------------------------------------------------------------------- /__tests__/frontend/jest.test.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render, fireEvent, screen } from '@testing-library/react'; 3 | import { rest } from 'msw'; 4 | import { setupServer } from 'msw/node'; 5 | 6 | //overall app 7 | import App from '../../client/components/App'; 8 | //Splash page 9 | import splashPage from '../../pages/index.js'; 10 | import Nav from '../../client/components/Nav.js'; 11 | import MainFeature from '../../client/components/styles/MainFeature.js' 12 | import SecondFeature from '../../client/components/styles/SecondFeature.js' 13 | import ThirdFeature from '../../client/components/styles/ThirdFeature.js' 14 | import Team from '../../client/components/styles/Team.js' 15 | 16 | //Tool page 17 | import toolPage from '../../pages/main.js' 18 | 19 | 20 | //establish mock server 21 | const server = setupServer( 22 | rest.get('/', (req, res, ctx) => { 23 | return res(ctx.status(200), ctx.json({ greeting: 'hello' })); 24 | }) 25 | ) 26 | 27 | //create variables for mock contexts 28 | let realContext; 29 | let fakeContext; 30 | 31 | //establish API mock before any and all tests 32 | beforeAll(() => server.listen()); 33 | //set up mock context before each test 34 | beforeEach(() => { 35 | realContext = React.useContext; 36 | fakeContext = React.useContext = jest.fn() 37 | }) 38 | //reset handlers that are declared during testing and reset real context after reach tet 39 | afterEach(() => { 40 | React.useContext = realContext; 41 | server.resetHandlers(); 42 | }) 43 | 44 | //close server at end of all tests 45 | afterAll(() => server.close()) 46 | 47 | xdescribe('Renders Site', () => { 48 | describe('renders homepage', () => { 49 | test('renders nav bar', async () => { 50 | const { getByText } = render(