html/Tutorial03-Bug-Count.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<HTML>
<HEAD>
    <!--DYNAMICALLY LOAD ALL JAVASCRIPT (SLOW, BUT PROGRAMMER FRIENDLY)-->
    <script type="text/javascript" src="modevlib/imports/import.js"></script>
</HEAD>
<BODY>

<div id="sidebar" style="width:300px;">
    <br>
    <br>

    <div style="height: 30px; text-align: center;vertical-align:middle;">
        <span id="status" style="height:30px"></span><span class="loading"><img src="images/spinner.gif" alt=""></span>
    </div>
    <hr>
    <div id="description">Simple page to show bug counts over time<br><br>
    Open your debugger to inspect the ES queries and responses.
    </div>
    <hr>
    <div id="parameters" class="parameters">
    </div>
    <div id="filters" class="menu"></div>
</div>

<div style="float:right;display: inline;">
    <a href="http://people.mozilla.com/~klahnakoski/" class="button">HOME</a>
</div>
<div style="align:left;position:relative;float:left;width:800px;">
    <h3 id="title">Simple Bug Count</h3>

    <div id="chartCount" class="chart" style="float:none;width:800px;height:300px;"></div>
</div>


<script type="application/javascript">
    importScript('modevlib/main.js', function () {
        //WHEN IMPORTS ARE COMPLETE, THIS FUNCTION IS RUN

        //WE WILL PASS createChart TO THE GUI.setup() BELOW
        let createChart = function () {
            //THE GUI.state HAS THE CURRENT ATTRIBUTE VALUES SET BY USER
            let sampleMin = Date.newInstance(GUI.state.sampleMin);
            let sampleMax = Date.newInstance(GUI.state.sampleMax).addDay(1);
            let sampleInterval = Duration.newInstance(GUI.state.sampleInterval);

            let mainFilter = {"and": [
                GUI.getFilters("bugs"),
                Mozilla.BugStatus.Open.esfilter   //SEE Dimension-Bugzilla TO SEE MORE COMPLICATED DEFINITIONS
            ]};

            Thread.run(function*(){  //jsThreads ARE GREAT BECAUSE WE DO NOT NEED CALLBACKS
                let chart = yield (ActiveDataQuery.run({
                    "name": "Open Bug Count",  //HUMANE NAME FOR THIS DATASET
                    "from": "private_bugs",  //ESQuery.INDEXES MAPS NAMES TO ES CONNECTION INFO
                    "select": {  // JUST LIKE SQL: SELECT COUNT(bug_id) AS num_bug
                        "name": "num_bug",
                        "value": "bug_id",
                        "aggregate": "count"
                    },
                    "edges": [  //ONE DIMENSION OVER TIME
                        {"name": "date",
                            "range": {  //THE INDEX STORES BUG SNAPSHOTS VALID FROM modified_ts TO expires_on
                                "min": "modified_ts",
                                "max": "expires_on"
                            },
                            "allowNulls": false,  //WE DO NOT CARE TO COUNT BUGS OUTSIDE THE domain
                            "domain": {
                                "type": "time",
                                "min": sampleMin,
                                "max": sampleMax.add(sampleInterval),
                                "interval": sampleInterval
                            }
                        }
                    ],
                    "esfilter": mainFilter
                }));

                aChart.show({
                    "id": "chartCount",
                    "type": "line",
                    "cube": chart,
                    xAxisSize: 50
                });
            });
        };

        $(document).ready(function () {
            ///////////////////////////////////////////////////////////////////////////
            // SOME GUI PARAMETERS ON THE LEFT-HAND-SIDE
            ///////////////////////////////////////////////////////////////////////////
            GUI.setup(
                    createChart,
                    [
                        {"id": "sampleMin", "name": "Start Date", "type": "time", "default": Date.eod().add("-18week")},
                        {"id": "sampleMax", "name": "End Date", "type": "time", "default": Date.today().ceilingWeek()},
                        {"id": "sampleInterval", "name": "Interval", "type": "duration", "default": "week"}
                    ],
                    [
                        //WE WANT TO MAKE SURE THE START DATE IS THE BEGINNING OF THE GIVEN INTERVAL (EG: FIRST DAY OF THE WEEK)
                        "sampleMin=Date.newInstance(sampleMin).floor(Duration.newInstance(sampleInterval)).format('yyyy-MM-dd')",
                        //WE WANT THE END DATE TO BE THE LAST DATE OF THE GIVEN INTERVAL (EG: LAST DAY OF THE WEEK)
                        "sampleMax=Date.newInstance(sampleMax).addDay(1).floor(Duration.newInstance(sampleInterval)).addDay(-1).format('yyyy-MM-dd')"
                    ],
                    "public_bugs",
                    true		//SHOW DEFAULT FILTERS?
            );
        });
    });


</script>


</BODY>
</HTML>