Beautiful new styles for datacenter and database lists. Closes #1208, #…

…1215.

admin/static/coffee/namespaces/database.coffee

@@ -21,7 +21,6 @@ module 'DatabaseView', ->
         events: ->
             'click .tab-link': 'change_route'
             'click .close': 'close_alert'
-            'click .show-tables': 'show_tables'
             # operations in the dropdown menu
             'click .operations .rename': 'rename_database'
             'click .operations .delete': 'delete_database'
@@ -32,6 +31,7 @@ module 'DatabaseView', ->
             # Panels for database view
             @title = new DatabaseView.Title model: @model
             @profile = new DatabaseView.Profile model: @model
+            @namespace_list = new DatabaseView.NamespaceList model: @model
             @performance_graph = new Vis.OpsPlot(@model.get_stats_for_performance,
                 width:  564             # width in pixels
                 height: 210             # height in pixels
@@ -69,6 +69,9 @@ module 'DatabaseView', ->
             @.$('.profile').html @profile.render().$el
             @.$('.performance-graph').html @performance_graph.render().$el
 
+            # Add the namespace list
+            @.$('.table-list').html @namespace_list.render().$el
+
             return @
 
         close_alert: (event) ->
@@ -85,12 +88,6 @@ module 'DatabaseView', ->
             remove_database_dialog = new DatabaseView.RemoveDatabaseModal
             remove_database_dialog.render @model
 
-        # Pop up a modal to show assignments
-        show_tables: (event) =>
-            event.preventDefault()
-            modal = new DatabaseView.NamespaceListModal model: @model
-            modal.render()
-
         destroy: =>
             @title.destroy()
             @profile.destroy()
@@ -207,104 +204,32 @@ module 'DatabaseView', ->
 
             databases.remove @database_to_delete.get 'id'
 
-    class @NamespaceListModal extends UIComponents.AbstractModal
-        render: =>
-            @list = new DatabaseView.NamespaceList(model: @model)
-            $('#modal-dialog').html @list.render().$el
-            modal = $('.modal').modal
-                'show': true
-                'backdrop': true
-                'keyboard': true
-
-            modal.on 'hidden', =>
-                modal.remove()
-
     class @NamespaceList extends Backbone.View
-        className: 'database-overview modal overwrite_modal'
-
-        template: Handlebars.compile $('#database_overview-container-template').html()
+        template: Handlebars.compile $('#database_view-namespace_list-template').html()
 
         initialize: =>
-            @namespaces_list = []
-            @namespaces_view_list = []
-            namespaces.on 'add', @update_data
-            namespaces.on 'remove', @update_data
-            namespaces.on 'reset', @update_data
-            @update_data()
-
-        update_data: =>
-            need_update = false
-            new_namespaces_list = []
-            for namespace in namespaces.models
-                if namespace.get('database') is @model.get('id')
-                    new_namespaces_list.push namespace
-
-                    # Check if first time we see it
-                    found_namespace = false
-                    for namespace_in_db in @namespaces_list
-                        if namespace_in_db.get('id') is namespace.get('id')
-                            found_namespace = true
-                            break
-
-                    if found_namespace is false
-                        @namespaces_list.push namespace
-                        need_update = true
-
-            if need_update is false
-                if new_namespaces_list isnt @namespaces_list
-                    @namespaces_list = new_namespaces_list
-                    @render()
-            else
-                @namespaces_list = new_namespaces_list
-                @render()
-
+            namespaces.on 'change:shards', @render
+            namespaces.on 'change:primary_pinnings', @render
+            namespaces.on 'change:secondary_pinnings', @render
+            namespaces.on 'change:replica_affinities', @render
 
         render: =>
-            @.$el.html @template {}
-
-            for view in @namespaces_view_list
-                view.destroy()
-            @namespaces_view_list = []
-            @.$('.namespaces-list').html ''
-            for namespace in @namespaces_list
-                view = new DatabaseView.NamespaceView(model: namespace)
-                @namespaces_view_list.push view
-                @.$('.namespaces-list').append view.render().$el
-            if @namespaces_list.length is 0
-                @.$('.namespaces-list').html 'There is no table in this database.'
-
-
-            return @
-
-        destroy: =>
-            for view in @namespaces_view_list
-                view.destroy()
-            namespaces.off 'add', @update_data
-            namespaces.off 'remove', @update_data
-            namespaces.off 'reset', @update_data
-
-    class @NamespaceView extends Backbone.View
-        className: 'element-detail-container'
-        template: Handlebars.compile $('#database-namespace_view-template').html()
-
-        initialize: =>
-            @model.on 'change:shards', @render
-            @model.on 'change:primary_pinnings', @render
-            @model.on 'change:secondary_pinnings', @render
-            @model.on 'change:replica_affinities', @render
-
-        render: =>
-            json = _.extend DataUtils.get_namespace_status(@model.get('id')),
-                name: @model.get 'name'
-                id: @model.get 'id'
-            json.nreplicas += json.nshards
+            namespaces_in_db = []
+            # Collect info on namespaces in this database
+            namespaces.each (namespace) =>
+                if namespace.get('database') is @model.get('id')
+                    ns = _.extend DataUtils.get_namespace_status(namespace.get('id')),
+                        name: namespace.get 'name'
+                        id: namespace.get 'id'
+                    ns.nreplicas += ns.nshards
+                    namespaces_in_db.push ns
 
-            @.$el.html @template json
+            @.$el.html @template
+                tables: _.sortBy(namespaces_in_db, (namespace) -> namespace.name)
             return @
 
         destroy: =>
-            @model.off 'change:shards', @render
-            @model.off 'change:primary_pinnings', @render
-            @model.off 'change:secondary_pinnings', @render
-            @model.off 'change:replica_affinities', @render
-
+            namespaces.off 'change:shards'
+            namespaces.off 'change:primary_pinnings'
+            namespaces.off 'change:secondary_pinnings'
+            namespaces.off 'change:replica_affinities'

admin/static/coffee/namespaces/database.html

@@ -9,7 +9,6 @@
                 </ul>
             </div>
         </div>
-        <button class="btn show-tables">Show tables</button>
         <div class="main_title"></div>
         <div id="user-alert-space"></div>
         <div class="section statistics">
@@ -19,6 +18,7 @@ <h2 class="title">Statistics</h3>
                 <div class="span8 performance-graph"></div>
             </div>
         </div>
+        <div class="section table-list list-view"></div>
     </div>
 </script>
 
@@ -43,21 +43,17 @@ <h1 class="title">Database overview for {{name}}</h1>
     </div>
 </script>
 
-
-<script id="database_overview-container-template" type="text/x-handlebars-template">
-    <h3 class="title">Tables in this database</h3>
-    <div class="namespaces-list"></div>
-</script>
-
-
-<script id="database-namespace_view-template" type="text/x-handlebars-template">
-    <span class="status">{{humanize_namespace_reachability reachability}}</span>
-    <span class="name">    
-        <a href="#tables/{{id}}">{{name}}</a>
-    </span>
-    <p class="quick_info">
-    {{nshards}} {{pluralize_noun "shard" nshards}}, {{nreplicas}} {{pluralize_noun "replica" nreplicas}} on {{ndatacenters}} {{pluralize_noun "datacenter" ndatacenters}} across {{nmachines}} {{pluralize_noun "server" nmachines}}, replication: {{> backfill_progress_summary}}
-    </p>
+<script id="database_view-namespace_list-template" type="text/x-handlebars-template">
+    <h2 class="title">Tables in this database</h2>
+    <ul class="tables">
+        {{#each tables}}
+            <li class="table">
+                <p class="name"><a href="/#tables/{{id}}">{{name}}</a></p>
+                <p class="info"><span class="highlight">{{nshards}}</span> {{pluralize_noun "shard" nshards}}, <span class="highlight">{{nreplicas}}</span> {{pluralize_noun "replica" nreplicas}}</p>
+                <p class="status">{{humanize_namespace_reachability reachability}}</p>
+            </li>
+        {{/each}}
+    </ul>
 </script>
 
 <script id="remove_database-modal-template" type="text/x-handlebars-template">

admin/static/coffee/namespaces/index.coffee

@@ -155,8 +155,6 @@ module 'NamespaceView', ->
                 remove_database_dialog = new DatabaseView.RemoveDatabaseModal
                 remove_database_dialog.render db
 
-
-
         register_namespace_callback: (callbacks) =>
             @callbacks = callbacks
             @namespace_list.register_namespace_callbacks @callbacks

admin/static/coffee/namespaces/server_assignments.html

@@ -19,11 +19,11 @@ <h2 class="title">Servers used by this table</h2>
                             <div class="tree-node"></div>
                             <div class="server-info child-info">
                                 <p class="name"><a href="/#servers/{{id}}">{{name}}</a></p>
-                                <p class="num-primaries"><span class="highlight">{{num_primaries}}</span> primaries</p>
-                                <p class="num-secondaries"><span class="highlight">{{num_secondaries}}</span> secondaries</p>
+                                <p class="num-primaries"><span class="highlight">{{num_primaries}}</span> {{pluralize_noun "primary" num_primaries}}</p>
+                                <p class="num-secondaries"><span class="highlight">{{num_secondaries}}</span> {{pluralize_noun "secondary" num_secondaries}}</p>
                                 <p class="num-keys">
                                     {{#if num_keys}}
-                                        <span class="highlight">~{{num_keys}}</span> documents
+                                        <span class="highlight">~{{num_keys}}</span> {{pluralize_noun "document" num_keys}}
                                     {{else}}
                                         <span class="highlight">N/A</span> documents  
                                     {{/if}}

admin/static/coffee/servers/datacenter.coffee

@@ -18,9 +18,7 @@ module 'DatacenterView', ->
         template: Handlebars.compile $('#datacenter_view-container-template').html()
         events: ->
             'click .tab-link': 'change_route'
-            'click .display_more_machines': 'expand_profile'
             'click .close': 'close_alert'
-            'click .show-data': 'show_data'
             # operations in the dropdown menu
             'click .operations .rename': 'rename_datacenter'
             'click .operations .delete': 'delete_datacenter'
@@ -33,7 +31,7 @@ module 'DatacenterView', ->
             # Panels for datacenter view
             @title = new DatacenterView.Title model: @model
             @profile = new DatacenterView.Profile model: @model
-            @data = new DatacenterView.Data model: @model
+            @machine_list = new DatacenterView.MachineList model: @model
             @performance_graph = new Vis.OpsPlot(@model.get_stats_for_performance,
                 width:  564             # width in pixels
                 height: 210             # height in pixels
@@ -80,8 +78,8 @@ module 'DatacenterView', ->
             @.$('.profile').html @profile.render().$el
             @.$('.performance-graph').html @performance_graph.render().$el
 
-            # display the data on the datacenter
-            @.$('.data').html @data.render().$el
+            # display a list of servers
+            @.$('.server-list').html @machine_list.render().$el
 
             @.$('.performance-graph').html @performance_graph.render().$el
 
@@ -93,23 +91,10 @@ module 'DatacenterView', ->
 
             return @
 
-        expand_profile: (event) ->
-            event.preventDefault()
-            @profile.more_link_should_be_displayed = false
-            @.$('.more_machines').remove()
-            @.$('.profile-expandable').css('overflow', 'auto')
-            @.$('.profile-expandable').css('height', 'auto')
-
         close_alert: (event) ->
             event.preventDefault()
             $(event.currentTarget).parent().slideUp('fast', -> $(this).remove())
 
-        # Pop up a modal to show assignments
-        show_data: (event) =>
-            event.preventDefault()
-            modal = new DatacenterView.DataModal model: @model
-            modal.render()
-
         rename_datacenter: (event) =>
             event.preventDefault()
             rename_modal = new UIComponents.RenameItemModal @model.get('id'), 'datacenter'
@@ -123,7 +108,7 @@ module 'DatacenterView', ->
         destroy: =>
             @title.destroy()
             @profile.destroy()
-            @data.destroy()
+            @machine_list.destroy()
             @performance_graph.destroy()
             @logs.destroy()
 
@@ -319,21 +304,46 @@ module 'DatacenterView', ->
             window.app.index_servers
                 alert_message: "The datacenter #{name} was successfully deleted."
 
-    class @DataModal extends UIComponents.AbstractModal
+    class @MachineList extends Backbone.View
+        template: Handlebars.compile $('#datacenter_view-machine_list-template').html()
+
+        initialize: =>
+            machines.on 'change:name', @render
+            directory.on 'all', @render
+            namespaces.on 'change:blueprint', @render
+
         render: =>
-            @data = new DatacenterView.Data(model: @model)
-            $('#modal-dialog').html @data.render().$el
-            modal = $('.modal').modal
-                'show': true
-                'backdrop': true
-                'keyboard': true
+            # Filter a list of machines in this datacenter
+            machines_in_dc = machines.filter (machine) => machine.get('datacenter_uuid') is @model.get('id')
+            # Collect basic info on machines in this datacenter-- we'll count up the primaries and secondaries shortly
+            data_on_machines = {}
+            for machine in machines_in_dc
+                data_on_machines[machine.get('id')] =
+                    name: machine.get('name')
+                    id: machine.get('id')
+                    num_primaries: 0
+                    num_secondaries: 0
+                    status: DataUtils.get_machine_reachability(machine.get('id'))
+
+            # Count up the number of primaries and secondaries for each machine across all tables
+            namespaces.each (namespace) =>
+                for machine_id, peer_roles of namespace.get('blueprint').peers_roles
+                    if data_on_machines[machine_id]?
+                        for shard, role of peer_roles
+                            machine = data_on_machines[machine_id]
+                            machine.num_primaries += 1 if role is 'role_primary'
+                            machine.num_secondaries += 1 if role is 'role_secondary'
+
+            @.$el.html @template
+                servers: _.sortBy(data_on_machines, (machine) -> machine.name)
+            return @
 
-            modal.on 'hidden', =>
-                modal.remove()
+        destroy: =>
+            machines.off 'change:name'
+            directory.off 'all'
+            namespaces.off 'change:blueprint'
 
     class @Data extends Backbone.View
-        className: 'datacenter-data-view modal overwrite_modal'
-        template: Handlebars.compile $('#datacenter_view_data-template').html()
 
         initialize: =>
             @namespaces_with_listeners = {}

admin/static/coffee/servers/datacenter.html

@@ -9,7 +9,6 @@
                 </ul>
             </div>
         </div>
-        <button class="btn show-data">Show data in this datacenter</button>
         <div class="main_title"></div>
         <div id="user-alert-space"></div>
         <div class="section statistics">
@@ -19,6 +18,7 @@ <h2 class="title">Statistics</h3>
                 <div class="span8 performance-graph"></div>
             </div>
         </div>
+        <div class="section server-list list-view"></div>
         <div class="recent-log-entries"></div>
     </div>
 </script>
@@ -50,7 +50,20 @@ <h1 class="error-title">Error</h1>
     </div>
 </script>
 
-<script id="datacenter_view_data-template" type="text/x-handlebars-template">
+<script id="datacenter_view-machine_list-template" type="text/x-handlebars-template">
+    <h2 class="title">Servers in this datacenter</h2>
+    <ul class="servers">
+        {{#each servers}}
+            <li class="server">
+                <p class="name"><a href="/#servers/{{id}}">{{name}}</a></p>
+                <p class="info">{{num_primaries}} {{pluralize_noun "primary" num_primaries}}, {{num_secondaries}} {{pluralize_noun "secondary" num_secondaries}}</p>
+                <p class="status">{{humanize_machine_reachability status}}</p>
+            </li>
+        {{/each}}
+    </ul>
+</script>
+
+<script id="datacenter_view_OLD_data-template" type="text/x-handlebars-template">
     <h3 class="title">Data in this datacenter</h3>
     {{#unless data.namespaces}}
     <p>No data found in this datacenter.</p>