1475038 - [tracking] add “Details” tab to the new crash detail page

Status: RESOLVED WONTFIX

(Socorro :: Webapp, task)

Description

[Alexis Deschamps [:alexisdeschamps]]

This bug covers the “Details” tab on the Socorro crash report page. Example page: https://crash-stats.mozilla.com/report/index/b5e7edb7-734d-437d-824b-994550180711

The tab would need the following data about the crash:
    - Signature (processed_crash.signature)
    - UUID (processed_crash.uuid)
    - Date Processed (processed_crash.date_processed)
    - Uptime (processed_crash.uptime)
    - Last Crash (processed_crash.last_crash)
    - Install Age (processed_crash.install_age)
    - Install Time (raw_crash.InstallTime)
    - Product (processed_crash.product)
    - Release Channel (processed_crash.release_channel)
    - Version (processed_crash.version)
    - Build ID (processed_crash.build)
    - Operating System (processed_crash.os_pretty_version)
    - Operating System Version (processed_crash.os_version)
    - Android Version (raw_crash.Android_Version)
    - B2G OS Version (raw_crash.B2G_OS_Version)
    - Build Architecture (processed_crash.cpu_name)
    - Build Architecture Info (processed_crash.cpu_info)
    - Android Manufacturer (raw_crash.Android_Manufacturer)
    - Android Model (raw_crash.Android_Model)
    - Android CPU ABI (raw_crash.Android_CPU_ABI)
    - Adapter Vendor ID (raw_crash.AdapterVendorID)
    - Adapter Device ID (raw_crash.AdapterDeviceID)
    - Startup Crash (raw_crash.StartupCrash)
    - Process Type (processed_crash.process_type)
    - Flash Process Dump (raw_crash.FlashProcessDump)
    - MOZ_CRASH Reason (raw_crash.MozCrashReason)
    - Crash Reason (processed_crash.reason)
    - Crash Address (processed_crash.address)
    - Java Strack Trace (processed_crash.java_stack_trace)
    - Exploitability (processed_crash.exploitability)
    - URL (processed_crash.url)
    - Email Address (processed_crash.email)
    - User Comments (processed_crash.user_comments)
    - Total Virtual Memory (raw_crash.TotalVirtualMemory)
    - Available Virtual Memory (raw_crash.AvailableVirtualMemory)
    - Available Page File (raw_crash.AvailablePageFile)
    - Available Physical Memory (raw_crash.AvailablePhysicalMemory)
    - System Memory Use Percentage (raw_crash.SystemMemoryUsePercentage)
    - OOM Allocation Size (raw_crash.OOMAllocationSize)
    - Memory Measure
        - explicit (processed_crash.memory_measures.explicit)
        - gfx-textures (processed_crash.memory_measures.gfx_textures)
        - ghost-windows (processed_crash.memory_measures.ghost_windows)
        - heap-allocated (processed_crash.memory_measures.heap_allocated)
        - heap-overhead (processed_crash.memory_measures.heap_overhead)
        - heap-unclassified (processed_crash.memory_measures.heap_unclassified)
        - host-object-urls (processed_crash.memory_measures.host_object_urls)
        - images (processed_crash.memory_measures.images)
        - js-main-runtime (processed_crash.memory_measures.js_main_runtime)
        - private (processed_crash.memory_measures.private)
        - resident (processed_crash.memory_measures.resident)
        - resident-unique (processed_crash.memory_measures.resident_unique)
        - system-heap-allocated (processed_crash.memory_measures.system_heap_allocated)
        - top(none)/detached (processed_crash.memory_measures.top_none_detached)
        - vsize (processed_crash.memory_measures.vsize)
        - vsize-max-contiguous (processed_crash.memory_measures.vsize_max_contiguous)
    - Accessibility (raw_crash.Accessibility)
    - EMCheckCompaibility (processed_crash.addons_checked)
    - App Notes (processed_crash.app_notes)
    - Processor Notes (processed_crash.processor_notes)
    - Frame data
        - Missing Symbols (frame.missing_symbols)
        - Frame (frame.frame
        - Module (frame.module)
        - Signature (frame.signature)
        - Source (frame.source_link, frame.file, frame.line)

This is how the data could be obtained through an API:
GET https://crash-stats.mozilla.com/api/report/index/<crash id>/details

This bug involves:
- writing an API to get the mentioned data in an easy-to-use JSON format
- creating the front-end components to display this data

Comment 1

[Alexis Deschamps [:alexisdeschamps]]

Here are some thoughts on the project so far:

thoughts on using React and Enzyme:
granular React components seem to be way more maintainable than huge Jinja2 templates or Jinja2 templates with macros
Enzyme seems to be very effective for ensuring that the components work exactly as expected
Enzyme with Jest seems to be enough to do most things needed for unit testing
the result code does seem to take significantly more lines and files, but that is part due to the React component boilerplate that is easily ignored visually

sending data to the frontend:
since some of the data is restricted, it can make more sense to do more of the data processing in the backend
since the backend already has several helper functions already in use for data processing, it came make more sense to do more of the data processing in the backend
a lot of the helper functions seem to need to be extracted or modified though, which adds extra work
converting to camelCase instead of sticking with snake_case seemed to be worth it since a lot of the React libraries are already using camelCase

Comment 2

[Alexis Deschamps [:alexisdeschamps]]

Woops, here is the same comment with formatting fixed:

thoughts on using React and Enzyme:
- granular React components seem to be way more maintainable than huge Jinja2 templates or Jinja2 templates with macros
- Enzyme seems to be very effective for ensuring that the components work exactly as expected
- Enzyme with Jest seems to be enough to do most things needed for unit testing
- the result code does seem to take significantly more lines and files, but that is part due to the React component boilerplate that is easily ignored visually

sending data to the frontend:
- since some of the data is restricted, it can make more sense to do more of the data processing in the backend
- since the backend already has several helper functions already in use for data processing, it came make more sense to do more of the data processing in the backend
  - a lot of the helper functions seem to need to be extracted or modified though, which adds extra work
- converting to camelCase instead of sticking with snake_case seemed to be worth it since a lot of the React libraries are already using camelCase

Comment 3

[Will Kahn-Greene [:willkg] ET needinfo? me]

We're not going forward with the react cupcake, so I'm closing out related bugs as WONTFIX.