@spreadshirt/backstage-plugin-s3-viewer

This plugin creates a new page in Backstage where the user can view the stored elements in AWS S3. The user will be able to pick a bucket from a certain endpoint and then navigate inside it similarly to a file explorer. The buckets and objects information will be also displayed to the user, and the objects will be possible to be downloaded or preview (if they are an image of a small size).

Introduction

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.

With this plugin, you will be able to navigate around your internal AWS S3 storage using a table view, get information about a certain bucket or object, preview the object and download it.

Getting started

1. Install the plugin by running this command:

   # From your Backstage root directory
   yarn --cwd packages/app add @spreadshirt/backstage-plugin-s3-viewer

2. Add the configuration to the app-config.yaml file. This is described in the backend plugin.

3. Optionally set a cookie after sign-in so downloads and previews work. This belongs in the app, not the plugin:

   import { S3ApiRef } from '@spreadshirt/backstage-plugin-s3-viewer';
   import { IdentityApi, useApi } from '@backstage/core-plugin-api';
   
   // Inside a React component (for example the SignInPageBlueprint loader):
   const s3ViewerApi = useApi(S3ApiRef);
   
   async function onSignInSuccess(identityApi: IdentityApi) {
     props.onSignInSuccess(identityApi);
     await s3ViewerApi.setCookie();
   }

   Wire that into your sign-in page (New Frontend System SignInPageBlueprint, or the legacy components.SignInPage option).

New Frontend System

Install the plugin as a feature. The page is served at /s3-viewer by default and appears in the sidebar from the page title and icon.

// In packages/app/src/App.tsx
import { createApp } from '@backstage/frontend-defaults';
import s3ViewerPlugin from '@spreadshirt/backstage-plugin-s3-viewer/alpha';

const app = createApp({
  features: [
    s3ViewerPlugin,
    // ...other features
  ],
});

export default app.createRoot();

You can override the path in configuration if needed:

app:
  extensions:
    - page:s3-viewer:
        config:
          path: /s3-viewer

Legacy frontend system

If your app still uses the legacy frontend system:

// In packages/app/src/App.tsx
import { S3ViewerPage } from '@spreadshirt/backstage-plugin-s3-viewer';

const routes = (
  <FlatRoutes>
    {/* ...other routes */}
    <Route path="/s3-viewer" element={<S3ViewerPage />} />
  </FlatRoutes>
)

Add a sidebar item:

// In packages/app/src/components/Root/Root.tsx
import { SiAmazons3 } from 'react-icons/si';

<SidebarPage>
  {/* ...other contents */}
  <SidebarItem icon={SiAmazons3} to="s3-viewer" text="S3 Viewer" />
</SidebarPage>

Features

• Available endpoints and buckets are displayed in a tree view. By clicking them you can select one bucket or another.
• List objects for a bucket using a file explorer style. Display information about the selected bucket, as well as for a selected object.
• Preview of the object content (if possible) and the possibility to download it.
  • If the object is not an image, it won't be loaded.
  • For performance reasons, only images with a size below 2MB will be loaded.
• Custom URL generated depending on the selected item, this allows you to share a link with someone else pointing to a concrete endpoint, bucket and even object.
• Authenticated requests, can be authorized or rejected on the backend side depending on the user permissions.