diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 59bcdd21f0b..61676024936 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -41,6 +41,21 @@ generic:
   value: Value
   yes: Yes
   no: No
+  units:
+    time:
+        5s: 5s
+        10s: 10s
+        30s: 30s
+        1m: 1m
+        5m: 5m
+        15m: 15m
+        30m: 30m
+        1h: 1h
+        2h: 2h
+        6h: 6h
+        1d: 1d
+        7d: 7d
+        30d: 30d
 
 locale:
   en-us: English
@@ -824,6 +839,12 @@ clusterIndexPage:
         label: Resource
       date:
         label: Date
+    clusterMetrics:
+      label: Cluster Metrics
+    etcdMetrics:
+      label: Etcd Metrics
+    k8sMetrics:
+      label: Kubernetes Components Metrics
     gatekeeper:
       buttonText: Configure Gatekeeper
       disabled: OPA Gatekeeper is not configured.
@@ -875,6 +896,12 @@ detailText:
       =1 {+ 1 more char}
       other {+ {n, number} more chars}
     }
+
+etcdInfoBanner:
+  hasLeader: "Etcd has a leader:"
+  leaderChanges: "Number of leader changes:"
+  failedProposals: "Number of failed proposals:"
+
 fleet:
   cluster:
     summary: Resource Summary
@@ -1006,6 +1033,16 @@ glance:
   provider: Provider
   version: Kubernetes Version
 
+grafanaDashboard:
+  failedToLoad: Failed to load graph
+  reload: Reload
+
+graphOptions: 
+  detail: Detail
+  summary: Summary
+  refresh: Refresh
+  range: Range
+
 hpa:
   detail:
     currentMetrics:
