React UI: Send cookies on fetch() on older browsers (#6553)

* React UI: Send cookies on fetch() on older browsers

Fixes https://github.com/prometheus/prometheus/issues/6428

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix fetch() tests to expect new options
Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/react-app/src/hooks/useFetch.ts

@@ -17,7 +17,7 @@ export const useFetch = <T extends {}>(url: string, options?: RequestInit): Fetc
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const res = await fetch(url, options);
+        const res = await fetch(url, { cache: 'no-cache', credentials: 'same-origin', ...options });
         if (!res.ok) {
           throw new Error(res.statusText);
         }

web/ui/react-app/src/pages/graph/Panel.tsx

@@ -130,7 +130,11 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
         throw new Error('Invalid panel type "' + this.props.options.type + '"');
     }
 
-    fetch(`${this.props.pathPrefix}${path}?${params}`, { cache: 'no-store', signal: abortController.signal })
+    fetch(`${this.props.pathPrefix}${path}?${params}`, {
+      cache: 'no-store',
+      credentials: 'same-origin',
+      signal: abortController.signal,
+    })
       .then(resp => resp.json())
       .then(json => {
         if (json.status !== 'success') {

web/ui/react-app/src/pages/graph/PanelList.tsx

@@ -34,7 +34,7 @@ class PanelList extends Component<RouteComponentProps & PathPrefixProps, PanelLi
 
   componentDidMount() {
     !this.state.panels.length && this.addPanel();
-    fetch(`${this.props.pathPrefix}/api/v1/label/__name__/values`, { cache: 'no-store' })
+    fetch(`${this.props.pathPrefix}/api/v1/label/__name__/values`, { cache: 'no-store', credentials: 'same-origin' })
       .then(resp => {
         if (resp.ok) {
           return resp.json();
@@ -48,7 +48,7 @@ class PanelList extends Component<RouteComponentProps & PathPrefixProps, PanelLi
       .catch(error => this.setState({ fetchMetricsError: error.message }));
 
     const browserTime = new Date().getTime() / 1000;
-    fetch(`${this.props.pathPrefix}/api/v1/query?query=time()`, { cache: 'no-store' })
+    fetch(`${this.props.pathPrefix}/api/v1/query?query=time()`, { cache: 'no-store', credentials: 'same-origin' })
       .then(resp => {
         if (resp.ok) {
           return resp.json();

web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx

@@ -55,7 +55,7 @@ describe('Flags', () => {
         scrapePoolList = mount(<ScrapePoolList {...defaultProps} />);
       });
       scrapePoolList.update();
-      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', undefined);
+      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-cache', credentials: 'same-origin' });
       const panels = scrapePoolList.find(ScrapePoolPanel);
       expect(panels).toHaveLength(3);
       const activeTargets: Target[] = sampleApiResponse.data.activeTargets as Target[];
@@ -74,7 +74,7 @@ describe('Flags', () => {
         scrapePoolList = mount(<ScrapePoolList {...props} />);
       });
       scrapePoolList.update();
-      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', undefined);
+      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-cache', credentials: 'same-origin' });
       const panels = scrapePoolList.find(ScrapePoolPanel);
       expect(panels).toHaveLength(0);
     });
@@ -90,7 +90,7 @@ describe('Flags', () => {
       });
       scrapePoolList.update();
 
-      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', undefined);
+      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-cache', credentials: 'same-origin' });
       const alert = scrapePoolList.find(Alert);
       expect(alert.prop('color')).toBe('danger');
       expect(alert.text()).toContain('Error fetching targets');

web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx

@@ -66,7 +66,10 @@ describe('TSDB Stats', () => {
       });
       page.update();
 
-      expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', undefined);
+      expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
+        cache: 'no-cache',
+        credentials: 'same-origin',
+      });
       const alert = page.find(Alert);
       expect(alert.prop('color')).toBe('danger');
       expect(alert.text()).toContain('error loading tsdb status');
@@ -101,7 +104,10 @@ describe('TSDB Stats', () => {
       });
       page.update();
 
-      expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', undefined);
+      expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
+        cache: 'no-cache',
+        credentials: 'same-origin',
+      });
 
       for (let i = 0; i < tables.length; i++) {
         const data = tables[i].data;