From: Kanika Murarka <kmurarka@redhat.com>
Date: Mon, 17 Dec 2018 08:36:46 +0000 (+0530)
Subject: mgr/dashboard: Adds custom timepicker for grafana iframes
X-Git-Tag: v14.1.0~272^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=05d18dd475f037b0c3ed1b0b3329a1bf627e6144;p=ceph.git

mgr/dashboard: Adds custom timepicker for grafana iframes

Fixes: https://tracker.ceph.com/issues/36680
Signed-off-by: Kanika Murarka <kmurarka@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
index 477db02a6e5..61fccbc6161 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
@@ -14,24 +14,31 @@
 
 <div class="row"
      *ngIf="grafanaExist && dashboardExist">
-  <div class="col-md-12">
-    <div dropdown>
-      <button dropdownToggle
-              class="btn btn-sm dropdown-toggle"
-              data-toggle="dropdown"
-              title="Advanced Settings">
-        <i class="fa fa-cog"></i>
-        <span class="caret"></span>
-      </button>
-      <ul *dropdownMenu
-          class="dropdown-menu">
-        <li>
-          <a class="dropdown-item"
-             (click)="timePickerToggle()">{{ modeText }}
-          </a>
-        </li>
-      </ul>
+  <div class="col-md-12 timepicker">
+    <label class="control-label col-sm-1"
+           for="timepicker-control">
+      <ng-container i18n>Grafana Time Picker</ng-container>
+    </label>
+    <div class="col-sm-9">
+      <select id="timepicker"
+              name="timepicker-control"
+              class="form-control "
+              [(ngModel)]="time"
+              (ngModelChange)="onTimepickerChange($event)">
+        <option *ngFor="let key of grafanaTimes"
+                [ngValue]="key.value">{{ key.name }}
+        </option>
+      </select>
     </div>
+    <button class="btn btn-sm"
+            i18n-title
+            title="Reset Settings"
+            (click)="reset()">
+      <i class="fa fa-undo"></i>
+    </button>
+    <br>
+  </div>
+  <div class="col-md-12">
     <div class="grafana-container">
       <iframe #iframe
               id="iframe"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss
index fa054f6bfe3..fe30025c5b5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss
@@ -16,6 +16,17 @@
   height: 900px;
 }
 
