Add menu item for adding a cluster to razee

imports/startup/client/index.js

@@ -403,4 +403,8 @@ Template.registerHelper('getClusterNameById', (clusterId) => {
     return cluster.metadata.name || clusterId;
 });
 
+Template.registerHelper('org', () => {
+    return Orgs.findOne({ name: FlowRouter.getParam('baseOrgName') });
+});
+
 import './routes.js';

imports/ui/components/addCluster/component.html

@@ -0,0 +1,27 @@
+<template name="addCluster">
+    <div class="modal js-add-cluster-modal" tabindex="-1" role="dialog">
+      <div class="modal-dialog modal-xl" role="document">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title">Run this command in your cluster</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                  </button>
+              </div>
+              <div id="add-cluster-modal" class="modal-body">
+                  <div class="col-sm-12">
+                    <div class="input-group mb-3">
+                      <code class="form-control text-truncate" id="add-cluster">kubectl create -f "{{clusterYamlUrl (firstOrgKey org)}}"</code>
+                      <div class="input-group-append">
+                        <button class="btn btn-primary copy-button" type="button" data-clipboard-text="kubectl create -f &quot;{{clusterYamlUrl (firstOrgKey org)}}&quot;">Copy</button>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+              <div class="modal-footer">
+                  <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
+              </div>
+          </div>
+      </div>
+    </div>
+  </template>

imports/ui/components/addCluster/index.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2019 IBM Corp. All Rights Reserved.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import './component.html';
+
+import { Template } from 'meteor/templating';
+import Clipboard from 'clipboard';
+
+Template.addCluster.onRendered( () => {
+    new Clipboard('.copy-button', {
+        container: document.getElementById('add-cluster-modal')
+    });
+});

imports/ui/layouts/body/body.html

@@ -22,7 +22,19 @@
                     {{> nav}}
                         <div class="container-fluid px-0">
                             {{> breadcrumbs }}
