Flux Runtime Card and Page

plugins/backstage-plugin-flux/src/components/FluxEntityTable.tsx

@@ -38,7 +38,8 @@ export function FluxEntityTable<T extends object = {}>({
         emptyContent={
           <div className={classes.empty}>
             <Typography variant="body1">
-              No {title} found for this entity.
+              No {title} found
+              {title === 'flux controllers' ? '' : 'for this entity'}.
             </Typography>
           </div>
         }

plugins/backstage-plugin-flux/src/components/FluxRuntimeCard/FluxRuntimeTable.tsx

@@ -73,6 +73,7 @@ export const FluxRuntimeTable = ({
 
   return (
     <FluxEntityTable
+      title={'flux controllers'}
       columns={columns}
       data={data as Cluster[]}
       isLoading={isLoading}

plugins/backstage-plugin-flux/src/components/FluxRuntimePage/index.tsx

@@ -1,28 +1,5 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {
-  Content,
-  ContentHeader,
-  Header,
-  Page,
-  SupportButton,
-} from '@backstage/core-components';
+import { Content, Header, Page } from '@backstage/core-components';
 import { Grid, makeStyles } from '@material-ui/core';
-import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { FluxRuntimeCard } from '../FluxRuntimeCard';
 
@@ -53,29 +30,14 @@ export interface FluxRuntimePageProps {
  * @public
  */
 export function FluxRuntimePage(props: FluxRuntimePageProps) {
-  const {
-    title = 'Flux Runtime',
-    subtitle = 'Render the Deployments in Flux Runtime.',
-    pageTitle = 'Flux Controllers',
-  } = props;
+  const { title = 'Flux Runtime' } = props;
   const classes = useStyles();
 
   return (
     <Page themeId="tool">
-      <Header title={title} subtitle={subtitle} />
+      <Header title={title} />
       <Content className={classes.overflowXScroll}>
-        <ContentHeader title={pageTitle}>
-          <SupportButton>
-            <Typography paragraph>
-              Description of what user can find on the page
-            </Typography>
-          </SupportButton>
-        </ContentHeader>
-        <Grid container spacing={3} direction="row">
-          <Grid item xs={12} sm={6} md={4}>
-            <FluxRuntimeCard />
-          </Grid>
-        </Grid>
+        <FluxRuntimeCard />
       </Content>
     </Page>
   );

plugins/backstage-plugin-flux/src/images/icons.tsx

@@ -90,8 +90,9 @@ export const oci = (
 export const flux = (
   <svg
     role="img"
-    width="25"
-    height="25"
+    fill="currentColor"
+    width="20"
+    height="20"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >

plugins/backstage-plugin-flux/src/index.ts

@@ -9,4 +9,5 @@ export {
   EntityFluxSourcesCard,
   EntityFluxImagePoliciesCard,
   FluxRuntimeCard,
+  FluxIcon,
 } from './plugin';

plugins/backstage-plugin-flux/src/plugin.ts

@@ -163,11 +163,24 @@ export const FluxRuntimeCard = weaveworksFluxPlugin.provide(
  * Page used to show Flux Controllers / Deployments in Flux Runtime
  * @public
  */
-export const TechRadarPage = weaveworksFluxPlugin.provide(
+export const FluxRuntimePage = weaveworksFluxPlugin.provide(
   createRoutableExtension({
     name: 'TechRadarPage',
     component: () =>
       import('./components/FluxRuntimePage').then(m => m.FluxRuntimePage),
     mountPoint: rootRouteRef,
   }),
 );
+
+/**
+ * Export for Flux Icon to use in nav
+ * @public
+ */
+export const FluxIcon = weaveworksFluxPlugin.provide(
+  createComponentExtension({
+    name: 'FluxIcon',
+    component: {
+      lazy: () => import('./images/icons').then(m => m.FluxIcon),
+    },
+  }),
+);