Add Radius pages

Signed-off-by: Ryan Nowak <[email protected]>
radius-project · Jan 5, 2024 · 2ad085a · 2ad085a
1 parent e529805
commit 2ad085a
Show file tree

Hide file tree

Showing 69 changed files with 2,277 additions and 1,464 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,24 @@ Frontend experience for Project Radius
 
 This repo uses [corepack](https://nodejs.org/api/corepack.html) and [yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/).
 
-It is organized as a mono-repo.
+It is organized as a mono-repo, and contains the following packages.
+
+| Package                 | Path                              | Description                                                                     |
+| ----------------------- | --------------------------------- | ------------------------------------------------------------------------------- |
+| `<root>`                | `.`                               | The root `package.json` for the repo. Used as the entrypoint for most commands. |
+| `app`                   | `./packages/app`                  | The frontend (React) part of the Dashboard.                                     |
+| `backend`               | `./packages/backend`              | The backend (Node.js) part of the Dashboard.                                    |
+| `rad-components`        | `./packages/rad-components`       | A library of reusable React components for Radius (no dependency on Backstage). |
+| `plugin-radius`         | `./plugins/plugin-radius`         | The Radius frontend (React) plugin for Backstage.                               |
+| `plugin-radius-backend` | `./plugins/plugin-radius-backend` | The Radius backend (Node.js) plugin for Backstage.                              |
+
+### Understanding the organization
+
+Our repo builds three primary outputs:
+
+- The Radius Dashboard: this is a skinned deployment of Backstage with the layout, and set of plugins optimized for Radius.
+- The Radius Backstage plugin: our plugin is available standalone (outside of the Dashboard) so users can add our functionality to Backstage.
+- The `rad-components` library: contains reusable UI like the Radius App Graph visualization. This is a separate package so we can use it in other contexts besides Backstage.
 
 ## Prerequisites
 
@@ -48,7 +65,15 @@ yarn workspace rad-components run build:all
 yarn workspace rad-components run lint
 ```
 
-## Developing
+## Developing: Dashboard
+
+### Configuration
+
+The configuration for local development (`yarn dev`) is stored in `app-config.local.yaml`. This file is a set of overrides for development that will be combined with `app-config.yaml`.
+
+This file is checked in but `.gitignored`'d. Feel free to make changes as needed.
+
+## Developing: rad-components
 
 **Launch Storybook to experiment with rad-components:**
 

diff --git a/app-config.local.yaml b/app-config.local.yaml
@@ -0,0 +1,28 @@
+# Backstage override configuration for your local development environment
+#
+# This will be used with `yarn dev`
+#
+# The configuration provided here is meant to be used with a local copy of the dashboard
+# talking to a local Kubernetes cluster on localhost. The local Kubernetes cluster should
+# have Radius installed.
+#
+# Use `kubectl proxy` to open a proxy to your local Kubernetes cluster.
+
+# See: https://backstage.io/docs/conf/writing for the file as a whole.
+
+# See: https://backstage.io/docs/features/kubernetes/configuration/
+kubernetes:
+  # Configure backstage to support multiple kubernetes clusters, even though
+  # only one is used here.
+  serviceLocatorMethod:
+    type: multiTenant
+  # Use the local proxy on localhost:8001 to talk to the local Kubernetes cluster.
+  clusterLocatorMethods:
+    - type: localKubectlProxy
+
+backend:
+  # Allow the backend to make requests to the local Kubernetes cluster.
+  reading:
+    allow:
+      - host: localhost:8001
+      - host: 127.0.0.1:8001
diff --git a/backstage.json b/backstage.json
@@ -1,3 +1,3 @@
 {
-  "version": "1.20.0"
+  "version": "1.21.1"
 }
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     ]
   },
   "devDependencies": {
-    "@backstage/cli": "^0.24.0",
+    "@backstage/cli": "^0.25.0",
     "@backstage/e2e-test-utils": "^0.1.0",
     "@playwright/test": "^1.32.3",
     "@spotify/prettier-config": "^12.0.0",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -14,32 +14,33 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
-    "@backstage/app-defaults": "^1.4.5",
+    "@backstage/app-defaults": "^1.4.6",
     "@backstage/catalog-model": "^1.4.3",
-    "@backstage/cli": "^0.24.0",
-    "@backstage/core-app-api": "^1.11.1",
-    "@backstage/core-components": "^0.13.8",
-    "@backstage/core-plugin-api": "^1.8.0",
-    "@backstage/integration-react": "^1.1.21",
-    "@backstage/plugin-api-docs": "^0.10.0",
-    "@backstage/plugin-catalog": "^1.15.0",
-    "@backstage/plugin-catalog-common": "^1.0.18",
-    "@backstage/plugin-catalog-graph": "^0.3.0",
-    "@backstage/plugin-catalog-import": "^0.10.2",
-    "@backstage/plugin-catalog-react": "^1.9.0",
-    "@backstage/plugin-github-actions": "^0.6.7",
-    "@backstage/plugin-kubernetes": "^0.11.2",
-    "@backstage/plugin-org": "^0.6.16",
-    "@backstage/plugin-permission-react": "^0.4.17",
-    "@backstage/plugin-scaffolder": "^1.16.0",
-    "@backstage/plugin-search": "^1.4.2",
-    "@backstage/plugin-search-react": "^1.7.2",
-    "@backstage/plugin-tech-radar": "^0.6.10",
-    "@backstage/plugin-techdocs": "^1.9.0",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.2",
-    "@backstage/plugin-techdocs-react": "^1.1.13",
-    "@backstage/plugin-user-settings": "^0.7.12",
-    "@backstage/theme": "^0.4.4",
+    "@backstage/cli": "^0.25.0",
+    "@backstage/core-app-api": "^1.11.2",
+    "@backstage/core-components": "^0.13.9",
+    "@backstage/core-plugin-api": "^1.8.1",
+    "@backstage/integration-react": "^1.1.22",
+    "@backstage/plugin-api-docs": "^0.10.2",
+    "@backstage/plugin-catalog": "^1.16.0",
+    "@backstage/plugin-catalog-common": "^1.0.19",
+    "@backstage/plugin-catalog-graph": "^0.3.2",
+    "@backstage/plugin-catalog-import": "^0.10.4",
+    "@backstage/plugin-catalog-react": "^1.9.2",
+    "@backstage/plugin-github-actions": "^0.6.9",
+    "@backstage/plugin-home": "^0.6.0",
+    "@backstage/plugin-kubernetes": "^0.11.3",
+    "@backstage/plugin-org": "^0.6.18",
+    "@backstage/plugin-permission-react": "^0.4.18",
+    "@backstage/plugin-scaffolder": "^1.17.0",
+    "@backstage/plugin-search": "^1.4.4",
+    "@backstage/plugin-search-react": "^1.7.4",
+    "@backstage/plugin-tech-radar": "^0.6.11",
+    "@backstage/plugin-techdocs": "^1.9.2",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.3",
+    "@backstage/plugin-techdocs-react": "^1.1.14",
+    "@backstage/plugin-user-settings": "^0.7.14",
+    "@backstage/theme": "^0.5.0",
     "@internal/plugin-radius": "^0.1.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
@@ -52,13 +53,14 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/test-utils": "^1.4.5",
+    "@backstage/test-utils": "^1.4.6",
     "@playwright/test": "^1.32.3",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.0.0",
-    "@types/react-dom": "*",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "cross-env": "^7.0.0"
   },
   "browserslist": {

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -1,39 +1,34 @@
 import React from 'react';
-import { Navigate, Route } from 'react-router-dom';
-import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
+import { Route } from 'react-router-dom';
+import { apiDocsPlugin } from '@backstage/plugin-api-docs';
 import {
   CatalogEntityPage,
   CatalogIndexPage,
   catalogPlugin,
 } from '@backstage/plugin-catalog';
-import {
-  CatalogImportPage,
-  catalogImportPlugin,
-} from '@backstage/plugin-catalog-import';
-import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
+import { catalogImportPlugin } from '@backstage/plugin-catalog-import';
+import { scaffolderPlugin } from '@backstage/plugin-scaffolder';
 import { orgPlugin } from '@backstage/plugin-org';
 import { SearchPage } from '@backstage/plugin-search';
-import { TechRadarPage } from '@backstage/plugin-tech-radar';
-import {
-  TechDocsIndexPage,
-  techdocsPlugin,
-  TechDocsReaderPage,
-} from '@backstage/plugin-techdocs';
-import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
-import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import { techdocsPlugin } from '@backstage/plugin-techdocs';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
 import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
+import { HomepageCompositionRoot } from '@backstage/plugin-home';
 import { Root } from './components/Root';
 
 import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
 import { createApp } from '@backstage/app-defaults';
 import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
-import { RequirePermission } from '@backstage/plugin-permission-react';
-import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
-import { ApplicationPage, EnvironmentPage } from '@internal/plugin-radius';
+import {
+  ApplicationListPage,
+  EnvironmentListPage,
+  ResourceListPage,
+  ResourcePage,
+  radiusPlugin,
+} from '@internal/plugin-radius';
 import {
   UnifiedThemeProvider,
   createBaseThemeOptions,
@@ -42,6 +37,7 @@ import {
   palettes,
   shapes,
 } from '@backstage/theme';
+import { HomePage } from './components/home/HomePage';
 
 const lightTheme = createUnifiedTheme({
   ...createBaseThemeOptions({
@@ -95,6 +91,7 @@ const app = createApp({
     },
   ],
   bindRoutes({ bind }) {
+    bind(radiusPlugin.externalRoutes, {});
     bind(catalogPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,
       viewTechDoc: techdocsPlugin.routes.docRoot,
@@ -115,44 +112,28 @@ const app = createApp({
 
 const routes = (
   <FlatRoutes>
-    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route path="/" element={<HomepageCompositionRoot />}>
+      <HomePage />
+    </Route>
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"
       element={<CatalogEntityPage />}
     >
       {entityPage}
     </Route>
-    <Route path="/docs" element={<TechDocsIndexPage />} />
-    <Route
-      path="/docs/:namespace/:kind/:name/*"
-      element={<TechDocsReaderPage />}
-    >
-      <TechDocsAddons>
-        <ReportIssue />
-      </TechDocsAddons>
-    </Route>
-    <Route path="/create" element={<ScaffolderPage />} />
-    <Route path="/api-docs" element={<ApiExplorerPage />} />
-    <Route
-      path="/tech-radar"
-      element={<TechRadarPage width={1500} height={800} />}
-    />
-    <Route
-      path="/catalog-import"
-      element={
-        <RequirePermission permission={catalogEntityCreatePermission}>
-          <CatalogImportPage />
-        </RequirePermission>
-      }
-    />
     <Route path="/search" element={<SearchPage />}>
       {searchPage}
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
-    <Route path="/applications" element={<ApplicationPage />} />
-    <Route path="/environments" element={<EnvironmentPage />} />
+    <Route path="/applications" element={<ApplicationListPage />} />
+    <Route path="/environments" element={<EnvironmentListPage />} />
+    <Route path="/resources" element={<ResourceListPage />} />
+    <Route
+      path="/resources/:group/:namespace/:type/:name"
+      element={<ResourcePage />}
+    />
   </FlatRoutes>
 );
 

diff --git a/packages/app/src/components/Root/LogoFull.tsx b/packages/app/src/components/Root/LogoFull.tsx
diff --git a/packages/app/src/components/Root/LogoIcon.tsx b/packages/app/src/components/Root/LogoIcon.tsx
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
@@ -4,11 +4,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import PublicIcon from '@material-ui/icons/Public';
 import ListAltIcon from '@material-ui/icons/ListAlt';
-import MapIcon from '@material-ui/icons/MyLocation';
-import LibraryBooks from '@material-ui/icons/LibraryBooks';
-import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
-import LogoFull from './LogoFull';
-import LogoIcon from './LogoIcon';
+import AssessmentIcon from '@material-ui/icons/Assessment';
 import {
   Settings as SidebarSettings,
   UserSettingsSignInAvatar,
@@ -28,6 +24,7 @@ import {
 } from '@backstage/core-components';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
+import { RadiusLogo } from '@internal/plugin-radius';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -42,6 +39,10 @@ const useSidebarLogoStyles = makeStyles({
     width: sidebarConfig.drawerWidthClosed,
     marginLeft: 24,
   },
+  svg: {
+    width: 'auto',
+    height: 28,
+  },
 });
 
 const SidebarLogo = () => {
@@ -51,7 +52,11 @@ const SidebarLogo = () => {
   return (
     <div className={classes.root}>
       <Link to="/" underline="none" className={classes.link} aria-label="Home">
-        {isOpen ? <LogoFull /> : <LogoIcon />}
+        {isOpen ? (
+          <RadiusLogo shape="full" className={classes.svg} />
+        ) : (
+          <RadiusLogo shape="square" className={classes.svg} />
+        )}
       </Link>
     </div>
   );
@@ -67,17 +72,14 @@ export const Root = ({ children }: PropsWithChildren<NonNullable<object>>) => (
       <SidebarDivider />
       <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
-        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
+        <SidebarItem icon={HomeIcon} to="/" text="Home" />
         <SidebarItem icon={ListAltIcon} to="applications" text="Applications" />
         <SidebarItem icon={PublicIcon} to="environments" text="Environments" />
-        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
-        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+        <SidebarItem icon={AssessmentIcon} to="resources" text="Resources" />
+        <SidebarItem icon={ExtensionIcon} to="catalog" text="Catalog" />
         {/* End global nav */}
         <SidebarDivider />
-        <SidebarScrollWrapper>
-          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-        </SidebarScrollWrapper>
+        <SidebarScrollWrapper />
       </SidebarGroup>
       <SidebarSpace />
       <SidebarDivider />