Add apps and infra details to technical-details page

[zackproser]

Closes #468
Closes #474

These changes add the Ref Arch details to the Technical Details page:

• Add zig-zag of infra features
• Add a modified version of the ref arch features table lifted from the Heroku pricing page

TODO

Copy and markup

• Create page
• Cross-link across all other pages
• Put copy in place
• Put code snippet viewer in place
• Create a list or table of all the types of infrastructure we support using this table as inspiration
• Finalize copy in the app features table

Images

Create and add new images for ref-arch detail page - using this comment as a guide:

• "Customizable" - (image could be a questionnaire asking for EKS vs ECS vs EC2, MySQL vs Postgres vs SQL Server, etc)
• "Gruntwork deploys it into your AWS accounts and gives you all the code to manage it" - (image could be a pull request with the title "Your architecture has been deployed!" and some links for the customer to try in the body of the PR)

Bug fixes

• Fix code viewer tab navigation conflicts
• Dry up the Javascript driving the code navigators (currently occurs twice - should be moved out to partial that can be included at bottom of page)
• Implement tab-aware navigation for /technical-details page
• /technical-details page using default nav - should be using hipaa nav

[netlify]

✔️ Deploy Preview for keen-clarke-470db9 ready!

🔨 Explore the source changes: d01e687

🔍 Inspect the deploy log: https://app.netlify.com/sites/keen-clarke-470db9/deploys/61046d3d3082ed0008b324d5

😎 Browse the preview: https://deploy-preview-490--keen-clarke-470db9.netlify.app

[brikis98]

Thanks for putting this together Zack. However, a reminder to not copy text from GitHub/Slack comments verbatim, but to use interpretation, judgment, etc to turn those into a form a customer walking into this with 0 knowledge of Gruntwork could understand.

[brikis98]

This lite/pro/enterprise thing was for Heroku. HIPAA requires a different table with different features. From my original comment on this:

Perhaps we have a similar table for HIPAA, except the columns are “Gruntwork Standard,” “Gruntwork CIS,” and “Gruntwork HIPAA” and we highlight a bunch of the HIPAA requirements as rows you only get with the HIPAA subscription: e.g., CIS hardened base images, anti-virus, file integrity monitoring, etc. We would also X out any services not eligible for HIPAA (if any).

[ebeneliason]

+1 on the quoted suggestion. I believe we actually had a table very much along those lines at one point, so we can probably pull it back in and add some additional rows to flesh out the distinctions more clearly.

[zackproser]

Roger 👍

[zackproser]

Table implemented in 3afc7ed. Took a first pass at the copy, but this still needs some additional HIPAA infra requirements - and some of the items that originated from the index page's table should be dropped - but the styling and structure is in place now.

[brikis98]

Looking back at my PR comments, I came across as a bit of an asshole here. I think I had the wrong tone here and didn't capture a lot of important context. Sorry about that! I'm going to try to record a video of doing a PR review in the future and see if that provides a more effective code review, capturing my tone, adding important context, and also showing what I look for and how I think about things.

[ebeneliason]

This page is now indeed quite long. I'd suggest one of two solutions. I like the first better, but it's more work (how much more?)

1. Add in-page tab navigation (e.g. https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior) to switch back and forth between "Reference Architecture" and "Reference Apps". This wouldn't cause a page load, but it would let users jump between them, providing a little more organization and less scrolling.
2. Add some larger headers, maybe even with some colored section dividers, to clearly separate the content into different sections on the page.

[zackproser]

This page is now indeed quite long. I'd suggest one of two solutions. I like the first better, but it's more work (how much more?)

1. Add in-page tab navigation (e.g. https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior) to switch back and forth between "Reference Architecture" and "Reference Apps". This wouldn't cause a page load, but it would let users jump between them, providing a little more organization and less scrolling.

2. Add some larger headers, maybe even with some colored section dividers, to clearly separate the content into different sections on the page.

I think both approaches would work here. I can start on the tabbed navigation and report back.

[zackproser]

Got the basics working in 004b188. I think it works, but we probably want to consider some styling to make the two content tabs more obvious:

i.e., I don't want anyone missing the two navigation pills below the hero - and therefore not understanding there are two content tabs they should tab between.

