Hastic URL doesn't update #172 (#189)

package.json

@@ -41,6 +41,7 @@
     "ts-jest": "^22.4.6",
     "ts-loader": "^4.2.0",
     "typescript": "^2.8.3",
+    "url-parse": "^1.4.4",
     "webpack": "4.7.0",
     "webpack-cli": "^2.1.2"
   },

src/config/config_ctrl.ts

@@ -1,13 +1,36 @@
 import template from './template.html';
-
+import { normalizeUrl } from '../utlis';
 
 class ConfigCtrl {
   static template = template;
   appModel: any;
+  appEditCtrl: any;
+
   constructor() {
     if(this.appModel.jsonData === undefined) {
       this.appModel.jsonData = {};
     }
+
+    this.appEditCtrl.setPreUpdateHook(this.preUpdate.bind(this));
+    this.appEditCtrl.setPostUpdateHook(this.postUpdate.bind(this));
+  }
+
+  preUpdate() {
+    this.normalizeUrl();
+    return Promise.resolve();
+  }
+
+  postUpdate() {
+    // TODO: check whether hasticServerUrl is accessible
+    if(!this.appModel.enabled) {
+      return Promise.resolve();
+    }
+
+    return { message: 'Hastic app installed!' };
+  }
+
+  normalizeUrl() {
+    this.appModel.jsonData.hasticServerUrl = normalizeUrl(this.appModel.jsonData.hasticServerUrl);
   }
 }
 

src/config/template.html

@@ -2,6 +2,11 @@
 <div class="gf-form-group">
   <div class="gf-form">
     <label class="gf-form-label width-10">Hastic server url</label>
-    <input type="url" class="gf-form-input max-width-20" ng-model='ctrl.appModel.jsonData.hasticServerUrl'/>
+    <input 
+      type="text" 
+      class="gf-form-input max-width-20" 
+      ng-model="ctrl.appModel.jsonData.hasticServerUrl"
+      ng-blur="ctrl.normalizeUrl"
+    />
   </div>
 </div>

src/utlis.ts

@@ -0,0 +1,29 @@
+import url from 'url-parse';
+
+export function normalizeUrl(grafanaUrl: string) {
+  if(!grafanaUrl) {
+    return grafanaUrl;
+  }
+  let urlObj = new url(grafanaUrl, {});
+  if(urlObj.protocol !== 'http:' && urlObj.protocol !== 'https:') {
+    grafanaUrl = `http://${grafanaUrl}`;
+    urlObj = new url(grafanaUrl, {});
+    console.log('No protocol provided in GRAFANA_URL -> inserting "http://"');
+  }
+  if(urlObj.slashes === false) {
+    urlObj = new url(`${urlObj.protocol}//${urlObj.pathname}`, {});
+    console.log('No slashes were provided after the protocol -> inserting slashes');
+  } 
+  if(urlObj.pathname.slice(-1) === '/') {
+    urlObj.pathname = urlObj.pathname.slice(0, -1);
+    console.log('Removing the slash at the end of GRAFANA_URL');
+  }
+  let finalUrl = `${urlObj.protocol}//${urlObj.hostname}`;
+  if(urlObj.port !== '') {
+    finalUrl = finalUrl + ':' + urlObj.port;
+  }
+  if(urlObj.pathname !== '') {
+    finalUrl = finalUrl + urlObj.pathname;
+  }
+  return finalUrl;
+}

tests/utils.jest.ts

@@ -0,0 +1,26 @@
+import { normalizeUrl } from '../src/utlis';
+
+describe('Normalize URL', function() {
+  const cases = [
+    { value: '127.0.0.1:8000', expected: 'http://127.0.0.1:8000' },
+    { value: '127.0.0.1:8000/', expected: 'http://127.0.0.1:8000' },
+    { value: 'localhost:8000', expected: 'http://localhost:8000' },
+    { value: 'localhost:8000/', expected: 'http://localhost:8000' },
+    { value: 'http://localhost:3000', expected: 'http://localhost:3000' },
+    { value: 'http://localhost:3000/', expected: 'http://localhost:3000' },
+    { value: 'https://localhost:8000', expected: 'https://localhost:8000' },
+    { value: 'https://localhost:8000/', expected: 'https://localhost:8000' },
+    { value: 'http://example.com', expected: 'http://example.com' },
+    { value: 'http://example.com/', expected: 'http://example.com' },
+    { value: 'https://example.com', expected: 'https://example.com' },
+    { value: 'https://example.com/', expected: 'https://example.com' },
+    { value: 'https://example.com/grafana', expected: 'https://example.com/grafana' },
+    { value: 'https://example.com/grafana/', expected: 'https://example.com/grafana' },
+  ];
+
+  it('should normalize URLs correctly', function() {
+    cases.forEach(testCase => {
+      expect(normalizeUrl(testCase.value)).toBe(testCase.expected);
+    });
+  });
+});