diff --git a/public/app/core/components/PageLoader/PageLoader.tsx b/public/app/core/components/PageLoader/PageLoader.tsx
index 177f18f54ce..e6b133618db 100644
--- a/public/app/core/components/PageLoader/PageLoader.tsx
+++ b/public/app/core/components/PageLoader/PageLoader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LoadingPlaceholder } from '@grafana/ui';
+import { Box, LoadingPlaceholder } from '@grafana/ui';
 
 interface Props {
   pageName?: string;
@@ -9,9 +9,9 @@ interface Props {
 const PageLoader = ({ pageName = '' }: Props) => {
   const loadingText = `Loading ${pageName}...`;
   return (
-    <div className="page-loader-wrapper">
+    <Box display="flex" alignItems="center" direction="column" justifyContent="center" paddingTop={10}>
       <LoadingPlaceholder text={loadingText} />
-    </div>
+    </Box>
   );
 };
 
diff --git a/public/app/features/admin/AdminSettingsTable.tsx b/public/app/features/admin/AdminSettingsTable.tsx
index a026998aa1b..8825b98a45a 100644
--- a/public/app/features/admin/AdminSettingsTable.tsx
+++ b/public/app/features/admin/AdminSettingsTable.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Skeleton from 'react-loading-skeleton';
 
+import { Text } from '@grafana/ui';
 import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
 
 import { Settings } from './AdminSettings';
@@ -16,7 +17,11 @@ const AdminSettingsTableComponent = ({ settings }: Props) => {
         {Object.entries(settings).map(([sectionName, sectionSettings], i) => (
           <React.Fragment key={`section-${i}`}>
             <tr>
-              <td className="admin-settings-section">{sectionName}</td>
+              <td>
+                <Text color="info" weight="bold">
+                  {sectionName}
+                </Text>
+              </td>
               <td />
             </tr>
             {Object.entries(sectionSettings).map(([settingName, settingValue], j) => (
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 766dc4a6613..81367c1affc 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { locationUtil, NavModel, NavModelItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { locationService } from '@grafana/runtime';
-import { Button, ToolbarButtonRow } from '@grafana/ui';
+import { Button, Stack, Text, ToolbarButtonRow } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { Page } from 'app/core/components/Page/Page';
 import { t } from 'app/core/internationalization';
@@ -212,10 +212,12 @@ function getSectionNav(
 function MakeEditable({ dashboard, sectionNav }: SettingsPageProps) {
   return (
     <Page navModel={sectionNav}>
-      <div className="dashboard-settings__header">Dashboard not editable</div>
-      <Button type="submit" onClick={() => dashboard.makeEditable()}>
-        Make editable
-      </Button>
+      <Stack direction="column" gap={2} alignItems="flex-start">
+        <Text variant="h3">Dashboard not editable</Text>
+        <Button type="submit" onClick={() => dashboard.makeEditable()}>
+          Make editable
+        </Button>
+      </Stack>
     </Page>
   );
 }
diff --git a/public/app/features/plugins/admin/components/Loader.tsx b/public/app/features/plugins/admin/components/Loader.tsx
index 677def2e4aa..60d9df9555d 100644
--- a/public/app/features/plugins/admin/components/Loader.tsx
+++ b/public/app/features/plugins/admin/components/Loader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LoadingPlaceholder } from '@grafana/ui';
+import { Box, LoadingPlaceholder } from '@grafana/ui';
 
 export interface Props {
   text?: string;
@@ -8,8 +8,8 @@ export interface Props {
 
 export const Loader = ({ text = 'Loading...' }: Props) => {
   return (
-    <div className="page-loader-wrapper">
+    <Box display="flex" alignItems="center" direction="column" justifyContent="center" paddingTop={10}>
       <LoadingPlaceholder text={text} />
-    </div>
+    </Box>
   );
 };
diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss
index b6bbed0ff07..738fa9e9383 100644
--- a/public/sass/_angular.scss
+++ b/public/sass/_angular.scss
@@ -60,3 +60,566 @@ input.ng-dirty.ng-invalid {
 input.invalid {
   box-shadow: inset 0 0px 5px $red;
 }
+
+.gf-code-editor {
+  min-height: 36px;
+  min-width: 280px;
+  flex-grow: 1;
+  margin-right: $space-xs;
+
+  &.ace_editor {
+    @include font-family-monospace();
+    font-size: $font-size-md;
+    min-height: 50px; // Include space for horizontal scrollbar
+
+    @include border-radius($input-border-radius);
+    border: $border-width solid $input-border-color;
+  }
+
+  .ace_content {
+    z-index: 0;
+  }
+}
+
+.ace_editor.ace_autocomplete {
+  @include font-family-monospace();
+  font-size: $font-size-md;
+
+  // Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
+  // is used for overriding styles with the same CSS specificity.
+  background-color: $dropdownBackground !important;
+  color: $dropdownLinkColor !important;
+  border: 1px solid $dropdownBorder !important;
+  width: 550px !important;
+
+  .ace_scroller {
+    .ace_selected,
+    .ace_active-line,
+    .ace_line-hover {
+      color: $dropdownLinkColorHover;
+      background-color: $dropdownLinkBackgroundHover !important;
+    }
+
+    .ace_line-hover {
+      border-color: transparent;
+    }
+
+    .ace_completion-highlight {
+      color: $yellow;
+    }
+
+    .ace_rightAlignedText {
+      color: $text-muted;
+      z-index: 0;
+    }
+  }
+}
+
+$doc-font-size: $font-size-sm;
+
+.ace_tooltip.ace_doc-tooltip {
+  @include font-family-monospace();
+  font-size: $doc-font-size;
+
+  background-color: $popover-help-bg;
+  color: $popover-help-color;
+  background-image: none;
+  border: 1px solid $dropdownBorder;
+  padding: $space-sm $space-md;
+
+  hr {
+    background-color: $popover-help-color;
+    margin: $space-sm 0;
+  }
+
+  code {
+    padding: 0px 1px;
+    margin: 0px;
+  }
+}
+
+.ace_tooltip {
+  border-radius: 3px;
+}
+
+.ace_hidden-cursors .ace_cursor {
+  opacity: 0 !important;
+}
+
+.graph-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &--legend-right {
+    @include media-breakpoint-up(sm) {
+      flex-direction: row;
+
+      .graph-legend {
+        flex: 0 1 10px;
+        max-height: 100%;
+        overflow-y: initial;
+      }
+
+      .graph-legend-series {
+        display: block;
+        padding-left: 4px;
+      }
+
+      .graph-legend-table .graph-legend-series {
+        display: table-row;
+      }
+    }
+  }
+}
+
+.graph-panel__chart {
+  position: relative;
+  cursor: crosshair;
+  flex-grow: 1;
+  min-height: 65%;
+}
+
+.datapoints-warning {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  margin-top: -50px;
+  margin-left: -100px;
+  width: 200px;
+  text-align: center;
+  cursor: auto;
+  padding: 10px;
+}
+
+.graph-legend {
+  display: flex;
+  flex: 0 1 auto;
+  max-height: 35%;
+  margin: 0;
+  text-align: center;
+  overflow-y: auto;
+  padding-top: 6px;
+  position: relative;
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.graph-legend-alias {
+  background: transparent;
+  border: none;
+}
+
+.graph-legend-content {
+  position: relative;
+}
+
+.graph-legend-icon {
+  position: relative;
+  padding-right: 4px;
+  top: 1px;
+}
+
+.graph-legend-icon,
+.graph-legend-alias,
+.graph-legend-value {
+  display: inline;
+  white-space: nowrap;
+  font-size: 12px;
+  text-align: left;
+  &.current::before {
+    content: 'Current: ';
+  }
+  &.max::before {
+    content: 'Max: ';
+  }
+  &.min::before {
+    content: 'Min: ';
+  }
+  &.total::before {
+    content: 'Total: ';
+  }
+  &.avg::before {
+    content: 'Avg: ';
+  }
+}
+
+.graph-legend-icon .fa {
+  font-size: 135%;
+  position: relative;
+  top: 1px;
+}
+
+.graph-legend-series {
+  float: left;
+  white-space: nowrap;
+  padding-left: 10px;
+  display: flex;
+  align-items: center;
+
+  &--right-y {
+    float: right;
+  }
+}
+
+// Don't move series to the right if legend is on the right as well
+.graph-panel--legend-right .graph-legend-series--right-y {
+  float: left;
+}
+
+.graph-legend-value {
+  padding-left: 6px;
+}
+
+.graph-legend-table {
+  padding-right: 5px;
+  padding-left: 5px;
+
+  .graph-legend-series {
+    display: table-row;
+    float: none;
+    padding-left: 0;
+    &--right-y {
+      float: none;
+
+      .graph-legend-alias::after {
+        content: '(right-y)';
+        padding: 0 5px;
+        color: $text-color-weak;
+      }
+    }
+  }
+
+  td,
+  .graph-legend-alias,
+  .graph-legend-icon,
+  .graph-legend-value {
+    float: none;
+    display: table-cell;
+    white-space: nowrap;
+    padding: 2px;
+    text-align: right;
+  }
+
+  .graph-legend-icon {
+    cursor: pointer;
+  }
+
+  .graph-legend-value {
+    padding-left: 15px;
+  }
+
+  .graph-legend-alias {
+    text-align: left;
+    max-width: 650px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .graph-legend-series:nth-child(even) {
+    background: $table-bg-accent;
+  }
+
+  .graph-legend-value {
+    &.current,
+    &.max,
+    &.min,
+    &.total,
+    &.avg {
+      &::before {
+        content: '';
+      }
+    }
+  }
+
+  th {
+    text-align: right;
+    padding: 0px 10px 1px 0;
+    font-weight: bold;
+    color: $blue;
+    font-size: 85%;
+    white-space: nowrap;
+  }
+}
+
+.graph-legend-series__table-name {
+  display: flex;
+  align-items: center;
+}
+
+.graph-legend-series-hidden {
+  .graph-legend-value,
+  .graph-legend-alias {
+    color: $link-color-disabled;
+  }
+}
+
+.graph-legend-popover {
+  width: 210px;
+  label {
+    display: inline-block;
+  }
+  .btn {
+    padding: 1px 3px;
+    margin-right: 0px;
+    line-height: initial;
+  }
+}
+
+.annotation-tags {
+  color: $purple;
+}
+
+.graph-series-override__properties {
+  margin-left: $space-md;
+}
+
+.graph-tooltip {
+  white-space: nowrap;
+  font-size: $font-size-sm;
+  background-color: $graph-tooltip-bg;
+  color: $text-color;
+
+  .graph-tooltip-time {
+    text-align: center;
+    position: relative;
+    top: -3px;
+    padding: $space-xxs;
+    font-weight: $font-weight-semi-bold;
+    color: $text-color;
+  }
+
+  .graph-tooltip-list-item {
+    display: table-row;
+
+    &--highlight {
+      color: $text-color-emphasis;
+      font-weight: $font-weight-semi-bold;
+    }
+  }
+
+  .graph-tooltip-series-name {
+    display: table-cell;
+    padding: $space-xxs;
+    max-width: 650px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .graph-tooltip-value {
+    display: table-cell;
+    font-weight: $font-weight-semi-bold;
+    padding-left: 15px;
+    text-align: right;
+  }
+}
+
+.graph-annotation {
+  .label-tag {
+    margin-right: 4px;
+    margin-top: 8px;
+  }
+
+  .graph-annotation__header {
+    background: $popover-header-bg;
+    padding: 4px 8px;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .graph-annotation__title {
+    font-weight: $font-weight-semi-bold;
+    padding-right: $spacer;
+    overflow: hidden;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+  }
+
+  .graph-annotation__edit-icon {
+    padding-left: $spacer;
+  }
+
+  .graph-annotation__time {
+    color: $text-muted;
+    font-style: italic;
+    font-weight: normal;
+    display: inline-block;
+    position: relative;
+    top: 1px;
+  }
+
+  .graph-annotation__body {
+    padding: $space-sm;
+  }
+
+  .graph-annotation__user {
+    img {
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  a[href] {
+    color: $blue;
+    text-decoration: underline;
+  }
+}
+
+.left-yaxis-label {
+  top: 50%;
+  left: 8px;
+  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
+}
+
+.right-yaxis-label {
+  top: 50%;
+  right: 8px;
+  transform: translateX(50%) translateY(-50%) rotate(90deg);
+}
+
+.axisLabel {
+  display: inline-block;
+  color: $text-color;
+  font-size: $font-size-sm;
+  position: absolute;
+  text-align: center;
+}
+
+.alert-handle-wrapper {
+  position: absolute;
+  user-select: none;
+
+  .alert-handle {
+    z-index: 10;
+    position: relative;
+    float: right;
+    box-shadow: $card-shadow;
+    background: $card-background;
+    cursor: move;
+    width: 100px;
+    font-size: $font-size-sm;
+    border-radius: 4px;
+    text-align: left;
+    color: $text-muted;
+
+    &:hover {
+      background-color: $btn-inverse-bg-hl;
+    }
+
+    .icon-gf {
+      font-size: 14px;
+      position: relative;
+      top: 0px;
+      float: left;
+      border-right: 1px solid $btn-divider-left;
+      padding: 6px 4px 4px 6px;
+    }
+  }
+
+  .alert-handle-value {
+    border-left: 1px solid $btn-divider-right;
+    padding: $space-xs $space-sm;
+    padding: 7px;
+    line-height: 24px;
+    height: 24px;
+
+    .alert-handle-grip {
+      background: url($btn-drag-image) no-repeat 50% 50%;
+      background-size: 8px;
+      float: right;
+      width: 16px;
+      height: 24px;
+      margin-right: 2px;
+    }
+  }
+
+  &--T1 {
+    right: -222px;
+    width: 245px;
+
+    .alert-handle-line {
+      width: 145px;
+    }
+  }
+
+  &--T0 {
+    right: -104px;
+    width: 129px;
+
+    .alert-handle-line {
+      width: 28px;
+    }
+  }
+
+  &--no-value {
+    .alert-handle-line {
+      display: none;
+    }
+  }
+
+  .alert-handle-line {
+    float: left;
+    height: 2px;
+    margin-top: 13px;
+    z-index: 0;
+    position: relative;
+
+    &--critical {
+      background-color: rgba(237, 46, 24, 0.6);
+    }
+    &--warning {
+      background-color: rgba(247, 149, 32, 0.6);
+    }
+  }
+}
+
+.thresholds-form-disabled {
+  filter: blur(3px);
+}
+
+.piechart-panel {
+  position: relative;
+  display: table;
+  width: 100%;
+  height: 100%;
+
+  .piechart-container {
+    top: 10px;
+    margin: auto;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .piechart-tooltip {
+    white-space: nowrap;
+    font-size: 12px;
+    background-color: #141414;
+    color: #d8d9da;
+    opacity: 0;
+    position: absolute;
+
+    .piechart-tooltip-time {
+      text-align: center;
+      position: relative;
+      padding: $space-xxs;
+      font-weight: bold;
+      color: #d8d9da;
+
+      .piechart-tooltip-value {
+        display: table-cell;
+        font-weight: bold;
+        padding: 15px;
+        text-align: right;
+      }
+    }
+  }
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index c6a9653a224..b07ce705dac 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -32,16 +32,13 @@
 @import 'components/switch';
 @import 'components/tooltip';
 @import 'components/tags';
-@import 'components/panel_graph';
 @import 'components/submenu';
-@import 'components/panel_piechart';
 @import 'components/panel_pluginlist';
 @import 'components/panel_singlestat';
 @import 'components/panel_table';
 @import 'components/panel_heatmap';
 @import 'components/tagsinput';
 @import 'components/gf-form';
-@import 'components/filter-controls';
 @import 'components/filter-list';
 @import 'components/filter-table';
 @import 'components/old_stuff';
@@ -57,12 +54,9 @@
 @import 'components/query_part';
 @import 'components/row';
 @import 'components/json_explorer';
-@import 'components/code_editor';
 @import 'components/dashboard_grid';
 @import 'components/page_header';
-@import 'components/dashboard_settings';
 @import 'components/add_data_source';
-@import 'components/page_loader';
 @import 'components/panel_header';
 
 // LOAD @grafana/ui components
@@ -70,7 +64,6 @@
 
 // PAGES
 @import 'pages/dashboard';
-@import 'pages/admin';
 @import 'pages/alerting';
 @import 'pages/history';
 @import 'pages/explore';
diff --git a/public/sass/components/_code_editor.scss b/public/sass/components/_code_editor.scss
deleted file mode 100644
index 45b7ffdaf5e..00000000000
--- a/public/sass/components/_code_editor.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.gf-code-editor {
-  min-height: 36px;
-  min-width: 280px;
-  flex-grow: 1;
-  margin-right: $space-xs;
-
-  &.ace_editor {
-    @include font-family-monospace();
-    font-size: $font-size-md;
-    min-height: 50px; // Include space for horizontal scrollbar
-
-    @include border-radius($input-border-radius);
-    border: $border-width solid $input-border-color;
-  }
-
-  .ace_content {
-    z-index: 0;
-  }
-}
-
-.ace_editor.ace_autocomplete {
-  @include font-family-monospace();
-  font-size: $font-size-md;
-
-  // Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
-  // is used for overriding styles with the same CSS specificity.
-  background-color: $dropdownBackground !important;
-  color: $dropdownLinkColor !important;
-  border: 1px solid $dropdownBorder !important;
-  width: 550px !important;
-
-  .ace_scroller {
-    .ace_selected,
-    .ace_active-line,
-    .ace_line-hover {
-      color: $dropdownLinkColorHover;
-      background-color: $dropdownLinkBackgroundHover !important;
-    }
-
-    .ace_line-hover {
-      border-color: transparent;
-    }
-
-    .ace_completion-highlight {
-      color: $yellow;
-    }
-
-    .ace_rightAlignedText {
-      color: $text-muted;
-      z-index: 0;
-    }
-  }
-}
-
-$doc-font-size: $font-size-sm;
-
-.ace_tooltip.ace_doc-tooltip {
-  @include font-family-monospace();
-  font-size: $doc-font-size;
-
-  background-color: $popover-help-bg;
-  color: $popover-help-color;
-  background-image: none;
-  border: 1px solid $dropdownBorder;
-  padding: $space-sm $space-md;
-
-  hr {
-    background-color: $popover-help-color;
-    margin: $space-sm 0;
-  }
-
-  code {
-    padding: 0px 1px;
-    margin: 0px;
-  }
-}
-
-.ace_tooltip {
-  border-radius: 3px;
-}
-
-.ace_hidden-cursors .ace_cursor {
-  opacity: 0 !important;
-}
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
deleted file mode 100644
index 898e64fa24a..00000000000
--- a/public/sass/components/_dashboard_settings.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-.dashboard-settings {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: $zindex-sidemenu;
-  background: $dashboard-bg;
-  display: flex;
-  flex-direction: column;
-}
-
-.dashboard-settings__body {
-  min-height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  background: $panel-bg;
-}
-
-.dashboard-settings__aside {
-  display: flex;
-  flex-direction: column;
-  margin-top: $spacer;
-}
-
-.dashboard-settings__aside-header {
-  color: $text-muted;
-  font-size: $font-size-h3;
-  padding-right: 60px;
-  white-space: nowrap;
-  margin-bottom: $space-md;
-
-  i {
-    font-size: 25px;
-    position: relative;
-    top: 1px;
-    padding-right: 5px;
-  }
-}
-
-.dashboard-settings__header {
-  font-size: $font-size-h3;
-  margin-bottom: $space-md;
-}
-
-.dashboard-settings__subheader {
-  color: $text-muted;
-  font-style: italic;
-}
-
-.dashboard-settings__nav-item {
-  padding: 8px 40px 8px 8px;
-  color: $text-color-weak;
-  font-size: $font-size-md;
-  line-height: 20px;
-  position: relative;
-  @include left-brand-border;
-
-  &.active {
-    color: $text-color;
-    font-weight: $font-weight-semi-bold;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 4px;
-      border-radius: 4px;
-      background: $brand-gradient-vertical;
-    }
-  }
-
-  .gicon {
-    margin-bottom: 2px;
-    margin-right: 4px;
-  }
-
-  .fa {
-    font-size: 17px;
-    width: 16px;
-    margin-right: 4px;
-  }
-}
-
-.dashboard-settings__aside-actions {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex-grow: 1;
-  margin: 40px $space-xl 0 0;
-
-  button {
-    margin-bottom: $space-sm;
-  }
-}
-
-.dashboard-settings__json-save-button {
-  margin-top: $space-md;
-}
diff --git a/public/sass/components/_filter-controls.scss b/public/sass/components/_filter-controls.scss
deleted file mode 100644
index f95e54b6abe..00000000000
--- a/public/sass/components/_filter-controls.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// ==========================================================================
-// FILTER CONTROLS
-// ==========================================================================
-
-// Filters
-// --------------------------------------------------------------------------
-
-.filter-controls-filters {
-  display: inline-block;
-  margin-bottom: 40px;
-}
-
-.tab-pane > .filter-controls-filters {
-  margin-top: 20px;
-}
-
-// Actions
-// --------------------------------------------------------------------------
-
-.filter-controls-actions {
-  margin: 0 0 10px;
-  padding: 0;
-  list-style: none;
-}
-
-.filter-controls-actions > li {
-  display: inline-block;
-  margin-right: 10px;
-}
-
-.filter-controls-actions-selected {
-  text-transform: uppercase;
-}
diff --git a/public/sass/components/_page_loader.scss b/public/sass/components/_page_loader.scss
deleted file mode 100644
index 0a3eac40a0c..00000000000
--- a/public/sass/components/_page_loader.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.page-loader-wrapper {
-  padding-top: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  &__spinner {
-    font-size: 32px;
-    margin-bottom: $space-sm;
-  }
-
-  &__text {
-    font-size: 14px;
-  }
-}
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
deleted file mode 100644
index 7a12b12e09a..00000000000
--- a/public/sass/components/_panel_graph.scss
+++ /dev/null
@@ -1,436 +0,0 @@
-.graph-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  &--legend-right {
-    @include media-breakpoint-up(sm) {
-      flex-direction: row;
-
-      .graph-legend {
-        flex: 0 1 10px;
-        max-height: 100%;
-        overflow-y: initial;
-      }
-
-      .graph-legend-series {
-        display: block;
-        padding-left: 4px;
-      }
-
-      .graph-legend-table .graph-legend-series {
-        display: table-row;
-      }
-    }
-  }
-}
-
-.graph-panel__chart {
-  position: relative;
-  cursor: crosshair;
-  flex-grow: 1;
-  min-height: 65%;
-}
-
-.datapoints-warning {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 10;
-  margin-top: -50px;
-  margin-left: -100px;
-  width: 200px;
-  text-align: center;
-  cursor: auto;
-  padding: 10px;
-}
-
-.graph-legend {
-  display: flex;
-  flex: 0 1 auto;
-  max-height: 35%;
-  margin: 0;
-  text-align: center;
-  overflow-y: auto;
-  padding-top: 6px;
-  position: relative;
-
-  .popover-content {
-    padding: 0;
-  }
-}
-
-.graph-legend-alias {
-  background: transparent;
-  border: none;
-}
-
-.graph-legend-content {
-  position: relative;
-}
-
-.graph-legend-icon {
-  position: relative;
-  padding-right: 4px;
-  top: 1px;
-}
-
-.graph-legend-icon,
-.graph-legend-alias,
-.graph-legend-value {
-  display: inline;
-  white-space: nowrap;
-  font-size: 12px;
-  text-align: left;
-  &.current::before {
-    content: 'Current: ';
-  }
-  &.max::before {
-    content: 'Max: ';
-  }
-  &.min::before {
-    content: 'Min: ';
-  }
-  &.total::before {
-    content: 'Total: ';
-  }
-  &.avg::before {
-    content: 'Avg: ';
-  }
-}
-
-.graph-legend-icon .fa {
-  font-size: 135%;
-  position: relative;
-  top: 1px;
-}
-
-.graph-legend-series {
-  float: left;
-  white-space: nowrap;
-  padding-left: 10px;
-  display: flex;
-  align-items: center;
-
-  &--right-y {
-    float: right;
-  }
-}
-
-// Don't move series to the right if legend is on the right as well
-.graph-panel--legend-right .graph-legend-series--right-y {
-  float: left;
-}
-
-.graph-legend-value {
-  padding-left: 6px;
-}
-
-.graph-legend-table {
-  padding-right: 5px;
-  padding-left: 5px;
-
-  .graph-legend-series {
-    display: table-row;
-    float: none;
-    padding-left: 0;
-    &--right-y {
-      float: none;
-
-      .graph-legend-alias::after {
-        content: '(right-y)';
-        padding: 0 5px;
-        color: $text-color-weak;
-      }
-    }
-  }
-
-  td,
-  .graph-legend-alias,
-  .graph-legend-icon,
-  .graph-legend-value {
-    float: none;
-    display: table-cell;
-    white-space: nowrap;
-    padding: 2px;
-    text-align: right;
-  }
-
-  .graph-legend-icon {
-    cursor: pointer;
-  }
-
-  .graph-legend-value {
-    padding-left: 15px;
-  }
-
-  .graph-legend-alias {
-    text-align: left;
-    max-width: 650px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .graph-legend-series:nth-child(even) {
-    background: $table-bg-accent;
-  }
-
-  .graph-legend-value {
-    &.current,
-    &.max,
-    &.min,
-    &.total,
-    &.avg {
-      &::before {
-        content: '';
-      }
-    }
-  }
-
-  th {
-    text-align: right;
-    padding: 0px 10px 1px 0;
-    font-weight: bold;
-    color: $blue;
-    font-size: 85%;
-    white-space: nowrap;
-  }
-}
-
-.graph-legend-series__table-name {
-  display: flex;
-  align-items: center;
-}
-
-.graph-legend-series-hidden {
-  .graph-legend-value,
-  .graph-legend-alias {
-    color: $link-color-disabled;
-  }
-}
-
-.graph-legend-popover {
-  width: 210px;
-  label {
-    display: inline-block;
-  }
-  .btn {
-    padding: 1px 3px;
-    margin-right: 0px;
-    line-height: initial;
-  }
-}
-
-.annotation-tags {
-  color: $purple;
-}
-
-.graph-series-override__properties {
-  margin-left: $space-md;
-}
-
-.graph-tooltip {
-  white-space: nowrap;
-  font-size: $font-size-sm;
-  background-color: $graph-tooltip-bg;
-  color: $text-color;
-
-  .graph-tooltip-time {
-    text-align: center;
-    position: relative;
-    top: -3px;
-    padding: $space-xxs;
-    font-weight: $font-weight-semi-bold;
-    color: $text-color;
-  }
-
-  .graph-tooltip-list-item {
-    display: table-row;
-
-    &--highlight {
-      color: $text-color-emphasis;
-      font-weight: $font-weight-semi-bold;
-    }
-  }
-
-  .graph-tooltip-series-name {
-    display: table-cell;
-    padding: $space-xxs;
-    max-width: 650px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .graph-tooltip-value {
-    display: table-cell;
-    font-weight: $font-weight-semi-bold;
-    padding-left: 15px;
-    text-align: right;
-  }
-}
-
-.graph-annotation {
-  .label-tag {
-    margin-right: 4px;
-    margin-top: 8px;
-  }
-
-  .graph-annotation__header {
-    background: $popover-header-bg;
-    padding: 4px 8px;
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .graph-annotation__title {
-    font-weight: $font-weight-semi-bold;
-    padding-right: $spacer;
-    overflow: hidden;
-    display: inline-block;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-  }
-
-  .graph-annotation__edit-icon {
-    padding-left: $spacer;
-  }
-
-  .graph-annotation__time {
-    color: $text-muted;
-    font-style: italic;
-    font-weight: normal;
-    display: inline-block;
-    position: relative;
-    top: 1px;
-  }
-
-  .graph-annotation__body {
-    padding: $space-sm;
-  }
-
-  .graph-annotation__user {
-    img {
-      border-radius: 50%;
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  a[href] {
-    color: $blue;
-    text-decoration: underline;
-  }
-}
-
-.left-yaxis-label {
-  top: 50%;
-  left: 8px;
-  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
-}
-
-.right-yaxis-label {
-  top: 50%;
-  right: 8px;
-  transform: translateX(50%) translateY(-50%) rotate(90deg);
-}
-
-.axisLabel {
-  display: inline-block;
-  color: $text-color;
-  font-size: $font-size-sm;
-  position: absolute;
-  text-align: center;
-}
-
-.alert-handle-wrapper {
-  position: absolute;
-  user-select: none;
-
-  .alert-handle {
-    z-index: 10;
-    position: relative;
-    float: right;
-    box-shadow: $card-shadow;
-    background: $card-background;
-    cursor: move;
-    width: 100px;
-    font-size: $font-size-sm;
-    border-radius: 4px;
-    text-align: left;
-    color: $text-muted;
-
-    &:hover {
-      background-color: $btn-inverse-bg-hl;
-    }
-
-    .icon-gf {
-      font-size: 14px;
-      position: relative;
-      top: 0px;
-      float: left;
-      border-right: 1px solid $btn-divider-left;
-      padding: 6px 4px 4px 6px;
-    }
-  }
-
-  .alert-handle-value {
-    border-left: 1px solid $btn-divider-right;
-    padding: $space-xs $space-sm;
-    padding: 7px;
-    line-height: 24px;
-    height: 24px;
-
-    .alert-handle-grip {
-      background: url($btn-drag-image) no-repeat 50% 50%;
-      background-size: 8px;
-      float: right;
-      width: 16px;
-      height: 24px;
-      margin-right: 2px;
-    }
-  }
-
-  &--T1 {
-    right: -222px;
-    width: 245px;
-
-    .alert-handle-line {
-      width: 145px;
-    }
-  }
-
-  &--T0 {
-    right: -104px;
-    width: 129px;
-
-    .alert-handle-line {
-      width: 28px;
-    }
-  }
-
-  &--no-value {
-    .alert-handle-line {
-      display: none;
-    }
-  }
-
-  .alert-handle-line {
-    float: left;
-    height: 2px;
-    margin-top: 13px;
-    z-index: 0;
-    position: relative;
-
-    &--critical {
-      background-color: rgba(237, 46, 24, 0.6);
-    }
-    &--warning {
-      background-color: rgba(247, 149, 32, 0.6);
-    }
-  }
-}
-
-.thresholds-form-disabled {
-  filter: blur(3px);
-}
diff --git a/public/sass/components/_panel_piechart.scss b/public/sass/components/_panel_piechart.scss
deleted file mode 100644
index 986f9f502d0..00000000000
--- a/public/sass/components/_panel_piechart.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.piechart-panel {
-  position: relative;
-  display: table;
-  width: 100%;
-  height: 100%;
-
-  .piechart-container {
-    top: 10px;
-    margin: auto;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .piechart-tooltip {
-    white-space: nowrap;
-    font-size: 12px;
-    background-color: #141414;
-    color: #d8d9da;
-    opacity: 0;
-    position: absolute;
-
-    .piechart-tooltip-time {
-      text-align: center;
-      position: relative;
-      padding: $space-xxs;
-      font-weight: bold;
-      color: #d8d9da;
-
-      .piechart-tooltip-value {
-        display: table-cell;
-        font-weight: bold;
-        padding: 15px;
-        text-align: right;
-      }
-    }
-  }
-}
diff --git a/public/sass/pages/_admin.scss b/public/sass/pages/_admin.scss
deleted file mode 100644
index 0c1c588ed65..00000000000
--- a/public/sass/pages/_admin.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.admin-settings-section {
-  color: $variable;
-  font-weight: 500;
-}
-
-td.admin-settings-key {
-  padding-left: 20px;
-}
-
-.admin-list-table {
-  margin-bottom: 20px;
-}
-
-.admin-list-paging {
-  float: right;
-  li {
-    display: inline-block;
-    padding-left: 10px;
-    margin-bottom: 5px;
-  }
-}
-
-.admin-list-table {
-  .team-permissions {
-    padding-right: 120px;
-  }
-}