Permalink
Browse files

structural improvments supporting stataefulness and new table widget

  • Loading branch information...
1 parent 4da6218 commit 20d6dd7a4a44eb4ca3f8e13ff7e65fb88263fc57 @mobz committed Feb 2, 2011
Showing with 206 additions and 54 deletions.
  1. +2 −0 index.html
  2. +42 −47 lib/es-widgets.js
  3. +35 −7 lib/es.css
  4. +13 −0 lib/jsacx-data.js
  5. +31 −0 lib/jsacx-widgets.css
  6. +83 −0 lib/jsacx-widgets.js
View
@@ -5,9 +5,11 @@
<meta charset="UTF-8">
<title>ElasticSearch Head</title>
<link rel="stylesheet" href="lib/es.css">
+ <link rel="stylesheet" href="lib/jsacx-widgets.css">
<script src="lib/jquery.js"></script>
<script src="lib/jsacx.js"></script>
<script src="lib/lang/en_strings.js"></script>
+ <script src="lib/jsacx-data.js"></script>
<script src="lib/jsacx-widgets.js"></script>
<script src="lib/es-widgets.js"></script>
<script>
View
@@ -92,71 +92,59 @@
},
init: function(parent) {
this._super();
- this.summaryEl = $(this._summary_template());
- this.tableEl = $(this._table_template());
- this.el = $(this._main_template());
this.config.results && this.setResults(this.config.results);
+ this.table = new acx.ui.Table(parent, {store: this.store, height: 300, width: $(parent).innerWidth()});
+ this.el = this.table.el;
this.appendTo(parent);
},
+ appendTo: function(parent) {
+ this.table.appendTo(parent);
+ },
setResults: function(res) {
- var hits = res.hits.hits, headers = (function(path, spec, headers) {
+ var columns = (function(path, spec, headers) {
for(var prop in spec) {
- acx.isObject(spec[prop]) ? arguments.callee(path.concat(prop), spec[prop], headers) : headers.push(path.concat(prop));
+ acx.isObject(spec[prop]) ? arguments.callee(path.concat(prop), spec[prop], headers) : headers.push({ name: prop, path: path.concat(prop)});
}
return headers;
- })([], hits[0], []);
- this.summaryEl.text(acx.text("TableResults.Summary", res._shards.successful, res._shards.total, res.hits.total));
- this.tableEl.find(" > THEAD").replaceWith(this._headers_template(headers));
- this.tableEl.find(" > TBODY").replaceWith(this._body_template(headers, hits));
- },
- _main_template: function() {
- return { tag: "DIV", cls: "es-tableResults", children: [
- this.summaryEl,
- this.tableEl
- ]};
- },
- _summary_template: function(results) {
- return { tag: "DIV" };
- },
- _table_template: function(results) {
- return { tag: "TABLE", children: [
- { tag: "THEAD" },
- { tag: "TBODY" }
- ]};
- },
- _headers_template: function(headers) {
- return { tag: "THEAD", child: { tag: "TR", children: headers.map(function(h) {
- return { tag: "TH", text: h.join(".") };
- }) } };
- },
-
- _body_template: function(headers, hits) {
- return { tag: "TBODY", children: hits.map(function(hit) {
- return { tag: "TR", children: headers.map(function(header) {
- return { tag: "TD", text: header.reduce(function(e, h) { return e[h]; }, hit).toString() }
- })}
- })};
+ })([], res.hits.hits[0], []);
+
+ // create a temporary anonymous DataSource (will fix this up later - DataSourceInterface needs to become async)
+ this.store = new (acx.data.DataSourceInterface.extend({
+ getCount: function() { return res.hits.total; },
+ getColumns: function() { return columns; },
+ getData: function() {
+ return res.hits.hits.map(function(hit) {
+ return columns.reduce(function(row, column) {
+ row[column.name] = column.path.reduce(function(e, h) { return e[h]; }, hit).toString();
+ return row;
+ }, {});
+ });
+ }
+ }))();
+ this.table && this.table.setResults(this.store);
}
});
es.BoolQuery = acx.ux.Observable.extend({
defaults: {
- from: 0,
- size: 10
+ size: 50 // size of pages to return
},
init: function() {
this._super();
this.refuid = 0;
this.refmap = {};
this.search = {
query: { bool: { must: [], must_not: [], should: [] } },
- from: this.config.from,
+ from: 0,
size: this.config.size,
sort: [],
facets: {}
};
this.defaultClause = this.addClause();
},
+ setPage: function(page) {
+ this.search.from = this.config.size * (page - 1) + 1;
+ },
addClause: function(value, field, op, bool) {
bool = bool || "should";
op = op || "match_all";
@@ -385,6 +373,7 @@
base_uri: this.config.base_uri
});
this.el = $(this._main_template());
+ this.out = this.el.find("DIV.es-out");
this.appendTo(parent);
},
@@ -406,7 +395,7 @@
},
_tableResults_handler: function(results) {
- this.el.find("DIV.es-out").empty().append(new es.TableResults({ results: results }));
+ new es.TableResults(this.out.empty(), { results: results });
},
_searchSource_handler: function(src) {
@@ -465,7 +454,7 @@
},
_search_handler: function() {
- var search = new es.BoolQuery({});
+ var search = new es.BoolQuery();
this.fire("staringSearch");
this.filtersEl.find(".es-filterBrowser-row").each(function(i, row) {
var row = $(row);
@@ -611,7 +600,7 @@
es.Browser = es.AbstractQuery.extend({
init: function(parent) {
this._super();
- this.resultTable = new es.TableResults({});
+ this.resultTable = null; //new es.TableResults();
this.el = $(this._main_template());
this.appendTo(parent);
this.readMetaData();
@@ -623,6 +612,14 @@
success: this._clusterState_handler
});
},
+ setResults: function(res) {
+ if(res !== null) {
+ if(!this.resultTable) {
+ this.resultTable = new es.TableResults(this.el.find(".es-browserTable"), {});
+ }
+ this.resultTable.setResults(res);
+ }
+ },
_clusterState_handler: function(state) {
function createMapping(prop, n) {
return acx.extend( { index_name: n, core_type: coretype_map[prop.type] }, default_property_map[coretype_map[prop.type]], prop );
@@ -713,16 +710,15 @@
path: index + "/" + types.join(",") + (types.length ? "/" : "") + "_search",
data: search.getData(),
success: function(res) {
- if(res !== null)
- this.resultTable.setResults(res);
+ this.setResults(res);
}.bind(this)
});
},
_main_template: function() {
return { tag: "DIV", cls: "es-browser", children: [
{ tag: "DIV", cls: "es-browserFilter" },
- this.resultTable
+ { tag: "DIV", cls: "es-browserTable" }
] };
},
_browserFilter_template: function() {
@@ -744,7 +740,6 @@
_metaFilters_template: function(index) {
console.log("_metaFilters_template");
return { tag: "DIV", children: acx.eachMap(index.metadata, function(field, meta) {
- console.log("out", field, meta);
return { tag: "DIV", children: [
field,
this._metaFilter_templates[meta.core_type](meta, this._filterChange_handler)
View
@@ -106,7 +106,7 @@ SELECT {
color: #382929;
}
-.es-browser .es-tableResults {
+.es-browserTable {
margin-left: 360px;
}
@@ -128,17 +128,45 @@ SELECT {
background-color: #dda3a3;
}
-.es-tableResults TABLE {
- border-collapse: collapse;
- border: 1px solid #dadde6;
+.uiTable {
+ border: 1px solid #bbb;
+}
+
+.uiTable-header-row {
+ background: #ddd;
+ background: -moz-linear-gradient(top, #eee, #ccc);
+ background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
+}
+
+.uiTable-headercell-text {
+ margin-right: 20px;
+}
+
+.uiTable-headercell-menu {
+ display: none;
}
-.es-tableResults TABLE TD, .es-tableResults TABLE TH {
- padding: 2px 4px;
+.uiTable-header-row TH {
+ border-right: 1px solid #bbb;
+ padding: 0;
text-align: left;
}
-.es-tableResults TABLE TR:nth-child(even) {
+.uiTable-header-row TH > DIV {
+ padding: 3px 4px;
+ border-right: 1px solid #eee;
+}
+
+.uiTable-headerEndCap > DIV {
+ width: 19px;
+}
+
+.uiTable TABLE TD {
+ border-right: 1px solid transparent;
+ padding: 3px 4px;
+}
+
+.uiTable-body TABLE TR:nth-child(even) {
background: #f3f3f3;
}
View
@@ -0,0 +1,13 @@
+acx.data = {};
+
+/**
+ * An abstract interface for delivering data to a data consumer (eg acx.ui.Table)
+ */
+acx.data.DataSourceInterface = acx.Class.extend({
+ // returns total number of items available
+ getCount: function() { return 0; },
+ // returns an array of columns specifications
+ getColumns: function() { return [{ name: "", type: "" }]; },
+ // return an array of objects containing data
+ getData: function(spec) { return [{}]; }
+});
View
@@ -0,0 +1,31 @@
+.uiTable TABLE {
+ border-collapse: collapse;
+}
+
+.uiTable-body {
+ overflow-y: scroll;
+ overflow-x: auto;
+}
+
+.uiTable-headers {
+ overflow-x: hidden;
+}
+
+.uiTable-body TD {
+ white-space: nowrap;
+}
+
+.uiTable-body .uiTable-header-row TH,
+.uiTable-body .uiTable-header-row TH DIV {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+.uiTable-body .uiTable-header-cell > DIV {
+ height: 0;
+ overflow: hidden;
+}
+
+.uiTable-headercell-menu {
+ float: right;
+}
View
@@ -217,3 +217,86 @@ acx.ui.Widget = acx.ux.Observable.extend({
}
});
+/**
+ * widget for showing tabular data
+ * @constructor
+ */
+acx.ui.Table = acx.ui.Widget.extend({
+ defaults: {
+ store: null, // (required) implements interface acx.data.DataSourceInterface
+ height: 0,
+ width: 0
+ },
+ init: function(parent) {
+ this._super();
+ this.initElements(parent);
+ this.config.store && this.setResults(this.config.store);
+ },
+ appendTo: function(parent) {
+ if(parent) {
+ this._super(parent);
+ this._reflow();
+ }
+ },
+ initElements: function(parent) {
+ this.el = $(this._main_template());
+ this.body = this.el.find(".uiTable-body");
+ this.headers = this.el.find(".uiTable-headers");
+ this.appendTo(parent);
+ },
+ setResults: function(store) {
+ var columns = store.getColumns();
+ var data = store.getData({ start: 0, count: 10 });
+ this.headers.empty().append(this._header_template(columns));
+ this.body.empty().append(this._body_template(data, columns));
+ this._reflow();
+ },
+ _reflow: function() {
+ var firstCol = this.body.find("TR:first TH.uiTable-header-cell > DIV"),
+ headers = this.headers.find("TR:first TH.uiTable-header-cell > DIV");
+ for(var i = 0; i < headers.length; i++) {
+ $(headers[i]).width( $(firstCol[i]).width() );
+ }
+ },
+ _scroll_handler: function(jEv) {
+ this.el.find(".uiTable-headers").scrollLeft($(jEv.target).scrollLeft());
+ },
+ _main_template: function() {
+ return { tag: "DIV", id: this.id(), cls: "uiTable", children: [
+ { tag: "DIV", cls: "uiTable-headers", css: { width: this.config.width + "px" } },
+ { tag: "DIV", cls: "uiTable-body",
+ onScroll: this._scroll_handler,
+ css: { height: this.config.height + "px", width: this.config.width + "px" }
+ }
+ ] };
+ },
+ _header_template: function(columns) {
+ var ret = { tag: "TABLE", child: this._headerRow_template(columns) }
+ ret.child.children.push(this._headerEndCap_template());
+ return ret;
+ },
+ _headerRow_template: function(columns) {
+ return { tag: "TR", cls: "uiTable-header-row", children: columns.map(function(column) {
+ return { tag: "TH", cls: "uiTable-header-cell", children: [
+ { tag: "DIV", children: [
+ { tag: "DIV", cls: "uiTable-headercell-menu", text: "\u25bc"},
+ { tag: "DIV", cls: "uiTable-headercell-text", text: column.name }
+ ]}
+ ]};
+ })};
+ },
+ _headerEndCap_template: function() {
+ return { tag: "TH", cls: "uiTable-headerEndCap", child: { tag: "DIV" } };
+ },
+ _body_template: function(data, columns) {
+ return { tag: "TABLE", children: []
+ .concat(this._headerRow_template(columns))
+ .concat(data.map(function(row) {
+ return { tag: "TR", cls: "uiTable-row", children: columns.map(function(column){
+ return { tag: "TD", cls: "uiTable-cell", child: { tag: "DIV", text: (row[column.name] || "").toString() } };
+ })};
+ }))
+ };
+ }
+
+});

0 comments on commit 20d6dd7

Please sign in to comment.