Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@oriflame/backstage-plugin-score-card
Advanced tools
Readme
Welcome to the score-card plugin! Main idea behind it comes from a need to somehow visualize maturity of our services and to establish a process how to improve it (discuss with the teams what to focus on next).
Page that displays list of entities and their scores.
Table that displays list of entities and their scores.
Props | type | Description | Default |
---|---|---|---|
title | string | Title of the table | Entities scores overview |
entityKindFilter | string[] | Filter entities by kind | undefined |
Displays detail for one entity and its scoring. You may use it in entity detail page in the catalog.
You may drill down to the details of each score together with explanation why it has such score & also a TODO for the team.
Implementation of ScoringDataApi
that the above components are using to load data. This client simply reads it from a JSON files located e.g. on a blob storage account.
The location of the JSON files may be configured in `app-config.yaml' like this:
scorecards:
jsonDataUrl: https://raw.githubusercontent.com/Oriflame/backstage-plugins/main/plugins/score-card/sample-data/
In the above location it expects data in a format see scoring data.
Important: loading from the url might be blocked by the Content-Security-Policy. In that case you would need to add the server address among csp
settings like this:
backend:
csp:
default-src: ["'self'", "raw.githubusercontent.com"]
Also the server providing the data needs to have correctly configured CORS policy, i.e. return HTTP header Access-Control-Allow-Origin
that should list domain from where you serve your backstage instance. See e.g. how to configure CORS for Azure Blob Storage.
All configuration options:
jsonDataUrl
[optional]: url for the JSON data client, see ScoringDataJsonClient.fetchAllEntities
[optional]: if set to true
, will fetch all the entities from the catalog and filter them afterwards. By default the entities are loaded from the catalog using a filter by name, which may result in 414 Request-URI Too Large
.wikiLinkTemplate
[optional]: the template for the link to the wiki. You may use any existing properties from the EntityScoreEntry
, e.g. "https://TBD/XXX/_wiki/wikis/XXX.wiki/{id}"
or "{scoreUrl}"
.Install the score-card Plugin:
# From your Backstage root directory
yarn add --cwd packages/app @oriflame/backstage-plugin-score-card
Add Score board to packages/app/src/App.tsx
:
+import { ScoreBoardPage } from '@oriflame/backstage-plugin-score-card';
const routes = (
<FlatRoutes>
+ <Route path="/score-board" element={<ScoreBoardPage />} />
</FlatRoutes>
);
Add Link to menu packages/app/src/components/Root/Root.tsx
:
+import Score from '@material-ui/icons/Score';
export const Root = ({ children }: PropsWithChildren<{}>) => (
<SidebarPage>
<Sidebar>
<SidebarGroup label="Menu" icon={<MenuIcon />}>
...
<SidebarScrollWrapper>
...
+ <SidebarItem icon={Score} to="score-board" text="Score board" />
</SidebarScrollWrapper>
</SidebarGroup>
...
</Sidebar>
{children}
</SidebarPage>
);
Add Score Card to packages/app/src/components/catalog/EntityPage.tsx
:
+import { EntityScoreCardContent } from '@oriflame/backstage-plugin-score-card';
const systemPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="/" title="Overview">
...
</EntityLayout.Route>
+
+ <EntityLayout.Route path="/score" title="Score">
+ <Grid container spacing={3} alignItems="stretch">
+ <Grid item xs={12}>
+ <EntityScoreCardContent />
+ </Grid>
+ </Grid>
+ </EntityLayout.Route>
+
</EntityLayoutWrapper>
);
To find out a score
for your service we follow this process:
We have based the scoring on a set of non-functional requirements in these areas:
The main goal of the scoring is to visualize the maturity of the services (systems). We do not expect each service to have 100 % fulfillment for every area. Primary goal is to identify where we can help the team to improve and where we should help all teams in general.
Also every service is specific and in a different state of implementation. When a team starts building a new service it is absolutely OK to have e.g. low Operations score.
So as a first step the teams need to understand why. That is why there is an important step to prepare teams for the scoring process, e.g. with following presentation: system-scoring.pdf.
Team does the self assessment, that is answering a form (e.g. via Sharepoint list) with list of questions. There is a space for comments. Each requirement is described in detail in a wiki.
Example how a form in Sharepoint may look like:
Answers & comments are reviewed together with the team by an architect. Questions are answered, possible improvements and TODOs discussed and agreed with the team & product owner(s).
There is an integration pipeline that runs regularly that integrates the Sharepoint list, git repository with the scoring data and the storage account that provides JSON scoring data for the Backstage plugin to visualize results.
For more detailed info see README.
Every 6 months (it depends) there needs to be a quick update with the team & the architect so we can see whenever we are improving.
You would need the same prerequisites as for backstage (node.js,...). One component you would need is http-server
that will provide the sample data for the plugin.
Navigate to the plugin directory /plugins/score-card
and run yarn start:dev
. Your local DEV environment will start: http://localhost:3024/.
To run unit tests simply execute yarn test score-card
;
This is being done as part of the backstage integration tests. See /packages/app/e2e-tests
.
Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running yarn start
in the root directory, and then navigating to /score-card.
You can also serve the plugin in isolation by running yarn start
in the plugin directory.
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
It is only meant for local development, and the setup for it can be found inside the /dev directory.
FAQs
Unknown package
The npm package @oriflame/backstage-plugin-score-card receives a total of 1,902 weekly downloads. As such, @oriflame/backstage-plugin-score-card popularity was classified as popular.
We found that @oriflame/backstage-plugin-score-card demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.