-
Luke Glasscock authoredLuke Glasscock authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
CNAP.vue 10.47 KiB
<template>
<div class="CNAP">
<PageHeader
title="Cloud Native Access Point"
subtext
description="CNAP is available on Cloud One to provide access to development, testing, and production enclaves at IL-2, IL-4, and IL-5"
:logoSvg="cnapLogo"
/>
<v-container class="px-md-8 px-auto" fluid>
<v-container class="px-md-16" fluid>
<h2 class="my-3 mx-md-16 mx-auto">
CNAP Capabilities
</h2>
</v-container>
<div class="container text-left">
<v-container class="row justify-center">
<div class="row text-left px-md-16 mb-16">
<div class="col-md-6">
<ul>
<li class="mb-4">
Brings a full Zero Trust tech stack enforcing device state,
user
<Tooltip text="RBAC," tooltip="Role Based Access Control" />
and Software Defined Perimeter / Networks based on Google
BeyondCorp concepts
</li>
<li class="mb-4">
Allows access to Cloud One (AWS GovCloud and soon Azure
Government) and Platform One without a
<Tooltip text="BCAP" tooltip="Boundary Cloud Access Point" />
or
<Tooltip text="IAP" tooltip="Identity-Aware Proxy" />
</li>
<li class="mb-4">
Allows thick client access from
<Tooltip text="BYOD" tooltip="Bring Your Own Device" />
Government-owned devices (both mobile and desktop) through
AppGate Zero Trust clients to enforce device states
</li>
</ul>
</div>
<div class="col-md-6 px-pb-8">
<ul>
<li class="mb-4">
Allows for
<Tooltip text="VDI" tooltip="Virtual Desktop Interface" />
options for zero / thin clients
</li>
<li class="mb-4">
Enables internet egress at
<Tooltip text="IL" tooltip="Impact Level" />5 in development
enclaves
</li>
<li class="mb-4">
Brings
<Tooltip
text="DMZ Network"
tooltip="Demilitarized Zone Network"
/>
/ Perimeter stack with break and inspect,
<Tooltip text="IDS" tooltip="Intrusion Detection Systems" />/
<Tooltip text="IPS" tooltip="Intrusion Prevention System" />,
<Tooltip text="WAF" tooltip="Web Application Firewall" />
Capability, full packet captures as an elastic Cloud-based
stack
</li>
<li class="mb-4">
Brings <Tooltip text="SSO" tooltip="Single Sign On" />
with various DoD PKI authentication options and IL2
<Tooltip text="MFA" tooltip="Multi-factor Authentication" />
options.
</li>
<li class="mb-4">
Centralizes and aggregates logs and pushes to
<Tooltip
text="CSSP"
tooltip="DoD Cybersecurity Service Provider"
/>
</li>
</ul>
</div>
</div>
</v-container>
</div>
<div>
<v-container class="px-md-8 px-auto" fluid>
<v-container class="px-md-16" fluid>
<h2 class="my-3 mx-md-16 mx-auto">
CNAP Overview
</h2>
</v-container>
<div class="container text-left">
<v-container class="row justify-center">
<div class="row text-left px-md-16 mb-16">
<div class="col-md-6">
<ul>
<li class="mb-4">
Use cases for IL-2 (Internet accessible workloads) and
IL-4/5 (non-Internet accessible workloads)
</li>
<li class="mb-4">
General Setup
</li>
</ul>
</div>
<div class="col-md-6 px-pb-8">
<ul>
<li class="mb-4">
AWS CNAP deployment overivew
</li>
<li class="mb-4">
Common Components
</li>
</ul>
</div>
</div>
</v-container>
<v-container>
<div class="row justify-content-center">
<v-btn
:class="
$vuetify.breakpoint.smAndDown
? 'my-3 my-md-6 mx-3 black--text'
: 'my-6 mr-6 black--text'
"
color="light"
href="https://confluence.il2.dso.mil/display/P1/Customer+Onboarding"
target="_blank"
outlined
>More info</v-btn
>
<v-btn
:class="
$vuetify.breakpoint.smAndDown
? 'my-3 my-md-6 mx-3'
: 'my-6 mr-6'
"
color="primary"
href="https://confluence.il2.dso.mil/pages/viewpage.action?spaceKey=P1&title=Platform+One+CNAP+AppGate+SDP+Client"
target="_blank"
>AppGate</v-btn
>
</div>
<div class="row justify-content-center mr-2">
** User will need P1 SSO access to view the pages
</div>
</v-container>
</div>
</v-container>
</div>
</v-container>
<Wave :bottom="false">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mx-auto">
HAVE MORE QUESTIONS ABOUT CNAP?
</h2>
<body-copy>
Behind the SSO, you'll be able to find most of your answers in the
FAQ page categorized by Authentication, Client Connectivity,
Monitoring, and much more! For more For more specific inquiries,
click Contact Us.
</body-copy>
</div>
</div>
<div class="row justify-content-center">
<div :class="$vuetify.breakpoint.smAndDown ? 'text-center' : ''">
<v-btn
:class="
$vuetify.breakpoint.smAndDown
? 'my-3 mx-3 black--text'
: 'my-6 mr-6 black--text'
"
color="light"
href="https://confluence.il2.dso.mil/questions/topics"
target="_blank"
>FAQ</v-btn
>
<v-btn
:class="
$vuetify.breakpoint.smAndDown
? 'my-3 my-md-6 mx-3'
: 'my-6 mr-6'
"
color="primary"
href="https://jira.il2.dso.mil/servicedesk/customer/portal/36/create/202"
target="_blank"
>CONTACT US</v-btn
>
</div>
</div>
</div>
</Wave>
<vue-easy-lightbox
escDisabled
moveDisabled
:visible="lightbox.visible"
:imgs="lightbox.imgs"
:index="lightbox.index"
@hide="handleHide"
></vue-easy-lightbox>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import Wave from "@/components/Wave";
import Tooltip from "@/components/Base/Tooltip";
import VueEasyLightbox from "vue-easy-lightbox";
import CNAPlogo from "@/assets/images/logos/CNAP_logo.svg";
export default {
name: "CNAP",
components: {
PageHeader,
Wave,
Tooltip,
VueEasyLightbox,
},
methods: {
showImg(index) {
this.lightbox.index = index;
this.lightbox.visible = true;
},
handleHide() {
this.lightbox.visible = false;
},
getImageUrl(filename) {
return require(`@/assets/images/${filename}`);
},
},
data: function() {
return {
cnapLogo: CNAPlogo,
// lightbox state
lightbox: {
visible: false,
index: 0, // default: 0
imgs: [require("@/assets/images/logos/CNAP_logo.svg")],
},
};
},
};
</script>
<style lang="scss">
.big-bang {
.mm-logo {
width: 250px;
}
.milestones-wrapper {
background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 3px 10px;
background-repeat: repeat-y;
padding-top: 8px;
position: relative;
.bullet {
border: 1px solid black;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
position: absolute;
left: -7px;
top: 3px;
height: 17px;
width: 17px;
&.done {
background-color: $p1-light-green;
}
}
.img-container {
width: 24px;
min-height: 24px;
.tool-logo {
max-width: 24px;
max-height: 24px;
}
}
.text {
font-weight: 600;
}
.milestone:last-child {
background-color: #ffffff;
margin-bottom: 0 !important;
}
.milestone:first-child {
margin-top: -12px;
}
}
.image-wrapper {
cursor: pointer;
}
.cnaplogo {
max-width: 200px;
}
// lightbox stuff
.vel-modal {
.vel-img {
background-color: #ffffff;
}
.vel-toolbar {
.toobar-btn.toolbar-btn__rotate {
display: none;
}
}
}
.card-summary {
.row {
margin-left: 0;
margin-right: 0;
}
.card-container {
display: flex;
flex-direction: column;
align-items: center;
padding-left: 2rem;
padding-right: 2rem;
margin-bottom: 1rem;
a {
.btn-link {
word-wrap: none;
}
}
h4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
@include xs {
align-items: flex-start;
text-align: left;
h4 {
margin-left: 0;
padding-left: 0;
}
}
}
.card-container-bottom {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
@include xs {
align-items: flex-start;
text-align: left;
h4 {
margin-left: 0;
padding-left: 0;
}
}
}
}
}
</style>