fix: fix ui and ownerships (#1591)

* fix: fix ui and ownerships Set accessor as owner of the job if present. Use credentials in httpClient for all requests across the UI * fix: use httpClient in references * fix: record show
distribworks · Oct 6, 2024 · b83ed25 · b83ed25
1 parent 0f79eec
commit b83ed25
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 55 deletions.
diff --git a/dkron/api.go b/dkron/api.go
@@ -227,6 +227,12 @@ func (h *HTTPTransport) jobCreateOrUpdateHandler(c *gin.Context) {
 			h.logger.Error(err)
 			return
 		}
+		// Get the owner from the context, if it exists
+		// this is coming from the ACL middleware
+		accessor := c.GetString("accessor")
+		if accessor != "" {
+			job.Owner = accessor
+		}
 	}
 
 	// Validate job

diff --git a/dkron/ui-dist/assets/index-244e3810.js → dkron/ui-dist/assets/index-6dc28a61.js b/dkron/ui-dist/assets/index-244e3810.js → dkron/ui-dist/assets/index-6dc28a61.js
diff --git a/dkron/ui-dist/index.html b/dkron/ui-dist/index.html
@@ -119,7 +119,7 @@
             window.DKRON_FAILED_JOBS = {{.DKRON_FAILED_JOBS}};
             window.DKRON_UNTRIGGERED_JOBS = {{.DKRON_UNTRIGGERED_JOBS}};
             window.DKRON_ACL_ENABLED = {{.DKRON_ACL_ENABLED}};</script>
-      <script type="module" crossorigin src="./assets/index-244e3810.js"></script>
+      <script type="module" crossorigin src="./assets/index-6dc28a61.js"></script>
       <link rel="stylesheet" href="./assets/index-73a69410.css">
     </head>
 

diff --git a/ui/src/dataProvider.ts b/ui/src/dataProvider.ts
@@ -5,7 +5,7 @@ import { DataProvider } from 'react-admin';
 
 export const apiUrl = window.DKRON_API_URL || 'http://localhost:8080/v1'
 
