Code owners
Assign users and groups as approvers for specific file changes. Learn more.
ADCE.vue 12.91 KiB
<template>
<div class="adce">
<PageHeader
title="The Party Bus"
subtext="ABMS All Domain Common Environment"
description="The environment and services you need to develop and deploy your software applications"
/>
<v-container class="px-8" fluid>
<h2>Helping you focus on your mission</h2>
<p class="my-3 mx-md-4 mx-2">
ABMS All Domain Common Environment - aka "The Party Bus" - will help you
build a strong foundation so you can be laser-focused on developing and
deploying your applications.
</p>
<img
class="img-fluid mx-auto mt-4 pb-logo"
src="@/assets/images/logos/Party_Bus_logo_low_res-01.png"
alt="The Party Bus - ABMS All Domain Common Environment Logo"
/>
<div class="row justify-content-center my-4">
<div class="col-md-4">
<h3>HOW DO WE DO IT?</h3>
</div>
<p class="col-md-5 text-center text-md-left">
By providing you with the complete package of Containers, Automation,
Infrastructure, and Sustainment. Our Continuous Authority to Operate
(cATO) pipeline will ensure your application is safe, secure, and
approved for deployment.
</p>
<v-container>
<v-row justify="center">
<div class="col-12 text-center justify-content-center">
<p class="pt-3">
Party Bus operates in an approved and accredited infrastructure.
</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-12">
<ExternalLink
class="mt-2"
href="./static/docs/Party_Bus_ATO(Dev&Prod).pdf"
icon="mdi-file-pdf"
>
Party Bus Environmental ATOs
</ExternalLink>
</div>
<div class="col-lg-2 col-md-6 col-sm-12">
<ExternalLink
class="mt-2"
href="./static/docs/(U)CNAP_ATO.pdf"
icon="mdi-file-pdf"
>
CNAP ATO
</ExternalLink>
</div>
<div class="col-lg-2 col-md-6 col-sm-12">
<ExternalLink
class="mt-2"
href="./static/docs/Iron_Bank_Fast_Track_ATO.pdf"
icon="mdi-file-pdf"
>
Iron Bank ATO
</ExternalLink>
</div>
<!-- <div class=" col-lg-2 col-md-6 col-sm-12">
<ExternalLink
class="mt-2"
href="./static/docs/.pdf"
icon="mdi-file-pdf"
>
cATO
</ExternalLink>
</div> -->
</v-row>
</v-container>
</div>
<div class="image-wrapper" @click="() => showImg(0)">
<img
class="img-fluid"
src="@/assets/images/PartyBus-environment-02.png"
/>
</div>
<div class="row justify-content-center mt-4 mb-4">
<div class="col-md-4">
<h3>WHAT IS A cATO?</h3>
</div>
<div class="col-md-5 text-center text-md-left">
To get software in the hands of your users, you need an Authority to
Operate. However, obtaining one is a complex policy > security > death
cycle. Until now. Some really smart people have figured out how to
simplify this process so that you can continuously deliver value to
the warfighter.
</div>
</div>
</v-container>
<Wave>
<div class="container px-8 py-0">
<div class="row">
<div class="col-md-6 d-flex text-center text-md-left mb-4 mb-md-0">
<h2 class="ma-auto px-0">We move fast,<br />but we move smart.</h2>
</div>
<div class="col-md-6 text-left">
The Party Bus team will be measuring twice and cutting once. We
believe the sooner we can get you squared away on our level of
standards (which is high, why else would we invite you to join our
elite team of products and services), the sooner you can serve the
users and warfighters within DoD that need your product or solution
yesterday.
</div>
</div>
</div>
</Wave>
<div class="container my-4 px-8">
<h2 class="my-4 mt-sm-8 px-0">WHERE WE ARE TODAY</h2>
<p class="text-center">
We are working hard, but don't quite have all of our capabilities
operational.
<br />
Check back for updates!
</p>
<div class="d-flex flex-wrap my-4">
<div class="mx-4 mx-md-auto my-4 text-left">
<h4 class="mb-4 mx-auto px-0">The Party Bus Milestones</h4>
<div class="milestones-wrapper mx-2">
<div
v-for="milestone in milestones"
:key="milestone.text"
class="milestone pl-4 mb-4 position-relative"
>
<div class="bullet" :class="{ done: milestone.done }"></div>
<div class="text d-flex align-items-center">
<div class="img-container mr-2 d-flex justify-content-center">
<img
v-if="milestone.logo"
:src="getImageUrl(`logos/tool-logos/${milestone.logo}`)"
class="tool-logo"
:alt="milestone.text"
/>
</div>
{{ milestone.text }}
</div>
<div v-if="milestone.details">
<div
v-for="detail in milestone.details"
:key="detail"
class="milestone-detail font-italic"
>
{{ detail }}
</div>
</div>
</div>
</div>
</div>
<div class="mx-4 mx-md-auto my-4 text-left">
<h4 class="mb-4 mx-auto px-0">RELEASE NOTES</h4>
<div class="note">1 June 2020 - Mattermost</div>
<div class="note">
15 July 2020 - Atlassian (Jira & Confluence) <i>in Beta</i>
</div>
<div class="note"><i>coming soon</i> - The Party Bus environment</div>
</div>
</div>
<div class="my-4">
<h2 class="my-4 mt-sm-12">THE PARTY BUS PIPELINE</h2>
<p>This is how we enable your teams to do DevSecOps.</p>
<v-btn
text
class="link"
:href="getImageUrl('CI_CE_infographic_update_for_web.jpg')"
target="_blank"
>
Download the full pipeline graphic
</v-btn>
<CICDPipeline />
</div>
<div class="my-4">
<h2 class="my-4 mt-sm-12">THE PARTY BUS TOOL CHAIN</h2>
<p>These are the tools we have available to get the job done.</p>
<v-btn
text
class="link"
:href="getImageUrl('P1 - Tool Chain-2.jpg')"
target="_blank"
>
Download the tool chain graphic
</v-btn>
<div class="image-wrapper px-4 mt-4" @click="() => showImg(1)">
<img
class="img-fluid"
src="@/assets/images/P1 - Tool Chain-2.jpg"
alt="The Party Bus - ABMS All Domain Common Environment Tool Chain"
/>
</div>
</div>
</div>
<div class="card-summary mb-16">
<h2>PARTY BUS ONBOARDING</h2>
<div class="row justify-center">
<div class="col-md-6 col-lg-4 card-container-bottom">
<WorkshopIcon class="logo" />
<h4>3 DAY WORKSHOP</h4>
<div class="text">
Rapid workshop to stand-up a hello world pipeline with a templated
app through Party Bus ABMS ADCE.
</div>
</div>
</div>
<div class="row justify-center">
<a class="mt-4" href="/#/products/abms-adce/onboarding">
Get involved!
</a>
</div>
</div>
<Wave>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mx-auto">
READY TO TAKE THE NEXT STEP TO GET ON THE PARTY BUS?
</h2>
</div>
<div class="col-12 mt-4">
<v-btn class="mx-auto" color="primary" to="/contact-us">
CONTACT US
</v-btn>
</div>
</div>
</div>
</Wave>
<div class="container my-4">
<div class="row">
<div class="col-md-6 px-4 my-auto text-center text-md-right">
<img
class="mm-logo"
src="@/assets/images/logos/tool-logos/Logo_MM.png"
alt="Mattermost"
/>
</div>
<div class="col-md-5 text-center text-md-left my-4 px-8">
<p>
A chat solution for team collaboration with integrated file sharing.
Start chatting today! Currently hosting instances up to Impact Level
4 (FOUO) with no-hassle video teleconferencing and Jira/Confluence
on the way!
</p>
<v-btn
color="primary"
class="mt-4"
href="https://chat.il2.dsop.io"
target="_blank"
>
Chat now
<!-- <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon> -->
</v-btn>
</div>
</div>
</div>
<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 CICDPipeline from '@/components/CICD.small';
import VueEasyLightbox from 'vue-easy-lightbox';
import WorkshopIcon from '@/assets/images/icons/Icon_Workshop.svg';
import ExternalLink from '@/components/ExternalLink';
export default {
name: 'ADCE',
components: {
PageHeader,
Wave,
CICDPipeline,
VueEasyLightbox,
WorkshopIcon,
ExternalLink,
},
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 {
// lightbox state
lightbox: {
visible: false,
index: 0, // default: 0
imgs: [
require('@/assets/images/PartyBus-environment-02.png'),
require('@/assets/images/P1 - Tool Chain-2.jpg'),
],
},
milestones: [
{
done: true,
text: 'Mattermost',
logo: 'mattermost-logomark-blue.png',
},
{
done: true,
text: 'Atlassian (Jira & Confluence)',
logo: 'Atlassian-icon-blue-onecolor@2x.png',
},
{
done: false,
text: 'Mission App Production Clusters',
logo: 'Party_Bus_logo.png',
},
],
};
},
};
</script>
<style lang="scss">
.adce {
.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;
.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;
}
.pb-logo {
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>