coala/coala-html

Interactive website generator using results from coala

---

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." ― John F. Woods

---

---

coala provides a unified interface for linting and fixing code with a single configuration file, regardless of the programming languages used. You can use coala from within your favorite editor, integrate it with your CI, get the results as JSON, or customize it to your needs with its flexible configuration syntax.

coala supports popular programming languages including Python, C/C++, Java, JavaScript, CSS, and several others out of the box.

Install coala | Get Involved | Chat | Roadmap | Blog | Twitter

coala-html's Issues

Show all affected source ranges in Results

Currently we only show the first.

Add testing framework

Until now although travis is enabled we do not use unittests.

We need to decide on which framework to use and to also set it up.

Add and configure CSSLintBear

coafile: Add commit message checking

Add theme

Run bower install during pip install

Presently, bower installs dependencies when user runs coala-html first time. We should implement this installation process when user installs coala-html via pip.

show log messages

fix help message for nolaunch

--nolaunch Launch webpage is ambiguous

Make coala-html into a bower package

We should make this a bower package and let the coala-html binary check if the bower package is installed (somehow)

Set max line length for js and html to 90

Add unittests for code

Add unittests for all our code and make sure coverage is 100%

Blocked by #24

README: Add link to demo instance

Add http://coala-analyzer.github.io/coala-html/ for demo

Do not modify <pre> to be inline

Currently we're using ng-repeat to show each line one as a time. We've modified the <pre> tag to be inline also. It's better to use JS to merge the whole code block we wish to show and dump it into a pre tag.

Highlighting (and other codes possibly) will be confused as it won't know how to parse codes line by line

For example:
If the highlighter is asked to match brackets it wont be able to find it ?

Show Diffs

Would be nice to show diffs. Similar to how gitmate shows it in github right now (Possible with an option to show or disable them)

Show file paths in Results

We should also display file paths along with errors and affected lines in Results tab. Having that will help users to narrow down the search for errors.

Do beta release

We need a beta release for this !

Do we want a file browser with inline messages ?

In my opinion we should have:

• Results tab which shows the Results in the current format.
• Files tab which shows a list of files with some stats on the side (Number of results and which bears ran on them) and each file can open with inline results

I personally like the Files tab more - because I find it more user friendly.

coalahtml/tree.py: Increase readability

In https://github.com/coala-analyzer/coala-html/blob/master/coalahtml/tree.py#L40
if not prev_node.child.get(new_node.name, None): is better to change to
if new_node.name not in prev_node.child:. It'll be easier to read and it's more correct, as None or False can be key in general.

Add CI

We probably want a little circleci script that at least builds the website? Ideally some tests should be run.

@tushar-rishav any experience with that?

Remember selected theme

It'd be nice to save the user's choice for theme. Next time when he open the browser, he gets the default theme as the saved one.
I think localstorage could be useful here.

Add warning signs for directories that contains files where results were produced

At present, only files are being shown with warning icons. It'd be nice to show warning icon to the parent directories of the affected files too.

comment from ankit

try using lato for sans-serif

Create basic prototype for coala-html

make it actually work with coala

I understand the relpath issue is relevant for that, what else is needed to get this going?

Search in Results

I'm not quite sure what this search module is supposed to be doing.

When I type in g - 3rd result goes away an 2 remain. But only the first result has a g in the sys.argv line ...

Where does it search ? Where should it be searching ? Do we want an advanced search ?

