feature/catalog updates

cfn-parameters.json

@@ -28,6 +28,8 @@
 	"PgPassword": $secrets.POSTGRES_PASSWORD,
 	"AuthGoogleClientId": $secrets.AUTH_GOOGLE_CLIENT_ID,
 	"AuthGoogleClientSecret": $secrets.AUTH_GOOGLE_CLIENT_SECRET,
+	"AuthGithubClientId": $secrets.AUTH_GITHUB_CLIENT_ID,
+	"AuthGithubClientSecret": $secrets.AUTH_GITHUB_CLIENT_SECRET,
 	"BackstageAppUrl": $vars.BACKSTAGE_APP_URL,
 	"BackstageBackendUrl": $vars.BACKSTAGE_BACKEND_URL,
 	"ServerlessOpsCatalogApiUrl": $vars.SERVERLESSOPS_CATALOG_API_URL,

src/app-config.production.yaml

@@ -47,6 +47,13 @@ auth:
             - resolver: emailMatchingUserEntityProfileEmail
             - resolver: emailLocalPartMatchingUserEntityName
             - resolver: emailMatchingUserEntityAnnotation
+    github:
+      production:
+        clientId: ${AUTH_GITHUB_CLIENT_ID}
+        clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}
+        signIn:
+          resolvers:
+            - resolver: emailMatchingUserEntityProfileEmail
 
 integrations:
   github:

src/app-config.yaml

@@ -9,13 +9,47 @@ app:
     # Configure the catalog index page to be the root page, this is normally mounted on /catalog
     - page:catalog:
         config:
-          path: /
+          pagination:
+            mode: offset
+            limit: 20
+          #path: /
     - catalog-filter:catalog/kind:
         config:
           initialFilter: domain
     - catalog-filter:catalog/list:
         config:
           initialFilter: all
+
+    # Catalog page tabs
+    - page:catalog/entity:
+        config:
+          showNavItemIcons: true
+    - entity-content:catalog/overview:
+        config:
+          icon: catalog
+          group: false
+    - entity-content:api-docs/definition:
+        config:
+          icon: kind:api
+          group: false
+    - entity-content:api-docs/apis:
+        config:
+          icon: kind:api
+          group: false
+    - entity-content:techdocs:
+        config:
+          icon: techdocs
+          group: false
+    # NOTE: Setting `disabled: true` causes to hide the page causes crashes. I assume it's
+    # related to not being fully ported to the new frontend system at the current time. As a
+    # result we're using this filter that will always fails.
+    - entity-content:github-actions:
+        config:
+          filter:
+            kind: false
+    - entity-content:github-issues/entity:
+        disabled: true
+
     - sub-page:scaffolder/templates:
         config:
           groups:

src/packages/app/package.json

@@ -14,6 +14,9 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
+    "@backstage-community/plugin-github-actions": "^1.2.0",
+    "@backstage-community/plugin-github-deployments": "^1.2.0",
+    "@backstage-community/plugin-github-issues": "^1.2.1",
     "@backstage/cli": "backstage:^",
     "@backstage/core-components": "backstage:^",
     "@backstage/core-plugin-api": "backstage:^",
@@ -37,8 +40,8 @@
     "@backstage/plugin-techdocs-module-addons-contrib": "backstage:^",
     "@backstage/plugin-user-settings": "backstage:^",
     "@backstage/ui": "backstage:^",
+    "@internal/backstage-plugin-catalog-module-serverlessops": "workspace:^",
     "@internal/backstage-plugin-scaffolder-entity-pickers": "workspace:^",
-    "@internal/backstage-plugin-serverlessops-catalog": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "react": "^18.0.2",

src/packages/app/src/App.tsx

@@ -1,12 +1,18 @@
 import { createApp } from '@backstage/frontend-defaults';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
-import serverlessOpsCatalogPlugin from '@internal/backstage-plugin-serverlessops-catalog';
 import { navModule } from './modules/nav';
 import { configApiRef, googleAuthApiRef, useApi } from '@backstage/core-plugin-api';
 import { SignInPageBlueprint } from '@backstage/plugin-app-react';
 import { SignInPage } from '@backstage/core-components';
 import { createFrontendModule } from '@backstage/frontend-plugin-api';
 
