datepickerExample on instrumentation dashboard && new build

2018-05-08 17:02:29 +02:00 · 2018-05-08 17:02:29 +02:00 · 96a3f3058c
--- a/build/asset-manifest.json
+++ b/build/asset-manifest.json
@ -1,6 +1,6 @@
 {
  "main.css": "static/css/main.526645cd.css",
  "main.css.map": "static/css/main.526645cd.css.map",
-  "main.js": "static/js/main.ae057dc7.js",
-  "main.js.map": "static/js/main.ae057dc7.js.map"
+  "main.js": "static/js/main.2f18ded5.js",
+  "main.js.map": "static/js/main.2f18ded5.js.map"
 }
--- a/build/index.html
+++ b/build/index.html
@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/favicon.ico"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"/><title>React App</title><link href="/static/css/main.526645cd.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.ae057dc7.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/favicon.ico"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"/><title>React App</title><link href="/static/css/main.526645cd.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.2f18ded5.js"></script></body></html>
--- a/build/service-worker.js
+++ b/build/service-worker.js
@ -1 +1 @@
-"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/index.html","be918f9cb6e12da079ca3c128eabe0d5"],["/static/css/main.526645cd.css","c99fb40040506aa587d6e41c488488c2"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
+"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/index.html","4e598a66830e50d90fa8f6a6eb634686"],["/static/css/main.526645cd.css","c99fb40040506aa587d6e41c488488c2"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
--- a/client/src/components/generic/DatePickerFilter.tsx
+++ b/client/src/components/generic/DatePickerFilter.tsx
@ -146,12 +146,8 @@ export default class DatePickerFilter extends GenericComponent<any, any> {
        const { title, subtitle, icon } = this.props;
        const { visible, selectedValue} = this.state;

-        const paperStyle = visible ?
-          classNames.menu.join(' ') + 'md-paper md-paper--1'
-          : classNames.menu.join(' ');
-        const labelStyle = visible ?
-          classNames.label.join(' ') + 'md-floating-label--active'
-          : classNames.label.join(' ');
+        const paperStyle = classNames.menu.join(' ') + (visible ? 'md-paper md-paper--1' : '');
+        const labelStyle = classNames.label.join(' ') + (visible ? 'md-floating-label--active' : '');

        const selectDateRange = selectedValue ? this.toPrettyDateRange(selectedValue) : (subtitle || 'Select range');

--- a/server/dashboards/preconfigured/bot-framework-datepicker.ts
+++ b/server/dashboards/preconfigured/bot-framework-datepicker.ts
--- a/server/dashboards/preconfigured/bot-framework-inst.ts
+++ b/server/dashboards/preconfigured/bot-framework-inst.ts
@ -55,8 +55,43 @@ export const config: IDashboardConfig = /*return*/ {
    {
      id: 'timespan',
      type: 'Constant',
-      params: { values: ['24 hours', '1 week', '1 month', '3 months'], selectedValue: '1 month' },
-      format: 'timespan'
+      params: {
+        selectedValue: (() => {
+          var currentTime = new Date();
+          var stringDate = currentTime.toISOString().split('T')[0];
+          var startDate = stringDate + 'T00:00:00.000Z';
+          var endDate = stringDate + 'T23:59:59.999Z';
+  
+          var initialDateRange = startDate + '/' + endDate;
+          return initialDateRange;
+        })()
+      },
+      calculated: (state, dependencies) => {
+        var queryTimespan =  state.selectedValue;
+        var dateRangeArray = state.selectedValue.split('/');
+        
+        var initDate = new Date(dateRangeArray[0]);
+        var endDate = new Date(dateRangeArray[1]);
+        var diffTime = endDate.getTime() - initDate.getTime();
+        var diffDays = diffTime / (3600 * 1000 * 24);
+  
+        var timeFormat = (diffDays > 3) ? 'date' : 'hour' ;
+        
+        return {
+          queryTimespan: state.selectedValue,
+          startTimespan: dateRangeArray[0],
+          endTimespan: dateRangeArray[1],
+          'timeline-timeFormat': timeFormat,
+        };
+      }
+    },
+    {
+      id: 'granularity',
+      type: 'Constant',
+      params: { values: ['1h', '2h', '6h', '12h', '1d', '7d', '30d'], selectedValue: '1h' },
+      calculated: (state, dependencies) => {
+        return { granularity: state.selectedValue };
+      }
    },
    {
      id: 'modes',
@ -70,7 +105,7 @@ export const config: IDashboardConfig = /*return*/ {
      dependencies: {
        timespan: 'timespan',
        queryTimespan: 'timespan:queryTimespan',
-        granularity: 'timespan:granularity'
+        granularity: 'granularity'
      },
      params: {
        table: 'customEvents',
@ -100,7 +135,7 @@ export const config: IDashboardConfig = /*return*/ {
      dependencies: {
        timespan: 'timespan',
        queryTimespan: 'timespan:queryTimespan',
-        granularity: 'timespan:granularity',
+        granularity: 'granularity',
        selectedChannels: 'filters:channels-values-selected',
        selectedIntents: 'filters:intents-values-selected'
      },
@ -222,10 +257,17 @@ export const config: IDashboardConfig = /*return*/ {
  ],
  filters: [
    {
-      type: 'TextFilter',
+      type: 'DatePickerFilter',
      title: 'Timespan',
-      source: 'timespan',
-      actions: { onChange: 'timespan:updateSelectedValue' },
+      dependencies: {selectedValue: 'timespan'},
+      actions: {onChange: 'timespan:updateSelectedValue'},
+      first: true
+    },
+    {
+      type: 'TextFilter',
+      title: 'Granularity',
+      dependencies: {selectedValue: 'granularity', values: 'granularity:values'},
+      actions: {onChange: 'granularity:updateSelectedValue'},
      first: true
    },
    {
@ -377,7 +419,7 @@ export const config: IDashboardConfig = /*return*/ {
            intent: 'dialog_intentsDialog:intent',
            queryTimespan: 'dialog_intentsDialog:queryspan',
            timespan: 'timespan',
-            granularity: 'timespan:granularity'
+            granularity: 'granularity'
          },
          params: {
            table: 'customEvents',
@ -910,7 +952,7 @@ export const config: IDashboardConfig = /*return*/ {
          dependencies: {
            timespan: 'timespan',
            queryTimespan: 'timespan:queryTimespan',
-            granularity: 'timespan:granularity',
+            granularity: 'granularity',
            selectedChannels: 'filters:channels-values-selected',
            selectedIntents: 'filters:intents-values-selected'
          },