Merge pull request #1276 from cptran777/health-metrics-header

Add ember-highcharts and setup a dataset health tab

wherehows-frontend/app/controllers/Application.java

@@ -66,6 +66,8 @@ public class Application extends Controller {
   private static final Boolean HTTPS_REDIRECT = Play.application().configuration().getBoolean("https.redirect", false);
   private static final Boolean WHZ_SHOW_LINEAGE =
       Play.application().configuration().getBoolean("linkedin.show.dataset.lineage", false);
+  private static final Boolean WHZ_SHOW_DS_HEALTH =
+      Play.application().configuration().getBoolean("linkedin.show.dataset.health", false);
 
   private static final String WHZ_WIKI_LINKS__GDRP_PII =
       Play.application().configuration().getString("linkedin.links.wiki.gdprPii", "");
@@ -199,6 +201,7 @@ public class Application extends Controller {
     config.put("appVersion", APP_VERSION);
     config.put("isInternal", IS_INTERNAL);
     config.put("shouldShowDatasetLineage", WHZ_SHOW_LINEAGE);
+    config.put("shouldShowDatasetHealth", WHZ_SHOW_DS_HEALTH);
     config.set("wikiLinks", wikiLinks());
     config.set("JitAclAccessWhitelist", Json.toJson(StringUtils.split(JIT_ACL_WHITELIST, ',')));
     config.set("tracking", trackingInfo());

wherehows-web/app/components/datasets/containers/dataset-health.ts

@@ -0,0 +1,32 @@
+import Component from '@ember/component';
+import { get } from '@ember/object';
+import { task, TaskInstance } from 'ember-concurrency';
+
+/**
+ * This is the container component for the dataset health tab. It should contain the health bar graphs and a table
+ * depicting the detailed health scores. Aside from fetching the data, it also handles click interactions between
+ * the graphs and the table in terms of filtering and displaying of data
+ */
+export default class DatasetHealthContainer extends Component {
+  /**
+   * The urn identifier for the dataset
+   * @type {string}
+   */
+  urn: string;
+
+  didInsertElement() {
+    get(this, 'getContainerDataTask').perform();
+  }
+
+  didUpdateAttrs() {
+    get(this, 'getContainerDataTask').perform();
+  }
+
+  /**
+   * An async parent task to group all data tasks for this container component
+   * @type {Task<TaskInstance<Promise<any>>, (a?: any) => TaskInstance<TaskInstance<Promise<any>>>>}
+   */
+  getContainerDataTask = task(function*(this: DatasetHealthContainer): IterableIterator<TaskInstance<Promise<any>>> {
+    // Do something in the future
+  });
+}

wherehows-web/app/controllers/datasets/dataset.ts

@@ -87,6 +87,14 @@ export default class DatasetController extends Controller {
    */
   shouldShowDatasetLineage: boolean;
 
+  /**
+   * Flags the health feature for datasets, which is currently in the development stage so we should not
+   * have it appear in production
+   * @type {boolean}
+   * @memberof DatasetController
+   */
+  shouldShowDatasetHealth: boolean;
+
   /**
    * Flag indicating if the dataset contains personally identifiable information
    * @type {boolean}

wherehows-web/app/routes/datasets/dataset.ts

@@ -95,7 +95,8 @@ export default class DatasetRoute extends Route {
     setProperties(controller, {
       isInternal: !!getConfig('isInternal'),
       jitAclAccessWhitelist: getConfig('JitAclAccessWhitelist') || [],
-      shouldShowDatasetLineage: getConfig('shouldShowDatasetLineage')
+      shouldShowDatasetLineage: getConfig('shouldShowDatasetLineage'),
+      shouldShowDatasetHealth: getConfig('shouldShowDatasetHealth')
     });
   }
 

wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs

@@ -0,0 +1 @@
+Coming Soon!

wherehows-web/app/templates/datasets/dataset.hbs

@@ -105,6 +105,12 @@
           {{/tablist.tab}}
         {{/if}}
 
+        {{#if shouldShowDatasetHealth}}
+          {{#tablist.tab tabIds.Health on-select=(action "tabSelectionChanged")}}
+            Health
+          {{/tablist.tab}}
+        {{/if}}
+
       {{/tabs.tablist}}
     </div>
   </div>
@@ -152,5 +158,11 @@
         {{datasets/dataset-relationships urn=encodedUrn}}
       {{/tabs.tabpanel}}
     {{/if}}
+
+    {{#if shouldShowDatasetHealth}}
+      {{#tabs.tabpanel tabIds.Health}}
+        {{datasets/containers/dataset-health urn=encodedUrn}}
+      {{/tabs.tabpanel}}
+    {{/if}}
   </div>
 {{/ivy-tabs}}

wherehows-web/app/typings/api/configurator/configurator.d.ts

@@ -9,6 +9,7 @@ interface IAppConfig {
   isInternal: boolean | void;
   JitAclAccessWhitelist: Array<DatasetPlatform> | void;
   shouldShowDatasetLineage: boolean;
+  shouldShowDatasetHealth: boolean;
   tracking: {
     isEnabled: boolean;
     trackers: {

wherehows-web/ember-cli-build.js

@@ -21,6 +21,15 @@ module.exports = function(defaults) {
       includePolyfill: true
     },
 
+    emberHighCharts: {
+      includedHighCharts: true,
+      // Note: Since we only need highcharts, excluding the other available modules in the addon
+      includeHighStock: false,
+      includeHighMaps: false,
+      includeHighChartsMore: false,
+      includeHighCharts3D: false
+    },
+
     storeConfigInMeta: false,
 
     SRI: {

wherehows-web/package.json

@@ -66,6 +66,7 @@
     "ember-export-application-global": "^2.0.0",
     "ember-fetch": "^3.4.4",
     "ember-font-awesome": "^4.0.0-rc.2",
+    "ember-highcharts": "^1.0.0",
     "ember-inflector": "^2.2.0",
     "ember-load-initializers": "^1.0.0",
     "ember-math-helpers": "^2.4.0",
@@ -87,6 +88,7 @@
     "eslint-plugin-prettier": "^2.5.0",
     "eyeglass": "^1.3.0",
     "eyeglass-restyle": "^1.1.0",
+    "highcharts": "^6.1.1",
     "husky": "^0.14.3",
     "ivy-tabs": "^3.1.0",
     "lint-staged": "^7.1.0",

wherehows-web/tests/integration/components/datasets/containers/dataset-health-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | datasets/containers/dataset-health', function(hooks) {
+  setupRenderingTest(hooks);
+  // TODO: More meaningful tests as we continue with development
+  test('it renders', async function(assert) {
+    await render(hbs`{{datasets/containers/dataset-health}}`);
+    assert.ok(this.element, 'Renders without errors');
+  });
+});

wherehows-web/yarn.lock

@@ -1382,6 +1382,10 @@ bootstrap-sass@^3.0.0:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
 
+bootstrap@3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+
 bower-config@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/bower-config/-/bower-config-1.4.1.tgz#85fd9df367c2b8dbbd0caa4c5f2bad40cd84c2cc"
@@ -1742,7 +1746,7 @@ broccoli-lint-eslint@^4.2.1:
     lodash.defaultsdeep "^4.6.0"
     md5-hex "^2.0.0"
 
-broccoli-merge-trees@^1.0.0, broccoli-merge-trees@^1.1.0, broccoli-merge-trees@^1.1.1, broccoli-merge-trees@^1.1.4:
+broccoli-merge-trees@^1.0.0, broccoli-merge-trees@^1.1.0, broccoli-merge-trees@^1.1.1, broccoli-merge-trees@^1.1.4, broccoli-merge-trees@^1.2.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/broccoli-merge-trees/-/broccoli-merge-trees-1.2.4.tgz#a001519bb5067f06589d91afa2942445a2d0fdb5"
   dependencies:
@@ -3516,6 +3520,16 @@ ember-hash-helper-polyfill@^0.1.1:
     ember-cli-babel "^5.1.7"
     ember-cli-version-checker "^1.2.0"
 
+ember-highcharts@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ember-highcharts/-/ember-highcharts-1.0.0.tgz#d412af4d1f2f55e1cae0174c353852fd98b5bad9"
+  dependencies:
+    bootstrap "3.3.7"
+    broccoli-funnel "^2.0.1"
+    broccoli-merge-trees "^1.2.0"
+    ember-cli-babel "^6.6.0"
+    ember-cli-htmlbars "^2.0.1"
+
 ember-ignore-children-helper@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ember-ignore-children-helper/-/ember-ignore-children-helper-1.0.1.tgz#f7c4aa17afb9c5685e1d4dcdb61c7b138ca7cdc3"
@@ -5170,6 +5184,10 @@ heimdalljs@^0.2.0, heimdalljs@^0.2.1, heimdalljs@^0.2.3, heimdalljs@^0.2.5:
   dependencies:
     rsvp "~3.2.1"
 
+highcharts@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-6.1.1.tgz#49dc34f5e963744ecd7eb87603b6cdaf8304c13a"
+
 hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"