@ebeneliason thoughts?

[ebeneliason]

@bwhaley We'd like your input on what belongs in the table describing specific HIPAA features of the infrastructure. Here's what it looks like on the page now. The first few rows are bespoke to this table, the remainder is just copied from the home page, and might not be appropriate. Here's a relevant quote from Jim:

Perhaps we have a similar table for HIPAA, except the columns are “Gruntwork Standard,” “Gruntwork CIS,” and “Gruntwork HIPAA” and we highlight a bunch of the HIPAA requirements as rows you only get with the HIPAA subscription: e.g., CIS hardened base images, anti-virus, file integrity monitoring, etc. We would also X out any services not eligible for HIPAA (if any).

Can you suggest anything else specific to highlight in this table?

[bwhaley]

• I'd leave "Log in monitoring" to be HIPAA-only
• For "Protection from malicious software", maybe we can offer automatically patched AMIs, like a nightly AMI build process. That could be HIPAA-only.
• Add a HIPAA-only row for "Inventory and categorize systems" - "Real-time reporting on cloud resources that contain PHI."
• I think the risk assessments should be reserved for HIPAA-only.
• The last two lines (Policy violations, Assign responsibility for security) should be dropped from the table.
• Anti-virus should be dropped from the table. I don't think we'll do that.

[zackproser]

* I'd leave "Log in monitoring" to be HIPAA-only

* For "Protection from malicious software", maybe we can offer automatically patched AMIs, like a nightly AMI build process. That could be HIPAA-only.

* Add a HIPAA-only row for "Inventory and categorize systems" - "Real-time reporting on cloud resources that contain PHI."

* I think the risk assessments should be reserved for HIPAA-only.

* The last two lines (Policy violations, Assign responsibility for security) should be dropped from the table.

* Anti-virus should be dropped from the table. I don't think we'll do that.

Thanks, Ben. I've implemented your suggestions. Is Anti-virus something we could theoretically provide for added value? Perhaps we could find a provider to partner with here?

[bwhaley]

Thanks, Ben. I've implemented your suggestions. Is Anti-virus something we could theoretically provide for added value? Perhaps we could find a provider to partner with here?

IMO the details on how to meet this won't be fully understood until our solution is reviewed by a qualified HITRUST CSF assessor. The requirement itself comes from _§164.308(a)(5)(ii)(B) - Protection from malicious software _ which could absolutely be interpreted as A/V software.

However, HIPAA interpretations are subjective, and it's often more about meeting the spirit of the law than the letter of the law. In this case, practically speaking, does it make any sense at all to run A/V in an AWS environment? E.g. imagine that you're running an EKS cluster with tens of worker nodes, and with each node running some set of containers. Where does the A/V go? On the worker nodes? In the containers? And why? Is there a common, widespread risk of virus infection in that environment?

IMHO, the answer is no, there's practically no risk of a virus. However, there are other malicious software risks. For example, we might want a data exfiltration solution to prevent malicious software from siphoning PHI from the environment. We should also checksum and scan container images, and keep worker nodes patched. All of these could be considered "protection from malicious software" and would provide more practical value than A/V.

WDYT?

[zackproser]

I think it's confusing to have a products dropdown here, as this is essentially one product. Do we actually need direct links to both tabs in the nav itself?

Jim requested this - I do personally think it works given that we link alternately to the "apps" and the "infra" tab on the /technical-details page throughout the other pages.

The links to the product pages don't work from some other pages, e.g. Why Gruntwork?
Yep - these should all be fixed now

Some of the pages still have the Technical Details link instead

Should be removed now!

The space above the header on the two tabs differs — we should tidy that up. Relatedly, there should be more space below the header before the content starts

Agreed - working on it

I don't think the "Get a demo" button belongs here. We should replace it with a "Request early access" button. (Or cut it?)

Yep - fixed!

The selected tab style isn't quite working for me — the blue looks stronger. Maybe we need to swap the selected/unselected styles?
Nit: it would be nice if the tabs lined up with the body content, instead of sitting all the way off to the left.
I don't think we need the link to the comparison chart from the app details page.

Roger - working on it

[ebeneliason]

Jim requested this - I do personally think it works given that we link alternately to the "apps" and the "infra" tab on the /technical-details page throughout the other pages.

