fix: Add CustomScroller on DataSources page

public/app/core/components/Page/Page.tsx

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 // Components
 import PageHeader from '../PageHeader/PageHeader';
 import PageContents from './PageContents';
+import { CustomScrollbar } from '@grafana/ui';
 
 interface Props {
   title: string;
@@ -11,13 +12,36 @@ interface Props {
 }
 
 class Page extends Component<Props> {
+  private bodyClass = 'is-react';
+  private body = document.getElementsByTagName('body')[0];
+  private footer = document.getElementsByClassName('footer')[0].cloneNode(true);
+  private scrollbarElementRef = React.createRef<HTMLDivElement>();
   static Header = PageHeader;
   static Contents = PageContents;
 
+
+  componentDidMount() {
+    this.body.classList.add(this.bodyClass);
+    this.copyFooter();
+  }
+
+  componentWillUnmount() {
+    this.body.classList.remove(this.bodyClass);
+  }
+
+  copyFooter = () => {
+    const c = this.scrollbarElementRef.current;
+    c.append(this.footer);
+  }
+
   render() {
     return (
-      <div>
-        {this.props.children}
+      <div className="page-scrollbar-wrapper">
+          <CustomScrollbar autoHeightMin={'100%'}>
+            <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
+              {this.props.children}
+            </div>
+          </CustomScrollbar>
       </div>
     );
   }

public/app/core/components/Page/PageContents.tsx

@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 
 // Components
-import { CustomScrollbar } from '@grafana/ui';
 import PageLoader from '../PageLoader/PageLoader';
 
 interface Props {
@@ -17,10 +16,8 @@ class PageContents extends Component<Props> {
 
     return (
       <div className="page-container page-body">
-        <CustomScrollbar>
-          {isLoading && <PageLoader />}
-          {this.props.children}
-        </CustomScrollbar>
+        {isLoading && <PageLoader />}
+        {this.props.children}
       </div>
     );
   }