Move requests & workspaces templates into directories
This commit is contained in:
Patrick Smith
15
templates/workspaces/base.html
Normal file
15
templates/workspaces/base.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class='workspace-panel-container'>
|
||||
<div class='col'>
|
||||
{% include 'navigation/workspace_navigation.html' %}
|
||||
</div>
|
||||
|
||||
<div class='col col--grow'>
|
||||
{% block workspace_content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
31
templates/workspaces/index.html
Normal file
31
templates/workspaces/index.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class='col'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Workspace Name</th>
|
||||
<th>Task Order</th>
|
||||
<th>Users</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for workspace in workspaces %}
|
||||
<tr>
|
||||
<td>
|
||||
<a class='icon-link icon-link--large' href="/workspaces/{{ workspace.id }}/projects">{{ workspace.name }}</a><br>
|
||||
</td>
|
||||
<td>
|
||||
#{{ workspace.task_order.number }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="label">{{ workspace.user_count }}</span><span class='h6'>Users</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
228
templates/workspaces/members/edit.html
Normal file
228
templates/workspaces/members/edit.html
Normal file
@@ -0,0 +1,228 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/selector.html" import Selector %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<form method="POST" action="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=member.user_id) }}" autocomplete="false">
|
||||
{{ form.csrf_token }}
|
||||
|
||||
<div class='panel member-card'>
|
||||
<div class='member-card__header'>
|
||||
<h1 class='member-card__heading'>{{ member.user.full_name }}</h1>
|
||||
|
||||
<div class="usa-input member-card__input">
|
||||
{{ Selector(form.workspace_role) }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='member-card__details'>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>DOD ID:</dt>
|
||||
<dd>{{ member.user.dod_id }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Email:</dt>
|
||||
<dd>{{ member.user.email }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<a href='#' class='icon-link'>edit account details</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel__heading panel__heading--tight">
|
||||
<h2 class="h3">Manage Access <div class="subtitle">Grant access to an environment</div></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='search-bar'>
|
||||
<div class='usa-input search-input'>
|
||||
<label for='project-search'>Search by project name</label>
|
||||
<input type='search' id='project-search' name='project-search' placeholder="Search by project name"/>
|
||||
<button type="submit">
|
||||
<span class="hide">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% call Modal(name='rolesModal', dismissable=False) %}
|
||||
<div class="block-list">
|
||||
<header class="block-list__header">
|
||||
<h2 class="block-list__title">
|
||||
Environment access for Danny Knight
|
||||
<div class='subtitle'>Project Name - Environment Name</div>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<form method="post" action="">
|
||||
<ul>
|
||||
<li class='block-list__item block-list__item--selectable'>
|
||||
<input type='radio' name='radio' id='radio-' />
|
||||
<label for='radio-'>
|
||||
<dl>
|
||||
<dt>Developer</dt>
|
||||
<dd>Configures cloud-based IaaS and PaaS computing, networking, and storage services.</dd>
|
||||
</dl>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class='block-list__item block-list__item--selectable'>
|
||||
<input type='radio' name='radio' id='radio-' />
|
||||
<label for='radio-'>
|
||||
<dl>
|
||||
<dt>Database Administrator</dt>
|
||||
<dd>Configures cloud-based database services.</dd>
|
||||
</dl>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class='block-list__item block-list__item--selectable'>
|
||||
<input type='radio' name='radio' id='radio-' />
|
||||
<label for='radio-'>
|
||||
<dl>
|
||||
<dt>DevOps</dt>
|
||||
<dd>Provisions, deprovisions, and deploys cloud-based IaaS and PaaS computing, networking, and storage services, including pre-configured machine images.</dd>
|
||||
</dl>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class='block-list__item block-list__item--selectable'>
|
||||
<input type='radio' name='radio' id='radio-' />
|
||||
<label for='radio-'>
|
||||
<dl>
|
||||
<dt>Billing Administrator</dt>
|
||||
<dd>Views cloud resource usage, budget reports, and invoices; Tracks budgets, including spend reports, cost planning and projections, and sets limits based on cloud service usage.</dd>
|
||||
</dl>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class='block-list__item block-list__item--selectable'>
|
||||
<input type='radio' name='radio' id='radio-' />
|
||||
<label for='radio-'>
|
||||
<dl>
|
||||
<dt>Security Administrator</dt>
|
||||
<dd>Accesses information security and control tools of cloud resources which include viewing cloud resource usage logging, user roles and permissioning history.</dd>
|
||||
</dl>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class='block-list__item block-list__item--selectable'>
|
||||
<input type='radio' name='radio' id='radio-' />
|
||||
<label for='radio-'>
|
||||
<dl>
|
||||
<dt>Financial Auditor</dt>
|
||||
<dd>Views cloud resource usage and budget reports.</dd>
|
||||
</dl>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class='block-list__footer'>
|
||||
<div class='action-group'>
|
||||
<a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
|
||||
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
{% endcall %}
|
||||
|
||||
<div is='toggler' default-visible class='block-list project-list-item'>
|
||||
<template slot-scope='{ isVisible, toggle }'>
|
||||
<header class='block-list__header'>
|
||||
<button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
|
||||
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
|
||||
<template v-else>{{ Icon('caret_right') }}</template>
|
||||
<h3 class="block-list__title">Code.mil</h3>
|
||||
</button>
|
||||
<span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
|
||||
</header>
|
||||
<ul v-show='isVisible'>
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<span class='project-list-item__environment'>
|
||||
Development
|
||||
</span>
|
||||
<div class='project-list-item__environment__actions'>
|
||||
<span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<span class='project-list-item__environment'>
|
||||
Sandbox
|
||||
</span>
|
||||
<div class='project-list-item__environment__actions'>
|
||||
<span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<span class='project-list-item__environment'>
|
||||
Production
|
||||
</span>
|
||||
<div class='project-list-item__environment__actions'>
|
||||
<span class="label label--success">Billing</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div is="toggler" class='block-list project-list-item'>
|
||||
<template slot-scope='{ isVisible, toggle }'>
|
||||
<header class='block-list__header'>
|
||||
<button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
|
||||
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
|
||||
<template v-else>{{ Icon('caret_right') }}</template>
|
||||
<h3 class="block-list__title">Digital Dojo</h3>
|
||||
</button>
|
||||
<span class="label">no access</span>
|
||||
</header>
|
||||
<ul v-show='isVisible'>
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<span class='project-list-item__environment'>
|
||||
Development
|
||||
</span>
|
||||
<div class='project-list-item__environment__actions'>
|
||||
<span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<span class='project-list-item__environment'>
|
||||
Sandbox
|
||||
</span>
|
||||
<div class='project-list-item__environment__actions'>
|
||||
<span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<span class='project-list-item__environment'>
|
||||
Production
|
||||
</span>
|
||||
<div class='project-list-item__environment__actions'>
|
||||
<span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class='action-group'>
|
||||
<button class='action-group__action usa-button usa-button-big'>
|
||||
{% if is_new_member %}Create{% else %}Save{% endif %}
|
||||
</button>
|
||||
<a href='#' class='action-group__action icon-link'>
|
||||
{{ Icon('x') }}
|
||||
<span>Cancel</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
107
templates/workspaces/members/index.html
Normal file
107
templates/workspaces/members/index.html
Normal file
@@ -0,0 +1,107 @@
|
||||
{% extends "workspaces/base.html" %}
|
||||
|
||||
{% from "components/empty_state.html" import EmptyState %}
|
||||
{% from "components/alert.html" import Alert %}
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{% if not workspace.members %}
|
||||
|
||||
{% set user_can_invite = user_can(permissions.ASSIGN_AND_UNASSIGN_ATAT_ROLE) %}
|
||||
|
||||
{{ EmptyState(
|
||||
'There are currently no members in this Workspace.',
|
||||
action_label='Invite a new Member' if user_can_invite else None,
|
||||
action_href='/members/new' if user_can_invite else None,
|
||||
sub_message=None if user_can_invite else 'Please contact your JEDI workspace administrator to invite new members.',
|
||||
icon='avatar'
|
||||
) }}
|
||||
|
||||
|
||||
{% else %}
|
||||
|
||||
{% set new_member_name = request.args.get("newMemberName") %}
|
||||
{% if new_member_name %}
|
||||
{% set message -%}
|
||||
<p>{{ new_member_name }} was successfully invited via email to this workspace. They do not yet have access to any environments.</p>
|
||||
<p><a href="#">Add environment access.</a></p>
|
||||
{%- endset %}
|
||||
|
||||
{{ Alert('Member added successfully',
|
||||
message=message,
|
||||
level='success'
|
||||
) }}
|
||||
{% endif %}
|
||||
|
||||
{% set member_name = request.args.get("memberName") %}
|
||||
{% set updated_role = request.args.get("updatedRole") %}
|
||||
{% if updated_role %}
|
||||
{% set message -%}
|
||||
<p>{{ member_name }}'s role was successfully updated to {{ updated_role }}</p>
|
||||
{%- endset %}
|
||||
|
||||
{{ Alert('Workspace role updated successfully',
|
||||
message=message,
|
||||
level='success'
|
||||
) }}
|
||||
{% endif %}
|
||||
|
||||
<form class='search-bar'>
|
||||
<div class='usa-input search-input'>
|
||||
<label for='members-search'>Search members by name</label>
|
||||
<input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
|
||||
<button type="submit">
|
||||
<span class="hide">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class='usa-input filter-input'>
|
||||
<label for='filter-status'>Filter members by status</label>
|
||||
<select id="filter-status" name="filter-status">
|
||||
<option value="" selected disabled>Filter by status</option>
|
||||
<option value="">Active</option>
|
||||
<option value="">Pending</option>
|
||||
<option value="">Denied</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class='usa-input filter-input'>
|
||||
<label for='filter-role'>Filter members by role</label>
|
||||
<select id="filter-role" name="filter-role">
|
||||
<option value="" selected disabled>Filter by role</option>
|
||||
<option value="">Admin</option>
|
||||
<option value="">CCPO</option>
|
||||
<option value="">Developer</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<div class='responsive-table-wrapper'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" width="50%">Name</th>
|
||||
<th scope="col" class='table-cell--shrink'> <span class="hide">Status Flag</span></th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Workspace Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for m in workspace.members %}
|
||||
<tr>
|
||||
<td><a href="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=m.user_id) }}" class="icon-link icon-link--large">{{ m.user_name }}</a></td>
|
||||
<td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% endif %}</td>
|
||||
<td>{{ m.status }}</a></td>
|
||||
<td>{{ m.role }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
44
templates/workspaces/members/new.html
Normal file
44
templates/workspaces/members/new.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/options_input.html" import OptionsInput %}
|
||||
{% from "components/selector.html" import Selector %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<form method="POST" action="{{ url_for('workspaces.create_member', workspace_id=workspace.id) }}" autocomplete="false">
|
||||
{{ form.csrf_token }}
|
||||
|
||||
<div class="panel">
|
||||
|
||||
<div class="panel__heading">
|
||||
<h1>New Member</h1>
|
||||
<div class="subtitle"><h2>Account Details</h2></div>
|
||||
</div>
|
||||
|
||||
<div class="panel__content">
|
||||
{{ TextInput(form.first_name) }}
|
||||
{{ TextInput(form.last_name) }}
|
||||
{{ TextInput(form.email,placeholder='jane@mail.mil', validation='email') }}
|
||||
{{ TextInput(form.dod_id,placeholder='10-digit number on the back of the CAC', validation='dodId') }}
|
||||
{{ Selector(form.workspace_role) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='action-group'>
|
||||
<button class="usa-button usa-button-big usa-button-primary" tabindex="0">Add User</button>
|
||||
<a href='#' class='action-group__action icon-link'>
|
||||
{{ Icon('x') }}
|
||||
<span>Cancel</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
108
templates/workspaces/projects/edit.html.to
Normal file
108
templates/workspaces/projects/edit.html.to
Normal file
@@ -0,0 +1,108 @@
|
||||
{% extends "base_workspace.html.to" %}
|
||||
|
||||
{% from "components/alert.html" import Alert %}
|
||||
|
||||
{% block template_vars %}
|
||||
{% set is_new_project = False %}
|
||||
{% set project_name = "Code.mil" %}
|
||||
{% set project_id = "789" %}
|
||||
{% end %}
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{{ Alert(
|
||||
"UI Mock",
|
||||
message="<p>Please note, this screen is a non-functional UI mockup.</p>",
|
||||
level="warning"
|
||||
) }}
|
||||
|
||||
<form action=''>
|
||||
<div class='panel'>
|
||||
<div class='panel__heading'>
|
||||
<h1 class='h2'>
|
||||
{% if is_new_project %}
|
||||
Add a new project
|
||||
{% else %}
|
||||
{{ project_name }}
|
||||
<span class='subtitle'>Edit project</span>
|
||||
{% end %}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class='panel__content'>
|
||||
<div class='usa-input'>
|
||||
<label for='project-name'>Project Name</label>
|
||||
<input id='project-name' type='text'/>
|
||||
</div>
|
||||
|
||||
<div class='usa-input'>
|
||||
<label for='project-description'>Description</label>
|
||||
<textarea id='project-description'></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class='block-list'>
|
||||
<header class='block-list__header'>
|
||||
<h2 class='block-list__title'>Project Environments</h2>
|
||||
</header>
|
||||
|
||||
{# All instances of .usa-input groups here should be replaced with {% module TextInput(wtforms.fields.Field) %} #}
|
||||
|
||||
<ul>
|
||||
<li class='block-list__item project-edit__env-list-item'>
|
||||
<div class='usa-input'>
|
||||
<label for='environment-name-1'>Environment Name</label>
|
||||
<input id='environment-name-1' type='text' placeholder="Environment 1" />
|
||||
</div>
|
||||
<button class='project-edit__env-list-item__remover'>
|
||||
{% module Icon('trash') %}
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class='block-list__item project-edit__env-list-item'>
|
||||
<div class='usa-input'>
|
||||
<label for='environment-name-2'>Environment Name</label>
|
||||
<input id='environment-name-2' type='text' placeholder="Environment 2" />
|
||||
</div>
|
||||
<button class='project-edit__env-list-item__remover '>
|
||||
{% module Icon('trash') %}
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class='block-list__item project-edit__env-list-item'>
|
||||
<div class='usa-input'>
|
||||
<label for='environment-name-3'>Environment Name</label>
|
||||
<input id='environment-name-3' type='text' placeholder="Environment 3" />
|
||||
</div>
|
||||
<button class='project-edit__env-list-item__remover'>
|
||||
{% module Icon('trash') %}
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<footer class='block-list__footer'>
|
||||
<a href='/' class='icon-link'>
|
||||
{% module Icon('plus') %}
|
||||
<span class="icon-link">Add another environment</span>
|
||||
</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<div class='action-group'>
|
||||
<a href='/styleguide' class='action-group__action usa-button usa-button-big'>
|
||||
{% if is_new_project %}Create{% else %}Save{% end %} Project
|
||||
</a>
|
||||
<a href='/styleguide' class='action-group__action icon-link'>
|
||||
{% module Icon('x') %}
|
||||
<span>Cancel</span>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% end %}
|
||||
|
||||
54
templates/workspaces/projects/index.html
Normal file
54
templates/workspaces/projects/index.html
Normal file
@@ -0,0 +1,54 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/empty_state.html" import EmptyState %}
|
||||
|
||||
{% extends "workspaces/base.html" %}
|
||||
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{% if not workspace.projects %}
|
||||
|
||||
{% set can_create_projects = user_can(permissions.ADD_APPLICATION_IN_WORKSPACE) %}
|
||||
|
||||
{{ EmptyState(
|
||||
'This workspace doesn’t have any projects yet.',
|
||||
action_label='Add a New Project' if can_create_projects else None,
|
||||
action_href=url_for('workspaces.new_project', workspace_id=workspace.id) if can_create_projects else None,
|
||||
icon='cloud',
|
||||
sub_message=None if can_create_projects else 'Please contact your JEDI workspace administrator to set up a new project.'
|
||||
) }}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% for project in workspace.projects %}
|
||||
<div class='block-list project-list-item'>
|
||||
<header class='block-list__header'>
|
||||
<h2 class='block-list__title'>{{ project.name }} ({{ project.environments|length }} environments)</h2>
|
||||
<a class='icon-link' href='/workspaces/123456/projects/789/edit'>
|
||||
{{ Icon('edit') }}
|
||||
<span>edit</span>
|
||||
</a>
|
||||
</header>
|
||||
<ul>
|
||||
{% for environment in project.environments %}
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<a href='/' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
|
||||
{{ Icon('link') }}
|
||||
<span>{{ environment.name }}</span>
|
||||
</a>
|
||||
|
||||
<div class='project-list-item__environment__members'>
|
||||
<div class='label'>{{ environment.num_users }}</div>
|
||||
<span>members</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
96
templates/workspaces/projects/new.html
Normal file
96
templates/workspaces/projects/new.html
Normal file
@@ -0,0 +1,96 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/tooltip.html" import Tooltip %}
|
||||
{% from "components/alert.html" import Alert %}
|
||||
|
||||
{% extends "workspaces/base.html" %}
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{% set modalName = "newProjectConfirmation" %}
|
||||
{% if request.args.get("newWorkspace") %}
|
||||
{{ Alert('Workspace created!',
|
||||
message="\
|
||||
<p>You are now ready to create projects and environments within the JEDI Cloud.</p>
|
||||
",
|
||||
level='success'
|
||||
) }}
|
||||
{% endif %}
|
||||
|
||||
<new-project inline-template v-bind:initial-data='{{ form.data|tojson }}'>
|
||||
<form method="POST" action="{{ url_for('workspaces.update_project', workspace_id=workspace.id) }}" >
|
||||
{% call Modal(name=modalName, dismissable=False) %}
|
||||
<h1>Create project !{ name }</h1>
|
||||
|
||||
<p>
|
||||
When you click <em>Create Project</em>, the environments
|
||||
<span v-for="(environment, index) in environments">
|
||||
<strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
|
||||
</span>
|
||||
will be created as individual cloud resource groups under <strong>!{ name }</strong> project.
|
||||
</p>
|
||||
|
||||
<div class='action-group'>
|
||||
<button type='submit' class='action-group__action usa-button' tabindex='0'>Create Project</button>
|
||||
<button type='button' v-on:click="closeModal('{{ modalName }}')" class='icon-link action-group__action' tabindex='0'>Cancel</button>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
{{ form.csrf_token }}
|
||||
<div class="panel">
|
||||
<div class="panel__heading panel__heading--grow">
|
||||
<h1>Add a new project</h1>
|
||||
</div>
|
||||
|
||||
<div class="panel__content">
|
||||
<p>
|
||||
AT-AT allows you to organize your workspace into multiple projects, each of which may have environments.
|
||||
</p>
|
||||
{{ TextInput(form.name) }}
|
||||
{{ TextInput(form.description, paragraph=True) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if form.environment_names.errors %}
|
||||
{% for error in form.environment_names.errors %}
|
||||
{{ Alert(error, level="error") }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div class="block-list project-list-item">
|
||||
<header class="block-list__header block-list__header--grow">
|
||||
<h2 class="block-list__title">Project Environments</h2>
|
||||
<p>
|
||||
Each environment created within a project is an enclave of cloud resources that is logically separated from each other for increased security.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<ul>
|
||||
<li v-for="(environment, i) in environments" class="block-list__item project-edit__env-list-item">
|
||||
<div class="usa-input">
|
||||
<label :for="'environment_names-' + i">Environment Name</label>
|
||||
<input type="text" :name="'environment_names-' + i" :id="'environment_names-' + i" v-model="environment.name">
|
||||
</div>
|
||||
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='project-edit__env-list-item__remover'>
|
||||
{{ Icon('trash') }}
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="block-list__footer">
|
||||
<button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="action-group">
|
||||
<button v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">Create Project</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</new-project>
|
||||
{% endblock %}
|
||||
162
templates/workspaces/reports/index.html
Normal file
162
templates/workspaces/reports/index.html
Normal file
@@ -0,0 +1,162 @@
|
||||
{% extends "workspaces/base.html" %}
|
||||
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{{ Alert("Funding Information & Reports for Workspace " + workspace.name,
|
||||
message="<p>On this screen you'll find detailed reporting information on this workspace. This message needs to be written better and be dismissable.</p>",
|
||||
actions=[
|
||||
{"label": "Learn More", "href": "/", "icon": "info"},
|
||||
{"label": "Dismiss", "href": "/"}
|
||||
] ) }}
|
||||
|
||||
<div class='funding-summary-row'>
|
||||
|
||||
<div class='funding-summary-row__col'>
|
||||
<div class='panel spend-summary'>
|
||||
<div class='row'>
|
||||
<h2 class='spend-summary__heading col'>Workspace Total Spend</h2>
|
||||
<dl class='spend-summary__budget'>
|
||||
{% set budget = workspace_totals['budget'] %}
|
||||
{% set spent = workspace_totals['spent'] %}
|
||||
{% set remaining = budget - spent %}
|
||||
<div>
|
||||
<dt>Budget </dt>
|
||||
<dd>{{ budget | dollars }}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Remaining</dt>
|
||||
<dd>{{ remaining | dollars }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'></meter>
|
||||
|
||||
<dl class='spend-summary__spent'>
|
||||
<dt>Total spend to date</dt>
|
||||
<dd>{{ spent | dollars }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='funding-summary-row__col'>
|
||||
<div class='panel to-summary'>
|
||||
<div class='to-summary__row'>
|
||||
|
||||
<div class='to-summary__to'>
|
||||
<h2 class='to-summary__heading'>Task Order</h2>
|
||||
<dl class='to-summary__to-number'>
|
||||
<dt class='usa-sr-only'>Task Order Number</dt>
|
||||
<dd>1234567890</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class='to-summary__expiration'>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>Expires</dt>
|
||||
<dd>November 1, 2019</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Remaining</dt>
|
||||
<dd>200 days</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<a href='#' class='icon-link'>
|
||||
Manage Task Order
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dl class='to-summary__co'>
|
||||
<dt>Contracting Officer</dt>
|
||||
<dd>
|
||||
Pietro Quirines
|
||||
<a class='icon-link' href='mailto:email@email.com'>email@email.com</a>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% set workspace_totals = monthly_totals['workspace'] %}
|
||||
{% set current_month_index = current_month.strftime('%m/%Y') %}
|
||||
{% set prev_month_index = prev_month.strftime('%m/%Y') %}
|
||||
{% set two_months_ago_index = two_months_ago.strftime('%m/%Y') %}
|
||||
|
||||
<div class='spend-table responsive-table-wrapper'>
|
||||
<div class='spend-table__header'>
|
||||
<h2 class='spend-table__title'>Total spend per month</h2>
|
||||
|
||||
<select name='month' id='month' class='spend-table__month-select'>
|
||||
<option value='03/2019'>{{ current_month.strftime('%B %Y') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
|
||||
<th scope='col' class='table-cell--align-right previous-month'>{{ two_months_ago.strftime('%B %Y') }}</th>
|
||||
<th scope='col' class='table-cell--align-right previous-month'>{{ prev_month.strftime('%B %Y') }}</th>
|
||||
<th scope='col' class='table-cell--align-right current-month'>{{ current_month.strftime('%B %Y') }}</th>
|
||||
<td class='current-month'></td>
|
||||
</thead>
|
||||
|
||||
<tbody class='spend-table__workspace'>
|
||||
<tr>
|
||||
<th scope='row'>Workspace Total</th>
|
||||
<td class='table-cell--align-right previous-month'>{{ workspace_totals.get(two_months_ago_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right previous-month'>{{ workspace_totals.get(prev_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right current-month'>{{ workspace_totals.get(current_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--expand current-month meter-cell'>
|
||||
<meter value='{{ workspace_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
{% for project_name, project_totals in monthly_totals['projects'].items() %}
|
||||
<tbody is='toggler' class='spend-table__project'>
|
||||
<template slot-scope='{ isVisible, toggle }'>
|
||||
<tr>
|
||||
<th scope='rowgroup'>
|
||||
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
|
||||
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
|
||||
<template v-else>{{ Icon('caret_right') }}</template>
|
||||
{{ project_name }}
|
||||
</button>
|
||||
</th>
|
||||
<td class='table-cell--align-right previous-month'>{{ project_totals.get(two_months_ago_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right previous-month'>{{ project_totals.get(prev_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right current-month'>{{ project_totals.get(current_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--expand current-month meter-cell'>
|
||||
<span class='spend-table__meter-value'>{{ (100 * (project_totals.get(current_month_index, 0) / workspace_totals.get(current_month_index, 1))) | round | int }}%</span>
|
||||
<meter value='{{ project_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{% for env_name, env_totals in monthly_totals['environments'][project_name].items() %}
|
||||
<tr v-show='isVisible'>
|
||||
<th scope='rowgroup'><a href='#' class='icon-link spend-table__project__env'>{{ Icon('link') }} {{ env_name }}</a></th>
|
||||
<td class='table-cell--align-right previous-month'>{{ env_totals.get(two_months_ago_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right previous-month'>{{ env_totals.get(prev_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right current-month'>{{ env_totals.get(current_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--expand current-month'></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</template>
|
||||
</tbody>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user