72 lines
3.0 KiB
HTML
72 lines
3.0 KiB
HTML
{% from "components/empty_state.html" import EmptyState %}
|
|
{% from "components/icon.html" import Icon %}
|
|
|
|
<div>
|
|
<h2>Funds Expended per Application and Environment</h2>
|
|
{% if not portfolio.applications %}
|
|
|
|
{% set can_create_applications = user_can(permissions.CREATE_APPLICATION) %}
|
|
|
|
{{ EmptyState(
|
|
resource='applications_reporting',
|
|
button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
|
|
user_can_create=can_create_applications,
|
|
) }}
|
|
|
|
{% else %}
|
|
<spend-table v-bind:applications='{{ monthly_spending | tojson }}' inline-template>
|
|
<div class="responsive-table-wrapper">
|
|
<table class="atat-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Applications and Environments</th>
|
|
<th class="table-cell--align-right">Current Month</th>
|
|
<th class="table-cell--align-right">Last Month</th>
|
|
<th class="table-cell--align-right">Total Spent</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for='(application, applicationIndex) in applicationsState'>
|
|
<tr>
|
|
<td>
|
|
<button v-on:click='toggle($event, applicationIndex)' class='icon-link icon-link--large'>
|
|
<span v-text='application.name'></span>
|
|
<template v-if='application.isVisible'>{{ Icon('caret_down') }}</template>
|
|
<template v-else>{{ Icon('caret_up') }}</template>
|
|
</button>
|
|
</td>
|
|
<td class="table-cell--align-right">
|
|
<span v-text='formatDollars(application.this_month || 0)'></span>
|
|
</td>
|
|
<td class="table-cell--align-right">
|
|
<span v-text='formatDollars(application.last_month || 0)'></span>
|
|
</td>
|
|
<td class="table-cell--align-right">
|
|
<span v-text='formatDollars(application.total || 0)'></span>
|
|
</td>
|
|
</tr>
|
|
<tr
|
|
v-show='application.isVisible'
|
|
v-for='(environment, index) in application.environments'
|
|
v-bind:class="[ index == application.environments.length -1 ? 'reporting-spend-table__env-row--last' : '']"
|
|
>
|
|
<td>
|
|
<span class="reporting-spend-table__env-row-label" v-text='environment.name'></span>
|
|
</td>
|
|
<td class="table-cell--align-right">
|
|
<span v-text='formatDollars(environment.this_month || 0)'></span>
|
|
</td>
|
|
<td class="table-cell--align-right">
|
|
<span v-text='formatDollars(environment.last_month || 0)'></span>
|
|
</td>
|
|
<td class="table-cell--align-right">
|
|
<span v-text='formatDollars(environment.total || 0)'></span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</spend-table>
|
|
{% endif %}
|
|
</div> |