+.timepicker {
+  select {
+    display: inline-block;
+  }
+
+  label {
+    font-size: 1.05em;
+    padding: 5px !important;
+  }
+}
+
 button {
   margin-bottom: 10px;
   margin-left: 10px;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
index 568f0cb9107..d063cd6b0a6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
@@ -1,5 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { AlertModule } from 'ngx-bootstrap/alert';
@@ -18,7 +19,7 @@ describe('GrafanaComponent', () => {
 
   configureTestBed({
     declarations: [GrafanaComponent, InfoPanelComponent, LoadingPanelComponent],
-    imports: [AlertModule.forRoot(), HttpClientTestingModule, RouterTestingModule],
+    imports: [AlertModule.forRoot(), HttpClientTestingModule, RouterTestingModule, FormsModule],
     providers: [CephReleaseNamePipe, SettingsService, SummaryService, i18nProviders]
   });
 
@@ -26,6 +27,7 @@ describe('GrafanaComponent', () => {
     fixture = TestBed.createComponent(GrafanaComponent);
     component = fixture.componentInstance;
     component.grafanaPath = 'somePath';
+    component.uid = 'foo';
   });
 
   it('should create', () => {
@@ -47,15 +49,29 @@ describe('GrafanaComponent', () => {
       fixture.detectChanges();
     });
 
-    it('should have found out that grafana exists', () => {
+    it('should have found out that grafana exists and dashboard exists', () => {
+      expect(component.time).toBe('from=now-1h&to=now');
       expect(component.grafanaExist).toBe(true);
       expect(component.baseUrl).toBe('http:localhost:3000/d/');
       expect(component.loading).toBe(false);
-      component.uid = 'uid';
-      component.getFrame();
-      expect(component.url).toBe('http:localhost:3000/d/uid/somePath&refresh=2s&kiosk');
+      expect(component.url).toBe(
+        'http:localhost:3000/d/foo/somePath&refresh=2s&kiosk&from=now-1h&to=now'
+      );
       expect(component.grafanaSrc).toEqual({
-        changingThisBreaksApplicationSecurity: 'http:localhost:3000/d/uid/somePath&refresh=2s&kiosk'
+        changingThisBreaksApplicationSecurity:
+          'http:localhost:3000/d/foo/somePath&refresh=2s&kiosk&from=now-1h&to=now'
+      });
+    });
+
+    it('should reset the values', () => {
+      component.reset();
+      expect(component.time).toBe('from=now-1h&to=now');
+      expect(component.url).toBe(
+        'http:localhost:3000/d/foo/somePath&refresh=2s&kiosk&from=now-1h&to=now'
+      );
+      expect(component.grafanaSrc).toEqual({
+        changingThisBreaksApplicationSecurity:
+          'http:localhost:3000/d/foo/somePath&refresh=2s&kiosk&from=now-1h&to=now'
       });
     });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
index 67875a966c3..ed0ec929e47 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
-import { DomSanitizer } from '@angular/platform-browser';
-import { SafeUrl } from '@angular/platform-browser';
+import { I18n } from '@ngx-translate/i18n-polyfill';
 
 import { CephReleaseNamePipe } from '../../../shared/pipes/ceph-release-name.pipe';
 import { SummaryService } from '../../../shared/services/summary.service';
@@ -22,11 +22,12 @@ export class GrafanaComponent implements OnInit, OnChanges {
   panelStyle: any;
   grafanaExist = false;
   mode = '&kiosk';
-  modeFlag = false;
-  modeText = 'Change time selection';
   loading = true;
   styles = {};
   dashboardExist = true;
+  time: string;
+  grafanaTimes: any;
+  readonly DEFAULT_TIME: string = 'from=now-1h&to=now';
 
   @Input()
   grafanaPath: string;
@@ -41,10 +42,135 @@ export class GrafanaComponent implements OnInit, OnChanges {
     private summaryService: SummaryService,
     private sanitizer: DomSanitizer,
     private settingsService: SettingsService,
-    private cephReleaseNamePipe: CephReleaseNamePipe
-  ) {}
+    private cephReleaseNamePipe: CephReleaseNamePipe,
+    private i18n: I18n
+  ) {
+    this.grafanaTimes = [
+      {
+        name: this.i18n('Last 5 minutes'),
+        value: 'from=now-5m&to=now'
+      },
+      {
+        name: this.i18n('Last 15 minutes'),
+        value: 'from=now-15m&to=now'
+      },
+      {
+        name: this.i18n('Last 30 minutes'),
+        value: 'from=now-30m&to=now'
+      },
+      {
+        name: this.i18n('Last 1 hour (Default)'),
+        value: 'from=now-1h&to=now'
+      },
+      {
+        name: this.i18n('Last 3 hours'),
+        value: 'from=now-3h&to=now'
+      },
+      {
+        name: this.i18n('Last 6 hours'),
+        value: 'from=now-6h&to=now'
+      },
+      {
+        name: this.i18n('Last 12 hours'),
+        value: 'from=now-12h&to=now'
+      },
+      {
+        name: this.i18n('Last 24 hours'),
+        value: 'from=now-24h&to=now'
+      },
+      {
+        name: this.i18n('Yesterday'),
+        value: 'from=now-1d%2Fd&to=now-1d%2Fd'
+      },
+      {
+        name: this.i18n('Today'),
+        value: 'from=now%2Fd&to=now%2Fd'
+      },
+      {
+        name: this.i18n('Today so far'),
+        value: 'from=now%2Fd&to=now'
+      },
+      {
+        name: this.i18n('Day before yesterday'),
+        value: 'from=now-2d%2Fd&to=now-2d%2Fd'
+      },
+      {
+        name: this.i18n('Last 2 days'),
+        value: 'from=now-2d&to=now'
+      },
+      {
+        name: this.i18n('This day last week'),
+        value: 'from=now-7d%2Fd&to=now-7d%2Fd'
+      },
+      {
+        name: this.i18n('Previous week'),
+        value: 'from=now-1w%2Fw&to=now-1w%2Fw'
+      },
+      {
+        name: this.i18n('This week'),
+        value: 'from=now%2Fw&to=now%2Fw'
+      },
+      {
+        name: this.i18n('This week so far'),
+        value: 'from=now%2Fw&to=now'
+      },
+      {
+        name: this.i18n('Last 7 days'),
+        value: 'from=now-7d&to=now'
+      },
+      {
+        name: this.i18n('Previous month'),
+        value: 'from=now-1M%2FM&to=now-1M%2FM'
+      },
+      {
+        name: this.i18n('This month'),
+        value: 'from=now%2FM&to=now%2FM'
+      },
+      {
+        name: this.i18n('This month so far'),
+        value: 'from=now%2FM&to=now'
+      },
+      {
+        name: this.i18n('Last 30 days'),
+        value: 'from=now-30d&to=now'
+      },
+      {
+        name: this.i18n('Last 90 days'),
+        value: 'from=now-90d&to=now'
+      },
+      {
+        name: this.i18n('Last 6 months'),
+        value: 'from=now-6M&to=now'
+      },
+      {
+        name: this.i18n('Last 1 year'),
+        value: 'from=now-1y&to=now'
+      },
+      {
+        name: this.i18n('Previous year'),
+        value: 'from=now-1y%2Fy&to=now-1y%2Fy'
+      },
+      {
+        name: this.i18n('This year'),
+        value: 'from=now%2Fy&to=now%2Fy'
+      },
+      {
+        name: this.i18n('This year so far'),
+        value: 'from=now%2Fy&to=now'
+      },
+      {
+        name: this.i18n('Last 2 years'),
+        value: 'from=now-2y&to=now'
+      },
+      {
+        name: this.i18n('Last 5 years'),
+        value: 'from=now-5y&to=now'
+      }
+    ];
+  }
 
   ngOnInit() {
+    this.time = this.DEFAULT_TIME;
     this.styles = {
       one: 'grafana_one',
       two: 'grafana_two',
@@ -78,28 +204,26 @@ export class GrafanaComponent implements OnInit, OnChanges {
     this.settingsService
       .validateGrafanaDashboardUrl(this.uid)
       .subscribe((data: any) => (this.dashboardExist = data === 200));
-    this.url = this.baseUrl + this.uid + '/' + this.grafanaPath + '&refresh=2s' + this.mode;
+    this.url =
+      this.baseUrl +
+      this.uid +
+      '/' +
+      this.grafanaPath +
+      '&refresh=2s' +
+      this.mode +
+      '&' +
+      this.time;
     this.grafanaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
   }
 
-  timePickerToggle() {
-    this.modeFlag = true;
-    this.mode = this.mode ? '' : '&kiosk';
-    if (this.modeText === 'Return to default') {
-      this.modeText = 'Change time selection';
-      this.reset();
-    } else {
-      this.modeText = 'Return to default';
-    }
+  onTimepickerChange(event) {
     if (this.grafanaExist) {
       this.getFrame();
     }
-    this.modeFlag = false;
   }
 
   reset() {
-    this.mode = '&kiosk';
-    this.modeText = 'Change time selection';
+    this.time = this.DEFAULT_TIME;
     if (this.grafanaExist) {
       this.getFrame();
     }
diff --git a/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf b/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
index 40894634647..52eb6d252ef 100644
--- a/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
+++ b/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
@@ -248,6 +248,18 @@
           <context context-type="sourcefile">app/shared/components/grafana/grafana.component.html</context>
           <context context-type="linenumber">11</context>
         </context-group>
+      </trans-unit><trans-unit id="4e11830040bd64804a0555de76f291d5832772d4" datatype="html">
+        <source>Grafana Time Picker</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/shared/components/grafana/grafana.component.html</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+      </trans-unit><trans-unit id="238c1ba845dd7330e8088165275919a1debf1ca3" datatype="html">
+        <source>Reset Settings</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/shared/components/grafana/grafana.component.html</context>
+          <context context-type="linenumber">35</context>
+        </context-group>
       </trans-unit><trans-unit id="012741ee52b3c050e4a977c37cc2334f7974f141" datatype="html">
         <source>Failed to load data.</source>
         <context-group purpose="location">
@@ -4742,6 +4754,216 @@
           <context context-type="linenumber">1</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="e6ca3c0efaf51e6d45a7f92f58bac37140c3fda4" datatype="html">
+        <source>Last 5 minutes</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="b0ecb2bbc548cc9bd95050fd8f0c84586d083fe2" datatype="html">
+        <source>Last 15 minutes</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="857ae67deb51353120b203b0f2a06b0c48ef49fa" datatype="html">
+        <source>Last 30 minutes</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7b1738fad314e936dc14b94db8f43da736942308" datatype="html">
+        <source>Last 1 hour (Default)</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="a428288224389726cef9d9bd8d1d7808cccd7ffd" datatype="html">
+        <source>Last 3 hours</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7cbabecc8d80cf183ac199cfaeb7619d56e5d43f" datatype="html">
+        <source>Last 6 hours</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1a389cdf64187d34cf99eec30a290e3fa7d4744f" datatype="html">
+        <source>Last 12 hours</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="9e0ba5f591380a94d594a76288f0c41aa97eb9c2" datatype="html">
+        <source>Last 24 hours</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="e430eda9c785cd43465b7cbb400ee914f1057247" datatype="html">
+        <source>Yesterday</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7fb1099e29660162f9154d5b2feee7743a423df6" datatype="html">
+        <source>Today</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="33904058a97a64bd189bed84038b1ffe719769c7" datatype="html">
+        <source>Today so far</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3b0b849be007510021d3d383df75bec95ef9c97b" datatype="html">
+        <source>Day before yesterday</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="6b430c2c394c4d32ebd7d46c8c46ab60e1b29ccb" datatype="html">
+        <source>Last 2 days</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="d5e812a87a5d57a94200a2013027cab76a7c4863" datatype="html">
+        <source>This day last week</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="d00edc936eeab6b5577401f115ca86ca2c87dc9a" datatype="html">
+        <source>Previous week</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="b036e40577baa6b918b2267d319d4b3aeaa88a5a" datatype="html">
+        <source>This week</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="99ad5a6096b3fcb3f021f3779bae710cdfeb8934" datatype="html">
+        <source>This week so far</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="02e0243b60007368f87dc01e083f232dd025096d" datatype="html">
+        <source>Last 7 days</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="c3b08b07b5ab98e7cdcf18df39355690ab7d3884" datatype="html">
+        <source>Previous month</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1b2562c6d5aa90644e7dc91feee82e2005fceb33" datatype="html">
+        <source>This month</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="26b4b18c5917934abb169ba9aa490e57f7bf10b8" datatype="html">
+        <source>This month so far</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7668986b9f753fcd72ad4a00b1a0c4861d1f7fb8" datatype="html">
+        <source>Last 30 days</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="ba1e822408d90c6fbd2989100fa648bfd5e8ee84" datatype="html">
+        <source>Last 90 days</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="c3df03f899a914c4181adcdc8a3f077424f7b6e8" datatype="html">
+        <source>Last 6 months</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7f9a92757580c9f31c309c0a3812ea429274eadf" datatype="html">
+        <source>Last 1 year</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5a9fede30ff65cb4b4426f6b1ed31afb67ecd7b0" datatype="html">
+        <source>Previous year</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="65cefcc53d1f6445df7568e8a40c49165f1090ee" datatype="html">
+        <source>This year</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1f68b766944dc3865bddab765fe952b0c1c43f92" datatype="html">
+        <source>This year so far</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4d4b77e614f8043fdadef5d6d235655bb48eb311" datatype="html">
+        <source>Last 2 years</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="138afa339ea6e75d25a474affe1edbcb90e00ec0" datatype="html">
+        <source>Last 5 years</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/components/grafana/grafana.component.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="c43dc1967a603fefb886149ac35863a06d5b4ce5" datatype="html">
         <source>Information</source>
         <context-group purpose="location">