apim-developer-portal1
Version:
API management developer portal
166 lines (161 loc) • 6.95 kB
HTML
<style>
.custom-filter {
display: inline;
}
.custom-filter input {
width:150px;
display: inline;
text-align: center;
}
.custom-filter.selected input {
border-top: 1px solid rgba(85, 85, 85, 1);
border-left: 1px solid rgba(85, 85, 85, 1);
border-right: 1px solid rgba(85, 85, 85, 1);
border-bottom: 1px solid rgba(85, 85, 85, 1);
background-color: rgba(204, 204, 204, 1)
}
</style>
<div class="btn-group" role="group" aria-label="Time range">
<button class="button button-default"
data-bind="click: setTimeRange1Day, disable: selectedPeriod() == '1day'">Today</button>
<button class="button button-default"
data-bind="click: setTimeRange7Days, disable: selectedPeriod() == '7days'">Last 7 days</button>
<button class="button button-default"
data-bind="click: setTimeRange30Days, disable: selectedPeriod() == '30days'">Last 30 days</button>
<button class="button button-default"
data-bind="click: setTimeRange90Days, disable: selectedPeriod() == '90days'">Last 90 days</button>
<div style="
display: inline;
/* border: 1px solid #7f7f7fd9; */
/* height: 40px; */
"
>
<form class="custom-filter" data-bind="css: { selected: selectedPeriod() == 'Custom' }">
<input type="string" class="button button-default" placeholder="MM-DD-YYYY"
data-bind="textInput: customFilterStartTime" >
<input type="string" class="button button-default" placeholder="MM-DD-YYYY"
data-bind="textInput: customFilterEndTime" >
<button type="submit" class="button button-default" style="display:none;"
data-bind="click: setTimeRangeCustom" >Load</button>
</form>
</div>
</div>
<!-- <subscription-list-dropdown-runtime params="{ paramsXYZ: selectedPeriod() }"></subscription-list-dropdown-runtime> -->
<div data-bind = 'component: {
name: "subscription-list-dropdown-runtime",
params: {
handleSubscriptionListDropdownSelect: handleSubscriptionListDropdownSelect
}
}'></div>
<div style="display: flex; justify-content: space-between;">
<h2>APIs</h2>
<h7 style="margin-top: 36px;" data-bind="text: 'Last refreshed at: '+lastRefreshedAt()"></h7>
</div>
<div>
<div class="table-preset table-preset-reports">
<div class="table-preset-head" role="columnheader">
API
</div>
<div class="table-preset-head" role="columnheader">
<a href="#" role="button" data-bind="click: reportByApiOrderBy.bind(this, 'callCountSuccess')">
Successful calls
</a>
<!-- ko if: reportByApiOrder() == 'callCountSuccess' -->
<i class="icon icon-chevron-down"></i>
<!-- /ko -->
</div>
<div class="table-preset-head" role="columnheader">
<a href="#" role="button" data-bind="click: reportByApiOrderBy.bind(this, 'callCountBlocked')">
Blocked calls
</a>
<!-- ko if: reportByApiOrder() == 'callCountBlocked' -->
<i class="icon icon-chevron-down"></i>
<!-- /ko -->
</div>
<div class="table-preset-head" role="columnheader">
<a href="#" role="button" data-bind="click: reportByApiOrderBy.bind(this, 'callCountFailed')">
Failed calls
</a>
<!-- ko if: reportByApiOrder() == 'callCountFailed' -->
<i class="icon icon-chevron-down"></i>
<!-- /ko -->
</div>
<div class="table-preset-head" role="columnheader">
<a href="#" role="button" data-bind="click: reportByApiOrderBy.bind(this, 'callCountOther')">
Other calls
</a>
<!-- ko if: reportByApiOrder() == 'callCountOther' -->
<i class="icon icon-chevron-down"></i>
<!-- /ko -->
</div>
<div class="table-preset-head" role="columnheader">
<a href="#" role="button" data-bind="click: reportByApiOrderBy.bind(this, 'callCountTotal')">
Total calls
</a>
<!-- ko if: reportByApiOrder() == 'callCountTotal' -->
<i class="icon icon-chevron-down"></i>
<!-- /ko -->
</div>
<div class="table-preset-head" role="columnheader">
<a href="#" role="button" data-bind="click: reportByApiOrderBy.bind(this, 'apiTimeAvg')">
Average response time
</a>
<!-- ko if: reportByApiOrder() == 'apiTimeAvg' -->
<i class="icon icon-chevron-down"></i>
<!-- /ko -->
</div>
<div class="table-preset-head" role="columnheader">
<a href="#" role="button" data-bind="click: reportByApiOrderBy.bind(this, 'bandwidth')">
Bandwidth
</a>
<!-- ko if: reportByApiOrder() == 'bandwidth' -->
<i class="icon icon-chevron-down"></i>
<!-- /ko -->
</div>
<!-- ko if: reportByApiHasData -->
<!--ko foreach: { data: $component.reportByApi, as: 'record' }-->
<div class="text-truncate">
<span data-bind="text: record.apiName"></span>
</div>
<div data-bind="text: record.callCountSuccess"></div>
<div data-bind="text: record.callCountBlocked"></div>
<div data-bind="text: record.callCountFailed"></div>
<div data-bind="text: record.callCountOther"></div>
<div data-bind="text: record.callCountTotal"></div>
<div data-bind="text: record.apiTimeAvg"></div>
<div data-bind="text: record.bandwidth"></div>
<!--/ko-->
<!-- /ko -->
<!-- ko ifnot: reportByApiHasData -->
<div>
No data to display
</div>
<!-- /ko -->
</div>
<!-- ko if: reportByApiHasPager -->
<ul class="pagination justify-content-center" role="navigation" aria-label="Pagination">
<!-- ko if: reportByApiHasPrevPage -->
<li class="page-item">
<a href="#" class="page-link" role="button" aria-label="Previous page"
data-bind="click: reportByApiPrevPage, enable: reportByApiHasPrevPage">
<i class="icon icon-chevron-left"></i>
</a>
</li>
<!-- /ko -->
<li class="page-item">
<span class="page-link" data-bind="text: reportByApiPage"></span>
</li>
<!-- ko if: reportByApiHasNextPage -->
<li class="page-item">
<a href="#" class="page-link" role="button" aria-label="Next page"
data-bind="click: reportByApiNextPage, enable: reportByApiHasNextPage">
<i class="icon icon-chevron-right"></i>
</a>
</li>
<!-- /ko -->
</ul>
<!-- /ko -->
<!-- ko if: reportByApiWorking -->
<spinner class="fit"></spinner>
<!-- /ko -->
</div>