-const httpClient = (url: String, options: fetchUtils.Options = {}) => {
+export const httpClient = (url: String, options: fetchUtils.Options = {}) => {
     if (!options.headers) {
         options.headers = fetchUtils.createHeadersFromOptions(options);
     }
@@ -36,7 +36,7 @@ const dkronDataProvider: DataProvider = {
         };
         const url = `${apiUrl}/${params.target}/${params.id}/${resource}?${stringify(query)}`;
 
-        return fetchUtils.fetchJson(url).then(({ headers, json }) => {
+        return httpClient(url).then(({ headers, json }) => {
             if (!headers.has('x-total-count')) {
                 throw new Error(
                     'The X-Total-Count header is missing in the HTTP Response. The jsonServer Data Provider expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare X-Total-Count in the Access-Control-Expose-Headers header?'

diff --git a/ui/src/jobs/BulkRunButton.tsx b/ui/src/jobs/BulkRunButton.tsx
@@ -6,7 +6,7 @@ import {
     useUnselectAll,
     useRefresh,
 } from 'react-admin';
-import { apiUrl } from '../dataProvider';
+import { apiUrl, httpClient } from '../dataProvider';
 import RunIcon from '@mui/icons-material/PlayArrow';
 
 const BulkRunButton = ({selectedIds}: any) => {
@@ -17,7 +17,7 @@ const BulkRunButton = ({selectedIds}: any) => {
     const runMany = () => {
         for(let id of selectedIds) {
             setLoading(true);
-            fetch(`${apiUrl}/jobs/${id}`, { method: 'POST' })
+            httpClient(`${apiUrl}/jobs/${id}`, { method: 'POST' })
                 .then(() => {
                     notify('Success running job');
                 })

diff --git a/ui/src/jobs/BulkToggleButton.tsx b/ui/src/jobs/BulkToggleButton.tsx
@@ -5,7 +5,7 @@ import {
     useUnselectAll,
     useRefresh,
 } from 'react-admin';
-import { apiUrl } from '../dataProvider';
+import { apiUrl, httpClient } from '../dataProvider';
 import RunIcon from '@mui/icons-material/PlayArrow';
 
 const BulkToggleButton = ({selectedIds}: any) => {
@@ -16,7 +16,7 @@ const BulkToggleButton = ({selectedIds}: any) => {
     const toggleMany = () => {
         for(let id of selectedIds) {
             setLoading(true);
-            fetch(`${apiUrl}/jobs/${id}/toggle`, { method: 'POST' })
+            httpClient(`${apiUrl}/jobs/${id}/toggle`, { method: 'POST' })
                 .then(() => {
                     notify('Job toggled');
                 })

diff --git a/ui/src/jobs/JobShow.tsx b/ui/src/jobs/JobShow.tsx
@@ -10,7 +10,9 @@ import {
     TabbedShowLayout,
     Tab,
     ReferenceManyField,
-    useNotify, Button,
+    useNotify,
+    Button,
+    useRecordContext
 } from 'react-admin';
 import ToggleButton from "./ToggleButton"
 import RunButton from "./RunButton"
@@ -20,7 +22,7 @@ import JobIcon from '@mui/icons-material/Update';
 import FullIcon from '@mui/icons-material/BatteryFull';
 import { Tooltip } from '@mui/material';
 import { useState } from 'react';
-import { apiUrl } from '../dataProvider';
+import { apiUrl, httpClient } from '../dataProvider';
 
 // basePath={basePath}
 const JobShowActions = ({ basePath, data, resource }: any) => (
@@ -43,7 +45,7 @@ const FullButton = ({record}: any) => {
     const [loading, setLoading] = useState(false);
     const handleClick = () => {
         setLoading(true);
-        fetch(`${apiUrl}/jobs/${record.job_name}/executions/${record.id}`)
+        httpClient(`${apiUrl}/jobs/${record.job_name}/executions/${record.id}`)
             .then((response) => {
                 if (response.ok) {
                     notify('Success loading full output');
@@ -73,7 +75,9 @@ const FullButton = ({record}: any) => {
     );
 };
 
-const SpecialOutputPanel = ({ id, record, resource }: any) => {
+const SpecialOutputPanel = () => {
+    const record = useRecordContext();
+    if (!record) return null;
     return (
         <div className="execution-output">
             {record.output_truncated ? <div><FullButton record={record} /></div> : ""}

diff --git a/ui/src/jobs/RunButton.tsx b/ui/src/jobs/RunButton.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNotify, useRefresh, Button, useRecordContext } from 'react-admin';
-import { apiUrl } from '../dataProvider';
+import { apiUrl, httpClient } from '../dataProvider';
 import RunIcon from '@mui/icons-material/PlayArrow';
 
 const RunButton = () => {
@@ -10,7 +10,7 @@ const RunButton = () => {
     const [loading, setLoading] = useState(false);
     const handleClick = () => {
         setLoading(true);
-        fetch(`${apiUrl}/jobs/${record.id}`, { method: 'POST' })
+        httpClient(`${apiUrl}/jobs/${record.id}`, { method: 'POST' })
             .then(() => {
                 notify('Success running job');
                 refresh();

diff --git a/ui/src/jobs/ToggleButton.tsx b/ui/src/jobs/ToggleButton.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNotify, useRefresh, Button, useRecordContext } from 'react-admin';
-import { apiUrl } from '../dataProvider';
+import { apiUrl, httpClient } from '../dataProvider';
 import ToggleIcon from '@mui/icons-material/Pause';
 
 const ToggleButton = () => {
@@ -10,7 +10,7 @@ const ToggleButton = () => {
     const [loading, setLoading] = useState(false);
     const handleClick = () => {
         setLoading(true);
-        fetch(`${apiUrl}/jobs/${record.id}/toggle`, { method: 'POST' })
+        httpClient(`${apiUrl}/jobs/${record.id}/toggle`, { method: 'POST' }) 
             .then(() => {
                 notify('Job toggled');
                 refresh();