Okay, in that case I think we can make it work, but we shouldn't call it "products" — I think it should still be "Technical Details" or similar.

i.e., I don't want anyone missing the two navigation pills below the hero - and therefore not understanding there are two content tabs they should tab between.

Sorry, I missed this before. And I know you're working on the styling here already. Question: how useful is the hero in this context? Should we consider omitting it and just putting a relevant blurb under the header to add context for each page/section? I'm not sure if the tabs are more or less visible with/without it…

[zackproser]

Question: how useful is the hero in this context? Should we consider omitting it and just putting a relevant blurb under the header to add context for each page/section? I'm not sure if the tabs are more or less visible with/without it…

They are more visible without the hero there, and a lot of what's in the hero is repeated immediately below it - so I'll try dropping it out for now.

[ebeneliason]

Okay, one more nit, and a related question…

Nit: Perhaps the Why Gruntwork? page should come next to last, before pricing, so the core details regarding what the offering is come first.

Question: I know we're just using the template provided, but should we consider refactoring the way the nav works so that we don't have to modify every subpage just to change a link or swap their order? It should really be a single consistent thing across all pages, which an include is perfect for.

[ebeneliason]

I lied, more nits. :) Won't promise it's the last this time…

I'd propose dropping the "HIPAA-compliant" prefix on those nav links. I think that detail is both somewhat implied by context, and better to reiterate in the page. It makes them long and harder to distinguish between quickly.

Will "architecture" make sense as a thing for the viewer coming to this site without any knowledge of our product? Or would it be worth calling these e.g. "Infrastructure" and "Applications" (in the nav)? We could still keep the headers as they are, to introduce our spin on the solution to those two areas of interest.

[zackproser]

l

Okay, one more nit, and a related question…

Nit: Perhaps the Why Gruntwork? page should come next to last, before pricing, so the core details regarding what the offering is come first.

Question: I know we're just using the template provided, but should we consider refactoring the way the nav works so that we don't have to modify every subpage just to change a link or swap their order? It should really be a single consistent thing across all pages, which an include is perfect for.

Alright - I changed my mind about the products dropdown after implementing this. Now all nav is defined in the landing-navbar-hipaa.html include. Let me know what you think!

[ebeneliason]

Haha, I'm probably arguing against myself to some degree now, but as long as we're going to include both links, I actually liked them combined under one item so that we could have the more succinct, thin nav.

I was accustomed to the tab appearance before, but I think this works. The selection style is definitely more clear! I wouldn't dim the text for the unselected tab on hover — I think the background change is enough affordance. My preference would also be to left align the tabs with the page content, but maybe you tried that and it didn't work well?

Also, I'm still seeing inconsistent padding on those page headers. I'd add padding above the applications header to match architecture, and add a little more below both before the content.

[zackproser]

Haha, I'm probably arguing against myself to some degree now, but as long as we're going to include both links, I actually liked them combined under one item so that we could have the more succinct, thin nav.

I was accustomed to the tab appearance before, but I think this works. The selection style is definitely more clear! I wouldn't dim the text for the unselected tab on hover — I think the background change is enough affordance. My preference would also be to left align the tabs with the page content, but maybe you tried that and it didn't work well?

Also, I'm still seeing inconsistent padding on those page headers. I'd add padding above the applications header to match architecture, and add a little more below both before the content.

Roger!

• Added back in the Products dropdown in the nav
• Fixed the extraneous padding on the infra tab
• Removed the hover color change for the nav pills
• So far haven't found a good way to left-align the nav-pills with the content

[ebeneliason]

Hopefully I'm looking at the latest. I still see a few things to tweak.

• Change "Products" to e.g. "Details" or "Technical Details"
• Selecting "Reference Infrastructure" still scrolls down the page
• Padding on headers is now consistent, but I feel it should be more!

Looks great to me apart from those things. I you don't have time to address them all, I could potentially add a PR. Let's make sure we work to get what you have merged before EOD. I haven't done a full code review, but then again — do we need that level of scrutiny for this quick mockup? Probably not.

[ebeneliason]

I haven't looked closely at the code, but the preview looks good and remaining nits can be fixed in a follow up!

[hposca]

👍

[zackproser]

Thanks for the reviews!