Giter Club home page Giter Club logo

zap-friendly-report's Introduction

ZAP Friendly Report

A friendly ZAP Report converter from XML to HTML and Material Design.

The following import methods are supported:

  • URL
  • File upload
  • XML string

Status

This project is still a Work In Progress.

TODO:

  • Finish the main form
  • Fix dark theme
  • Fix charts style issues
  • Fix dark theme not applied when the report is loaded after theme selection
  • Display found evidences (#3)

What's missing:

  • Add support multi-sites reports (thanks to @JavanXD for pointing it)
  • Replace Materializecss by Fomantic-UI
  • Split main code in several parts
  • Add translations and country flags
  • Add dark theme detection from user environment
  • Create a wiki
  • Create a ZAP pluggin version

Debugging

There is a debug mode which can be turned on. Just edit the file main.js:

$(function (event) {
    // Config
    var Settings = {
        'debug': false,

Set the value to true to enable the debug mode.

Improve themes

You can improve the whole theming by changing two parts in the project.

CSS

You can change the whole design by changing style properties in the main.css file.

You should avoid chaning properties of the body and main blocks.

If you do so, you might break the whole design.

Javascript

You can change witch elements will be styled in dark in the main.js file by changing the following parts:

// User want it dark!
if (theme === 'dark') {
    ...

    // Change body classes
    Framework.body.removeClass('grey lighten-5 grey-text text-darken-3');
    Framework.body.addClass('grey darken-2 white-text');

    // Change report source fieldset classes
    $('#report-source').addClass('grey darken-3');

    // Change generated collapsibles classes
    $('.collapsible').each(function () {
        $(this).addClass('grey darken-4 white-text');
    });
    $('.collapsible-header').each(function () {
        $(this).addClass('grey darken-3 white-text');
    });
}

// User want it light... (booo! lol)
else {
    ...

    // Change body classes
    Framework.body.removeClass('grey darken-2 white-text');
    Framework.body.addClass('grey lighten-5 grey-text text-darken-3');

    // Change report source fieldset classes
    $('#report-source').removeClass('grey darken-3');

    // Change generated collapsibles classes
    $('.collapsible').each(function () {
        $(this).removeClass('grey darken-4 white-text');
    });
    $('.collapsible-header').each(function () {
        $(this).removeClass('grey darken-3 white-text');
    });
}

Near line 305 in the selectTheme function.

Preview (light theme)

Home

image

Report loaded

image

Report opened

image

Report graph

image

Report alerts

image

Report alert details

image

Preview (dark theme)

Home

image

Report loaded

image

Report opened

image

Report graph

image

Report alerts

image

Report alert details

image

Pictures are subject to changes during the development. I will try to keep them updated.

Charts

Charts are provided by the open-source project named eCharts.

Configure charts themes

Charts themes are generated and downloaded from https://echarts.baidu.com/theme-builder/. Once downloaded, modify the following files:

  • index.html: Add a new javascript include line at the end of the file. (next to the others already existing)
  • main.js: Modify the following parts:
themes: [
    // Available 'dark' chart themes:
    // - dark
    // - chalk
    // - purple-passion
    {name: 'dark', category: 'dark'},
    {name: 'chalk', category: 'dark', default: true},
    {name: 'purple-passion', category: 'dark'},

    // Available 'light' chart themes:
    // - light
    // - vintage
    // - westeros
    // - wonderland
    // - macarons
    // - walden
    {name: 'light', category: 'light'},
    {name: 'vintage', category: 'light'},
    {name: 'westeros', category: 'light'},
    {name: 'wonderland', category: 'light'},
    {name: 'macarons', category: 'light'},
    {name: 'walden', category: 'light', default: true},
],
theme: 'walden', // Set default chart them
themeCategory: 'light' // Set default chart them category

From the Report.charts object near line 319 in main.js file.

Feedback / Discussions

If you want to send any feedback or having any ideas you want to share regarding this project, feel free to check:

Contribute

Feel free to open issues / pull requests if you want to contribute to this project.

Thanks to

The people who helped me to make this project better and better.

Contact

You can reach me by email at [email protected] or on Twitter @Jiab77

zap-friendly-report's People

Contributors

jiab77 avatar javanxd avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.