• I think it'd be better to have a series of toggle buttons with all severities (INFO, NORMAL, MAJOR) to show/hide each of them.
• It's be nice to make a multi select choice box (from chosen library maybe?) which allows us to choose which bears to show.
• Glob based search for files ? Along with a line range search
• And a search box for test based (for result messages OR code line that's affected itself)

Use BootLintBear

BootLintBear was added recently https://twitter.com/coala_analyzer/status/706094858377764864
We should use it to parse our bootstrap files

Use grunt/gulp

Grunt and gulp are awesome tools which help making websites lean and also to run them locally easily.
Would be good to use either of them

Add count info to Results, Files and Logs tab.

Update install instructions in README

Make a service to parse coala-json output

Currently we hardcode the project path in controllers and we have local functions.
Would be much nicer to use a service which parses this json, creates models and gives that out.

It're be reusable in multiple controllers

Add config tab

There can be a tab for LogMessages (for #15)
And another tab for "settings" which has the coafile

Set master as main branch

@sils1297

Group results based on the file they belong to

Currently, irrespective of a file the results belong, they're being shown all at once. It'd look like mess when we have results for say 20 different files or even more and each file having 10 source ranges. Imagine, user will have to scroll all the way down to go through all the files' results.
Now we can do two things to avoid this:

1. Display only file names in result tab. Clicking on the file names would display all the results for corresponding file. Clicking on another file would close the results for previous one and open for the current file. Can be done with simple toggle.
2. Use pagination in case when number of files are large.

IMO 2nd option seems sustainable

cc @AbdealiJK @sils1297

Demo on gh-pages

Do we want a demo in gh-pages of this site ?

As far as I understand that's just a simple thing where we put in 2 extra commits:

• Remove bower_components from gitignore
• Add bower_components folder and push

And we can keep rebase-ing master on this when we wish to upgrade it. The gitignore will be updated once in a while and will cause conflicts, but that's fine ...

make logs searchable

coala html binary

From @AbdealiJK on February 28, 2016 5:57

So, as I see it the coala html binary needs to do three things:

Install coala-html angular app via bower. Also install the bower dependencies.

• run coala and dump the results in json format to a particular file if it doesn't exists else update it. This file shall be used by Angular app.
• create file.json if it doesn't exists else update it.
• Finally, create a server and open the file. This can have some flexibility. User can decide whether to launch the webpage immediately after running coala-html or maybe just update/create the files.

Fixes #31

We probably want an arg to just create the server / open the last result too.

Copied from original issue: coala/coala#1733

Add Gemfile

To test locally github pages has a ruby package.

Add a Gemfile which will install this and run the site for you locally

lots of unused whitespace aroud the results, canyou remove that?

Create a model for Result

It's better to use ngModel and make a model for results
This will allow us to have helper functions inside the model - like get_results_of_file() or general search queries too.

Use ng-bind-html

Apparently ng-bind-html does some sanitization which is useful when writing code from a variable

http://www.w3schools.com/angular/ng_ng-bind-html.asp

Don't trim the line

in index.html, we need the spacing to be displayed correctly

suggestions

just change the font family to monospace for code and sans-serif for the rest... it would be a good change for now.

from Ankit (he made e.g. gitmate.io)

Move angular files to separate folder

The current file structure in master should be changed so that angular app can be distributed under python package. This issue would just create a new folder containing old files from master branch.
Later necessary python files will be added in #31 to make a complete python package.

CC @AbdealiJK

Add page loader

Showing a page loader would be nice to have.
Scenario: Async

Highlight lines that produce errors

It'd be useful to browse files directly and know the lines that produced errors.

Please take me out of the mentioning list for the automatic issue reply :)

Use bower

Don't keep static files - rather use bower to manage static dependencies for you

Ctrl+C doesn't abort cleanly

How am I supposed to stop the server? Best you catch Ctrl+C and clean up. Otherwise I get "Address already in use" repeatedly which is annoying.

Use google-code-prettifier

google-code-prettifier works well with bootstrap for one.
It also has support for line numbers and so on which is something we want (as we're custom adding line numbers right now in highlight.js).

Consider minifying the angular package

We could minify the js, html etc related to angular files before packaging.
Pros:

• Significant reduce in size and hence the pip package.

Cons

• Users might have to deminify if they wish to modify the angular code at their side. Otherwise, it won't be readable at all.

As an user, I am inclined towards Pros as the reduction in size would be more than 50%. it would be like saving 20-30 KBs. I agree it's very small size but again why not save it if we could.
As a hacker, people might wanna customise the application and use it as per their needs. Not sure about its possibility.

Thoughts?
CC @Uran198 @AbdealiJK @sils1297