Add clear resize error action to admin UI

plugins/tools/app/javascript/widgets/castellum/actions/castellum.js

@@ -41,8 +41,31 @@ const fetchErrorsIfNeeded = (errorType) => (dispatch, getState) => {
   return dispatch(fetchErrors(errorType))
 }
 
+const refetchErrorsOnDemand = () => (dispatch) => {
+  for (const errorType of constants.CASTELLUM_ERROR_TYPES) {
+    dispatch(fetchErrors(errorType))
+  }
+}
+
 export const fetchAllErrorsAsNeeded = () => (dispatch) => {
   for (const errorType of constants.CASTELLUM_ERROR_TYPES) {
     dispatch(fetchErrorsIfNeeded(errorType))
   }
 }
+
+const clearError = (error) => (dispatch) => {
+  const { project_id, asset_type, asset_id } = error
+  return new Promise((handleSuccess, handleErrors) =>
+    ajaxHelper
+      .post(`/v1/projects/${project_id}/assets/${asset_type}/${asset_id}/error-resolved`)
+      .then(() => {
+        handleSuccess()
+        dispatch(refetchErrorsOnDemand())
+      })
+      .catch((error) => handleErrors(console.log(errorMessage(error))))
+  )
+}
+
+export const clearErrorIfNeeded = (error) => (dispatch) => {
+  dispatch(clearError(error))
+}

plugins/tools/app/javascript/widgets/castellum/components/error_list.jsx

@@ -23,7 +23,7 @@ const sortKeyForTimestamp = (props) => {
 const columnSets = {
   "resource-scrape-errors": ["project", "asset_type", "timestamp"],
   "asset-scrape-errors": ["project", "asset", "timestamp"],
-  "asset-resize-errors": ["project", "asset", "size", "timestamp"],
+  "asset-resize-errors": ["project", "asset", "size", "timestamp", "clear"],
 }
 const columnDefs = [
   {
@@ -56,16 +56,29 @@ const columnDefs = [
     sortStrategy: "numeric",
     sortKey: sortKeyForTimestamp,
   },
+  {
+    key: "clear",
+    label: "Action",
+  },
 ]
 
 export default class Loader extends React.Component {
+  constructor(props) {
+    super(props)
+    this.onAction = this.onAction.bind(this)
+  }
+
   componentDidMount() {
     this.props.fetchAllErrorsAsNeeded()
   }
   componentDidUpdate() {
     this.props.fetchAllErrorsAsNeeded()
   }
 
+  onAction (error) {
+    this.props.clearErrorIfNeeded(error)
+  }
+
   render() {
     const { errorType: currentErrorType } = this.props
 
@@ -118,7 +131,7 @@ export default class Loader extends React.Component {
         pageSize={6}
       >
         {data.map((error, idx) => (
-          <ErrorRow key={`error${idx}`} error={error} />
+          <ErrorRow key={`error${idx}`} error={error} action={{label: "Mark as resolved", fn: this.onAction}}/>
         ))}
       </DataTable>
     )

plugins/tools/app/javascript/widgets/castellum/components/error_row.jsx

@@ -1,7 +1,9 @@
+import Button from "react-bootstrap/lib/Button"
 import { PrettyDate } from "lib/components/pretty_date"
 import React from "react"
 
 const ErrorRow = (props) => {
+  const { label="None", fn=() => {} } = props.action ||{} 
   const {
     project_id: projectID,
     asset_type: assetType,
@@ -40,6 +42,9 @@ const ErrorRow = (props) => {
         <td className={hasSizeColumn ? "col-md-2" : "col-md-3"}>
           {result.at ? <PrettyDate date={result.at} /> : "None"}
         </td>
+        {hasSizeColumn && <td className="col-md-1">
+          <Button onClick={() => {fn(props.error)}}>{label}</Button>
+        </td>}
       </tr>
       <tr className="explains-previous-line">
         <td colSpan={hasSizeColumn ? 4 : 3} className="text-danger">

plugins/tools/app/javascript/widgets/castellum/containers/error_list.js

@@ -1,6 +1,6 @@
 import { connect } from  'react-redux';
 import ErrorList from '../components/error_list';
-import { fetchAllErrorsAsNeeded } from '../actions/castellum';
+import { clearErrorIfNeeded, fetchAllErrorsAsNeeded } from '../actions/castellum';
 
 export default connect(
   (state, props) => {
@@ -13,5 +13,6 @@ export default connect(
   },
   dispatch => ({
     fetchAllErrorsAsNeeded: (...args) => dispatch(fetchAllErrorsAsNeeded(...args)),
+    clearErrorIfNeeded: (error) => dispatch(clearErrorIfNeeded(error))
   }),
 )(ErrorList);