You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2019/06/20 14:19:03 UTC
[airavata-django-portal] 01/03: AIRAVATA-2990 Moving tab layout up
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 64c98fe4303f41d900faa8264c71074c6bf79dd5
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Jun 20 09:30:35 2019 -0400
AIRAVATA-2990 Moving tab layout up
---
.../statistics/ExperimentStatisticsContainer.vue | 493 +++++++++++----------
1 file changed, 254 insertions(+), 239 deletions(-)
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
index 1030d49..6180233 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
@@ -2,253 +2,268 @@
<div>
<div class="row">
<div class="col">
- <h1 class="h4 mb-4">Experiment Statistics from {{fromTimeDisplay}} to {{toTimeDisplay}}</h1>
+ <h1 class="h4 mb-4">Experiment Statistics</h1>
</div>
</div>
- <div class="row">
- <div class="col">
- <b-card header="Filter Options">
- <b-input-group class="w-100 mb-2">
- <b-input-group-prepend is-text>
- <i
- class="fa fa-calendar-week"
- aria-hidden="true"
- ></i>
- </b-input-group-prepend>
- <flat-pickr
- :value="dateRange"
- :config="dateConfig"
- @on-change="dateRangeChanged"
- class="form-control"
- />
- <b-input-group-append>
- <b-button
- @click="getPast24Hours"
- variant="outline-secondary"
- >Past 24 Hours</b-button>
- <b-button
- @click="getPastWeek"
- variant="outline-secondary"
- >Past Week</b-button>
- </b-input-group-append>
- </b-input-group>
- <b-dropdown
- text="Add Filters"
- class="mb-2"
- >
- <b-dropdown-item
- v-if="!usernameFilterEnabled"
- @click="usernameFilterEnabled=true"
- >Username</b-dropdown-item>
- <b-dropdown-item
- v-if="!applicationNameFilterEnabled"
- @click="applicationNameFilterEnabled=true"
- >Application Name</b-dropdown-item>
- <b-dropdown-item
- v-if="!hostnameFilterEnabled"
- @click="hostnameFilterEnabled=true"
- >Hostname</b-dropdown-item>
- </b-dropdown>
- <b-input-group
- v-if="usernameFilterEnabled"
- class="mb-2"
- >
- <b-form-input
- v-model="usernameFilter"
- placeholder="Username"
- @keydown.native.enter="loadStatistics"
- />
- <b-input-group-append>
- <b-button @click="removeUsernameFilter">
- <i class="fa fa-times"></i>
- <span class="sr-only">Remove username filter</span>
- </b-button>
- </b-input-group-append>
- </b-input-group>
- <b-input-group
- v-if="applicationNameFilterEnabled"
- class="mb-2"
- >
- <b-form-select
- v-model="applicationNameFilter"
- :options="applicationNameOptions"
- @input="loadStatistics"
- >
- <template slot="first">
- <option
- :value="null"
- disabled
- >Select an application to filter on</option>
- </template>
- </b-form-select>
- <b-input-group-append>
- <b-button @click="removeApplicationNameFilter">
- <i class="fa fa-times"></i>
- <span class="sr-only">Remove application name filter</span>
- </b-button>
- </b-input-group-append>
- </b-input-group>
- <b-input-group
- v-if="hostnameFilterEnabled"
- class="mb-2"
- >
- <b-form-select
- v-model="hostnameFilter"
- :options="hostnameOptions"
- @input="loadStatistics"
- >
- <template slot="first">
- <option
- :value="null"
- disabled
- >Select compute resource to filter on</option>
- </template>
- </b-form-select>
- <b-input-group-append>
- <b-button @click="removeHostnameFilter">
- <i class="fa fa-times"></i>
- <span class="sr-only">Remove hostname filter</span>
- </b-button>
- </b-input-group-append>
- </b-input-group>
- <template slot="footer">
- <div class="d-flex justify-content-end">
- <b-button
- @click="loadStatistics"
- class="ml-auto"
- variant="primary"
- >Get Statistics</b-button>
- </div>
- </template>
- </b-card>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-2 col-md-4">
- <experiment-statistics-card
- bg-variant="primary"
- header-text-variant="white"
- :count="experimentStatistics.allExperimentCount || 0"
- title="Total Experiments"
- @click="selectedExperimentSummariesKey = 'allExperiments'"
- >
- <span slot="link-text">All</span>
- </experiment-statistics-card>
- </div>
- <div class="col-lg-2 col-md-4">
- <experiment-statistics-card
- bg-variant="light"
- :count="experimentStatistics.createdExperimentCount || 0"
- :states="createdStates"
- title="Created Experiments"
- @click="selectedExperimentSummariesKey = 'createdExperiments'"
- >
- </experiment-statistics-card>
- </div>
- <div class="col-lg-2 col-md-4">
- <experiment-statistics-card
- bg-variant="light"
- header-text-variant="success"
- :count="experimentStatistics.runningExperimentCount || 0"
- :states="runningStates"
- title="Running Experiments"
- @click="selectedExperimentSummariesKey = 'runningExperiments'"
- >
- </experiment-statistics-card>
-
- </div>
- <div class="col-lg-2 col-md-4">
- <experiment-statistics-card
- bg-variant="success"
- header-text-variant="white"
- link-variant="success"
- :count="experimentStatistics.completedExperimentCount || 0"
- :states="completedStates"
- title="Completed Experiments"
- @click="selectedExperimentSummariesKey = 'completedExperiments'"
- >
- </experiment-statistics-card>
- </div>
- <div class="col-lg-2 col-md-4">
- <experiment-statistics-card
- bg-variant="warning"
- header-text-variant="white"
- link-variant="warning"
- :count="experimentStatistics.cancelledExperimentCount || 0"
- :states="canceledStates"
- title="Cancelled Experiments"
- @click="selectedExperimentSummariesKey = 'cancelledExperiments'"
- >
- </experiment-statistics-card>
- </div>
- <div class="col-lg-2 col-md-4">
- <experiment-statistics-card
- bg-variant="danger"
- header-text-variant="white"
- link-variant="danger"
- :count="experimentStatistics.failedExperimentCount || 0"
- :states="failedStates"
- title="Failed Experiments"
- @click="selectedExperimentSummariesKey = 'failedExperiments'"
- >
- </experiment-statistics-card>
-
- </div>
- </div>
- <div class="row">
- <div class="col">
- <b-card no-body>
- <b-tabs card>
- <b-tab :title="selectedExperimentsTabTitle">
- <b-table
- :fields="fields"
- :items="items"
- >
- <template
- slot="executionId"
- slot-scope="data"
+ <b-card no-body>
+ <b-tabs card>
+ <b-tab :title="selectedExperimentsTabTitle">
+ <div class="row">
+ <div class="col">
+ <b-card header="Filter Options">
+ <b-input-group class="w-100 mb-2">
+ <b-input-group-prepend is-text>
+ <i
+ class="fa fa-calendar-week"
+ aria-hidden="true"
+ ></i>
+ </b-input-group-prepend>
+ <flat-pickr
+ :value="dateRange"
+ :config="dateConfig"
+ @on-change="dateRangeChanged"
+ class="form-control"
+ />
+ <b-input-group-append>
+ <b-button
+ @click="getPast24Hours"
+ variant="outline-secondary"
+ >Past 24 Hours</b-button>
+ <b-button
+ @click="getPastWeek"
+ variant="outline-secondary"
+ >Past Week</b-button>
+ </b-input-group-append>
+ </b-input-group>
+ <b-dropdown
+ text="Add Filters"
+ class="mb-2"
>
- <application-name :application-interface-id="data.value" />
- </template>
- <template
- slot="resourceHostId"
- slot-scope="data"
+ <b-dropdown-item
+ v-if="!usernameFilterEnabled"
+ @click="usernameFilterEnabled=true"
+ >Username</b-dropdown-item>
+ <b-dropdown-item
+ v-if="!applicationNameFilterEnabled"
+ @click="applicationNameFilterEnabled=true"
+ >Application Name</b-dropdown-item>
+ <b-dropdown-item
+ v-if="!hostnameFilterEnabled"
+ @click="hostnameFilterEnabled=true"
+ >Hostname</b-dropdown-item>
+ </b-dropdown>
+ <b-input-group
+ v-if="usernameFilterEnabled"
+ class="mb-2"
>
- <compute-resource-name :compute-resource-id="data.value" />
- </template>
- <template
- slot="creationTime"
- slot-scope="data"
+ <b-form-input
+ v-model="usernameFilter"
+ placeholder="Username"
+ @keydown.native.enter="loadStatistics"
+ />
+ <b-input-group-append>
+ <b-button @click="removeUsernameFilter">
+ <i class="fa fa-times"></i>
+ <span class="sr-only">Remove username filter</span>
+ </b-button>
+ </b-input-group-append>
+ </b-input-group>
+ <b-input-group
+ v-if="applicationNameFilterEnabled"
+ class="mb-2"
>
- <human-date :date="data.value" />
- </template>
- <template
- slot="experimentStatus"
- slot-scope="data"
+ <b-form-select
+ v-model="applicationNameFilter"
+ :options="applicationNameOptions"
+ @input="loadStatistics"
+ >
+ <template slot="first">
+ <option
+ :value="null"
+ disabled
+ >Select an application to filter on</option>
+ </template>
+ </b-form-select>
+ <b-input-group-append>
+ <b-button @click="removeApplicationNameFilter">
+ <i class="fa fa-times"></i>
+ <span class="sr-only">Remove application name filter</span>
+ </b-button>
+ </b-input-group-append>
+ </b-input-group>
+ <b-input-group
+ v-if="hostnameFilterEnabled"
+ class="mb-2"
>
- <experiment-status-badge :status-name="data.value.name" />
+ <b-form-select
+ v-model="hostnameFilter"
+ :options="hostnameOptions"
+ @input="loadStatistics"
+ >
+ <template slot="first">
+ <option
+ :value="null"
+ disabled
+ >Select compute resource to filter on</option>
+ </template>
+ </b-form-select>
+ <b-input-group-append>
+ <b-button @click="removeHostnameFilter">
+ <i class="fa fa-times"></i>
+ <span class="sr-only">Remove hostname filter</span>
+ </b-button>
+ </b-input-group-append>
+ </b-input-group>
+ <template slot="footer">
+ <div class="d-flex justify-content-end">
+ <b-button
+ @click="loadStatistics"
+ class="ml-auto"
+ variant="primary"
+ >Get Statistics</b-button>
+ </div>
</template>
- <template
- slot="actions"
- slot-scope="data"
+ </b-card>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+
+ <h2 class="h5 mb-4">Experiment Statistics from {{fromTimeDisplay}} to {{toTimeDisplay}}</h2>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-2 col-md-4">
+ <experiment-statistics-card
+ bg-variant="primary"
+ header-text-variant="white"
+ :count="experimentStatistics.allExperimentCount || 0"
+ title="Total Experiments"
+ @click="selectedExperimentSummariesKey = 'allExperiments'"
+ >
+ <span slot="link-text">All</span>
+ </experiment-statistics-card>
+ </div>
+ <div class="col-lg-2 col-md-4">
+ <experiment-statistics-card
+ bg-variant="light"
+ :count="experimentStatistics.createdExperimentCount || 0"
+ :states="createdStates"
+ title="Created Experiments"
+ @click="selectedExperimentSummariesKey = 'createdExperiments'"
+ >
+ </experiment-statistics-card>
+ </div>
+ <div class="col-lg-2 col-md-4">
+ <experiment-statistics-card
+ bg-variant="light"
+ header-text-variant="success"
+ :count="experimentStatistics.runningExperimentCount || 0"
+ :states="runningStates"
+ title="Running Experiments"
+ @click="selectedExperimentSummariesKey = 'runningExperiments'"
+ >
+ </experiment-statistics-card>
+
+ </div>
+ <div class="col-lg-2 col-md-4">
+ <experiment-statistics-card
+ bg-variant="success"
+ header-text-variant="white"
+ link-variant="success"
+ :count="experimentStatistics.completedExperimentCount || 0"
+ :states="completedStates"
+ title="Completed Experiments"
+ @click="selectedExperimentSummariesKey = 'completedExperiments'"
+ >
+ </experiment-statistics-card>
+ </div>
+ <div class="col-lg-2 col-md-4">
+ <experiment-statistics-card
+ bg-variant="warning"
+ header-text-variant="white"
+ link-variant="warning"
+ :count="experimentStatistics.cancelledExperimentCount || 0"
+ :states="canceledStates"
+ title="Cancelled Experiments"
+ @click="selectedExperimentSummariesKey = 'cancelledExperiments'"
+ >
+ </experiment-statistics-card>
+ </div>
+ <div class="col-lg-2 col-md-4">
+ <experiment-statistics-card
+ bg-variant="danger"
+ header-text-variant="white"
+ link-variant="danger"
+ :count="experimentStatistics.failedExperimentCount || 0"
+ :states="failedStates"
+ title="Failed Experiments"
+ @click="selectedExperimentSummariesKey = 'failedExperiments'"
+ >
+ </experiment-statistics-card>
+
+ </div>
+ </div>
+ <div
+ class="row"
+ v-if="items.length > 0"
+ >
+ <div class="col">
+ <b-card>
+ <b-table
+ :fields="fields"
+ :items="items"
>
- <b-link @click="showExperimentDetails(data.item.experimentId)">
- View Details
- <i
- class="far fa-chart-bar"
- aria-hidden="true"
- ></i>
- </b-link>
- </template>
- </b-table>
- </b-tab>
- <b-tab v-for="experimentDetail in experimentDetails" :key="experimentDetail.experimentId" :title="experimentDetail.experimentName">
- <experiment-details-view :experiment="experimentDetail"/>
- </b-tab>
- </b-tabs>
- </b-card>
- </div>
- </div>
+ <template
+ slot="executionId"
+ slot-scope="data"
+ >
+ <application-name :application-interface-id="data.value" />
+ </template>
+ <template
+ slot="resourceHostId"
+ slot-scope="data"
+ >
+ <compute-resource-name :compute-resource-id="data.value" />
+ </template>
+ <template
+ slot="creationTime"
+ slot-scope="data"
+ >
+ <human-date :date="data.value" />
+ </template>
+ <template
+ slot="experimentStatus"
+ slot-scope="data"
+ >
+ <experiment-status-badge :status-name="data.value.name" />
+ </template>
+ <template
+ slot="actions"
+ slot-scope="data"
+ >
+ <b-link @click="showExperimentDetails(data.item.experimentId)">
+ View Details
+ <i
+ class="far fa-chart-bar"
+ aria-hidden="true"
+ ></i>
+ </b-link>
+ </template>
+ </b-table>
+ </b-card>
+ </div>
+ </div>
+ </b-tab>
+ <b-tab
+ v-for="experimentDetail in experimentDetails"
+ :key="experimentDetail.experimentId"
+ :title="experimentDetail.experimentName"
+ >
+ <experiment-details-view :experiment="experimentDetail" />
+ </b-tab>
+ </b-tabs>
+ </b-card>
</div>
</template>
<script>