-
-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Ui component and routing for medusa admin sentry (#14)
* feat: library setup * feat: implement medusa sentry ui components * style: format sentry ui code * feat(components): Cleanup and refactor * cleanup * fix: remove lodash from bundle, bundle components, add type bundle * cleanup * WIP * feat: Add sentry plugin end point to retrive stats for all transactions or a particular transaction * update readme * update readme * typing * typing * wip: stas graphs * fix: resolve conflicts * wip: graphs * wip: graphs 2 * wip: tooltip * update logo * finalise graph * cleanup * deps * reamde Co-authored-by: fPolic <frane@medusajs.com>
- Loading branch information
Showing
47 changed files
with
10,837 additions
and
317 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| .idea | ||
| /lib | ||
| /dist | ||
| */**/dist | ||
| node_modules | ||
| .DS_store | ||
| **/.DS_Store | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| .idea | ||
|
|
||
| node_modules | ||
| .DS_store | ||
| **/.DS_Store | ||
|
|
||
| dist | ||
| coverage | ||
|
|
||
| tsconfig.tsbuildinfo | ||
| package-lock.json | ||
| yarn.json | ||
| yarn-error.log | ||
|
|
||
| .env.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <p align="center"> | ||
| <img src="https://github.com/adrien2p/medusa-plugins/blob/assets/assets/medusa-plugin-sentry-ui-logo.png?raw=true" alt="Medusa-plugins logo" width="500" height="auto" /> | ||
| </p> | ||
|
|
||
| <h1 align="center">medusa-plugin-sentry-ui</h1> | ||
|
|
||
| <p align="center"> | ||
| <a href="https://www.npmjs.com/package/medusa-plugin-sentry-ui"><img alt="NPM Version" src="https://img.shields.io/npm/v/medusa-plugin-sentry-ui.svg" height="20"/></a> | ||
| <a href="https://github.com/adrien2p/medusa-plugins/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/adrien2p/medusa-plugins.svg" height="20"/></a> | ||
| <a href="https://github.com/adrien2p/awesome-medusajs"><img alt="Awesome medusajs" src="https://awesome.re/badge.svg" height="20"/></a> | ||
| <a href="https://twitter.com/intent/tweet?text=Check%20this%20out!%20The%20new%20medusa%sentry%20plugin&url=https://github.com/adrien2p/medusa-plugins/tree/main/packages/medusa-plugin-sentry-ui"><img alt="Twitter" src="https://badgen.net/badge/icon/twitter?icon=twitter&label=Share%20it%20on" height="20"/></a> | ||
| <a href="https://discord.gg/xpCwq3Kfn8"><img alt="Discord" src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" height="20"/></a> | ||
| <a href="https://github.com/adrien2p/medusa-plugins/commits/main"><img alt="Activity" src="https://img.shields.io/github/commit-activity/m/adrien2p/medusa-plugins?style=flat" height="20"/></a> | ||
| <a href="https://github.com/adrien2p/medusa-plugins/issues"><img alt="Issues" src="https://img.shields.io/github/issues/adrien2p/medusa-plugins?style=flat" height="20"/></a> | ||
| </p> | ||
|
|
||
| ## Description | ||
|
|
||
| Thie spackage provides a set of component to have a sentry dashboard right into your admin | ||
| and be able to get an overview of what is happening without having to leave your admin. | ||
|
|
||
| JavaScript Error and Performance Monitoring | ||
| Resolve JavaScript errors with max efficiency, not max effort. Get actionable insights to resolve JavaScript performance issues with the ability to track, debug, and resolve JavaScript errors across platforms. | ||
|
|
||
| ## Demo | ||
|
|
||
| Need to feel that section | ||
|
|
||
| ## Getting started | ||
|
|
||
| > ### Requirements | ||
| > Your server need to have installed `medusa-plugin-sentry` before being able to use that library | ||
| > as the data are comsumed from that plugin. | ||
| First of all, you need to install the plugin as follow `yarn add medusa-plugnin-sentrui` | ||
|
|
||
| For the simple uasge you can open the file `src/pages/a.js` and add the following component above the `Routes` component | ||
| ```javascript | ||
| import { medusaUrl } from "../services/config" | ||
| import { Sentry } from "medusa-plugin-sentry-ui" | ||
|
|
||
| const SentryRoute = () => { | ||
| const location = useLocation() | ||
| const organisation = "YOUR_ORGA_ON_SENTRY" | ||
| const project = "YOUR_PROJECt_ON_SENTRY" | ||
|
|
||
| return ( | ||
| <Router> | ||
| <Sentry path="/" baseUrl={medusaUrl} organisation={organisation} project={project} location={location} /> | ||
| </Router> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| The in the `Routes` component you can add the following content just bellow the other routes | ||
| ```javascript | ||
| <SentryRoute path="sentry/*"/> | ||
| ``` | ||
|
|
||
| Finally, to add an access to your page, you can go to `src/components/organisms/sidebar/index.tsx` | ||
| and add a new item in the component just like the following one | ||
| ```javascript | ||
| <SidebarMenuItem | ||
| pageLink={"/a/sentry"} | ||
| icon={<ClockIcon size={ICON_SIZE} />} | ||
| triggerHandler={triggerHandler} | ||
| text={"Sentry"} | ||
| /> | ||
| ``` | ||
|
|
||
| You should now be able to start your admin and go to your page to see your sentry dashboard :rocket: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| { | ||
| "name": "medusa-plugin-sentry-ui", | ||
| "version": "0.1.0", | ||
| "description": "UI components for medusa-sentry-plugin", | ||
| "keywords": [ | ||
| "react", | ||
| "medusa", | ||
| "sentry", | ||
| "ui", | ||
| "library" | ||
| ], | ||
| "contributors": [ | ||
| "fPolic <frane@medusajs.com>", | ||
| "Adrien de Peretti <adrien.deperetti@gmail.com>" | ||
| ], | ||
| "homepage": "https://github.com/adrien2p/medusa-plugins/tree/main/packages/medusa-plugin-sentry-ui#readme", | ||
| "license": "ISC", | ||
| "main": "dist/cjs/index.js", | ||
| "module": "dist/esm/index.js", | ||
| "types": "dist/types/types.d.ts", | ||
| "directories": { | ||
| "lib": "src", | ||
| "test": "__tests__" | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/adrien2p/medusa-plugins.git" | ||
| }, | ||
| "scripts": { | ||
| "build": "run-s clean build:lib", | ||
| "clean": "rimraf dist tsconfig.tsbuildinfo", | ||
| "build:lib": "rollup -c", | ||
| "test": "jest", | ||
| "storybook": "start-storybook -p 6006", | ||
| "build-storybook": "build-storybook" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/adrien2p/medusa-plugins/issues" | ||
| }, | ||
| "peerDependencies": { | ||
| "@hookform/error-message": "^2.0.0", | ||
| "@medusajs/medusa": "^1.5.0", | ||
| "@medusajs/medusa-js": "^1.3.1", | ||
| "@radix-ui/react-dropdown-menu": "^0.1.4", | ||
| "@radix-ui/react-tooltip": "^0.1.6", | ||
| "clsx": "^1.1.1", | ||
| "gatsby": "^4.4.0", | ||
| "lodash": "^4.17.21", | ||
| "react": "^16.12.0", | ||
| "react-dom": "^16.12.0", | ||
| "react-hook-form": "^7.31.3", | ||
| "react-table": "^7.7.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@hookform/error-message": "^2.0.0", | ||
| "@medusajs/medusa": "^1.5.0", | ||
| "@medusajs/medusa-js": "^1.3.1", | ||
| "@radix-ui/react-dropdown-menu": "^0.1.4", | ||
| "@radix-ui/react-tooltip": "^0.1.6", | ||
| "@reach/router": "^1.3.4", | ||
| "@rollup/plugin-commonjs": "^23.0.0", | ||
| "@rollup/plugin-node-resolve": "^15.0.0", | ||
| "@rollup/plugin-typescript": "^9.0.1", | ||
| "@types/node": "^18.8.5", | ||
| "@types/react": "^18.0.21", | ||
| "@types/react-table": "^7.7.9", | ||
| "@typescript-eslint/utils": "^5.40.1", | ||
| "autoprefixer": "^10.4.12", | ||
| "clsx": "^1.1.1", | ||
| "gatsby": "^4.4.0", | ||
| "react": "^16.12.0", | ||
| "react-dom": "^16.12.0", | ||
| "react-hook-form": "^7.31.3", | ||
| "react-table": "^7.7.0", | ||
| "rollup": "^3.2.3", | ||
| "rollup-plugin-dts": "^5.0.0", | ||
| "rollup-plugin-peer-deps-external": "^2.2.4", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "tslib": "^2.4.0", | ||
| "typescript": "^4.8.4" | ||
| }, | ||
| "dependencies": { | ||
| "styled-components": "^5.3.6", | ||
| "util": "^0.12.5", | ||
| "victory": "^36.6.8" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import resolve from "@rollup/plugin-node-resolve"; | ||
| import commonjs from "@rollup/plugin-commonjs"; | ||
| import typescript from "@rollup/plugin-typescript"; | ||
| import dts from "rollup-plugin-dts"; | ||
| import { terser } from "rollup-plugin-terser"; | ||
| import peerDepsExternal from "rollup-plugin-peer-deps-external"; | ||
|
|
||
| export default [ | ||
| { | ||
| input: "src/index.ts", | ||
| output: [ | ||
| { | ||
| file: "dist/cjs/index.js", | ||
| format: "cjs", | ||
| sourcemap: true | ||
| }, | ||
| { | ||
| file: "dist/esm/index.js", | ||
| format: "esm", | ||
| sourcemap: true | ||
| } | ||
| ], | ||
| plugins: [ | ||
| peerDepsExternal(), | ||
| resolve(), | ||
| commonjs(), | ||
| typescript({ tsconfig: "./tsconfig.json" }), | ||
| terser() | ||
| ], | ||
| external: ["react", "react-dom", "styled-components", "lodash"] | ||
| }, | ||
| { | ||
| input: "./dist/esm/index.d.ts", | ||
| output: [{ file: "dist/types/types.d.ts", format: "es" }], | ||
| plugins: [dts()], | ||
| }, | ||
| ]; |
Oops, something went wrong.