CVE toolTip needs some work

[andymeneely]

Back in PR #816, we added this "CVE tooltip" feature that would trigger every time a CVE identifier would be mentioned.

It worked decently well until recently, and then when I looked at it I saw improvements we could make.

The code is in app/frontend/vulnerabilities/tooltip.js, although it's more of a global thing so it should probably be in app/frontend/global.

I'd like to name it cve_hovercard instead of tooltip because tooltip can mean multiple things. So remove all mentions of tooltip and change it.

Right now, setTooltip is called only in two places - specifically in tables. Instead, I'd like to have this feature be called in vhpMarkdown.js, so that any time we say "CVE-123-4567" in "writing" it'll have a hovercard in addition to a link.

Now the vhpMarkdown converts the CVE to a link using markdown syntax, but it could just as easily convert using HTML syntax. You'll probably need to do this so that you can add a new CSS class, i.e. cve_hovercard (since showdown.js doesn't allow you to (easily) add a custom CSS to markdown syntax).

So I'd like to:

• [x] Rename tooltip to cve_hovercard
• [x] Move the code to global
• [ ] Trigger on vhpMarkdown linkifyCVE
• [ ] Don't trigger on the ways it currently triggers
• [ ] Fix it triggering, looking just like the one in the mentioned PR

[ChristopherBanas]

I was confused as to how this hover card was working in the first place, and I was more confused as to how it broke. With that in mind, I went ahead and tried to refactor the way the hover card works so it would function as originally intended.

The current status of hovering, within this branch, looks like:

The idea is there, but I was having CSS issues with the transparent background that I assume is an easy fix.

One big thing that is missing from these hover cards are all the tags. The actual hover card creation can be found in app/frontend/vulnerabilities/vulnCards.js. The way the tags were originally working was this file would call upon what I believe is a form of global variable tagMap which would have a map of every tag within VHP. However, I believe this worked because a method in app/frontend/vulnerabilities/vulnCards.js called vulnCards was called upon by app/frontend/vulnerabilities/index.js. Once I changed vulnCards to be called elsewhere (I'll explain later), I no longer had access to tagMap. I tried making an Ajax call to get similar data but I was having issues with it.

Remember that this hover card was originally only working within the vulnerability table and no where else. The way that I believe this was original working was as follows:

1. app/frontend/vulnerabilities/index.js populates hover cards within its load_succeeded method by sending data to vulnCards in app/frontend/vulnerabilities/vulnCards.js. However, looking at its Ajax call, it's appearing to get every single vulnerability within VHP. Which doesn't make much sense to me and obviously performs very poorly.
2. vulnCards then loops through every CVE and clones a template and begins filling in that template with the cve specific information. Once the card is done it is appended to a container object called #vuln_cards, which hosts every hover card within it.
3. With every single cve now having a hover card stored in the previously mentioned container, the actual hovering process is straight forward. Within the setTooltip method in app/frontend/vulnerabilities/tooptip.js, once the cursor is set over a cve, the corresponding hover card is located within #vuln_cards and it is set below the cursor.

One final note with how the hover cards were displayed is found in app/frontend/tags/show.js This is where the setTooltip method is called to give each row in the vulnerability table the ability to be hovered over.

That was how the hover card was initially working. I attempted to refactor it so not every vulnerability would be loaded in and built a card upon loading, and making the hovering accessible anywhere instead of just in the vulnerability table. This was my process for doing so:

1. Remove calling vulnCards within app/frontend/vulnerabilities/index.js because it is not needed upon loading the vulnerability table
2. Edit linkifyCVE within app/frontend/global/vhpMarkdown.js to store the full CVE id (i.e. CVE-1111-2222) within its <a> object. This was done so that this CVE could be anywhere in the site and its information can still be used to populate hover cards on the fly instead of every single vulnerability within the site at once.
3. Added setHoverCard method to app/frontend/packs/application.js so that is is called upon once a page loads
4. Revamped setHoverCard so that it now does the following: a. Scans the newly loaded page and finds the following: document.getElementsByClassName("cve_hover_class") which will get every cve <a> item that was established within linkifyCVE b. Loops through these objects and using the id attribute embedded within each object, makes an Ajax call to get their data. This data is then used to populate the vuln card template and is added to a container. Extremely similar to step 2 in how this originally worked.

That is how I intended for this new way to work, but I was having some issues getting the actual hover card to display properly and update its data. I'm still not entirely sure what was preventing my plan from now fully working.