Merge pull request #3367 from apinf/feature/search-box

Add Search box on the Dashboard page

apinf_packages/analytics/server/methods.js

@@ -279,6 +279,7 @@ Meteor.methods({
         dataset.proxyBackendId = proxyBackend._id;
         dataset.apiName = proxyBackend.apiName();
         dataset.apiSlug = proxyBackend.apiSlug();
+        dataset.apiId = proxyBackend.apiId;
       }
 
       // Create a comparison data

apinf_packages/core/lib/i18n/en.i18n.json

@@ -283,6 +283,8 @@
   "dashboardPage_title_dashboard": "Dashboard",
   "dashboardPage_text_noApis": "There are no APIs that you manage.",
   "dashboardPage_text_noProxyBackends": "You have not yet connected your API to a proxy. To see analytics of your API usage, browse your API from Catalog and configure a proxy from the API profile.",
+  "dashboardView_text_noApisFound": "No APIs found with the specified name",
+  "dashboardPage_placeholderText_search": "Search",
   "dateRangePicker_optionText_yesterday": "Last 24 hours",
   "dateRangePicker_optionText_7days": "Last 7 Days",
   "dateRangePicker_optionText_30days": "Last 30 Days",

apinf_packages/dashboard/client/dashboard.html

@@ -5,9 +5,20 @@
 
 <template name="dashboardPage">
   <div class="container">
-    <h1 class="page">
-      {{_ "dashboardPage_title_dashboard" }}
-    </h1>
+    <div class="row page-header">
+      <div class="col-xs-12 col-sm-8">
+        <h1 class="page">
+          {{_ "dashboardPage_title_dashboard" }}
+        </h1>
+      </div>
+      <div class="col-xs-12 col-sm-4">
+        <div class="search">
+          <i class="fa fa-search"></i>
+          <input type="text" class="form-control pull-right" id="search-box"
+                 placeholder={{_ "dashboardPage_placeholderText_search" }} >
+        </div>
+      </div>
+    </div>
 
     {{# if Template.subscriptionsReady }}
       {{> dashboardToolbar proxiesList=proxiesList }}
@@ -23,7 +34,7 @@ <h1 class="page">
             {{> apiAnalyticPageBody proxyBackendId=proxyBackendId }}
           {{ else }}
             <!-- Display Dashboard page-->
-            {{> dashboardView }}
+            {{> dashboardView searchValue=searchValue }}
           {{/ if }} <!-- /managedOneApi -->
         {{ else }}
           <!-- Display a message about "No managed API" -->

apinf_packages/dashboard/client/dashboard.js

@@ -22,6 +22,8 @@ Template.dashboardPage.onCreated(function () {
   // Get reference to template instance
   const instance = this;
 
+  instance.searchValue = new ReactiveVar();
+
   instance.autorun(() => {
     // Get Branding collection content
     const branding = Branding.findOne();
@@ -87,4 +89,14 @@ Template.dashboardPage.helpers({
   proxyBackendId () {
     return ProxyBackends.findOne()._id;
   },
+  searchValue () {
+    return Template.instance().searchValue.get();
+  },
+});
+
+Template.dashboardPage.events({
+  'keyup #search-box': (event, templateInstance) => {
+    const apiName = event.currentTarget.value;
+    templateInstance.searchValue.set(apiName);
+  },
 });

apinf_packages/dashboard/client/dashboard.less

@@ -136,3 +136,23 @@
 .request-paths-block {
   width: 90%;
 }
+
+h1.page {
+  margin: 0;
+}
+
+.search {
+  position: relative;
+
+  input {
+    text-indent: 20px;
+  }
+
+  .fa-search {
+    position: absolute;
+    top: 0.6em;
+    left: 0.8em;
+    font-size: 15px;
+    color: #ccc;
+  }
+}

apinf_packages/dashboard/client/view/summary_statistics/summary.html

@@ -4,10 +4,10 @@
 https://joinup.ec.europa.eu/community/eupl/og_page/european-union-public-licence-eupl-v11 -->
 
 <template name="dashboardSummaryStatistic">
-  {{# if analyticsData }}
+  {{# if displayTable }}
     <!-- Table head -->
     <h4>
-      {{ tableTitle }} ({{ analyticsData.length }})
+      {{ tableTitle }} ({{ count }})
     </h4>
 
     <div class="dashboard-table-row statistic-title">

apinf_packages/dashboard/client/view/summary_statistics/summary.js

@@ -18,6 +18,9 @@ import {
   percentageValue,
 } from '/apinf_packages/dashboard/lib/trend_helpers';
 
+// Collections imports
+import Apis from '../../../../apis/collection';
+
 Template.dashboardSummaryStatistic.onCreated(function () {
   // Dictionary of Flags about display/not the overview part for current item
   const instance = this;
@@ -70,6 +73,27 @@ Template.dashboardSummaryStatistic.onCreated(function () {
     // Update
     instance.sortedAnalyticsData.set(sortedAnalyticsData);
   });
+
+  this.autorun(() => {
+    const analyticsData = Template.currentData().analyticsData;
+    const searchValue = Template.currentData().searchValue;
+
+    // Make sure analyticsData exist and searchValue is provided
+    if (searchValue && analyticsData) {
+      // Get API IDs that satisfy provided search value
+      const apiIds = Apis.find({
+        name: {
+          $regex: searchValue,
+          $options: 'i', // case-insensitive option
+        },
+      }).map(api => { return api._id; });
+
+      // Find in Analytics Dataset
+      this.searchResult = analyticsData.filter(dataset => {
+        return apiIds.indexOf(dataset.apiId) > -1;
+      });
+    }
+  });
 });
 
 Template.dashboardSummaryStatistic.helpers({
@@ -108,8 +132,43 @@ Template.dashboardSummaryStatistic.helpers({
     return TAPi18n.__(`dashboardSummaryStatistic_groupTitle_${title}`);
   },
   sortedAnalyticsData () {
+    const searchValue = Template.currentData().searchValue;
+
+    // Case: SearchName is specified
+    if (searchValue) {
+      // Display search result
+      return Template.instance().searchResult;
+    }
+    // Otherwise: display all data
     return Template.instance().sortedAnalyticsData.get();
   },
+  displayTable () {
+    const searchValue = Template.currentData().searchValue;
+
+    // Case: SearchName is specified
+    if (searchValue) {
+      // Get search data
+      const searchResult = Template.instance().searchResult;
+      // Display if table contains result
+      return searchResult && searchResult.length > 0;
+    }
+
+    // Otherwise display table is analytics data is not empty
+    const analyticsData = Template.currentData().analyticsData;
+
+    return analyticsData && analyticsData.length > 0;
+  },
+  count () {
+    const searchValue = Template.currentData().searchValue;
+
+    // Case: SearchName is specified
+    if (searchValue) {
+      // Display search result
+      return Template.instance().searchResult.length;
+    }
+    // Otherwise: display all data
+    return Template.currentData().analyticsData.length;
+  },
 });
 
 Template.dashboardSummaryStatistic.events({

apinf_packages/dashboard/client/view/view.html

@@ -5,23 +5,32 @@
 
 <template name="dashboardView">
   {{# if Template.subscriptionsReady }}
-    <!-- My APIs group -->
-    {{> dashboardSummaryStatistic title="myApis"
-      overviewChartResponse=overviewChartResponse
-      analyticsData=analyticsDataMyApis
-    }}
+    {{# if displayTables }}
+      <!-- My APIs group -->
+      {{> dashboardSummaryStatistic title="myApis"
+        overviewChartResponse=overviewChartResponse
+        analyticsData=analyticsDataMyApis
+        searchValue=searchValue
+      }}
 
-    <!-- Managed APIs group -->
-    {{> dashboardSummaryStatistic title="managedApis"
-      overviewChartResponse=overviewChartResponse
-      analyticsData=analyticsDataManagedApis
-    }}
+      <!-- Managed APIs group -->
+      {{> dashboardSummaryStatistic title="managedApis"
+        overviewChartResponse=overviewChartResponse
+        analyticsData=analyticsDataManagedApis
+        searchValue=searchValue
+      }}
 
-    <!-- Other APIs group -->
-    {{> dashboardSummaryStatistic title="otherApis"
-      overviewChartResponse=overviewChartResponse
-      analyticsData=analyticsDataOtherApis
-    }}
+      <!-- Other APIs group -->
+      {{> dashboardSummaryStatistic title="otherApis"
+        overviewChartResponse=overviewChartResponse
+        analyticsData=analyticsDataOtherApis
+        searchValue=searchValue
+      }}
+    {{ else }}
+      <p>
+        {{_ 'dashboardView_text_noApisFound' }}
+      </p>
+    {{/ if }}
   {{ else }}
     {{> spinner }}
   {{/ if }}

apinf_packages/dashboard/client/view/view.js

@@ -14,6 +14,8 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 // Npm packages imports
 import moment from 'moment';
 
+import Apis from '/apinf_packages/apis/collection';
+
 Template.dashboardView.onCreated(function () {
   // Get reference to template instance
   const instance = this;
@@ -96,4 +98,18 @@ Template.dashboardView.helpers({
   analyticsDataOtherApis () {
     return Template.instance().analyticsDataOtherApis.get();
   },
+  displayTables () {
+    const searchValue = Template.currentData().searchValue;
+
+    // Make sure searchValue exists
+    if (searchValue) {
+      const query = { name: { $regex: searchValue, $options: 'i' } };
+
+      // Display tables if result is not empty
+      return Apis.find(query).count() !== 0;
+    }
+
+    // Display tables by default
+    return true;
+  },
 });