diff --git a/components/DashboardMetrics.vue b/components/DashboardMetrics.vue
new file mode 100644
index 00000000000..5aa816574ce
--- /dev/null
+++ b/components/DashboardMetrics.vue
@@ -0,0 +1,70 @@
+<script>
+import DashboardOptions from '@/components/DashboardOptions';
+import GrafanaDashboard from '@/components/GrafanaDashboard';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: { DashboardOptions, GrafanaDashboard },
+  props:      {
+    detailUrl: {
+      type:     String,
+      required: true,
+    },
+    summaryUrl: {
+      type:     String,
+      required: true,
+    },
+    graphHeight: {
+      type:     String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      graphOptions: {
+        range: '5m', refreshRate: '30s', type: 'detail'
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(['prefs/theme']),
+    graphBackgroundColor() {
+      return this.theme === 'dark' ? '#2e3035' : '#f3f4f9';
+    },
+    theme() {
+      return this['prefs/theme'];
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="dashboard-graph">
+    <div class="graph-options mb-10">
+      <DashboardOptions v-model="graphOptions" />
+    </div>
+    <div class="info">
+      <slot />
+    </div>
+    <div class="graphs" :style="{height: graphHeight}">
+      <GrafanaDashboard
+        v-if="graphOptions.type === 'detail'"
+        class="col span-12 detail"
+        :background-color="graphBackgroundColor"
+        :theme="theme"
+        :refresh-rate="graphOptions.refreshRate"
+        :range="graphOptions.range"
+        :url="detailUrl"
+      />
+      <GrafanaDashboard
+        v-else
+        class="col span-12 summary"
+        :background-color="graphBackgroundColor"
+        :theme="theme"
+        :refresh-rate="graphOptions.refreshRate"
+        :range="graphOptions.range"
+        :url="summaryUrl"
+      />
+    </div>
+  </div>
+</template>
diff --git a/components/DashboardOptions.vue b/components/DashboardOptions.vue
new file mode 100644
index 00000000000..ef54c956f55
--- /dev/null
+++ b/components/DashboardOptions.vue
@@ -0,0 +1,127 @@
+<script>
+import ButtonGroup from '@/components/ButtonGroup';
+import LabeledSelect from '@/components/form/LabeledSelect';
+
+export default {
+  components: { ButtonGroup, LabeledSelect },
+  props:      {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      range:        null,
+      rangeOptions: [
+        {
+          label: this.t('generic.units.time.5m'),
+          value: '5m',
+        },
+        {
+          label: this.t('generic.units.time.1h'),
+          value: '1h',
+        },
+        {
+          label: this.t('generic.units.time.6h'),
+          value: '6h',
+        },
+        {
+          label: this.t('generic.units.time.1d'),
+          value: '1d',
+        },
+        {
+          label: this.t('generic.units.time.7d'),
+          value: '7d',
+        },
+        {
+          label: this.t('generic.units.time.30d'),
+          value: '30d',
+        },
+      ],
+      refreshOptions: [
+        {
+          label: this.t('generic.units.time.5s'),
+          value: '5s',
+        },
+        {
+          label: this.t('generic.units.time.10s'),
+          value: '10s',
+        },
+        {
+          label: this.t('generic.units.time.30s'),
+          value: '30s',
+        },
+        {
+          label: this.t('generic.units.time.1m'),
+          value: '1m',
+        },
+        {
+          label: this.t('generic.units.time.5m'),
+          value: '5m',
+        },
+        {
+          label: this.t('generic.units.time.15m'),
+          value: '15m',
+        },
+        {
+          label: this.t('generic.units.time.30m'),
+          value: '30m',
+        },
+        {
+          label: this.t('generic.units.time.1h'),
+          value: '1h',
+        },
+        {
+          label: this.t('generic.units.time.2h'),
+          value: '2h',
+        },
+        {
+          label: this.t('generic.units.time.1d'),
+          value: '1d',
+        }
+      ],
+      detailSummaryOptions: [
+        {
+          label: this.t('graphOptions.detail'),
+          value: 'detail'
+        },
+        {
+          label: this.t('graphOptions.summary'),
+          value: 'summary'
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<template>
+  <div class="graph-options">
+    <ButtonGroup v-model="value.type" :options="detailSummaryOptions" />
+    <div class="range-refresh">
+      <LabeledSelect v-model="value.range" :options="rangeOptions" :label="t('graphOptions.range')" />
+      <LabeledSelect v-model="value.refreshRate" :options="refreshOptions" :label="t('graphOptions.refresh')" />
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.graph-options {
+    &, .range-refresh {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+
+    & {
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .labeled-select {
+        width: 100px;
+        margin-left: 10px;
+    }
+}
+</style>
diff --git a/components/EtcdInfoBanner.vue b/components/EtcdInfoBanner.vue
new file mode 100644
index 00000000000..85b1fa96729
--- /dev/null
+++ b/components/EtcdInfoBanner.vue
@@ -0,0 +1,57 @@
+<script>
+import Banner from '@/components/Banner';
+import Loading from '@/components/Loading';
+import { mapGetters } from 'vuex';
+import { hasLeader, leaderChanges, failedProposals } from '@/utils/grafana';
+
+export default {
+  components: { Banner, Loading },
+  async fetch() {
+    const leader = await hasLeader(this.$store.dispatch, this.currentCluster.id);
+
+    this.hasLeader = leader ? this.t('generic.yes') : this.t('generic.no');
+    this.leaderChanges = await leaderChanges(this.$store.dispatch, this.currentCluster.id);
+    this.failedProposals = await failedProposals(this.$store.dispatch, this.currentCluster.id);
+  },
+  data() {
+    return {
+      hasLeader:       this.t('generic.no'),
+      leaderChanges:   0,
+      failedProposals: 0
+    };
+  },
+  computed: { ...mapGetters(['currentCluster']) }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <Banner v-else class="banner" color="info">
+    <div class="datum">
+      <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }}
+    </div>
+    <div class="datum">
+      <label>{{ t('etcdInfoBanner.leaderChanges') }}</label> {{ leaderChanges }}
+    </div>
+    <div class="datum">
+      <label>{{ t('etcdInfoBanner.failedProposals') }}</label> {{ failedProposals }}
+    </div>
+  </Banner>
+</template>
+
+<style lang='scss' scoped>
+    .banner {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+
+        .datum {
+            text-align: center;
+        }
+
+        & ::v-deep label {
+            color: var(--info);
+        }
+    }
+
+</style>
diff --git a/components/GrafanaDashboard.vue b/components/GrafanaDashboard.vue
new file mode 100644
index 00000000000..5e2f60f1971
--- /dev/null
+++ b/components/GrafanaDashboard.vue
@@ -0,0 +1,240 @@
+<script>
+import Loading from '@/components/Loading';
+import Banner from '@/components/Banner';
+import { computeDashboardUrl } from '@/utils/grafana';
+
+export default {
+  components: { Banner, Loading },
+  props:      {
+    url: {
+      type:     String,
+      required: true,
+    },
+    range: {
+      type:    String,
+      default: null
+    },
+    refreshRate: {
+      type:    String,
+      default: null
+    },
+    backgroundColor: {
+      type:    String,
+      default: '#1b1c21'
+    },
+    theme: {
+      type:    String,
+      default: 'dark'
+    }
+  },
+  data() {
+    return {
+      loading: false, error: false, interval: null, initialUrl: this.computeUrl()
+    };
+  },
+  computed: {
+    currentUrl() {
+      return this.computeUrl();
+    },
+    graphWindow() {
+      return this.$refs.frame?.contentWindow;
+    },
+    graphHistory() {
+      return this.graphWindow?.history;
+    },
+    graphDocument() {
+      return this.graphWindow?.document;
+    }
+  },
+  watch: {
+    currentUrl() {
+      if (this.graphHistory) {
+        const angularElement = this.graphWindow.angular.element(this.graphDocument.querySelector('.grafana-app'));
+        const injector = angularElement.injector();
+
+        this.graphHistory.pushState({}, '', this.currentUrl);
+        injector.get('$route').updateParams(this.computeParams());
+        injector.get('$route').reload();
+      }
+    }
+  },
+  mounted() {
+    this.$refs.frame.onload = this.inject;
+    this.poll();
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
+  methods: {
+    poll() {
+      if (this.interval) {
+        clearInterval(this.interval);
+        this.interval = null;
+      }
+
+      this.interval = setInterval(() => {
+        try {
+          const errorElements = this.$refs.frame.contentWindow.document.getElementsByClassName('alert-error');
+          const errorCornerElements = this.$refs.frame.contentWindow.document.getElementsByClassName('panel-info-corner--error');
+          const panelInFullScreenElements = this.$refs.frame.contentWindow.document.getElementsByClassName('panel-in-fullscreen');
+          const panelContainerElements = this.$refs.frame.contentWindow.document.getElementsByClassName('panel-container');
+          const error = errorElements.length > 0 || errorCornerElements.length > 0;
+          const loaded = panelInFullScreenElements.length > 0 || panelContainerElements.length > 0;
+
+          if (error) {
+            throw new Error('An error was detected in the iframe');
+          }
+
+          this.$set(this, 'loading', !loaded);
+        } catch (ex) {
+          this.$set(this, 'error', true);
+          clearInterval(this.interval);
+          this.interval = null;
+        }
+      }, 100);
+    },
+    computeFromTo() {
+      return {
+        from: `now-${ this.range }`,
+        to:   `now`
+      };
+    },
+    computeUrl() {
+      const embedUrl = this.url;
+      const clusterId = this.$store.getters['currentCluster'].id;
+      const params = this.computeParams();
+
+      return computeDashboardUrl(embedUrl, clusterId, params);
+    },
+    computeParams() {
+      const params = {};
+      const fromTo = this.computeFromTo();
+
+      if (fromTo.from) {
+        params.from = fromTo.from;
+      }
+
+      if (fromTo.to) {
+        params.to = fromTo.to;
+      }
+
+      if (this.refreshRate) {
+        params.refresh = this.refreshRate;
+      }
+
+      params.theme = this.theme;
+
+      return params;
+    },
+    reload(ev) {
+      ev.preventDefault();
+      this.$refs.frame.contentWindow.location.reload();
+      this.poll();
+    },
+    injectCss() {
+      const style = document.createElement('style');
+
+      style.innerHTML = `
+        body .grafana-app .dashboard-content {
+          background: ${ this.backgroundColor };
+          padding: 0;
+        }
+
+        body .grafana-app .layout {
+          background: ${ this.backgroundColor };
+        }
+
+
+        body .grafana-app .dashboard-content .panel-container {
+          background-color: initial;
+          border: none;
+        }
+
+        body .grafana-app .dashboard-content .panel-wrapper {
+          height: 100%;
+        }
+
+        body .grafana-app .panel-menu-container {
+          display: none;
+        }
+
+        body .grafana-app .panel-title {
+          cursor: default;
+        }
+
+        body .grafana-app .panel-title .panel-title-text div {
+          display: none;
+        }
+      `;
+
+      this.graphDocument.head.appendChild(style);
+    },
+
+    inject() {
+      this.injectCss();
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="grafana-graph">
+    <Banner v-if="error" color="error" style="z-index: 1000">
+      <div class="text-center">
+        {{ t('grafanaDashboard.failedToLoad') }} <a href="#" @click="reload">{{ t('grafanaDashboard.reload') }}</a>
+      </div>
+    </Banner>
+    <iframe
+      v-show="!error"
+      ref="frame"
+      :class="{loading}"
+      :src="initialUrl"
+      frameborder="0"
+      scrolling="no"
+    ></iframe>
+    <div v-if="loading">
+      <Loading />
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.grafana-graph {
+  position: relative;
+  min-height: 100%;
+  min-width: 100%;
+
+  & ::v-deep .content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  & ::v-deep .overlay {
+    position: static;
+    background-color: initial;
+  }
+
+  iframe {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &.loading {
+      visibility: hidden;
+    }
+  }
+}
+</style>
diff --git a/components/Tabbed/Tab.vue b/components/Tabbed/Tab.vue
index 5a7ee0c0dfd..3020b8d2824 100644
--- a/components/Tabbed/Tab.vue
+++ b/components/Tabbed/Tab.vue
@@ -86,6 +86,6 @@ export default {
       {{ label }}
       <i v-if="tooltip" v-tooltip="tooltip" class="icon icon-info icon-lg" />
     </h2>
-    <slot />
+    <slot v-bind="{active}" />
   </section>
 </template>
diff --git a/pages/c/_cluster/explorer/index.vue b/pages/c/_cluster/explorer/index.vue
index 34167fc7c8e..c25a7239635 100644
--- a/pages/c/_cluster/explorer/index.vue
+++ b/pages/c/_cluster/explorer/index.vue
@@ -1,5 +1,6 @@
 <script>
 import Loading from '@/components/Loading';
+import DashboardMetrics from '@/components/DashboardMetrics';
 import { mapGetters } from 'vuex';
 import isEmpty from 'lodash/isEmpty';
 import SortableTable from '@/components/SortableTable';
@@ -23,11 +24,14 @@ import {
   PV,
   WORKLOAD_TYPES
 } from '@/config/types';
-import SimpleBox from '@/components/SimpleBox';
 import ResourceGauge, { resourceCounts } from '@/components/ResourceGauge';
 import CountGauge from '@/components/CountGauge';
 import Glance from '@/components/Glance';
 import { findBy } from '@/utils/array';
+import Tabbed from '@/components/Tabbed';
+import Tab from '@/components/Tabbed/Tab';
+import { allDashboardsExist } from '@/utils/grafana';
+import EtcdInfoBanner from '@/components/EtcdInfoBanner';
 import HardwareResourceGauge from './HardwareResourceGauge';
 
 const PARSE_RULES = {
@@ -50,15 +54,25 @@ const MAX_FAILURES = 2;
 
 const RESOURCES = [NAMESPACE, INGRESS, PV, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.DAEMON_SET, SERVICE];
 
+const CLUSTER_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-linux-detail-1/rancher-linux-cluster-metrics-detail?orgId=1';
+const CLUSTER_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-linux-summary-1/rancher-linux-cluster-metrics-summary?orgId=1';
+const K8S_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-k8s-detail-1/rancher-kubernetes-components-metrics-detail?orgId=1';
+const K8S_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-k8s-summary-1/rancher-kubernetes-components-metrics-summary?orgId=1';
+const ETCD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-etcd-detail-1/rancher-etcd-metrics-detail?orgId=1';
+const ETCD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-etcd-summary-1/rancher-etcd-metrics-summary?orgId=1';
+
 export default {
   components: {
     CountGauge,
+    EtcdInfoBanner,
     Glance,
+    DashboardMetrics,
     HardwareResourceGauge,
     Loading,
     ResourceGauge,
-    SimpleBox,
     SortableTable,
+    Tab,
+    Tabbed
   },
 
   async fetch() {
@@ -75,6 +89,10 @@ export default {
       hash.nodePools = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
     }
 
+    this.showClusterMetrics = await allDashboardsExist(this.$store.dispatch, this.currentCluster.id, [CLUSTER_METRICS_DETAIL_URL, CLUSTER_METRICS_SUMMARY_URL]);
+    this.showK8sMetrics = await allDashboardsExist(this.$store.dispatch, this.currentCluster.id, [K8S_METRICS_DETAIL_URL, K8S_METRICS_SUMMARY_URL]);
+    this.showEtcdMetrics = this.isRKE && await allDashboardsExist(this.$store.dispatch, this.currentCluster.id, [ETCD_METRICS_DETAIL_URL, ETCD_METRICS_SUMMARY_URL]);
+
     const res = await allHash(hash);
 
     for ( const k in res ) {
@@ -120,21 +138,29 @@ export default {
     ];
 
     return {
-      metricPoller:      null,
+      metricPoller:        null,
       eventHeaders,
       nodeHeaders,
-      constraints:       [],
-      events:            [],
-      nodeMetrics:       [],
-      nodePools:         [],
-      nodeTemplates:     [],
-      nodes:             [],
+      constraints:         [],
+      events:              [],
+      nodeMetrics:         [],
+      nodePools:           [],
+      nodeTemplates:       [],
+      nodes:               [],
+      showClusterMetrics: false,
+      showK8sMetrics:     false,
+      showEtcdMetrics:    false,
+      CLUSTER_METRICS_DETAIL_URL,
+      CLUSTER_METRICS_SUMMARY_URL,
+      K8S_METRICS_DETAIL_URL,
+      K8S_METRICS_SUMMARY_URL,
+      ETCD_METRICS_DETAIL_URL,
+      ETCD_METRICS_SUMMARY_URL,
     };
   },
 
   computed: {
     ...mapGetters(['currentCluster']),
-
     displayProvider() {
       const other = 'other';
       let provider = this.currentCluster.status.provider || other;
@@ -150,6 +176,10 @@ export default {
       return this.t(`cluster.provider.${ provider }`);
     },
 
+    isRKE() {
+      return this.currentCluster.status.provider === 'rke';
+    },
+
     accessibleResources() {
       return RESOURCES.filter(resource => this.$store.getters['cluster/schemaFor'](resource));
     },
@@ -320,7 +350,7 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <section v-else>
+  <section v-else class="dashboard">
     <header>
       <div class="title">
         <h1>
@@ -370,28 +400,62 @@ export default {
       <HardwareResourceGauge :name="t('clusterIndexPage.hardwareResourceGauge.coresUsed')" :total="cpuUsed.total" :useful="cpuUsed.useful" />
       <HardwareResourceGauge :name="t('clusterIndexPage.hardwareResourceGauge.ramUsed')" :total="ramUsed.total" :useful="ramUsed.useful" :units="ramUsed.units" />
     </div>
-    <SimpleBox class="events" :title="t('clusterIndexPage.sections.events.label')">
-      <SortableTable
-        :rows="events"
-        :headers="eventHeaders"
-        key-field="id"
-        :search="false"
-        :table-actions="false"
-        :row-actions="false"
-        :paging="true"
-        :rows-per-page="10"
-        default-sort-by="date"
-      >
-        <template #cell:resource="{row, value}">
-          <n-link :to="row.detailLocation">
-            {{ value }}
-          </n-link>
-          <div v-if="row.message">
-            {{ row.displayMessage }}
-          </div>
+    <Tabbed class="mt-30">
+      <Tab name="events" :label="t('clusterIndexPage.sections.events.label')" :weight="3">
+        <SortableTable
+          :rows="events"
+          :headers="eventHeaders"
+          key-field="id"
+          :search="false"
+          :table-actions="false"
+          :row-actions="false"
+          :paging="true"
+          :rows-per-page="10"
+          default-sort-by="date"
+        >
+          <template #cell:resource="{row, value}">
+            <n-link :to="row.detailLocation">
+              {{ value }}
+            </n-link>
+            <div v-if="row.message">
+              {{ row.displayMessage }}
+            </div>
+          </template>
+        </SortableTable>
+      </Tab>
+      <Tab v-if="showClusterMetrics" name="cluster-metrics" :label="t('clusterIndexPage.sections.clusterMetrics.label')" :weight="2">
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="CLUSTER_METRICS_DETAIL_URL"
+            :summary-url="CLUSTER_METRICS_SUMMARY_URL"
+            graph-height="825px"
+          />
         </template>
-      </SortableTable>
-    </SimpleBox>
+      </Tab>
+      <Tab v-if="showK8sMetrics" name="k8s-metrics" :label="t('clusterIndexPage.sections.k8sMetrics.label')" :weight="1">
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="K8S_METRICS_DETAIL_URL"
+            :summary-url="K8S_METRICS_SUMMARY_URL"
+            graph-height="550px"
+          />
+        </template>
+      </Tab>
+      <Tab v-if="showEtcdMetrics" name="etcd-metrics" :label="t('clusterIndexPage.sections.etcdMetrics.label')" :weight="0">
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="ETCD_METRICS_DETAIL_URL"
+            :summary-url="ETCD_METRICS_SUMMARY_URL"
+            graph-height="550px"
+          >
+            <EtcdInfoBanner />
+          </DashboardMetrics>
+        </template>
+      </Tab>
+    </Tabbed>
   </section>
 </template>
 
@@ -436,4 +500,11 @@ export default {
   height: 40px;
   width: 40px;
 }
+
+.graph-options {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>
diff --git a/utils/grafana.js b/utils/grafana.js
new file mode 100644
index 00000000000..e7b8b9fabf4
--- /dev/null
+++ b/utils/grafana.js
@@ -0,0 +1,81 @@
+import { parse as parseUrl, addParam } from '@/utils/url';
+
+export function computeDashboardUrl(embedUrl, clusterId, params) {
+  const url = parseUrl(embedUrl);
+  const clusterPrefix = clusterId === 'local' ? '' : `/k8s/clusters/${ clusterId }`;
+  const prefix = `${ clusterPrefix }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/`;
+  const delimiter = 'http:rancher-monitoring-grafana:80/proxy/';
+  const path = url.path.split(delimiter)[1];
+
+  let newUrl = prefix + path;
+
+  if (url.query.viewPanel) {
+    newUrl = addParam(newUrl, 'viewPanel', url.query.viewPanel);
+  }
+  newUrl = addParam(newUrl, 'orgId', url.query.orgId);
+  newUrl = addParam(newUrl, 'kiosk', null);
+
+  Object.entries(params).forEach((entry) => {
+    newUrl = addParam(newUrl, entry[0], entry[1]);
+  });
+
+  return newUrl;
+}
+
+export async function dashboardExists(dispatch, clusterId, embedUrl) {
+  const url = parseUrl(embedUrl);
+  const clusterPrefix = clusterId === 'local' ? '' : `/k8s/clusters/${ clusterId }`;
+  const prefix = `${ clusterPrefix }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/`;
+  const delimiter = 'http:rancher-monitoring-grafana:80/proxy/';
+  const path = url.path.split(delimiter)[1];
+  const uid = path.split('/')[1];
+  const newUrl = `${ prefix }api/dashboards/uid/${ uid }`;
+
+  try {
+    await dispatch('cluster/request', { url: newUrl });
+
+    return true;
+  } catch (ex) {
+    return false;
+  }
+}
+
+export async function allDashboardsExist(dispatch, clusterId, embededUrls) {
+  const existPromises = embededUrls.map(url => dashboardExists(dispatch, clusterId, url));
+
+  return (await Promise.all(existPromises)).every(exists => exists);
+}
+
+export function queryGrafana(dispatch, clusterId, query, range, step) {
+  const clusterPrefix = clusterId === 'local' ? '' : `/k8s/clusters/${ clusterId }`;
+  const url = `${ clusterPrefix }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/api/datasources/proxy/1/api/v1/query_range?query=${ query }&start=${ range.start }&end=${ range.end }&step=${ step }`;
+
+  return dispatch('cluster/request', { url });
+}
+
+export async function hasLeader(dispatch, clusterId) {
+  const end = Date.now() / 1000;
+  const start = end - (5 * 60);
+
+  const response = await queryGrafana(dispatch, clusterId, 'max(etcd_server_has_leader)', { start, end }, 30);
+
+  return response.data.result[0]?.values?.[0]?.[1] === '1';
+}
+
+export async function leaderChanges(dispatch, clusterId) {
+  const end = Date.now() / 1000;
+  const start = end - (60 * 60);
+
+  const response = await queryGrafana(dispatch, clusterId, 'max(etcd_server_leader_changes_seen_total)', { start, end }, 30);
+
+  return response.data.result[0]?.values?.[0]?.[1] || 0;
+}
+
+export async function failedProposals(dispatch, clusterId) {
+  const end = Date.now() / 1000;
+  const start = end - (60 * 60);
+
+  const response = await queryGrafana(dispatch, clusterId, 'sum(etcd_server_proposals_failed_total)', { start, end }, 30);
+
+  return response.data.result[0]?.values?.[0]?.[1] || 0;
+}