googlechrome
/
chromium-dashboard
зеркало из https://github.com/GoogleChrome/chromium-dashboard.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
chromium-dashboard/developer-documentation.md

6.6 KiB
Исходник Ответственный История

chromedash developer documentation

This doc covers some basic overview of the codebase to help developers navigate.

In summary, this web app is using Django as the backend and lit-element in the front end.

Front end

Front end codes exist in two parts: main site (including admin) and http2push.

Main site page renderring

All the pages are rendered in a combination of Django template (/templates) and front-end components (/static/elements).

  1. /templates/base.html and /templates/base_embed.html are the html skeleton.
  2. Templates in /templates (extend the _base.html or _embed_base.html) are the Django templates for each page.
    • The folder organization and template file names matches the router. (See template_path=os.path.join(path + '.html') in server.py)
    • lit-element components, css, js files are all imported/included in those templates.
    • We pass backend variables to js like this: const variableInJs = {{variable_in_template|safe}}.
  3. All lit-element components are in /static/elements.
  4. All JavaScript files are in /static/js-src/ and processed by gulp, then output to '/static/js/' and get included in templates.
  5. All CSS files are in /static/sass/ and processed by gulp, then output to /static/css/ and get included in templates.
  6. A service worker is created by gulp too. Output in /static/dist/service-worker.js.

Some nice-to-fix

  • Wrap page in a component, so the data flow is more clear. Benefits: no need to assigns component properties from js files; no need to pass element reference to components to get value (e.g. we are passing searchEl to chromedash-featurelist.).
  • Some buttons are a / span / div.

Content from the old developer doc (some are out-of-date)

** index.html *

  • The 'Most Popular' page.
  • This file is to show 10 charts. They will be charts from
  • the top 10 Properties of the stack rank page.
  • This implementation is not complete.
  • This depends upon stack rank.

**

** stackrank.html *

  • Lists all properties from highest popularity to least
  • User may reverse order
  • Will function, once a date is specified in QueryStackRank of main.py

**

** main.py *

  • Handler File
  • /data/querystableinstances performs a query to get all instances
  • from the database. This data is converted to JSON and written to
  • the page.
  • /data/querystackrank performs a query to get most recent day's
  • popularity rank in default descending order. The data is converted to
  • JSON and written to the page.

**

** admin.py *

  • Handler File
  • visiting /cron/metrics calls YesterdayHandler which retrieves yesterday's data from the UMA Cloud Storage.
  • This is how the cron job is updating - Daily grabbing the previous day's data
  • The data is parsed and stored as:
  • class StableInstance(DictModel):
  • property_name = db.StringProperty();

  • bucket_id = db.IntegerProperty();

  • date = db.DateProperty();

  • day_percentage = db.FloatProperty();

  • rolling_percentage = db.FloatProperty();
  • visiting /cron/histograms calls HistogramsHandler which retrieves FeatureObserver and
  • FeatureObserver histograms from chromium.googlesource.com.
  • ACTION REQUIRED: we will need to replace histogramID with the appropriate ID.
  • This can be obtained from uma.googleplex.com/data/histograms/ids-chrome-histograms.txt
  • Searching this file for CSS Properties, once our histogram has data should give us a hex
  • value which should be converted to an integer.

** featurelevel.js *

  • Creates charts for the feature level page.
  • drawVisualization()
  • This function takes in the name of the property for which the graph is being drawn.
  • (This should probably be changed to the propertyID/bucketID in the future.)
  • We iterate through parsed data, building up a data object which we can pass to chart.draw()
  • The desired form of data to pass to chart.draw() is:
  • [[Date, Name, Percentage]
  • [Mar 3, Color, 60]
  • [Mar 4, Width, 70]]
  • ** If we need to look into further optimization, building this data structure is probably the place it can happen.
  • getNamesArray()
  • Takes the desired name to have displayed on the chart. Checks if there is a correspinding property (prefixed or unprefixed)
  • adds the given name plus the corresponding name to an array and returns the array.

**

appcfg.py upload_data --config_file=bulkloader.yaml --kind=Feature --url=https://chromestatus.googleplex.com/_ah/remote_api --filename=import.csv

OPTIMIZATIONS