1770 lines
61 KiB
Vue
1770 lines
61 KiB
Vue
<template>
|
|
<q-card
|
|
flat
|
|
bordered
|
|
:class="['panel-middleware-details', {'panel-middleware-details-dense':isDense}]"
|
|
>
|
|
<q-scroll-area
|
|
v-if="data && data.length"
|
|
:thumb-style="appThumbStyle"
|
|
style="height:100%;"
|
|
>
|
|
<div
|
|
v-for="(middleware, index) in data"
|
|
:key="index"
|
|
>
|
|
<q-card-section
|
|
v-if="!isDense"
|
|
class="app-title"
|
|
>
|
|
<div class="app-title-label">
|
|
{{ middleware.name }}
|
|
</div>
|
|
</q-card-section>
|
|
<!-- COMMON FIELDS -->
|
|
<q-card-section>
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Type
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-purple"
|
|
>
|
|
{{ middleware.type }}
|
|
</q-chip>
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
PROVIDER
|
|
</div>
|
|
<div class="block-right-text">
|
|
<q-avatar class="provider-logo">
|
|
<q-icon :name="`img:${getProviderLogoPath(middleware.provider)}`" />
|
|
</q-avatar>
|
|
<div class="block-right-text-label">
|
|
{{ middleware.provider }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
STATUS
|
|
</div>
|
|
<div class="block-right-text">
|
|
<avatar-state :state="status(middleware.status)" />
|
|
<div :class="['block-right-text-label', `block-right-text-label-${middleware.status}`]">
|
|
{{ statusLabel(middleware.status) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section v-if="protocol === 'http'">
|
|
<!-- ERROR -->
|
|
<q-card-section v-if="middleware.error">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
ERRORS
|
|
</div>
|
|
<q-chip
|
|
v-for="(errorMsg, index) in middleware.error"
|
|
:key="index"
|
|
class="app-chip app-chip-error"
|
|
>
|
|
{{ errorMsg }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [addPrefix] - prefix -->
|
|
<q-card-section v-if="middleware.addPrefix">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
PREFIX
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).prefix }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [basicAuth & digestAuth] - users -->
|
|
<q-card-section v-if="exData(middleware).users">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
USERS
|
|
</div>
|
|
<q-chip
|
|
v-for="(user, key) in exData(middleware).users"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ user }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [basicAuth & digestAuth] - usersFile -->
|
|
<q-card-section v-if="exData(middleware).usersFile">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Users File
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).usersFile }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [basicAuth & digestAuth] - realm -->
|
|
<q-card-section v-if="exData(middleware).realm">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Realm
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-warning"
|
|
>
|
|
{{ exData(middleware).realm }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [basicAuth & digestAuth] - removeHeader -->
|
|
<q-card-section v-if="middleware.basicAuth || middleware.digestAuth">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Remove Header
|
|
</div>
|
|
<boolean-state :value="exData(middleware).removeHeader" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [basicAuth & digestAuth] - headerField -->
|
|
<q-card-section v-if="exData(middleware).headerField">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Header Field
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-warning"
|
|
>
|
|
{{ exData(middleware).headerField }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [chain] - middlewares -->
|
|
<q-card-section v-if="middleware.chain">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Chain
|
|
</div>
|
|
<q-chip
|
|
v-for="(mi, key) in exData(middleware).middlewares"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ mi }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [buffering] - xxxRequestBodyBytes -->
|
|
<q-card-section v-if="exData(middleware).maxRequestBodyBytes || exData(middleware).memRequestBodyBytes">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Max Request Body Bytes
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).maxRequestBodyBytes }}
|
|
</q-chip>
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Mem Request Body Bytes
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).memRequestBodyBytes }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [buffering] - xxxResponseBodyBytes -->
|
|
<q-card-section v-if="exData(middleware).maxResponseBodyBytes || exData(middleware).memResponseBodyBytes">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Max Response Body Bytes
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).maxResponseBodyBytes }}
|
|
</q-chip>
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Mem Response Body Bytes
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).memResponseBodyBytes }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [buffering] - retryExpression -->
|
|
<q-card-section v-if="exData(middleware).retryExpression">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Retry Expression
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).retryExpression }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [circuitBreaker] - expression -->
|
|
<q-card-section v-if="middleware.circuitBreaker">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Expression
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).expression }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [compress] - compress -->
|
|
<q-card-section v-if="middleware.compress">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Compress
|
|
</div>
|
|
<boolean-state :value="!!middleware.compress" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [errors] - service -->
|
|
<q-card-section v-if="middleware.errors">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Service
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green app-chip-overflow"
|
|
>
|
|
{{ exData(middleware).service }}
|
|
<q-tooltip>{{ exData(middleware).service }}</q-tooltip>
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [errors] - query -->
|
|
<q-card-section v-if="middleware.errors">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Query
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).query }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [errors] - status -->
|
|
<q-card-section v-if="middleware.errors">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Status
|
|
</div>
|
|
<q-chip
|
|
v-for="(st, key) in exData(middleware).status"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ st }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [forwardAuth] - address -->
|
|
<q-card-section v-if="middleware.forwardAuth">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Address
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).address }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [forwardAuth] - trustForwardHeader && tls -->
|
|
<q-card-section v-if="middleware.forwardAuth">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
TLS
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).tls" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Trust Forward Headers
|
|
</div>
|
|
<boolean-state :value="exData(middleware).trustForwardHeader" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [forwardAuth] - authResponseHeaders -->
|
|
<q-card-section v-if="middleware.forwardAuth">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Auth Response Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(respHeader, key) in exData(middleware).authResponseHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ respHeader }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [forwardAuth] - authRequestHeaders -->
|
|
<q-card-section v-if="middleware.forwardAuth">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Auth Request Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(reqHeader, key) in exData(middleware).authRequestHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ reqHeader }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - customRequestHeaders -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Custom Request Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).customRequestHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ key }}: {{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - customResponseHeaders -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Custom Response Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).customResponseHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ key }}: {{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - accessControlAllowCredentials -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Access Control Allow Credentials
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).accessControlAllowCredentials" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - accessControlAllowHeaders -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Access Control Allow Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).accessControlAllowHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - accessControlAllowMethods -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Access Control Allow Methods
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).accessControlAllowMethods"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - accessControlAllowOriginList -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Access Control Allow Origin
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).accessControlAllowOriginList"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - accessControlAllowOriginListRegex -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Access Control Allow Origin Regex
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).accessControlAllowOriginListRegex"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - accessControlExposeHeaders -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Access Control Expose Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).accessControlExposeHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - accessControlMaxAge -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Access Control Max Age
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).accessControlMaxAge }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - addVaryHeader -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Add Vary Header
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).addVaryHeader" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - allowedHosts -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Allowed Hosts
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).allowedHosts"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - hostsProxyHeaders -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Hosts Proxy Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).hostsProxyHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - sslRedirect -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
SSL Redirect
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).sslRedirect" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - sslTemporaryRedirect -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
SSL Temporary Redirect
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).sslTemporaryRedirect" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - sslHost -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
SSL Host
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).sslHost }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - sslProxyHeaders -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
SSL Proxy Headers
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).sslProxyHeaders"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - sslForceHost -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
SSL Force Host
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).sslForceHost" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - stsSeconds -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
STS Seconds
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).stsSeconds }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - stsIncludeSubdomains -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
STS Include Subdomains
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).stsIncludeSubdomains" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - stsPreload -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
STS Preload
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).stsPreload" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - forceSTSHeader -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Force STS Header
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).forceSTSHeader" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - frameDeny -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Frame Deny
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).frameDeny" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - customFrameOptionsValue -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Custom Frame Options Value
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).customFrameOptionsValue }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - contentTypeNosniff -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Content Type Nosniff
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).contentTypeNosniff" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - browserXssFilter -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Browser XSS Filter
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).browserXssFilter" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - customBrowserXSSValue -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Custom Browser XSS Value
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).customBrowserXSSValue }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - contentSecurityPolicy -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Content Security Policy
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).contentSecurityPolicy }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - publicKey -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Public Key
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).publicKey }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - referrerPolicy -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Referrer Policy
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).referrerPolicy }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - featurePolicy -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Feature Policy
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).featurePolicy }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [headers] - isDevelopment -->
|
|
<q-card-section v-if="middleware.headers">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Is Development
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).isDevelopment" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [ipAllowList] - sourceRange -->
|
|
<q-card-section v-if="middleware.ipAllowList">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Source Range
|
|
</div>
|
|
<q-chip
|
|
v-for="(range, key) in exData(middleware).sourceRange"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ range }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [ipAllowList] - ipStrategy -->
|
|
<q-card-section v-if="middleware.ipAllowList">
|
|
<div class="row items-start">
|
|
<div class="col-12">
|
|
<div class="text-subtitle2">
|
|
IP Strategy
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="exData(middleware).ipStrategy && exData(middleware).ipStrategy.depth"
|
|
class="col-12"
|
|
>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-accent"
|
|
>
|
|
Depth :
|
|
</q-chip>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).ipStrategy.depth }}
|
|
</q-chip>
|
|
</div>
|
|
<div
|
|
v-if="exData(middleware).ipStrategy && exData(middleware).ipStrategy.excludedIPs"
|
|
class="col-12"
|
|
>
|
|
<div class="flex">
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-accent"
|
|
>
|
|
Excluded IPs:
|
|
</q-chip>
|
|
<q-chip
|
|
v-for="(excludedIPs, key) in exData(middleware).ipStrategy.excludedIPs"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ excludedIPs }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [ipAllowList] - sourceRange -->
|
|
<q-card-section v-if="middleware.ipAllowList">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Source Range
|
|
</div>
|
|
<q-chip
|
|
v-for="(range, key) in exData(middleware).sourceRange"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ range }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [ipAllowList] - ipStrategy -->
|
|
<q-card-section v-if="middleware.ipAllowList">
|
|
<div class="row items-start">
|
|
<div class="col-12">
|
|
<div class="text-subtitle2">
|
|
IP Strategy
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="exData(middleware).ipStrategy && exData(middleware).ipStrategy.depth"
|
|
class="col-12"
|
|
>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-accent"
|
|
>
|
|
Depth :
|
|
</q-chip>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).ipStrategy.depth }}
|
|
</q-chip>
|
|
</div>
|
|
<div
|
|
v-if="exData(middleware).ipStrategy && exData(middleware).ipStrategy.excludedIPs"
|
|
class="col-12"
|
|
>
|
|
<div class="flex">
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-accent"
|
|
>
|
|
Excluded IPs:
|
|
</q-chip>
|
|
<q-chip
|
|
v-for="(excludedIPs, key) in exData(middleware).ipStrategy.excludedIPs"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ excludedIPs }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [rateLimit] - average & burst & period -->
|
|
<q-card-section v-if="middleware.rateLimit">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Average
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).average }}
|
|
</q-chip>
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Burst
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).burst }}
|
|
</q-chip>
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Period
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).period }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [inFlightReq] - amount -->
|
|
<q-card-section v-if="exData(middleware).amount">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
AMOUNT
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-warning"
|
|
>
|
|
{{ exData(middleware).amount }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [inFlightReq & rateLimit] - ipStrategy -->
|
|
<q-card-section v-if="exData(middleware).sourceCriterion && exData(middleware).sourceCriterion.ipStrategy">
|
|
<div class="row items-start">
|
|
<div class="col-12">
|
|
<div class="text-subtitle2">
|
|
IP STRATEGY
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="exData(middleware).sourceCriterion.ipStrategy.depth"
|
|
class="col-12"
|
|
>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-accent"
|
|
>
|
|
Depth :
|
|
</q-chip>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).sourceCriterion.ipStrategy.depth }}
|
|
</q-chip>
|
|
</div>
|
|
<div
|
|
v-if="exData(middleware).sourceCriterion.ipStrategy.excludedIPs"
|
|
class="col-12"
|
|
>
|
|
<div class="flex">
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-accent"
|
|
>
|
|
Excluded IPs:
|
|
</q-chip>
|
|
<q-chip
|
|
v-for="(excludedIPs, key) in exData(middleware).sourceCriterion.ipStrategy.excludedIPs"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ excludedIPs }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [inFlightReq & rateLimit] - requestHeaderName, requestHost -->
|
|
<q-card-section v-if="exData(middleware) && exData(middleware).sourceCriterion">
|
|
<div class="row items-start no-wrap">
|
|
<div
|
|
v-if="exData(middleware).sourceCriterion.requestHeaderName"
|
|
class="col"
|
|
>
|
|
<div class="text-subtitle2">
|
|
REQUEST HEADER NAME
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-warning"
|
|
>
|
|
{{ exData(middleware).sourceCriterion.requestHeaderName }}
|
|
</q-chip>
|
|
</div>
|
|
<div
|
|
v-if="exData(middleware).sourceCriterion.requestHost"
|
|
class="col"
|
|
>
|
|
<div class="text-subtitle2">
|
|
REQUEST HOST
|
|
</div>
|
|
<boolean-state :value="exData(middleware).sourceCriterion.requestHost" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [passTLSClientCert] - pem -->
|
|
<q-card-section v-if="middleware.passTLSClientCert">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
PEM
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).pem" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [passTLSClientCert] - info - notAfter -->
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info">
|
|
<div class="text-subtitle2">
|
|
Info:
|
|
</div>
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Not After
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.notAfter" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Not Before
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.notBefore" />
|
|
</div>
|
|
</div>
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Sans
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.sans" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Serial Number
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.serialNumber" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [passTLSClientCert] - info - subject -->
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">
|
|
<div class="text-subtitle2">
|
|
Info Subject:
|
|
</div>
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
country
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.country" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Province
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.province" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Locality
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.locality" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Organization
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.organization" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Organizational Unit
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.organizationalUnit" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Common Name
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.commonName" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Serial Number
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.serialNumber" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Domain Component
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.subject.domainComponent" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [passTLSClientCert] - info - issuer -->
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">
|
|
<div class="text-subtitle2">
|
|
Info Issuer:
|
|
</div>
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
country
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.issuer.country" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Province
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.issuer.province" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Locality
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.issuer.locality" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Organization
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.issuer.organization" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Common Name
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.issuer.commonName" />
|
|
</div>
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Serial Number
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.issuer.serialNumber" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Domain Component
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).info.issuer.domainComponent" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [redirectRegex] - regex -->
|
|
<q-card-section v-if="middleware.redirectRegex">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Regex
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green app-chip-overflow"
|
|
>
|
|
{{ exData(middleware).regex }}
|
|
<q-tooltip>{{ exData(middleware).regex }}</q-tooltip>
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [redirectRegex] - replacement -->
|
|
<q-card-section v-if="middleware.redirectRegex">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Replacement
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green app-chip-overflow"
|
|
>
|
|
{{ exData(middleware).replacement }}
|
|
<q-tooltip>{{ exData(middleware).replacement }}</q-tooltip>
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [redirectRegex] - permanent -->
|
|
<q-card-section v-if="middleware.redirectRegex">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Permanent
|
|
</div>
|
|
<boolean-state :value="!!exData(middleware).permanent" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [redirectScheme] - scheme -->
|
|
<q-card-section v-if="middleware.redirectScheme">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Scheme
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).scheme }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [replacePath] - path -->
|
|
<q-card-section v-if="middleware.replacePath">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Path
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).path }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [replacePathRegex] - regex -->
|
|
<q-card-section v-if="middleware.replacePathRegex">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Regex
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green app-chip-overflow"
|
|
>
|
|
{{ exData(middleware).regex }}
|
|
<q-tooltip>{{ exData(middleware).regex }}</q-tooltip>
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [replacePathRegex] - replacement -->
|
|
<q-card-section v-if="middleware.replacePathRegex">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Replacement
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green app-chip-overflow"
|
|
>
|
|
{{ exData(middleware).replacement }}
|
|
<q-tooltip>{{ exData(middleware).replacement }}</q-tooltip>
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [retry] - attempts -->
|
|
<q-card-section v-if="middleware.retry">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Attempts
|
|
</div>
|
|
<q-chip
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ exData(middleware).attempts }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [stripPrefix] - prefixes -->
|
|
<q-card-section v-if="middleware.stripPrefix">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Prefixes
|
|
</div>
|
|
<q-chip
|
|
v-for="(prefix, key) in exData(middleware).prefixes"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ prefix }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [stripPrefixRegex] - regex -->
|
|
<q-card-section v-if="middleware.stripPrefixRegex">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Regex
|
|
</div>
|
|
<q-chip
|
|
v-for="(exp, key) in exData(middleware).regex"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green app-chip-overflow"
|
|
>
|
|
{{ exp }}
|
|
<q-tooltip>{{ exp }}</q-tooltip>
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [requestHeaderModifier] - set -->
|
|
<q-card-section v-if="middleware.requestHeaderModifier">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Set
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).set"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ key }}: {{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [requestHeaderModifier] - add -->
|
|
<q-card-section v-if="middleware.requestHeaderModifier">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Add
|
|
</div>
|
|
<q-chip
|
|
v-for="(val, key) in exData(middleware).add"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ key }}: {{ val }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [requestHeaderModifier] - remove -->
|
|
<q-card-section v-if="middleware.requestHeaderModifier">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Remove
|
|
</div>
|
|
<q-chip
|
|
v-for="(name, key) in exData(middleware).remove"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ name }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<q-card-section v-if="protocol === 'tcp'">
|
|
<!-- EXTRA FIELDS FROM MIDDLEWARES - [ipAllowList] - sourceRange -->
|
|
<q-card-section v-if="middleware.ipAllowList">
|
|
<div class="row items-start no-wrap">
|
|
<div class="col">
|
|
<div class="text-subtitle2">
|
|
Source Range
|
|
</div>
|
|
<q-chip
|
|
v-for="(range, key) in exData(middleware).sourceRange"
|
|
:key="key"
|
|
dense
|
|
class="app-chip app-chip-green"
|
|
>
|
|
{{ range }}
|
|
</q-chip>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<q-separator
|
|
v-if="(index+1) < data.length"
|
|
inset
|
|
/>
|
|
</div>
|
|
</q-scroll-area>
|
|
<q-card-section
|
|
v-else
|
|
style="height: 100%"
|
|
>
|
|
<div
|
|
class="row items-center"
|
|
style="height: 100%"
|
|
>
|
|
<div class="col-12">
|
|
<div class="block-empty" />
|
|
<div class="q-pb-lg block-empty-logo">
|
|
<img
|
|
v-if="$q.dark.isActive"
|
|
alt="empty"
|
|
src="~assets/middlewares-empty-dark.svg"
|
|
>
|
|
<img
|
|
v-else
|
|
alt="empty"
|
|
src="~assets/middlewares-empty.svg"
|
|
>
|
|
</div>
|
|
<div class="block-empty-label">
|
|
There are no<br>Middlewares configured
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue'
|
|
import BooleanState from './BooleanState.vue'
|
|
import AvatarState from './AvatarState.vue'
|
|
|
|
export default defineComponent({
|
|
name: 'PanelMiddlewareDetails',
|
|
components: {
|
|
AvatarState,
|
|
BooleanState
|
|
},
|
|
props: {
|
|
data: Array[Object],
|
|
dense: Boolean
|
|
},
|
|
computed: {
|
|
protocol () {
|
|
return this.$route.meta.protocol
|
|
},
|
|
isDense () {
|
|
return this.dense !== undefined
|
|
}
|
|
},
|
|
methods: {
|
|
exData (item) {
|
|
let exData = {}
|
|
for (const prop in item) {
|
|
if (prop.toLowerCase() === item.type && !!Object.getOwnPropertyDescriptor(item, prop)) {
|
|
exData = item[prop]
|
|
}
|
|
}
|
|
return exData
|
|
},
|
|
getProviderLogoPath (provider) {
|
|
const name = provider.toLowerCase()
|
|
|
|
if (name.startsWith('plugin-')) {
|
|
return 'providers/plugin.svg'
|
|
}
|
|
if (name.startsWith('consul-')) {
|
|
return 'providers/consul.svg'
|
|
}
|
|
if (name.startsWith('consulcatalog-')) {
|
|
return 'providers/consulcatalog.svg'
|
|
}
|
|
if (name.startsWith('nomad-')) {
|
|
return 'providers/nomad.svg'
|
|
}
|
|
|
|
return `providers/${name}.svg`
|
|
},
|
|
status (value) {
|
|
if (value === 'enabled') {
|
|
return 'positive'
|
|
}
|
|
if (value === 'disabled') {
|
|
return 'negative'
|
|
}
|
|
return value
|
|
},
|
|
statusLabel (value) {
|
|
if (value === 'enabled') {
|
|
return 'success'
|
|
}
|
|
if (value === 'disabled') {
|
|
return 'error'
|
|
}
|
|
return value
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../css/sass/variables";
|
|
|
|
.panel-middleware-details {
|
|
height: 600px;
|
|
&-dense{
|
|
/*height: 400px;*/
|
|
}
|
|
.q-card__section {
|
|
padding: 24px;
|
|
+ .q-card__section {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.block-right-text{
|
|
height: 32px;
|
|
line-height: 32px;
|
|
.q-avatar{
|
|
float: left;
|
|
}
|
|
&-label{
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: $app-text-grey;
|
|
float: left;
|
|
margin-left: 10px;
|
|
text-transform: capitalize;
|
|
&-enabled {
|
|
color: $positive;
|
|
}
|
|
&-disabled {
|
|
color: $negative;
|
|
}
|
|
&-warning {
|
|
color: $warning;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-subtitle2 {
|
|
font-size: 11px;
|
|
color: $app-text-grey;
|
|
line-height: 16px;
|
|
margin-bottom: 4px;
|
|
text-align: left;
|
|
letter-spacing: 2px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.app-chip {
|
|
&-error {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-wrap: wrap;
|
|
border-width: 0;
|
|
margin-bottom: 8px;
|
|
:deep(.q-chip__content) {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.provider-logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.block-empty {
|
|
&-logo {
|
|
text-align: center;
|
|
}
|
|
&-label {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #b8b8b8;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|