Backstage.io plugin for toolbox. This plugin provides frontend that allows developers to use development related tools easily within backstage.
Find installation instructions in our documentation.
Most commonly used developer tools within Backstage
License: MIT License
Backstage.io plugin for toolbox. This plugin provides frontend that allows developers to use development related tools easily within backstage.
Find installation instructions in our documentation.
Add this to the MarkdownPreview to also output the markdown as HTML
Converts the input into allowed downtime/unavailability.
example: https://uptime.is
Usually, the token is in a Base64 encoded string. Allow to input also that to the JWT decoder to prevent unneeded work between two encoders.
I am looking to start using this plugin, however I'm a bit confused about what I should do with my existing use of @backstage/plugin-entity-validation
.
I see the implementation here does not follow the same approach in @backstage/plugin-entity-validation.
The (official?) plugin seems to make a request to the catalog API for entity validation. I assume this allows for some sort of customization on entity validation by the backstage implementers?
Tool - JWT Decoder
Error - Incorrect issued and expiration date in output
Steps to reproduce:
Go to the JWT decode tool.
Click the "Sample" button.
Date shows as Sun Jan 18 1970 14:10:39 GMT+0100 (Greenwich Mean Time)
Expected outcome:
Thu Jan 18 2018 01:30:22 GMT+0000 (Greenwich Mean Time)
Cause:
The value of jwtPayload.iat seems to be in seconds, whereas the Date constructor expects the value to be in milliseconds.
Tool that allows converting colors between the following formats: RGB, hex, HTML color name, HSV, HSL and CMYK.
There's a need for new react plugin that exposes only the Tool
type to be used for custom tools made by users of this plugin. Check also if there's other interfaces that might be needed for the common plugin.
Have a suggestion on a tool that accepts log text as input and provide grok pattern as output. This is quite a common requirement at a lot of companies and would be quite a useful addition to this plugin. Not sure on the implementation, but since it is a quite common thing there is probably some open source examples on how it works.
To allow organizations to also use their own tools in this plugin, it should be possible to pass an array of extra plugins to the page. Each plugin should have a name and component which renders the actual plugin and those would be appended to the list of tools.
Some components (e.g. DefaultEditor
and buttons etc.) would be handy in building a custom tool. Please consider exporting them so that they can be used in custom tooling for a consistent look.
For now, we will have to do lot of copying, which is not idea.
Hi @drodil.
It seems that now createCardExtension
should be imported from @backstage/plugin-home-react
instead of @backstage/plugin-home
This issue is this as it's impacting the ability to upgrade to the latest version of Backstage.
This line
Should be changed to
import { createCardExtension } from '@backstage/plugin-home-react';
Just like you did in the qeta plugin
You can see similar and related issues across other repositories
The default welcome page is a nice start, but personally I find the sea of cards very distracting. I'd also like to customize the welcome text with instruction on how employees at my company can contribute more tools to the tool box.
It would be great if we could fully override the welcome page.
In the list it would be possible to "star" the tools that are used most and those would then be always first in the list. localStorage could be used to save the favorite tools selection.
Type 'Tool' is not exported in backstage-plugin-toolbox plugin. Type can help a user add a new tool. (We can ignore the error with // @ts-ignore but thats not expected.
TS2459: Module '"@drodil/backstage-plugin-toolbox"' declares 'Tool' locally, but it is not exported.
A new tool that would take markdown input and show the preview next to it. There Is MarkdownContent component in the @backstage/core-components so that would be easy to utilize here.
This would mean that there is actually a router behind each tool that would then render only that tool's component. In the list or in the tool itself should be a possibility to open it in a new window without any other stuff in the backstage instance but the tool itself.
Each tool should have an unique id. This id can be used to exclude tools from the backstage app by passing a list of excluded tool ids to the Toolbox component.
I recently submitted a PR that was merged (#58) but it appears that the contents of the change were almost entirely ripped out in a subsequent commit (see here). I'm wondering if this was inadvertant (probably?) or if I put things back together, if there's something I need to take into account to avoid breaking something else or from having someone undo the work I did.
Just wanted to check before I reverted what was done to that specific tool.
Thanks!
Pull request is merged #50 but not ready to use, please create new release
For the home page, the plugin should create a card extension that allows the user to select a tool to be shown on the home page. See backstage/backstage#16744 and https://github.com/backstage/backstage/blob/master/plugins/home/README.md for reference.
I would like to have some kind of chime or alert when the countdown timer reaches 0:00:00. Without an alert when it is done, the utility is significantly reduced.
Is this possible already? If so, it would be great to surface the relevant documentation
Hi! I'm testing your plugin for Backstage and I have and issue with the container of the tools.
In theory should be on top of the page near the tools sidebar but I have it always at the very bottom after the sidebar of the tools.
Looks like some css property not working good. I played around with the flex-wrap property to non-wrap in the browser and It looks like the issue gones after that change but not really sure if that its the problem.
This only happens to me when full screen (1920x1080 right now) if you make smaller the browser the issue not appears
Can you please try to see if you can reproduce it? I will love to have your plugin showing correctly and use it , thank you so much!
Add a copy to clipboard buttons to the number base converter so that the outputs are easier to be used
The CardTravel
icon from https://v4.mui.com/components/material-icons/ looks kind of like a toolbox (I think it's actually a credit card with a handle, which is kind of odd??).
I chose to use this in my installation because I'm already using the DevTools plugin which already makes use of the Build
MUI4 icon and didn't want users to get confused.
import CardTravel from '@material-ui/icons/CardTravel';
As an aside note, I kind of wish the devtools plugin was just extra tabs under user settings to not overload the sidebar with another icon, but that's a separate issue entirely.
As developers and designers image conversion tools with resizing support is more helpful
Hi
I want to know if it's possible to add a thread dump analyser tool in the toolbox. Spotify has a simple thread dump analyser - maybe something like this: https://github.com/spotify/threaddump-analyzer
Add support for https://backstage.io/docs/plugins/analytics/. Add analytics for each tool so that it's possible to check for example the most used tool using analytics.
A new tool that can be used to write, test and debug regular expressions. Good example from online is https://regex101.com/
Tool that compares two YAML text and shows the diff
Hello,
As I see it, the toolbox is on mui v4. Do you have any plans on moving to mui v5 or accomodating it?
I ask as we run into some styling issues as most of our application is on mui v5 and the necessary overrides we have in place affect the styling in the toolbox.
(Also open to creating a PR)
Thanks!
Hey :)
by accident we found out, that the QR code generator throws an error for contents with more than 23648 characters.
Of course this is no valid usecase. But maybe a nice more user friendly error message could be shown instead of:
Error
Error
Message
code length overflow. (23780>23648)
Stack Trace
Error: code length overflow. (23780>23648)
A tool that allows working with IP addresses (v4 and v6). For example CIDR calculator could be included in the same tool. See https://github.com/ip-num/ip-num
Tool that generates barcodes from input. At least the most used formats should be implemented: Code-128, Code-11, Code-39, Code-93, ISBN 13, EAN-9, EAN-13, EAN-14. Other formats are a plus.
Tool that generates QR code based on the input. QR code types that at least should be supported are URL, VCARD, Email, Event, Geo coordinate, Plain text, SMS, Telephone and WiFi. Additionally allow user to select the amount of error correction for the generated code.
Tool that can decode JWT tokens into different parts and show the output for the user. See https://jwt.io/ for reference.
The following warning emits when installing this plugin
warning @drodil/backstage-plugin-toolbox > [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
Seems like this package is no longer supported and usage should be moved to
https://www.npmjs.com/package/@json2csv/plainjs
Alternatively you could use other packages such as papaparse
which provide both stringify / parse all in one single package.
Create a tool like https://www.online-stopwatch.com/ in the toolbox. When the countdown stops, an alarm sound should be played.
Backstage already has the Entity Inspector tool built into the main entity page which is a much richer experience than what is provided by this plugin's entity describer tool.
Entity Inspector Screenshot
To me it feels like the entity describer tool should be replaced with the entity inspector tool, or removed entirely.
I have noticed the entity describer shows the properties in the wrong order on users, groups, website and possibly other type of entities. I assume this is just a simple change in the way the data is displayed
A tool that would allow user to select seconds, minutes, hours, days, months and years and make a cron expression out of the selected options. Good example is at https://www.freeformatter.com/cron-expression-generator-quartz.html
Also should allow to paste cron expression and the tool would show it's meaning in plain english.
Hello! Looks like dependency to iban is missing that result in build error
Build fails when adding the 1.9.1 version to backstage app:
ERROR: Big integer literals are not available in the configured target environment ("es2019")
This is due to dependency of ip-num
using bit integers.
Hello,
Thank you for creating a very useful plugin!!
Tool: Encode/Decode - URL
Error: URIError: URI malformed
Description:
I encountered an error while using the Encode/Decode - URL tool. When I try to encode or decode a URL by typing, if the encodeURI / decodeURI is unable encode or decode properly, it returns a URI malformed error that isn't handled.
Steps to reproduce:
Thanks a lot for this plugin! I like it a lot and am busy convincing my team we need this one in our backstage.
My feature request is that I added a custom tool to the toolbox and would like to be able to use it on the homepage via your plugin.
Happy to give this a try if you think this is feasible.
The @drodil/backstage-plugin-toolbox
exports Tool
which is marked as deprecated.
The instructions are to consume Tool
from @drodil/backstage-plugin-toolbox-react
directly instead, but this creates an awkward situation because that package is not accessible unless you install it manually and then you open yourself up to version drift ( I know package managers can usually handle this, but seems unnecessary). That also just prevents package.json
bloat in general.
Proposal:
ReactTool
without re-aliasing, ie: just call it Tool
When accessing the File Diff tool, we are getting a CSP error trying to access monaco-editor js.
Refused to load the script 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Maybe monaco-editor could be hosted locally rather than going to cdn?
Tool that allows fetching WHOIS information of a domain. Should be under Networking category.
A tool that takes input and generates hashes (MD2, MD4, MD5, SHA1....) out of the input. Should allow pasting from clipboard and uploading a file. Each hash should be copyable to clipboard. See https://devutils.com/demo/#hashing as a reference
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.