graphdb-workbench
Version:
The web application for GraphDB APIs
193 lines (179 loc) • 11.1 kB
HTML
<link href="css/graphql/graphql-endpoint-management.css?v=3.2.0-TR-design-system-1" rel="stylesheet"/>
<div class="graphql-endpoint-management-view">
<h1 id="title-container">
<span id="graphql-endpoint-management-title-label">{{title}}</span>
<page-info-tooltip></page-info-tooltip>
</h1>
<div core-errors></div>
<div onto-loader-new
ng-show="loadingEndpointsInfo"
class="graphql-endpoint-management-page-loader"
size="100">
</div>
<div ng-if="getActiveRepository() && !loadingEndpointsInfo" class="endpoint-management-container">
<div class="toolbar">
<div class="endpoints-filter">
<input type="text" ng-if="hasEndpoints" class="form-control endpoints-filter-field"
placeholder="{{'graphql.endpoints_management.toolbar.endpoints_filter.placeholder' | translate}}"
ng-model="filterTerm" ng-change="onEndpointsFilter(filterTerm)" aria-label="Filter endpoints"
autocomplete="off">
</div>
<div class="actions">
<button class="btn btn-primary create-endpoint-btn" ng-click="startCreateEndpointWizard()"
gdb-tooltip="{{'graphql.endpoints_management.toolbar.create_endpoint.tooltip' | translate}}">
<span class="fa-kit fa-gdb-graphql"></span>
<span>{{'graphql.endpoints_management.toolbar.create_endpoint.label' | translate}}</span>
</button>
<button class="btn btn-secondary import-schema-definition-btn ml-1" ng-click="importSchema()"
gdb-tooltip="{{'graphql.endpoints_management.toolbar.import_schema.tooltip' | translate}}">
<span class="fa fa-upload"></span>
<span>{{'graphql.endpoints_management.toolbar.import_schema.label' | translate}}</span>
</button>
</div>
</div>
<div ng-if="!hasEndpoints" class="alert alert-info no-endpoints mt-2">
<span>{{'graphql.endpoints_management.table.messages.no_endpoints_in_repository' | translate}}</span>
</div>
<table ng-if="hasEndpoints" class="endpoints-info-table table mt-1"
aria-describedby="GraphQL endpoints info table">
<thead>
<tr>
<th scope="col" class="toggle-col"></th>
<th scope="col" class="status-col"></th>
<th scope="col" class="endpoint-id-col">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.id.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.id.label' | translate}}
</span>
</th>
<th scope="col" class="endpoint-label-col">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.label.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.label.label' | translate}}
</span>
</th>
<th scope="col" class="endpoint-is-default-col text-center">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.is_default.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.is_default.label' | translate}}
</span>
</th>
<th scope="col" class="endpoint-is-active-col text-center">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.is_active.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.is_active.label' | translate}}
</span>
</th>
<th scope="col" class="endpoint-modified-on-col">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.modified_on.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.modified_on.label' | translate}}
</span>
</th>
<th scope="col" class="endpoint-types-count-col numeric">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.types_count.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.types_count.label' | translate}}
</span>
</th>
<th scope="col" class="endpoint-props-count-col numeric">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.props_count.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.props_count.label' | translate}}
</span>
</th>
<th scope="col" class="endpoint-actions-col">
<span gdb-tooltip="{{'graphql.endpoints_management.table.column.actions.tooltip' | translate}}">
{{'graphql.endpoints_management.table.column.actions.label' | translate}}
</span>
</th>
</tr>
</thead>
<tr ng-if="operationInProgress" class="overlay-row">
<td colspan="9">
<div class="endpoint-operation-progress" onto-loader-fancy size="100" hide-message="true"></div>
</td>
</tr>
<tbody>
<tr ng-repeat-start="endpoint in endpointsInfoList.endpoints track by endpoint.endpointId">
<td class="toggle-row">
<a href="#" ng-click="toggleRow($event, $index)">
<i class="fa fa-chevron-right" ng-if="expandedRow !== $index"></i>
<i class="fa fa-chevron-down" ng-if="expandedRow === $index"></i>
</a>
</td>
<td class="status-cell">
<a href="#" ng-if="endpoint.errors > 0 || endpoint.warnings > 0"
ng-click="onShowEndpointReport(endpoint)"
gdb-tooltip="{{'graphql.endpoints_management.table.actions.view_report.tooltip' | translate}}"
class="endpoint-report-link btn btn-link">
<i ng-if="!endpoint.createdSuccessfully" class="fa-regular fa-circle-xmark status-failed"></i>
<i ng-if="endpoint.createdSuccessfully" class="fa-regular fa-circle-check status-success"></i>
</a>
</td>
<td>
<span ng-if="!endpoint.active"
gdb-tooltip="{{'graphql.endpoints_management.table.actions.explore_endpoint.inactive.tooltip' | translate}}"
class="endpoint-id">{{endpoint.endpointId}}</span>
<a ng-if="endpoint.active" href="#" ng-click="onExploreEndpoint(endpoint)"
gdb-tooltip="{{'graphql.endpoints_management.table.actions.explore_endpoint.active.tooltip' | translate}}"
class="endpoint-link">{{endpoint.endpointId}}</a>
</td>
<td>{{endpoint.label}}</td>
<td class="default-endpoint-selector">
<label class="endpoint-default-state">
<input type="radio" ng-model="selectedDefaultEndpoint.default" ng-value="endpoint.default"
ng-disabled="!endpoint.createdSuccessfully"
ng-change="setEndpointAsDefault(endpoint)"/>
</label>
</td>
<td class="active-endpoint-selector">
<span ng-click="!endpoint.createdSuccessfully || toggleEndpointActiveState(endpoint)"
class="toggle-active-state">
<input type="checkbox" class="switch" ng-checked="endpoint.active"
ng-disabled="!endpoint.createdSuccessfully"/>
<label></label>
</span>
</td>
<td title="{{endpoint.lastModified}}">{{endpoint.lastModified | date: 'yyyy-MM-dd'}}</td>
<td class="objects-count numeric">{{endpoint.objectsCount}}</td>
<td class="properties-count numeric">{{endpoint.propertiesCount}}</td>
<td class="endpoint-actions">
<div class="btn-group">
<button class="btn btn-link secondary btn-sm open-endpoint-actions-btn"
data-toggle="dropdown" aria-expanded="false"
ng-if="true"
ng-disabled="false">
<i class="fa fa-ellipsis"></i>
</button>
<div class="dropdown-menu dropdown-menu-right endpoint-actions-menu">
<button class="dropdown-item export-schema-btn" type="button"
ng-click="onExportSchema(endpoint)">
<i class="fa fa-arrow-down-to-line"></i>
<span>{{'graphql.endpoints_management.table.actions.export_schema.label' | translate}}</span>
</button>
<button class="dropdown-item configure-endpoint-btn" type="button"
ng-click="onConfigureEndpoint(endpoint)">
<i class="fa fa-gear"></i>
<span>{{'graphql.endpoints_management.table.actions.configure_endpoint.label' | translate}}</span>
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item delete-endpoint-btn" type="button"
ng-click="onDeleteEndpoint(endpoint)">
<i class="fa fa-trash-can"></i>
<span>{{'graphql.endpoints_management.table.actions.delete_endpoint.label' | translate}}</span>
</button>
</div>
</div>
</td>
</tr>
<tr ng-repeat-end ng-if="expandedRow === $index" class="endpoint-description-row">
<td></td>
<td colspan="8">
<strong>{{'graphql.endpoints_management.table.labels.description' | translate}}</strong>
<div class="endpoint-description">{{endpoint.description}}</div>
</td>
</tr>
<tr ng-if="endpointsInfoList.endpoints.length === 0" class="no-results">
<td colspan="9">
<div class="alert alert-info">
<span>{{'graphql.endpoints_management.table.messages.endpoints_filter_no_result' | translate}}</span>
</div>
</tr>
</tbody>
</table>
</div>
</div>