-                            {{> Template.dynamic template=main}}
+                            {{#if hasRazeeData}}
+                              {{> Template.dynamic template=main}}
+                            {{else}}
+                                <div class="card">
+                                    <div class="card-header cardHeader d-flex no-block">
+                                        <h5 class="text-muted my-0">No data</h5>
+                                    </div>
+                                    <div class="card-body p-1">
+                                        <div class="m-3">No clusters were found in Razee. Go to the <i class="fa fa-cog m-1 text-muted"></i> settings menu to add a cluster.
+                                        </div>
+                                    </div>
+                                </div>
+                            {{/if}}
                         </div>
                     {{> footer}}
                 {{else}}

imports/ui/layouts/body/body.js

@@ -19,6 +19,8 @@ import './nav.html';
 import './body.html';
 import './footer.html';
 import '../../pages/login';
+import '../../components/addCluster';
+
 import { Meteor } from 'meteor/meteor';
 import { Session } from 'meteor/session';
 import { FlowRouter } from 'meteor/kadira:flow-router';
@@ -27,6 +29,7 @@ import { Tracker } from 'meteor/tracker';
 import _ from 'lodash';
 import { Template } from 'meteor/templating';
 import { Stats } from '/imports/api/stat/stats.js';
+import { Clusters } from '/imports/api/cluster/clusters/clusters';
 import { Breadcrumb } from 'meteor/ahref:flow-router-breadcrumb';
 
 import { hasOrgsDefined } from '../../../startup/client';
@@ -46,9 +49,9 @@ Template.Base_layout.helpers({
 Template.Base_layout.onRendered(function() {
     this.autorun(()=>{
         this.subscribe('userData');
+        this.subscribe('clusters.org', Session.get('currentOrgId'));
         var orgName = Session.get('currentOrgName');
         this.subscribe('orgIdByName', orgName);
-
         Meteor.call('hasOrgs', function(err, result) {
             hasOrgsDefined.set(result);
         });
@@ -78,6 +81,11 @@ Template.Base_layout.helpers({
     currentOrgName(){
         return Session.get('currentOrgName');
     },
+    hasRazeeData () {
+        const clusters = Clusters.find({ org_id: Session.get('currentOrgId')}).count();
+        return (clusters > 0) ? true : false;
+    }
+
 });
 
 Template.nav.helpers({
@@ -128,9 +136,38 @@ Template.nav.events({
     },
     'click a' () {
         $('.navbar-collapse').collapse('hide');
+    },
+    'click .navbar' () {
+        $('#js-settingsDropdown').popover('dispose');
+    },
+    'click .js-add-cluster'(e){
+        e.preventDefault();
+        const $modal = $('.js-add-cluster-modal');
+        $modal.modal('show');
+        return false;
     }
 });
 
+Template.nav.onRendered(function() {
+    let statsSubscription = this.subscribe('resourceStats', Session.get('currentOrgId'));
+    Tracker.autorun(()=> {
+        if(statsSubscription.ready()) {
+            const numberOfClusters =  (_.get(Stats.findOne({org_id:Session.get('currentOrgId')}), 'clusterCount') || 0).toLocaleString();
+            if(numberOfClusters === '0') {
+                const options = {
+                    container: '.js-settings',
+                    placement: 'bottom',
+                    trigger: 'focus'
+                };
+                $('#js-settingsDropdown').popover(options);
+                $('#js-settingsDropdown').popover('show');
+            } else {
+                $('#js-settingsDropdown').popover('dispose');
+            }
+        }
+    });
+});
+
 Template.nav.onCreated(function() {
     this.autorun(() => {
         Meteor.call('reloadUserOrgList');
@@ -141,7 +178,6 @@ Template.nav.onCreated(function() {
             hasOrgsDefined.set(false);
         }
         if(Session.get('currentOrgId')) {
-            this.subscribe('resourceStats', Session.get('currentOrgId'));
             Meteor.call('updateResourceStats', Session.get('currentOrgId'));
         }
         this.subscribe('userData');

imports/ui/layouts/body/nav.html

@@ -55,7 +55,24 @@
         {{/if}}
       </ul>
 
-      <ul class="navbar-nav">
+      <ul class="navbar-nav js-settings">
+      {{#if org}}
+        <li class="nav-item dropdown">
+          <a tabindex="0" class="nav-link" href="#" id="js-settingsDropdown" title="Razee" data-content="Add a cluster to RazeeDash" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <i class="text-muted fa fa-cog"></i>
+          </a>
+          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="js-settingsDropdown">
+            {{#if hasOrgsDefined }}	
+                <a class="dropdown-item js-add-cluster" data-toggle="tooltip"  href="">	
+                  <i class="text-muted fa fa-plus-circle" aria-hidden="true"></i> Add a cluster
+                </a>	
+              <a class="dropdown-item" href="{{pathFor 'org' baseOrgName=org.name}}">	
+                <i class="text-muted fa fa-users" aria-hidden="true"></i> Manage Org</a>	
+            {{/if}}
+          </div>
+        </li>
+      {{/if}}
+
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {{#if localUser}}
@@ -79,6 +96,9 @@
       {{/if}}
     </div>
   </header>
+  {{#if org}}	
+    {{> addCluster org=org}}
+  {{/if}}
 </template>
 
 <template name="nav_org_dropdown">

imports/ui/pages/welcome/page.html

@@ -36,16 +36,6 @@
                         {{> inactiveClusters}}
                     </div>
                 </div>
-            {{else}}
-                <div class="container row mb-2 mt-4">To view cluster data in RazeeDash you'll first need to run this command in your cluster:</div>
-                <div class="row">
-                    <div class="col-sm-10">
-                        <div class="input-group mb-3">
-                            <code class="form-control text-truncate">kubectl create -f "{{clusterYamlUrl (firstOrgKey org)}}"</code>
-                            <button class="btn btn-primary copy-button" type="button" data-clipboard-text="kubectl create -f &quot;{{clusterYamlUrl (firstOrgKey org)}}&quot;">Copy</button>
-                        </div>
-                    </div>
-                </div>
             {{/if}}
         </div>
     {{/if}}

imports/ui/style/_variables.scss

@@ -371,7 +371,7 @@ $table-left-padding: 1.25rem;
 // $btn-block-spacing-y:            .5rem !default;
 //
 // // Allows for customizing button radius independently from global border radius
-// $btn-border-radius:              $border-radius !default;
+$btn-border-radius-sm:              0 !default;
 // $btn-border-radius-lg:           $border-radius-lg !default;
 // $btn-border-radius-sm:           $border-radius-sm !default;
 //
@@ -537,6 +537,7 @@ $table-left-padding: 1.25rem;
 //
 // $dropdown-item-padding-y:        .25rem !default;
 // $dropdown-item-padding-x:        1.5rem !default;
+$dropdown-item-padding-x:        1rem !default;
 //
 // $dropdown-header-color:          $gray-600 !default;
 //