Skip to content

Commit

Permalink
Merge pull request #1 from humanitec/move-plugin
Browse files Browse the repository at this point in the history
chore: move plugin
  • Loading branch information
johanneswuerbach authored May 3, 2024
2 parents 8cb7fb3 + cfbf3d5 commit 41ffa75
Show file tree
Hide file tree
Showing 20 changed files with 283 additions and 149 deletions.
7 changes: 7 additions & 0 deletions .changeset/blue-moons-occur.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@humanitec/backstage-plugin-backend': minor
'@humanitec/backstage-plugin-common': minor
'@humanitec/backstage-plugin': minor
---

moved plugin into humanitec organization
2 changes: 1 addition & 1 deletion packages/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"@backstage/plugin-techdocs-react": "^1.2.3",
"@backstage/plugin-user-settings": "^0.8.5",
"@backstage/theme": "^0.5.3",
"@frontside/backstage-plugin-humanitec": "^0.3.15",
"@humanitec/backstage-plugin": "^0.3.15",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"history": "^5.0.0",
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/components/catalog/EntityPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ import {

import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
import { HumanitecCardComponent } from '@frontside/backstage-plugin-humanitec';
import { HumanitecCardComponent } from '@humanitec/backstage-plugin';

const techdocsContent = (
<EntityTechdocsContent>
Expand Down Expand Up @@ -139,8 +139,8 @@ const overviewContent = (
<EntityHasSubcomponentsCard variant="gridItem" />
</Grid>
<Grid item md={6}>
<HumanitecCardComponent />
</Grid>
<HumanitecCardComponent />
</Grid>
</Grid>
);

Expand Down
2 changes: 1 addition & 1 deletion packages/backend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"@backstage/plugin-search-backend-module-techdocs": "^0.1.22",
"@backstage/plugin-search-backend-node": "^1.2.21",
"@backstage/plugin-techdocs-backend": "^1.10.4",
"@frontside/backstage-plugin-humanitec-backend": "^0.3.17",
"@humanitec/backstage-plugin-backend": "^0.3.17",
"app": "link:../app",
"better-sqlite3": "^9.0.0",
"dockerode": "^3.3.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/backend/src/plugins/humanitec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createRouter } from '@frontside/backstage-plugin-humanitec-backend';
import { createRouter } from '@humanitec/backstage-plugin-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

Expand Down
14 changes: 7 additions & 7 deletions plugins/humanitec-backend/README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# @frontside/backstage-plugin-humanitec-backend
# @humanitec/backstage-plugin-backend

`@frontside/backstage-plugin-humanitec-backend` is a plugin for the Backstage backend app. It provides a route that `@frontside/backstage-plugin-humanitec` will use to connect to Humanitec API and scaffolder actions.
`@humanitec/backstage-plugin-backend` is a plugin for the Backstage backend app. It provides a route that `@humanitec/backstage-plugin` will use to connect to Humanitec API and scaffolder actions.

## Installation

1. Install `@frontside/backstage-plugin-humanitec-backend` plugin with,
1. Install `@humanitec/backstage-plugin-backend` plugin with,

```bash
yarn workspace backend add @frontside/backstage-plugin-humanitec-backend
yarn workspace backend add @humanitec/backstage-plugin-backend
```

2. Create `./packages/backend/src/plugins/humanitec.ts` with the following content,

```ts
import { createRouter } from '@frontside/backstage-plugin-humanitec-backend';
import { createRouter } from '@humanitec/backstage-plugin-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

Expand Down Expand Up @@ -57,15 +57,15 @@ This plugin provides the following scaffolder actions,

### create-app

`create-app` will create an app in Humanitec with specific workloads and automation.
`create-app` will create an app in Humanitec with specific workloads and automation.

#### Installation

To make this action available, you can add it to your scaffolder plugin configuration in `./packages/backend/src/plugins/scaffolder.ts`

```diff
# import createHumanitecApp action
+ import { createHumanitecApp } from "@frontside/backstage-plugin-humanitec-backend";
+ import { createHumanitecApp } from "@humanitec/backstage-plugin-backend";

# register the action
const actions = [
Expand Down
4 changes: 2 additions & 2 deletions plugins/humanitec-backend/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@frontside/backstage-plugin-humanitec-backend",
"name": "@humanitec/backstage-plugin-backend",
"version": "0.3.17",
"main": "src/index.ts",
"types": "src/index.ts",
Expand All @@ -25,7 +25,7 @@
"@backstage/backend-common": "^0.21.3",
"@backstage/config": "^1.1.1",
"@backstage/plugin-scaffolder-backend": "^1.19.1",
"@frontside/backstage-plugin-humanitec-common": "^0.3.13",
"@humanitec/backstage-plugin-common": "^0.3.13",
"@types/express": "*",
"cross-fetch": "3.1.5",
"express": "^4.17.1",
Expand Down
4 changes: 2 additions & 2 deletions plugins/humanitec-backend/src/actions/create-app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { createTemplateAction } from '@backstage/plugin-scaffolder-backend';
import { stat, readFile } from 'fs/promises';
import { join, resolve } from 'path';
import { loadAll } from 'js-yaml';
import { SetupFileSchema, createHumanitecClient } from '@frontside/backstage-plugin-humanitec-common';
import { SetupFileSchema, createHumanitecClient } from '@humanitec/backstage-plugin-common';

interface HumanitecCreateApp {
orgId: string;
Expand Down Expand Up @@ -130,4 +130,4 @@ async function loadSetupFile(filePath: string) {
}
}
return null;
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { setTimeout } from 'node:timers/promises';
import * as common from '@frontside/backstage-plugin-humanitec-common';
import * as common from '@humanitec/backstage-plugin-common';

import { AppInfoService } from './app-info-service';

Expand All @@ -11,7 +11,7 @@ let slowFetch = false
const fakeAppInfo = { fake: 'res' }
const fakeError = new Error('fake error');

jest.mock('@frontside/backstage-plugin-humanitec-common', () => ({
jest.mock('@humanitec/backstage-plugin-common', () => ({
createHumanitecClient: jest.fn(),
fetchAppInfo: jest.fn(async () => {
if (returnError) {
Expand Down
2 changes: 1 addition & 1 deletion plugins/humanitec-backend/src/service/app-info-service.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { EventEmitter } from 'events';

import { createHumanitecClient, fetchAppInfo } from '@frontside/backstage-plugin-humanitec-common';
import { createHumanitecClient, fetchAppInfo } from '@humanitec/backstage-plugin-common';

const defaultFetchInterval = 10000;

Expand Down
2 changes: 1 addition & 1 deletion plugins/humanitec-common/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# @frontside/plugin-humanitec-api-client-common
# @humanitec/backstage-plugin-common

Welcome to the common package for the humanitec-api-client plugin!

Expand Down
2 changes: 1 addition & 1 deletion plugins/humanitec-common/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@frontside/backstage-plugin-humanitec-common",
"name": "@humanitec/backstage-plugin-common",
"description": "Humanitec API Client",
"version": "0.3.13",
"main": "src/index.ts",
Expand Down
10 changes: 5 additions & 5 deletions plugins/humanitec/README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
# @frontside/backstage-plugin-humanitec
# @humanitec/backstage-plugin

`@frontside/backstage-plugin-humanitec` is a plugin for the Backstage frontend app. It shows information about environments, workloads and resources on an entity page.
`@humanitec/backstage-plugin` is a plugin for the Backstage frontend app. It shows information about environments, workloads and resources on an entity page.

![screenshot](./screenshot.png)

## Requirements

This plugin requires `@frontside/backstage-plugin-humanitec-backend` because it connects to the backend to make requests to the Humanitec API.
This plugin requires `@humanitec/backstage-plugin-backend` because it connects to the backend to make requests to the Humanitec API.

## Installation

First, install the plugin to your backstage app:

```bash
yarn workspace app add @frontside/backstage-plugin-humanitec
yarn workspace app add @humanitec/backstage-plugin
```

Then in your Entity Page (`./packages/app/src/components/catalog/EntityPage.tsx`) add the `HumanitecCardComponent`:

```diff
+ import { HumanitecCardComponent } from '@frontside/backstage-plugin-humanitec';
+ import { HumanitecCardComponent } from '@humanitec/backstage-plugin';
...
const overviewContent = (
<Grid container>
Expand Down
4 changes: 2 additions & 2 deletions plugins/humanitec/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@frontside/backstage-plugin-humanitec",
"name": "@humanitec/backstage-plugin",
"version": "0.3.15",
"main": "src/index.ts",
"types": "src/index.ts",
Expand Down Expand Up @@ -43,7 +43,7 @@
"@backstage/core-app-api": "^1.11.1",
"@backstage/dev-utils": "^1.0.27",
"@backstage/test-utils": "^1.5.0",
"@frontside/backstage-plugin-humanitec-common": "^0.3.13",
"@humanitec/backstage-plugin-common": "^0.3.13",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^14.5.1",
Expand Down
43 changes: 36 additions & 7 deletions plugins/humanitec/src/components/DeploymentStatus.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,50 @@
import type { FetchAppInfoEnvironment } from '@frontside/backstage-plugin-humanitec-common';
import type { FetchAppInfoEnvironment } from '@humanitec/backstage-plugin-common';
import { Typography } from '@material-ui/core';
import React from 'react';
import { useStyles } from '../hooks/useStyles';

export function DeploymentStatus({ env }: { env: FetchAppInfoEnvironment; }) {
export function DeploymentStatus({ env }: { env: FetchAppInfoEnvironment }) {
const classes = useStyles();

switch (env.last_deploy?.status) {
case 'succeeded':
return (<Typography className={`${classes.deploymentStatus} ${classes.successColor}`}>Succeeded</Typography>);
return (
<Typography
className={`${classes.deploymentStatus} ${classes.successColor}`}
>
Succeeded
</Typography>
);
case 'pending':
return (<Typography className={`${classes.deploymentStatus}`} color="primary">Pending</Typography>);
return (
<Typography className={`${classes.deploymentStatus}`} color="primary">
Pending
</Typography>
);
case 'in progress':
return (<Typography className={`${classes.deploymentStatus} ${classes.inProgressColor}`} color="secondary">In Progress</Typography>);
return (
<Typography
className={`${classes.deploymentStatus} ${classes.inProgressColor}`}
color="secondary"
>
In Progress
</Typography>
);
case 'failed':
return (<Typography className={`${classes.deploymentStatus} ${classes.failColor}`}>Failed</Typography>);
return (
<Typography
className={`${classes.deploymentStatus} ${classes.failColor}`}
>
Failed
</Typography>
);
default:
return (<Typography className={`${classes.deploymentStatus} ${classes.unknownColor}`}>Never deployed</Typography>);
return (
<Typography
className={`${classes.deploymentStatus} ${classes.unknownColor}`}
>
Never deployed
</Typography>
);
}
}
37 changes: 24 additions & 13 deletions plugins/humanitec/src/components/EnvironmentCard.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,43 @@
import type { FetchAppInfoEnvironment } from '@frontside/backstage-plugin-humanitec-common';
import {
Box,
Typography
} from '@material-ui/core';
import type { FetchAppInfoEnvironment } from '@humanitec/backstage-plugin-common';
import { Box, Typography } from '@material-ui/core';
import React, { useCallback } from 'react';
import { useStyles } from '../hooks/useStyles';
import { DeploymentStatus } from './DeploymentStatus';

interface EnvironmentCardProps {
env: FetchAppInfoEnvironment;
active: boolean;
onClick: (envId: string) => void
onClick: (envId: string) => void;
}

export function EnvironmentCard({ env, onClick, active }: EnvironmentCardProps) {
export function EnvironmentCard({
env,
onClick,
active,
}: EnvironmentCardProps) {
const classes = useStyles();

const _onClick = useCallback(() => {
onClick(env.id);
}, [env, onClick])
}, [env, onClick]);

return (
<Box role="button" className={`${classes.miniCard} ${active && classes.environmentCardActive}`} onClick={_onClick}>
<Box
role="button"
className={`${classes.miniCard} ${
active && classes.environmentCardActive
}`}
onClick={_onClick}
>
<Box className={classes.miniCardTitleContainer}>
<Typography className={classes.miniCardTitle} variant="h6">{env.name}</Typography>
<Typography className={classes.miniCardTitle} variant="h6">
{env.name}
</Typography>
</Box>
<Typography className={classes.miniCardSubTitle} variant="subtitle1">{env.id}</Typography>
<Typography className={classes.miniCardSubTitle} variant="subtitle1">
{env.id}
</Typography>
<DeploymentStatus env={env} />
</Box>
)
}
);
}
Loading

0 comments on commit 41ffa75

Please sign in to comment.