+// external plugins
+import githubActionsPlugin from '@backstage-community/plugin-github-actions/alpha';
+import githubDeploymentsPlugin from '@backstage-community/plugin-github-deployments/alpha';
+import githubIssuesPlugin from '@backstage-community/plugin-github-issues/alpha';
+// local plugins
+import serverlessOpsCatalogModule from '@internal/backstage-plugin-catalog-module-serverlessops';
+
 const signInPage = SignInPageBlueprint.make({
   params: {
     loader: async () => props => {
@@ -48,7 +54,10 @@ export default createApp({
   features: [
     catalogPlugin,
     navModule,
-    serverlessOpsCatalogPlugin,
+    githubActionsPlugin,
+    githubDeploymentsPlugin,
+    githubIssuesPlugin,
+    serverlessOpsCatalogModule,
     createFrontendModule({
       pluginId: 'app',
       extensions: [signInPage],

src/plugins/catalog-module-serverlessops/dev/index.tsx

@@ -0,0 +1,6 @@
+import { createDevApp } from '@backstage/frontend-dev-utils'
+import serverlessOpsCatalogModule from '../src'
+
+createDevApp({
+    features: [serverlessOpsCatalogModule],
+})

src/plugins/serverlessops-catalog/package.json → src/plugins/catalog-module-serverlessops/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@internal/backstage-plugin-serverlessops-catalog",
+  "name": "@internal/backstage-plugin-catalog-module-serverlessops",
   "version": "0.1.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -11,8 +11,9 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "frontend-plugin",
-    "pluginId": "serverlessops-catalog"
+    "role": "frontend-plugin-module",
+    "pluginId": "catalog",
+    "moduleId": "serverlessops"
   },
   "sideEffects": false,
   "scripts": {
@@ -42,7 +43,9 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "react-use": "^17.2.4"
+    "@remixicon/react": "^4.9.0",
+    "react-use": "^17.2.4",
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",

src/plugins/catalog-module-serverlessops/src/components/CatalogEntityContent/ActivityCatalogEntityContent.tsx

@@ -0,0 +1,13 @@
+import { Grid } from '@material-ui/core';
+import { GithubIssuesCard } from '@backstage-community/plugin-github-issues'
+
+export const ActivityCatalogEntityContent = () => {
+
+  return (
+    <Grid container spacing={3} alignItems="stretch">
+      <Grid item xs={12}>
+        <GithubIssuesCard itemsPerPage={10} itemsPerRepo={50} />
+      </Grid>
+    </Grid>
+  );
+};

src/plugins/catalog-module-serverlessops/src/components/CatalogEntityContent/CicdCatalogEntityContent.tsx

@@ -0,0 +1,54 @@
+import {
+  useEntity,
+  MissingAnnotationEmptyState,
+} from '@backstage/plugin-catalog-react';
+import { Grid, Typography } from '@material-ui/core';
+import {
+  EntityLatestGithubActionRunCard,
+  EntityRecentGithubActionsRunsCard,
+  isGithubActionsAvailable
+} from '@backstage-community/plugin-github-actions';
+import { EntityGithubDeploymentsCard } from '@backstage-community/plugin-github-deployments';
+
+export const CicdCatalogEntityContent = () => {
+  const { entity } = useEntity();
+  if (!isGithubActionsAvailable(entity)) {
+    return (
+      <MissingAnnotationEmptyState annotation={GITHUB_ACTIONS_ANNOTATION} />
+    );
+  }
+
+  return (
+    <Grid container spacing={3} alignItems="stretch">
+      <Grid item xs={12}>
+        <Typography variant="h2">Build</Typography>
+      </Grid>
+
+      <Grid item xs={12}>
+        <EntityLatestGithubActionRunCard />
+      </Grid>
+
+      <Grid item xs={12}>
+        <Typography variant="h6">Main branch</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <EntityRecentGithubActionsRunsCard branch="main" limit={5} />
+      </Grid>
+
+      <Grid item xs={12}>
+        <Typography variant="h6">All branches</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <EntityRecentGithubActionsRunsCard limit={10} />
+      </Grid>
+
+      <Grid item xs={12}>
+        <Typography variant="h2">Deploy</Typography>
+      </Grid>
+
+      <Grid item xs={12}>
+        <EntityGithubDeploymentsCard />
+      </Grid>
+    </Grid>
+  );
+};

src/plugins/serverlessops-catalog/src/components/CatalogIndexPageEntityList/ApiCatalogIndexPageEntityList.tsx → src/plugins/catalog-module-serverlessops/src/components/CatalogIndexPageEntityList/ApiCatalogIndexPageEntityList.tsx

@@ -18,7 +18,7 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
   columnFactories.createSpecTypeColumn({ width: 'auto' }),
   columnFactories.createMetadataDescriptionColumn({ width: 'auto' }),
 ]
-export function ApiCatalogIndexPageEntityList() {
+export function ApiCatalogIndexPageEntityList({ pagination }: { pagination?: any }) {
   return (
     <CatalogIndexPageEntityList
       filters={
@@ -38,6 +38,7 @@ export function ApiCatalogIndexPageEntityList() {
       initialKind="api"
       initiallySelectedFilter="all"
       columns={defaultColumns}
+      pagination={pagination}
     />
   )
 }

src/plugins/serverlessops-catalog/src/components/CatalogIndexPageEntityList/ComponentCatalogIndexPageEntityList.tsx → src/plugins/catalog-module-serverlessops/src/components/CatalogIndexPageEntityList/ComponentCatalogIndexPageEntityList.tsx

@@ -18,7 +18,7 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
   columnFactories.createMetadataDescriptionColumn({ width: 'auto' }),
 ]
 
-export function ComponentCatalogIndexPageEntityList() {
+export function ComponentCatalogIndexPageEntityList({ pagination }: { pagination?: any }) {
   return (
     <CatalogIndexPageEntityList
       filters={
@@ -38,6 +38,7 @@ export function ComponentCatalogIndexPageEntityList() {
       initialKind="component"
       initiallySelectedFilter="all"
       columns={defaultColumns}
+      pagination={pagination}
     />
   )
 }

src/plugins/serverlessops-catalog/src/components/CatalogIndexPageEntityList/DomainCatalogIndexPageEntityList.tsx → src/plugins/catalog-module-serverlessops/src/components/CatalogIndexPageEntityList/DomainCatalogIndexPageEntityList.tsx

@@ -16,7 +16,7 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
   columnFactories.createMetadataDescriptionColumn({width: 'auto'}),
 ]
 
-export function DomainCatalogIndexPageEntityList() {
+export function DomainCatalogIndexPageEntityList({ pagination }: { pagination?: any }) {
   return (
     <CatalogIndexPageEntityList
       filters={
@@ -36,6 +36,7 @@ export function DomainCatalogIndexPageEntityList() {
       initialKind="domain"
       initiallySelectedFilter="all"
       columns={defaultColumns}
+      pagination={pagination}
     />
   )
 }

src/plugins/serverlessops-catalog/src/components/CatalogIndexPageEntityList/LocationCatalogIndexPageEntityList.tsx → src/plugins/catalog-module-serverlessops/src/components/CatalogIndexPageEntityList/LocationCatalogIndexPageEntityList.tsx

@@ -7,7 +7,7 @@ import {
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
 
-export function LocationCatalogIndexPageEntityList() {
+export function LocationCatalogIndexPageEntityList({ pagination }: { pagination?: any }) {
   return (
     <CatalogIndexPageEntityList
       filters={
@@ -26,6 +26,7 @@ export function LocationCatalogIndexPageEntityList() {
       }
       initialKind="location"
       initiallySelectedFilter="all"
+      pagination={pagination}
     />
   )
 }

src/plugins/serverlessops-catalog/src/components/CatalogIndexPageEntityList/ResourceCatalogIndexPageEntityList.tsx → src/plugins/catalog-module-serverlessops/src/components/CatalogIndexPageEntityList/ResourceCatalogIndexPageEntityList.tsx

@@ -19,7 +19,7 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
   columnFactories.createMetadataDescriptionColumn({ width: 'auto' }),
 ]
 
-export function ResourceCatalogIndexPageEntityList() {
+export function ResourceCatalogIndexPageEntityList({ pagination }: { pagination?: any }) {
   return (
     <CatalogIndexPageEntityList
       filters={
@@ -39,6 +39,7 @@ export function ResourceCatalogIndexPageEntityList() {
       initialKind="resource"
       initiallySelectedFilter="all"
       columns={defaultColumns}
+      pagination={pagination}
     />
   )
 }

src/plugins/serverlessops-catalog/src/components/CatalogIndexPageEntityList/SystemCatalogIndexPageEntityList.tsx → src/plugins/catalog-module-serverlessops/src/components/CatalogIndexPageEntityList/SystemCatalogIndexPageEntityList.tsx

@@ -18,7 +18,7 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
   // columnFactories.createDomainColumn({ width: 'auto' }),
   columnFactories.createMetadataDescriptionColumn({ width: 'auto' }),
 ]
-export function SystemCatalogIndexPageEntityList() {
+export function SystemCatalogIndexPageEntityList({ pagination }: { pagination?: any }) {
   return (
     <CatalogIndexPageEntityList
       filters={
@@ -38,6 +38,7 @@ export function SystemCatalogIndexPageEntityList() {
       initialKind="system"
       initiallySelectedFilter="all"
       columns={defaultColumns}
+      pagination={pagination}
     />
   )
 }

src/plugins/serverlessops-catalog/src/components/TabbedCatalogIndexPage/TabbedCatalogIndexPage.tsx → src/plugins/catalog-module-serverlessops/src/components/TabbedCatalogIndexPage/TabbedCatalogIndexPage.tsx

@@ -9,8 +9,14 @@ import {
   SystemCatalogIndexPageEntityList
 } from '../CatalogIndexPageEntityList';
 
+type TabbedCatalogIndexPageProps = {
+  pagination?: {
+    mode?: 'offset' | 'cursor';
+    limit?: number;
+  };
+};
 
-export function TabbedCatalogIndexPage() {
+export function TabbedCatalogIndexPage({ pagination }: TabbedCatalogIndexPageProps) {
 
   const configApi = useApi(configApiRef);
   const organizationName =
@@ -24,22 +30,22 @@ export function TabbedCatalogIndexPage() {
     >
       <TabbedLayout>
         <TabbedLayout.Route path="/components" title="Components">
-          <ComponentCatalogIndexPageEntityList />
+          <ComponentCatalogIndexPageEntityList pagination={pagination} />
         </TabbedLayout.Route>
         <TabbedLayout.Route path="/resources" title="Resources">
-          <ResourceCatalogIndexPageEntityList />
+          <ResourceCatalogIndexPageEntityList pagination={pagination} />
         </TabbedLayout.Route>
         <TabbedLayout.Route path="/systems" title="Systems">
-          <SystemCatalogIndexPageEntityList />
+          <SystemCatalogIndexPageEntityList pagination={pagination} />
         </TabbedLayout.Route>
         <TabbedLayout.Route path="/domains" title="Domains">
-          <DomainCatalogIndexPageEntityList />
+          <DomainCatalogIndexPageEntityList pagination={pagination} />
         </TabbedLayout.Route>
         <TabbedLayout.Route path="/apis" title="APIs">
-          <ApiCatalogIndexPageEntityList />
+          <ApiCatalogIndexPageEntityList pagination={pagination} />
         </TabbedLayout.Route>
         <TabbedLayout.Route path="/locations" title="Locations">
-          <LocationCatalogIndexPageEntityList />
+          <LocationCatalogIndexPageEntityList pagination={pagination} />
         </TabbedLayout.Route>
       </TabbedLayout>
     </PageWithHeader>

src/plugins/catalog-module-serverlessops/src/index.ts

@@ -0,0 +1,5 @@
+export {
+    SoActivityCatalogEntityContent,
+    SoCicdCatalogEntityContent,
+    serverlessOpsCatalogModule as default,
+} from './module';