Confirmed users
353
edits
Auto-tools/Projects/BugHunter: Difference between revisions
→Data Sources
| (20 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
= Team = | = Team = | ||
Bob Clary (bc) - Responsibilities include | Bob Clary (bc) - Responsibilities include all things data'ish. | ||
Jonathan Eads (jeads) - Responsibilities include | Jonathan Eads (jeads) - Responsibilities include all things web'ish. | ||
Mark Cote (mcote) - Responsibilities include | Mark Cote (mcote) - Responsibilities include all things admin web'ish. | ||
= Overview = | = Overview = | ||
| Line 59: | Line 59: | ||
==== Data Sources ==== | ==== Data Sources ==== | ||
A python module called datasource | A python module called datasource was used for all SQL/Database interactions (https://github.com/jeads/datasource). Datasource provides an interface to MySQL that allows SQL to be stored in a JSON file with an associated name and host_type (master, read_only, etc...). In order to send signals between data views portions of SQL had to be generated dynamically, this is managed by the datasource module to keep SQL munging out of the webservice and to provide a single location where all static SQL can be found (python/sisyphus/webapp/procs/bughunter.json). This allows SQL statements to be treated as "stored procedures", all statements are assigned a name and are suitable for re-use by other scripts. | ||
==== JSON Config Files ==== | ==== JSON Config Files ==== | ||
| Line 228: | Line 228: | ||
=== User Interface === | === User Interface === | ||
The javascript that implements the user interface is constructed using a page/component/collection pattern... whatever that means. | The javascript that implements the user interface is constructed using a page/component/collection pattern thingy... whatever that means. This was found very useful in separating out the required functionality, below is a brief definition of what that means in bughunter. | ||
==== Class Definitions ==== | ==== Class Definitions ==== | ||
'''Page:''' Manages the DOM ready event. An instance of the page class is the only global variable that other components can access. The page class instance is responsible for instantiating components and storing them in attributes. The page class also holds any data structures that need to be globally accessible to | '''Page:''' Manages the DOM ready event, implements any top level initialization that's required for the page. An instance of the page class is the only global variable that other components can access, if they're playing nice. The page class instance is responsible for instantiating components and storing them in attributes. The page class also holds any data structures that need to be globally accessible to component classes. | ||
'''Component:''' Contains the public interface of the component. The component will typically have an instance of a View and Model class. The component is responsible for event binding. | '''Component:''' Contains the public interface of the component. A component can encapsulate any functional subset/unit provided in a page. The component will typically have an instance of a View and Model class. The component class is also responsible for any required event binding. | ||
'''View:''' A component's view class manages interfacing with the DOM. Any CSS class names or HTML id's are defined as attributes of the view. Any HTML element modification is controlled with this class. | '''View:''' A component's view class manages interfacing with the DOM. Any CSS class names or HTML id's are defined as attributes of the view. Any HTML element modification is controlled with this class. | ||
| Line 240: | Line 240: | ||
'''Collection:''' A class for managing a collection of Components or classes of any type. A collection can also have a model/view if appropriate. | '''Collection:''' A class for managing a collection of Components or classes of any type. A collection can also have a model/view if appropriate. | ||
==== Class Structure ==== | |||
This is not a complete file or class listing but is intended to give a top level description of the design pattern thingy of the bughunter javascript and what the basic functional responsibility of the pages/components/collections are. See the README for more details. | |||
BughunterPage.js | |||
BughunterPage Class - Manages the DOM ready event, component initialization, and | |||
retrieval of the views.json structure that is used by different | |||
components. | |||
Bases.js | |||
Design Pattern Base Classes - Contains the base classes for Page, Component, Model, View etc... | |||
BHViewComponent.js | |||
BHViewComponent Class - Encapsulates the behavior of a single data view using a model/view and | |||
provides a public interface for data view functionality. Manages | |||
event binding and registration. | |||
BHViewView Class - Encapsulates all DOM interaction required by a data view. | |||
BHViewModel Class - Encapsulates asynchronous server communication and data structure | |||
manipulation/retrieval. | |||
BHViewCollection.js | |||
BHViewCollection Class - Manages operations on a collection of data views using a model/view | |||
including instantiating view collections. | |||
BHViewCollectionView Class - Encapsulates all DOM interaction required by the collection. | |||
BHViewCollectionModel Class - Provides an interface to the datastructures holding all data | |||
views and their associated parent/child relationships. | |||
DataAdapterCollection.js | |||
DataAdapterCollection Class - Collection of BHViewAdapter class instances. | |||
BHViewAdapter Class - Base class for all BHViewAdapters. Manages shared view | |||
idiosyncratic behavior like what fields go in the | |||
control panel and how to populate/retrieve them for | |||
signaling behavior. | |||
CrashesAdapter Class - Derived class of BHViewAdapter. Encapsulates unique | |||
behavior for crash data views. | |||
UrlAdapter Class - Derived class of BHViewAdapter. Encapsulates unique behavior | |||
for views containing URL summaries. | |||
ConnectionsComponent.js | |||
ConnectionsComponent Class - Provides a public interface for opening new views via events. | |||
ConnectionsView Class - Encapsulates all DOM interactions required by the | |||
Open New View modal window. | |||
VisualizationCollection.js | |||
VisualizationCollection Class - Holds a collection of classes that can | |||
represent data views graphically. | |||
Visualization Class - Base class for managing shared functionality between | |||
data view graphics rendering classes. | |||
PlatformTree Class - Derived class of Visualization. Renders tabular | |||
data for Crashes, Assertions, and Valgrinds as a | |||
circular tree. | |||
=== Database === | === Database === | ||
The sisyphus schema can be found | The sisyphus schema can be found at [[Media:Sisyphus_schema.pdf]]. This pdf is not up to date but is useful in getting an idea of what data is available. | ||
= Implementation = | = Implementation = | ||
== Client == | |||
The following list of javascript packages were used as core infrastructure pieces in the bughunter client architecture. | |||
* [http://jquery.com/ jQuery] - For DOM interactions | |||
* [http://moo4q.com/ moo4q] - For OOP in jQuery. All bughunter classes are built using this strategy. | |||
* [http://datatables.net/ datatables.js]- This jquery plugin was used for all tabular display of data. It's pretty awesome. | |||
* [http://documentcloud.github.com/underscore/ underscore.js] - This javascript module was used for some algorithms/datastructures and maintaining function context in event binding... among other things. | |||
* [http://thejit.org/ jit] - This data visualization javascript module was used for the Platform Tree representation. It absolutely rocks for representing hierarchical/graph type data. | |||
* [http://people.mozilla.com/~mcote/bughunter/BughunterFunctionalSpecification.pdf UI specification], This was the original functional spec that was developed at the beginning of this project. It's mildly entertaining to see how it deviates from the final product. | |||
== Webservice == | |||
* [http://nginx.org/ nginx] - Used as the web server. | |||
* [http://www.fastcgi.com fastcgi] - Used for running django. | |||
* [http://nginx.org/ django] - Used as the web framework. | |||
* [https://github.com/jeads/datasource datasource] - Used for encapsulation and dynamic generation of SQL with MySQL. | |||
* | == Database == | ||
* MySQL | |||