Audit suspend log - add user comments when suspending resource

plugins/backstage-plugin-flux/package.json

@@ -46,7 +46,7 @@
     "luxon": "^3.3.0",
     "react-use": "^17.4.0",
     "styled-components": "^6.1.1",
-    "use-deep-compare": "^1.1.0",
+    "use-deep-compare": "^1.2.1",
     "yaml": "^2.3.1"
   },
   "peerDependencies": {

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

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard } from '@backstage/core-components';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
 import { useFluxDeployments } from '../../hooks';
 import { FluxDeploymentsTable, defaultColumns } from './FluxDeploymentsTable';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const DeploymentsPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useFluxDeployments(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -29,6 +31,12 @@ const DeploymentsPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={defaultColumns}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );

plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/FluxDeploymentsTable.tsx

@@ -33,13 +33,15 @@ type Props = {
   isLoading: boolean;
   columns: TableColumn<Deployment>[];
   many?: boolean;
+  setSelectedRow: React.Dispatch<React.SetStateAction<string>>;
 };
 
 export const FluxDeploymentsTable = ({
   deployments,
   isLoading,
   columns,
   many,
+  setSelectedRow,
 }: Props) => {
   let helmChart = {} as HelmChart;
   let path = '';
@@ -99,6 +101,7 @@ export const FluxDeploymentsTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={setSelectedRow}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { useGitRepositories } from '../../hooks/query';
@@ -8,10 +8,12 @@ import {
   FluxSourcesTable,
 } from '../EntityFluxSourcesCard/FluxSourcesTable';
 import { Source } from '../helpers';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const GitRepositoriesPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useGitRepositories(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -33,6 +35,12 @@ const GitRepositoriesPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={gitOciDefaultColumns as TableColumn<Source>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard } from '@backstage/core-components';
 import { useHelmReleases } from '../../hooks/query';
@@ -7,10 +7,12 @@ import {
   FluxDeploymentsTable,
   defaultColumns,
 } from '../EntityFluxDeploymentsCard/FluxDeploymentsTable';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const HelmReleasePanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useHelmReleases(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -32,6 +34,12 @@ const HelmReleasePanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={defaultColumns}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { useHelmRepositories } from '../../hooks';
@@ -8,10 +8,12 @@ import {
   FluxSourcesTable,
 } from '../EntityFluxSourcesCard/FluxSourcesTable';
 import { Source } from '../helpers';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const HelmRepositoriesPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useHelmRepositories(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -33,6 +35,12 @@ const HelmRepositoriesPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={helmDefaultColumns as TableColumn<Source>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );

plugins/backstage-plugin-flux/src/components/EntityFluxImagePoliciesCard/FluxImagePoliciesTable.tsx

@@ -77,6 +77,7 @@ export const FluxImagePoliciesTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={() => {}}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard } from '@backstage/core-components';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
@@ -7,10 +7,12 @@ import {
   FluxDeploymentsTable,
   defaultColumns,
 } from '../EntityFluxDeploymentsCard/FluxDeploymentsTable';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const KustomizationPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useKustomizations(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -32,6 +34,12 @@ const KustomizationPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={defaultColumns}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
@@ -8,10 +8,12 @@ import {
   FluxSourcesTable,
 } from '../EntityFluxSourcesCard/FluxSourcesTable';
 import { Source } from '../helpers';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const OCIRepositoryPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useOCIRepositories(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -33,6 +35,12 @@ const OCIRepositoryPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={gitOciDefaultColumns as TableColumn<Source>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );

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

@@ -1,20 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useFluxSources } from '../../hooks';
-import {
-  FluxSourcesTable,
-  sourceDefaultColumns,
-} from './FluxSourcesTable';
+import { FluxSourcesTable, sourceDefaultColumns } from './FluxSourcesTable';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { GitRepository, HelmRepository, OCIRepository } from '../../objects';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 export type GH = GitRepository & HelmRepository;
 export type OH = OCIRepository & HelmRepository;
 
 const SourcesPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useFluxSources(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -36,6 +35,12 @@ const SourcesPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={sourceDefaultColumns as TableColumn<GH | OH>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );

plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/FluxSourcesTable.tsx

@@ -57,13 +57,15 @@ type Props = {
   isLoading: boolean;
   columns: TableColumn<any>[];
   many?: boolean;
+  setSelectedRow: React.Dispatch<React.SetStateAction<string>>;
 };
 
 export const FluxSourcesTable = ({
   sources,
   isLoading,
   columns,
   many,
+  setSelectedRow,
 }: Props) => {
   let provider = '';
   let isVerifiable = false;
@@ -117,6 +119,7 @@ export const FluxSourcesTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={setSelectedRow}
     />
   );
 };

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

@@ -11,7 +11,11 @@ export function FluxEntityTable<T extends object = {}>({
   columns,
   filters,
   many,
-}: TableProps<T> & { many?: boolean }) {
+  setSelectedRow,
+}: TableProps<T> & {
+  many?: boolean;
+  setSelectedRow: React.Dispatch<React.SetStateAction<string>>;
+}) {
   const classes = useStyles();
 
   // We use this memo not really for performance, but to avoid
@@ -33,6 +37,13 @@ export function FluxEntityTable<T extends object = {}>({
           emptyRowsWhenPaging: false,
           columnsButton: true,
         }}
+        onRowClick={row => {
+          const { id } = row?.target as HTMLButtonElement;
+          const resource = id.split(' ')[1];
+          if (id.includes('suspend')) {
+            setSelectedRow(resource);
+          }
+        }}
         data={data}
         isLoading={isLoading}
         emptyContent={
@@ -46,5 +57,14 @@ export function FluxEntityTable<T extends object = {}>({
         filters={Boolean(many) ? filters : []}
       />
     );
-  }, [data, title, isLoading, classes.empty, columns]);
+  }, [
+    data,
+    title,
+    isLoading,
+    classes.empty,
+    columns,
+    many,
+    filters,
+    setSelectedRow,
+  ]);
 }

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

@@ -81,6 +81,7 @@ export const FluxRuntimeTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={() => {}}
     />
   );
 };