diff --git a/developer_docs/plugins.asciidoc b/developer_docs/plugins.asciidoc
index e4fd42f7070..754155b54c9 100644
--- a/developer_docs/plugins.asciidoc
+++ b/developer_docs/plugins.asciidoc
@@ -49,7 +49,7 @@ If your plugin uses Webpack, you can import and the core functionality from `for
 import { noop } from 'foremanReact/common/helpers';
 
 // import components from foremanReact:
-import { MessageBox } from 'foremanReact/components/common/MessageBox';
+import { ClipboardCopy } from 'foremanReact/components/common/ClipboardCopy';
 ```
 
 ## Using Webpack in plugins
diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js
index 84c08e80081..51784aef455 100644
--- a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js
+++ b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js
@@ -12,11 +12,13 @@ import {
   Spinner,
   Icon,
 } from '@patternfly/react-core';
-import { ErrorCircleOIcon } from '@patternfly/react-icons';
+import {
+  ErrorCircleOIcon,
+  ExclamationCircleIcon,
+} from '@patternfly/react-icons';
 import classNames from 'classnames';
 import DonutChart from '../common/charts/DonutChart';
 import BarChart from '../common/charts/BarChart';
-import MessageBox from '../common/MessageBox';
 import { STATUS } from '../../constants';
 import EmptyState from '../common/EmptyState';
 import { translate as __ } from '../../common/I18n';
@@ -45,9 +47,14 @@ const ChartBoxContent = ({ status, panelChart, error }) => {
     return error;
   }
 
-  return <MessageBox icontype="error-circle-o" msg="Invalid Status" />;
+  return (
+    <EmptyState
+      header={__('Invalid Status')}
+      variant="sm"
+      icon={<ExclamationCircleIcon />}
+    />
+  );
 };
-
 ChartBoxContent.propTypes = {
   status: PropTypes.string.isRequired,
   panelChart: PropTypes.node.isRequired,
diff --git a/webpack/assets/javascripts/react_app/components/common/Loader/Loader.css b/webpack/assets/javascripts/react_app/components/common/Loader/Loader.css
deleted file mode 100644
index f4b564326df..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/Loader/Loader.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.loader-root {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-}
diff --git a/webpack/assets/javascripts/react_app/components/common/Loader/Loader.test.js b/webpack/assets/javascripts/react_app/components/common/Loader/Loader.test.js
deleted file mode 100644
index 997054411ec..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/Loader/Loader.test.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-import { STATUS } from '../../../constants';
-import Loader from './index';
-
-jest.unmock('./index');
-
-const loaderChildren = [
-  <div key="0" className="success">
-    Success
-  </div>,
-  <div key="1" className="failure">
-    Failure
-  </div>,
-];
-
-describe('Loader', () => {
-  describe('renders correct content based on status', () => {
-    it('success', () => {
-      render(
-        <Loader status={STATUS.RESOLVED}>{loaderChildren}</Loader>
-      );
-
-      expect(screen.getByText('Success')).toBeInTheDocument();
-      expect(screen.queryByLabelText('Loading')).not.toBeInTheDocument();
-    });
-
-    it('failure', () => {
-      render(<Loader status={STATUS.ERROR}>{loaderChildren}</Loader>);
-
-      expect(screen.getByText('Failure')).toBeInTheDocument();
-      expect(screen.queryByLabelText('Loading')).not.toBeInTheDocument();
-    });
-
-    it('pending', () => {
-      const { container } = render(
-        <Loader status={STATUS.PENDING}>{loaderChildren}</Loader>
-      );
-
-      expect(container.querySelector('.loader-root')).toBeInTheDocument();
-      expect(container.querySelector('.spinner.spinner-lg')).toBeInTheDocument();
-      expect(screen.queryByText('Success')).not.toBeInTheDocument();
-    });
-
-    it('pending-different-spinner', () => {
-      const { container } = render(
-        <Loader status={STATUS.PENDING} spinnerSize="xs">
-          {loaderChildren}
-        </Loader>
-      );
-
-      expect(container.querySelector('.loader-root')).toBeInTheDocument();
-      expect(container.querySelector('.spinner.spinner-xs')).toBeInTheDocument();
-      expect(container.querySelector('.spinner.spinner-lg')).not.toBeInTheDocument();
-    });
-
-    it('default case', () => {
-      render(<Loader />);
-
-      expect(screen.getByText('Invalid Status')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/Loader/index.js b/webpack/assets/javascripts/react_app/components/common/Loader/index.js
deleted file mode 100644
index 90e5a96f596..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/Loader/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Spinner } from 'patternfly-react';
-import { STATUS } from '../../../constants';
-import { deprecate } from '../../../common/DeprecationService';
-import MessageBox from '../MessageBox';
-import './Loader.css';
-
-const loaderSpinner = spinnerSize => (
-  <div className="loader-root">
-    <Spinner loading size={spinnerSize} />
-  </div>
-);
-
-const SimpleLoader = ({ spinnerSize }) => {
-  useEffect(() => {
-    deprecate(
-      'common/Loader (patternfly-react Spinner)',
-      'Spinner from @patternfly/react-core',
-      '5.1'
-    );
-  }, []);
-
-  return loaderSpinner(spinnerSize);
-};
-
-SimpleLoader.propTypes = {
-  spinnerSize: PropTypes.string,
-};
-
-SimpleLoader.defaultProps = {
-  spinnerSize: 'lg',
-};
-
-const Loader = ({ status, children, spinnerSize }) => {
-  useEffect(() => {
-    deprecate(
-      'common/Loader (patternfly-react Spinner)',
-      'Spinner from @patternfly/react-core',
-      '5.1'
-    );
-  }, []);
-
-  let content;
-
-  switch (status) {
-    case STATUS.PENDING: {
-      return loaderSpinner(spinnerSize);
-    }
-    case STATUS.RESOLVED: {
-      // eslint-disable-next-line prefer-destructuring
-      content = children[0];
-      break;
-    }
-    case STATUS.ERROR: {
-      // eslint-disable-next-line prefer-destructuring
-      content = children[1];
-      break;
-    }
-    default:
-      content = <MessageBox icontype="error-circle-o" msg="Invalid Status" />;
-      break;
-  }
-
-  return <div className="loader-root">{content}</div>;
-};
-
-Loader.propTypes = {
-  children: PropTypes.array,
-  status: PropTypes.string,
-  spinnerSize: PropTypes.string,
-};
-
-Loader.defaultProps = {
-  children: ['', ''],
-  status: '',
-  spinnerSize: 'lg',
-};
-
-export default Loader;
-
-export const simpleLoader = spinnerSize => (
-  <SimpleLoader spinnerSize={spinnerSize} />
-);
diff --git a/webpack/assets/javascripts/react_app/components/common/MessageBox/MessageBox.css b/webpack/assets/javascripts/react_app/components/common/MessageBox/MessageBox.css
deleted file mode 100644
index e22d64be2b5..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/MessageBox/MessageBox.css
+++ /dev/null
@@ -1,25 +0,0 @@
-
-  .message-box-root {
-    flex: 1 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .message-box-content {
-    flex: 0 0 30px;
-    flex-basis: 30px;
-    text-align: center;
-  }
-
-  .message-box-icon {
-    font-size: 22px;
-  }
-
-  .message-box-message {
-    color: #363636;
-    font-size: 12px;
-    text-transform: capitalize;
-  }
-
diff --git a/webpack/assets/javascripts/react_app/components/common/MessageBox/MessageBox.test.js b/webpack/assets/javascripts/react_app/components/common/MessageBox/MessageBox.test.js
deleted file mode 100644
index 3887b509b9a..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/MessageBox/MessageBox.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { shallow } from 'enzyme';
-import React from 'react';
-
-import MessageBox from './index';
-
-jest.unmock('./index');
-
-const testMessageBoxSnapshot = props => {
-  const wrapper = shallow(<MessageBox {...props} />);
-
-  expect(wrapper).toMatchSnapshot();
-};
-
-describe('MessageBox', () => {
-  describe('the message', () => {
-    it('displays this is some text', () =>
-      testMessageBoxSnapshot({ msg: 'this is some text', icontype: 'info' }));
-
-    it('displays This is another message', () =>
-      testMessageBoxSnapshot({
-        msg: 'This is another message',
-        icontype: 'warning',
-      }));
-  });
-
-  describe('the icon', () => {
-    it('has pficon and pficon-info classes', () =>
-      testMessageBoxSnapshot({ msg: 'this is some text', icontype: 'info' }));
-
-    it('has pficon and pficon-info classes with error icon', () =>
-      testMessageBoxSnapshot({
-        msg: 'this is some text',
-        icontype: 'error-circle-o',
-      }));
-  });
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/MessageBox/__snapshots__/MessageBox.test.js.snap b/webpack/assets/javascripts/react_app/components/common/MessageBox/__snapshots__/MessageBox.test.js.snap
deleted file mode 100644
index 8e949dff0d9..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/MessageBox/__snapshots__/MessageBox.test.js.snap
+++ /dev/null
@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MessageBox the icon has pficon and pficon-info classes 1`] = `
-<div
-  className="message-box-root"
->
-  <div
-    className="pficon pficon-info message-box-content message-box-icon"
-  />
-  <div
-    className="message-box-content message-box-message"
-  >
-    this is some text
-  </div>
-</div>
-`;
-
-exports[`MessageBox the icon has pficon and pficon-info classes with error icon 1`] = `
-<div
-  className="message-box-root"
->
-  <div
-    className="pficon pficon-error-circle-o message-box-content message-box-icon"
-  />
-  <div
-    className="message-box-content message-box-message"
-  >
-    this is some text
-  </div>
-</div>
-`;
-
-exports[`MessageBox the message displays This is another message 1`] = `
-<div
-  className="message-box-root"
->
-  <div
-    className="pficon pficon-warning message-box-content message-box-icon"
-  />
-  <div
-    className="message-box-content message-box-message"
-  >
-    This is another message
-  </div>
-</div>
-`;
-
-exports[`MessageBox the message displays this is some text 1`] = `
-<div
-  className="message-box-root"
->
-  <div
-    className="pficon pficon-info message-box-content message-box-icon"
-  />
-  <div
-    className="message-box-content message-box-message"
-  >
-    this is some text
-  </div>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/MessageBox/index.js b/webpack/assets/javascripts/react_app/components/common/MessageBox/index.js
deleted file mode 100644
index 637fa385090..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/MessageBox/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { deprecate } from '../../../common/DeprecationService';
-import './MessageBox.css';
-
-const MessageBox = ({ msg, icontype }) => {
-  useEffect(() => {
-    deprecate(
-      'common/MessageBox',
-      'EmptyState from components/common/EmptyState or @patternfly/react-core',
-      '5.1'
-    );
-  }, []);
-
-  return (
-    <div className="message-box-root">
-      <div
-        className={`pficon pficon-${icontype} message-box-content message-box-icon`}
-      />
-      <div className="message-box-content message-box-message">{msg}</div>
-    </div>
-  );
-};
-
-MessageBox.propTypes = {
-  icontype: PropTypes.string.isRequired,
-  msg: PropTypes.string,
-};
-
-MessageBox.defaultProps = {
-  msg: '',
-};
-
-export default MessageBox;
diff --git a/webpack/assets/javascripts/react_app/components/common/SearchInput/SearchInput.test.js b/webpack/assets/javascripts/react_app/components/common/SearchInput/SearchInput.test.js
deleted file mode 100644
index d2788a082b3..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/SearchInput/SearchInput.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { shallow, mount } from 'enzyme';
-import React from 'react';
-import SearchInput from './';
-
-jest.unmock('./');
-
-describe('Search Input', () => {
-  it('should render', () => {
-    const wrapper = shallow(<SearchInput searchValue="val" timeout={300} />);
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('shouldnt gain focus', () => {
-    const spy = jest.spyOn(SearchInput.prototype, 'gainFocus');
-    mount(<SearchInput searchValue="val" timeout={300} />);
-
-    expect(spy).toHaveBeenCalledTimes(0);
-  });
-
-  it('should gain focus', () => {
-    const spy = jest.spyOn(SearchInput.prototype, 'gainFocus');
-    mount(<SearchInput searchValue="val" timeout={300} focus />);
-
-    expect(spy).toHaveBeenCalled();
-  });
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/SearchInput/__snapshots__/SearchInput.test.js.snap b/webpack/assets/javascripts/react_app/components/common/SearchInput/__snapshots__/SearchInput.test.js.snap
deleted file mode 100644
index 11050278b31..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/SearchInput/__snapshots__/SearchInput.test.js.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Search Input should render 1`] = `
-<div
-  className="input-search"
->
-  <Icon>
-    <SearchIcon />
-  </Icon>
-  <DebounceInput
-    className="form-control"
-    debounceTimeout={300}
-    element="input"
-    forceNotifyByEnter={true}
-    forceNotifyOnBlur={true}
-    id="breadcrumbs-search"
-    inputRef={[Function]}
-    minLength={0}
-    onChange={[Function]}
-    placeholder="filter..."
-    type="text"
-    value="val"
-  />
-  <Button
-    aria-label="Clear"
-    onClick={[Function]}
-    ouiaId="clear-search-input-button"
-    variant="plain"
-  >
-    <Icon>
-      <TimesIcon />
-    </Icon>
-  </Button>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/SearchInput/index.js b/webpack/assets/javascripts/react_app/components/common/SearchInput/index.js
deleted file mode 100644
index 49c53da1807..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/SearchInput/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DebounceInput } from 'react-debounce-input';
-import { Icon, Button } from '@patternfly/react-core';
-import { SearchIcon, TimesIcon } from '@patternfly/react-icons';
-import { translate as __ } from '../../../../react_app/common/I18n';
-import { deprecate } from '../../../common/DeprecationService';
-import { noop } from '../../../common/helpers';
-import './searchInput.scss';
-
-class SearchInput extends React.Component {
-  componentDidMount() {
-    deprecate(
-      'components/common/SearchInput',
-      'SearchInput from @patternfly/react-core or SearchBar from components/SearchBar or AutocompleteInput from components/common/AutocompleteInput',
-      '3.21'
-    );
-    if (this.props.focus) {
-      this.gainFocus();
-    }
-  }
-  gainFocus() {
-    this.nameInput.focus();
-  }
-
-  render() {
-    const { onSearchChange, searchValue, timeout, onClear } = this.props;
-
-    return (
-      <div className="input-search">
-        <Icon>
-          <SearchIcon />
-        </Icon>
-        <DebounceInput
-          className="form-control"
-          inputRef={input => {
-            this.nameInput = input;
-          }}
-          id="breadcrumbs-search"
-          placeholder={__('filter...')}
-          value={searchValue}
-          minLength={0}
-          debounceTimeout={timeout}
-          onChange={onSearchChange}
-        />
-        <Button
-          variant="plain"
-          onClick={() => onClear()}
-          aria-label="Clear"
-          ouiaId="clear-search-input-button"
-        >
-          <Icon>
-            <TimesIcon />
-          </Icon>
-        </Button>
-      </div>
-    );
-  }
-}
-
-SearchInput.propTypes = {
-  focus: PropTypes.bool,
-  searchValue: PropTypes.string,
-  timeout: PropTypes.number,
-  onSearchChange: PropTypes.func,
-  onClear: PropTypes.func,
-};
-
-SearchInput.defaultProps = {
-  focus: false,
-  searchValue: '',
-  timeout: 300,
-  onSearchChange: noop,
-  onClear: noop,
-};
-
-export default SearchInput;
diff --git a/webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss b/webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss
deleted file mode 100644
index 9576f27f01b..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '../../../common/colors';
-
-.input-search {
-  position: relative;
-  left: 20px;
-
-  input {
-    text-indent: 25px;
-    width: 158px;
-  }
-
-  .fa-search {
-    color: $pf-blue-400;
-    position: absolute;
-    top: 6px;
-    left: 8px;
-    z-index: 99;
-  }
-
-  .fa-close {
-    cursor: pointer;
-    position: absolute;
-    top: 6px;
-    left: 140px;
-    z-index: 99;
-  }
-}
diff --git a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.fixtures.js b/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.fixtures.js
deleted file mode 100644
index 471874ec27e..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.fixtures.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const data = [
-  ['red', [5, 7, 9], '#AA4643'],
-  ['green', [2, 4, 6], '#89A54E'],
-];
-
-const dates = [1557014400000, 1559779200000, 1562457600000];
-
-export const timeseriesData = [...data, ['x', dates, null]];
diff --git a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.test.js b/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.test.js
deleted file mode 100644
index df6e5b5751a..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
-import { data, timeseriesData } from './LineChart.fixtures';
-import LineChart from './index';
-
-jest.mock('../../../../../services/charts/ChartService.consts');
-
-const fixtures = {
-  'should render line chart': {
-    data,
-    id: 'abc',
-  },
-  'should render line chart with timeseries': {
-    data: timeseriesData,
-    xAxisDataLabel: 'x',
-    config: 'timeseries',
-    id: 'xyz',
-  },
-};
-
-describe('Line Chart', () =>
-  testComponentSnapshotsWithFixtures(LineChart, fixtures));
diff --git a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/__snapshots__/LineChart.test.js.snap b/webpack/assets/javascripts/react_app/components/common/charts/LineChart/__snapshots__/LineChart.test.js.snap
deleted file mode 100644
index 5ed53a8037a..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/__snapshots__/LineChart.test.js.snap
+++ /dev/null
@@ -1,177 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Line Chart should render line chart 1`] = `
-<LineChart
-  axis={Object {}}
-  className="line-chart-pf"
-  color={
-    Object {
-      "pattern": Array [],
-    }
-  }
-  data={
-    Object {
-      "colors": Object {
-        "green": "#89A54E",
-        "red": "#AA4643",
-      },
-      "columns": Array [
-        Array [
-          "red",
-          5,
-          7,
-          9,
-        ],
-        Array [
-          "green",
-          2,
-          4,
-          6,
-        ],
-      ],
-      "onclick": [Function],
-    }
-  }
-  grid={
-    Object {
-      "x": Object {
-        "show": false,
-      },
-      "y": Object {
-        "show": true,
-      },
-    }
-  }
-  id="abc"
-  legend={
-    Object {
-      "show": true,
-    }
-  }
-  onrendered={[Function]}
-  padding={null}
-  point={
-    Object {
-      "focus": Object {
-        "expand": Object {
-          "r": 5,
-        },
-      },
-      "r": 3,
-    }
-  }
-  size={
-    Object {
-      "height": 350,
-      "width": 1000,
-    }
-  }
-  title={
-    Object {
-      "type": "percent",
-    }
-  }
-  type="line"
-  unloadBeforeLoad={false}
-/>
-`;
-
-exports[`Line Chart should render line chart with timeseries 1`] = `
-<LineChart
-  axis={
-    Object {
-      "x": Object {
-        "tick": Object {
-          "format": [MockFunction],
-          "rotate": -40,
-        },
-        "type": "timeseries",
-      },
-    }
-  }
-  className="line-chart-pf"
-  color={
-    Object {
-      "pattern": Array [],
-    }
-  }
-  data={
-    Object {
-      "colors": Object {
-        "green": "#89A54E",
-        "red": "#AA4643",
-      },
-      "columns": Array [
-        Array [
-          "red",
-          5,
-          7,
-          9,
-        ],
-        Array [
-          "green",
-          2,
-          4,
-          6,
-        ],
-        Array [
-          "x",
-          1557014400000,
-          1559779200000,
-          1562457600000,
-        ],
-      ],
-      "onclick": [Function],
-      "x": "x",
-    }
-  }
-  grid={
-    Object {
-      "x": Object {
-        "show": false,
-      },
-      "y": Object {
-        "show": true,
-      },
-    }
-  }
-  id="xyz"
-  legend={
-    Object {
-      "show": true,
-    }
-  }
-  onrendered={[Function]}
-  padding={
-    Object {
-      "bottom": 70,
-      "left": 30,
-      "right": 20,
-      "top": 10,
-    }
-  }
-  point={
-    Object {
-      "focus": Object {
-        "expand": Object {
-          "r": 5,
-        },
-      },
-      "r": 3,
-    }
-  }
-  size={
-    Object {
-      "height": 350,
-      "width": 1000,
-    }
-  }
-  title={
-    Object {
-      "type": "percent",
-    }
-  }
-  type="line"
-  unloadBeforeLoad={false}
-/>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/index.js b/webpack/assets/javascripts/react_app/components/common/charts/LineChart/index.js
deleted file mode 100644
index a1ea0f0e16a..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { LineChart as PfLineChart } from 'patternfly-react';
-import { Icon } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
-
-import { translate as __ } from '../../../../../react_app/common/I18n';
-import { deprecate } from '../../../../common/DeprecationService';
-import { getLineChartConfig } from '../../../../../services/charts/LineChartService';
-import EmptyState from '../../EmptyState';
-
-/* Data format example:
-  data={[
-      ['red', [5, 7, 9], '#AA4643'],
-      ['green', [2, 4, 6], '#89A54E'],
-      ['x', [1557014400000, 1559779200000, 1562457600000], null],
-    ]}
-*/
-const LineChart = ({
-  data,
-  title,
-  config,
-  noDataMsg,
-  unloadData,
-  xAxisDataLabel,
-  axisOpts,
-  onclick,
-  id,
-}) => {
-  useEffect(() => {
-    deprecate(
-      'common/charts/LineChart (patternfly-react LineChart)',
-      '@patternfly/react-charts ChartLine / Chart',
-      '5.1'
-    );
-  }, []);
-
-  const chartConfig = getLineChartConfig({
-    data,
-    config,
-    xAxisDataLabel,
-    axisOpts,
-    onclick,
-    id,
-  });
-
-  if (chartConfig.data.columns.length > 0) {
-    return (
-      <PfLineChart
-        {...chartConfig}
-        title={title}
-        unloadBeforeLoad={unloadData}
-      />
-    );
-  }
-  return (
-    <EmptyState
-      variant="xs"
-      icon={
-        <Icon iconSize="lg">
-          <InfoCircleIcon />
-        </Icon>
-      }
-      header={noDataMsg}
-    />
-  );
-};
-
-LineChart.propTypes = {
-  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  config: PropTypes.oneOf(['regular', 'timeseries']),
-  noDataMsg: PropTypes.string,
-  title: PropTypes.object,
-  unloadData: PropTypes.bool,
-  axisOpts: PropTypes.object,
-  xAxisDataLabel: PropTypes.string,
-  onclick: PropTypes.func,
-  id: PropTypes.string,
-};
-
-LineChart.defaultProps = {
-  data: undefined,
-  config: 'regular',
-  noDataMsg: __('No data available'),
-  title: { type: 'percent' },
-  unloadData: false,
-  axisOpts: {},
-  xAxisDataLabel: '',
-  onclick: () => {},
-  id: undefined,
-};
-
-export default LineChart;
diff --git a/webpack/assets/javascripts/react_app/components/componentRegistry.js b/webpack/assets/javascripts/react_app/components/componentRegistry.js
index 661aa02728e..cba892e2a19 100644
--- a/webpack/assets/javascripts/react_app/components/componentRegistry.js
+++ b/webpack/assets/javascripts/react_app/components/componentRegistry.js
@@ -5,7 +5,6 @@ import ReactApp from '../Root/ReactApp';
 import AreaChart from './common/charts/AreaChart';
 import BarChart from './common/charts/BarChart';
 import DonutChart from './common/charts/DonutChart';
-import LineChart from './common/charts/LineChart';
 import PowerStatus from './hosts/powerStatus/';
 import NotificationContainer from './notifications/';
 import ToastsList from './ToastsList/';
@@ -119,7 +118,6 @@ const coreComponents = [
   { name: 'AutoComplete', type: SearchBar },
   { name: 'AreaChart', type: AreaChart },
   { name: 'DonutChart', type: DonutChart },
-  { name: 'LineChart', type: LineChart },
   { name: 'PowerStatus', type: PowerStatus },
   { name: 'NotificationContainer', type: NotificationContainer },
   { name: 'ToastNotifications', type: ToastsList },
diff --git a/webpack/assets/javascripts/services/charts/ChartService.consts.js b/webpack/assets/javascripts/services/charts/ChartService.consts.js
index 6682f362f67..51cf394ee23 100644
--- a/webpack/assets/javascripts/services/charts/ChartService.consts.js
+++ b/webpack/assets/javascripts/services/charts/ChartService.consts.js
@@ -23,13 +23,6 @@ const barChartEnums = {
   WIDTH: { ...enums.width },
 };
 
-const lineChartEnums = {
-  SIZE: {
-    REGULAR: { width: 1000, height: 350 },
-  },
-  WIDTH: { ...enums.width },
-};
-
 export const chartConfig = {
   data: {
     columns: [],
@@ -121,32 +114,6 @@ export const smallBarChartConfig = {
   size: barChartEnums.SIZE.SMALL,
 };
 
-export const lineChartConfig = {
-  ...chartConfig,
-  legend: { show: true },
-  size: lineChartEnums.SIZE.REGULAR,
-  padding: null,
-};
-
-export const timeseriesLineChartConfig = {
-  ...lineChartConfig,
-  axis: {
-    x: {
-      type: 'timeseries',
-      tick: {
-        format: date => new Intl.DateTimeFormat(intl.locale).format(date),
-        rotate: -40,
-      },
-    },
-  },
-  padding: {
-    top: 10,
-    bottom: 70,
-    left: 30,
-    right: 20,
-  },
-};
-
 export const areaChartConfig = {
   ...chartConfig,
   legend: { show: true },
diff --git a/webpack/assets/javascripts/services/charts/ChartService.js b/webpack/assets/javascripts/services/charts/ChartService.js
index 0c017f65f5e..b70a3bcb823 100644
--- a/webpack/assets/javascripts/services/charts/ChartService.js
+++ b/webpack/assets/javascripts/services/charts/ChartService.js
@@ -7,8 +7,6 @@ import {
   barChartConfig,
   mediumBarChartConfig,
   smallBarChartConfig,
-  lineChartConfig,
-  timeseriesLineChartConfig,
   timeseriesAreaChartConfig,
 } from './ChartService.consts';
 import { PERCENT_MULTIPLIER } from '../../react_app/constants';
@@ -27,10 +25,6 @@ const chartsSizeConfig = {
     medium: donutMediumChartConfig,
     large: donutLargeChartConfig,
   },
-  line: {
-    regular: lineChartConfig,
-    timeseries: timeseriesLineChartConfig,
-  },
 };
 
 const doDataExist = data => {
diff --git a/webpack/assets/javascripts/services/charts/LineChartService.js b/webpack/assets/javascripts/services/charts/LineChartService.js
deleted file mode 100644
index de36b649fa2..00000000000
--- a/webpack/assets/javascripts/services/charts/LineChartService.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import uuidV1 from 'uuid/v1';
-import { getChartConfig } from './ChartService';
-
-export const getLineChartConfig = ({
-  data,
-  config,
-  onclick,
-  id = uuidV1(),
-  xAxisDataLabel,
-  axisOpts,
-}) => {
-  const chartConfig = getChartConfig({
-    type: 'line',
-    data,
-    config,
-    id,
-    onclick,
-  });
-
-  if (chartConfig.data && chartConfig.data.columns) {
-    chartConfig.data.columns = chartConfig.data.columns.map(col => {
-      const [label, values] = col;
-      // destruct data into format line chart accepts,
-      // remove last item in column as it specifies the color
-      return [label, ...values];
-    });
-  }
-
-  if (config === 'timeseries' && xAxisDataLabel) {
-    chartConfig.data.x = xAxisDataLabel;
-  } else if (config === 'timeseries' && !xAxisDataLabel) {
-    // eslint-disable-next-line no-console
-    console.warn('xAxisDataLabel is missing for timeseries line graph');
-  }
-
-  chartConfig.axis = { ...chartConfig.axis, ...axisOpts };
-
-  delete chartConfig.tooltip;
-
-  return chartConfig;
-};
diff --git a/webpack/assets/javascripts/services/charts/LineChartService.test.js b/webpack/assets/javascripts/services/charts/LineChartService.test.js
deleted file mode 100644
index 55962aca57d..00000000000
--- a/webpack/assets/javascripts/services/charts/LineChartService.test.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { testActionSnapshotWithFixtures } from 'foremanReact/common/testHelpers';
-
-import { getLineChartConfig } from './LineChartService';
-import {
-  data,
-  timeseriesData,
-} from '../../react_app/components/common/charts/LineChart/LineChart.fixtures';
-
-jest.mock('./ChartService.consts');
-
-const fixtures = {
-  'should get regular config': () =>
-    getLineChartConfig({
-      data,
-      config: 'regular',
-      onclick: () => {},
-      id: 'klm',
-    }),
-  'should get timeseries config': () =>
-    getLineChartConfig({
-      data: timeseriesData,
-      config: 'timeseries',
-      onclick: () => {},
-      xAxisDataLabel: 'x',
-      id: 'pqr',
-    }),
-};
-
-describe('getLineChartConfig', () => testActionSnapshotWithFixtures(fixtures));
diff --git a/webpack/assets/javascripts/services/charts/__snapshots__/LineChartService.test.js.snap b/webpack/assets/javascripts/services/charts/__snapshots__/LineChartService.test.js.snap
deleted file mode 100644
index ec45df58638..00000000000
--- a/webpack/assets/javascripts/services/charts/__snapshots__/LineChartService.test.js.snap
+++ /dev/null
@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`getLineChartConfig should get regular config 1`] = `
-Object {
-  "axis": Object {},
-  "color": Object {
-    "pattern": Array [],
-  },
-  "data": Object {
-    "colors": Object {
-      "green": "#89A54E",
-      "red": "#AA4643",
-    },
-    "columns": Array [
-      Array [
-        "red",
-        5,
-        7,
-        9,
-      ],
-      Array [
-        "green",
-        2,
-        4,
-        6,
-      ],
-    ],
-    "onclick": [Function],
-  },
-  "id": "klm",
-  "legend": Object {
-    "show": true,
-  },
-  "onrendered": [Function],
-  "padding": null,
-  "size": Object {
-    "height": 350,
-    "width": 1000,
-  },
-}
-`;
-
-exports[`getLineChartConfig should get timeseries config 1`] = `
-Object {
-  "axis": Object {
-    "x": Object {
-      "tick": Object {
-        "format": [MockFunction],
-        "rotate": -40,
-      },
-      "type": "timeseries",
-    },
-  },
-  "color": Object {
-    "pattern": Array [],
-  },
-  "data": Object {
-    "colors": Object {
-      "green": "#89A54E",
-      "red": "#AA4643",
-    },
-    "columns": Array [
-      Array [
-        "red",
-        5,
-        7,
-        9,
-      ],
-      Array [
-        "green",
-        2,
-        4,
-        6,
-      ],
-      Array [
-        "x",
-        1557014400000,
-        1559779200000,
-        1562457600000,
-      ],
-    ],
-    "onclick": [Function],
-    "x": "x",
-  },
-  "id": "pqr",
-  "legend": Object {
-    "show": true,
-  },
-  "onrendered": [Function],
-  "padding": Object {
-    "bottom": 70,
-    "left": 30,
-    "right": 20,
-    "top": 10,
-  },
-  "size": Object {
-    "height": 350,
-    "width": 1000,
-  },
-}
-`;