New domain page

This commit is contained in:
nemunaire 2020-11-17 01:28:28 +01:00
parent f27e8f340d
commit 3a5a9366a5
14 changed files with 506 additions and 479 deletions

View File

@ -33,7 +33,7 @@
<template>
<div id="app">
<b-navbar :class="loggedUser?'p-0':''">
<b-navbar :class="loggedUser?'p-0':''" style="position: relative; z-index: 15">
<b-container>
<b-navbar-brand class="navbar-brand" to="/">
<h-logo height="25" />

View File

@ -32,6 +32,14 @@
import Api from '@/api/api'
export default {
detachDomain (domain) {
return Api().delete('/api/domains/' + encodeURIComponent(domain))
},
getDomain (domain) {
return Api().get('/api/domains/' + encodeURIComponent(domain))
},
listDomains () {
return Api().get('/api/domains')
}

73
htdocs/src/api/zones.js Normal file
View File

@ -0,0 +1,73 @@
// Copyright or © or Copr. happyDNS (2020)
//
// contact@happydns.org
//
// This software is a computer program whose purpose is to provide a modern
// interface to interact with DNS systems.
//
// This software is governed by the CeCILL license under French law and abiding
// by the rules of distribution of free software. You can use, modify and/or
// redistribute the software under the terms of the CeCILL license as
// circulated by CEA, CNRS and INRIA at the following URL
// "http://www.cecill.info".
//
// As a counterpart to the access to the source code and rights to copy, modify
// and redistribute granted by the license, users are provided only with a
// limited warranty and the software's author, the holder of the economic
// rights, and the successive licensors have only limited liability.
//
// In this respect, the user's attention is drawn to the risks associated with
// loading, using, modifying and/or developing or reproducing the software by
// the user in light of its specific status of free software, that may mean
// that it is complicated to manipulate, and that also therefore means that it
// is reserved for developers and experienced professionals having in-depth
// computer knowledge. Users are therefore encouraged to load and test the
// software's suitability as regards their requirements in conditions enabling
// the security of their systems and/or data to be ensured and, more generally,
// to use and operate it in the same conditions as regards security.
//
// The fact that you are presently reading this means that you have had
// knowledge of the CeCILL license and that you accept its terms.
import Api from '@/api/api'
export default {
getZone (domain, id) {
return Api().get('/api/domains/' + encodeURIComponent(domain) + '/zone/' + encodeURIComponent(id))
},
applyZone (domain, id) {
return Api().post('/api/domains/' + encodeURIComponent(domain) + '/apply_zone/' + encodeURIComponent(id))
},
diffZone (domain, id1, id2) {
return Api().post('/api/domains/' + encodeURIComponent(domain) + '/diff_zones/' + encodeURIComponent(id1) + '/' + encodeURIComponent(id2))
},
viewZone (domain, id) {
return Api().post('/api/domains/' + encodeURIComponent(domain) + '/view_zone/' + encodeURIComponent(id))
},
importZone (domain) {
return Api().post('/api/domains/' + encodeURIComponent(domain) + '/import_zone')
},
addZoneService (domain, id, subdomain, service) {
if (subdomain === '') {
subdomain = '@'
}
return Api().post('/api/domains/' + encodeURIComponent(domain) + '/zone/' + encodeURIComponent(id) + '/' + encodeURIComponent(subdomain) + '/services', service)
},
deleteZoneService (domain, id, service) {
return Api().delete('/api/domains/' + encodeURIComponent(domain) + '/zone/' + encodeURIComponent(id) + '/' + encodeURIComponent(service._domain) + '/services/' + encodeURIComponent(service._id))
},
updateZoneService (domain, id, subdomain, service) {
return Api().patch('/api/domains/' + encodeURIComponent(domain) + '/zone/' + encodeURIComponent(id), service)
},
getServiceRecords (domain, id, service) {
return Api().get('/api/domains/' + encodeURIComponent(domain) + '/zone/' + encodeURIComponent(id) + '/' + encodeURIComponent(service._domain) + '/services/' + encodeURIComponent(service._id) + '/records')
}
}

View File

@ -32,19 +32,27 @@
-->
<template>
<component :is="displayFormat === 'grid' ? 'b-card' : 'b-list-group'" v-if="services[service._svctype]" :class="displayFormat !== 'list' ? 'card-hover' : ''" :style="displayFormat === 'grid' ? 'width: 32%; min-width: 225px; margin-bottom: 1em; cursor: pointer;' : displayFormat === 'records' ? 'margin-bottom: .5em; cursor: pointer;' : ''" no-body>
<component :is="displayFormat === 'grid' ? 'b-card' : 'b-list-group'" v-if="!service || services[service._svctype]" :class="displayFormat !== 'list' ? 'card-hover' : ''" :style="(!service ? 'border-style: dashed; ' : '') + (displayFormat === 'grid' ? 'width: 32%; min-width: 225px; margin-bottom: 1em; cursor: pointer;' : displayFormat === 'records' ? 'margin-bottom: .5em; cursor: pointer;' : '')" no-body>
<b-card-body v-if="displayFormat === 'grid'" @click="$emit('show-service-window', service)">
<b-badge v-for="(categorie, idcat) in services[service._svctype].categories" :key="idcat" variant="gray" class="float-right ml-1">
{{ categorie }}
</b-badge>
<b-card-title>
<div v-if="service" class="float-right">
<b-badge v-for="(categorie, idcat) in services[service._svctype].categories" :key="idcat" variant="gray" class="ml-1">
{{ categorie }}
</b-badge>
</div>
<b-card-title v-if="service">
{{ services[service._svctype].name }}
</b-card-title>
<b-card-sub-title class="mb-2">
<b-card-title v-else>
<b-icon icon="plus" /> New service
</b-card-title>
<b-card-sub-title v-if="service" class="mb-2">
{{ services[service._svctype].description }}
</b-card-sub-title>
<b-card-sub-title v-else class="mb-2">
Click here to add a new service to this subdomain.
</b-card-sub-title>
<b-card-text>
<span v-if="service._comment">{{ service._comment }}</span>
<span v-if="service && service._comment">{{ service._comment }}</span>
</b-card-text>
</b-card-body>
@ -98,7 +106,7 @@ export default {
},
service: {
type: Object,
required: true
default: null
},
services: {
type: Object,

View File

@ -36,7 +36,7 @@
<td v-if="!record.edit" style="overflow:hidden; text-overflow: ellipsis;white-space: nowrap;">
<b-icon v-if="!expand" icon="chevron-right" @click="toogleRR()" />
<b-icon v-if="expand" icon="chevron-down" @click="toogleRR()" />
<span class="text-monospace" :title="record.string" @click="toogleRR()">{{ record.string }}</span>
<span class="text-monospace text-truncate" :title="record.string" @click="toogleRR()">{{ record.string }}</span>
<div v-show="expand" class="row">
<dl class="col-sm-6 row">
<dt class="col-sm-3 text-right">

View File

@ -34,7 +34,7 @@
<template>
<div>
<div v-if="isCNAME()">
<h2 :id="dn" style="text-indent:-1em;padding-left:1em;overflow-x:hidden;text-overflow:ellipsis">
<h2 :id="dn" class="sticky-top" style="background: white; text-indent:-1em;padding-left:1em;overflow-x:hidden;text-overflow:ellipsis">
<span style="white-space: nowrap">
<b-icon icon="link" />
<a :href="'#' + dn" class="float-right" style="text-indent:0;z-index:2;position:relative">
@ -61,7 +61,7 @@
</h2>
</div>
<div v-else>
<h2 :id="dn" style="text-indent:-1em;padding-left:1em;overflow-x:hidden;text-overflow:ellipsis">
<h2 :id="dn?dn:'@'" class="sticky-top" style="background: white; text-indent:-1em;padding-left:1em;overflow-x:hidden;text-overflow:ellipsis">
<span style="white-space: nowrap">
<b-icon :icon="showResources?'chevron-down':'chevron-right'" @click="toogleShowResources()" />
<a :href="'#' + dn" class="float-right" style="text-indent:0;z-index:2;position:relative">
@ -72,7 +72,7 @@
<b-badge v-if="aliases.length > 0" v-b-popover.hover.focus="{ customClass: 'text-monospace', html: true, content: aliasPopoverCnt(dn) }" class="ml-2" style="text-indent:0;">
+ {{ $tc('domains.n-aliases', aliases.length) }}
</b-badge>
<b-button type="button" variant="primary" size="sm" class="ml-2" @click="$emit('add-new-service', dn)">
<b-button v-if="displayFormat !== 'grid'" type="button" variant="primary" size="sm" class="ml-2" @click="$emit('add-new-service', dn)">
<b-icon icon="plus" />
{{ $t('domains.add-a-service') }}
</b-button>
@ -80,13 +80,14 @@
<b-icon icon="link" />
{{ $t('domains.add-an-alias') }}
</b-button>
<b-button v-if="dn === ''" type="button" variant="outline-secondary" size="sm" class="ml-2" @click="$emit('add-subdomain')">
<b-button v-if="!showSubdomainsList && !dn" type="button" variant="outline-secondary" size="sm" class="ml-2" @click="$emit('add-subdomain')">
<b-icon icon="server" />
{{ $t('domains.add-a-subdomain') }}
</b-button>
</h2>
<div v-show="showResources" :class="showResources && displayFormat === 'grid' ? 'd-flex justify-content-around flex-wrap' : ''">
<h-domain-service v-for="(svc, idx) in zoneServices" :key="idx" :display-format="displayFormat" :origin="origin" :service="svc" :services="services" :zone-id="zoneId" @show-service-window="$emit('show-service-window', $event)" @update-my-services="$emit('update-my-services', $event)" />
<h-domain-service v-if="displayFormat === 'grid'" :display-format="displayFormat" :origin="origin" :services="services" :zone-id="zoneId" @show-service-window="$emit('add-new-service', dn)" />
</div>
</div>
</div>
@ -119,6 +120,10 @@ export default {
type: String,
required: true
},
showSubdomainsList: {
type: Boolean,
default: false
},
services: {
type: Object,
required: true

View File

@ -32,51 +32,77 @@
-->
<template>
<div v-if="!isLoading" class="pt-3">
<h-subdomain-item
v-for="(dn, index) in sortedDomains"
:key="index"
:display-format="displayFormat"
:dn="dn"
:origin="domain.domain"
:services="services"
:zone-services="myServices.services[dn]===undefined?[]:myServices.services[dn]"
:aliases="aliases[dn]===undefined?[]:aliases[dn]"
:zone-id="zoneId"
@show-service-window="showServiceWindow"
@update-my-services="updateMyServices"
@add-subdomain="addSubdomain"
@add-new-alias="addNewAlias"
@add-new-service="addNewService"
/>
<b-row v-if="!isLoading" class="pt-3">
<b-col :sm="showSubdomainsList?9:null">
<b-button v-show="!showSubdomainsList" class="float-right sticky-top" variant="outline-secondary" @click="showSubdomainsList = !showSubdomainsList">
<b-icon icon="list" aria-hidden="true" /><br>
</b-button>
<h-modal-service
v-if="myServices"
ref="modalService"
:domain="domain"
:my-services="myServices"
:services="services"
:zone-id="zoneId"
@update-my-services="updateMyServices"
/>
<h-subdomain-item
v-for="(dn, index) in sortedDomains"
:key="index"
:display-format="displayFormat"
:dn="dn"
:origin="domain.domain"
:show-subdomains-list="showSubdomainsList"
:services="services"
:zone-services="myServices.services[dn]===undefined?[]:myServices.services[dn]"
:aliases="aliases[dn]===undefined?[]:aliases[dn]"
:zone-id="zoneId"
@show-service-window="showServiceWindow"
@update-my-services="updateMyServices"
@add-subdomain="addSubdomain"
@add-new-alias="addNewAlias"
@add-new-service="addNewService"
/>
<b-modal id="modal-addAlias" title="Add a new alias" @ok="handleModalAliasSubmit">
<template #modal-footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('common.cancel') }}
</b-button>
<b-button form="addAliasForm" type="submit" variant="primary">
{{ $t('domains.add-alias') }}
</b-button>
</template>
<form v-if="modal && modal.dn != null" id="addAliasForm" @submit.stop.prevent="handleModalAliasSubmit">
Add an alias pointing to <span class="text-monospace">{{ modal.dn | fqdn(domain.domain) }}</span>:
<b-input-group :append="'.' + domain.domain">
<b-input v-model="modal.alias" autofocus class="text-monospace" placeholder="new.subdomain" :state="modal.newDomainState" @update="validateNewAlias" />
</b-input-group>
</form>
</b-modal>
</div>
<h-modal-service
v-if="myServices"
ref="modalService"
:domain="domain"
:my-services="myServices"
:services="services"
:zone-id="zoneId"
@update-my-services="updateMyServices"
/>
<b-modal id="modal-addAlias" title="Add a new alias" @ok="handleModalAliasSubmit">
<template #modal-footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('common.cancel') }}
</b-button>
<b-button form="addAliasForm" type="submit" variant="primary">
{{ $t('domains.add-alias') }}
</b-button>
</template>
<form v-if="modal && modal.dn != null" id="addAliasForm" @submit.stop.prevent="handleModalAliasSubmit">
Add an alias pointing to <span class="text-monospace">{{ modal.dn | fqdn(domain.domain) }}</span>:
<b-input-group :append="'.' + domain.domain">
<b-input v-model="modal.alias" autofocus class="text-monospace" placeholder="new.subdomain" :state="modal.newDomainState" @update="validateNewAlias" />
</b-input-group>
</form>
</b-modal>
</b-col>
<b-col v-show="showSubdomainsList" sm="3" class="sticky-top" style="height: 100vh; overflow-y: auto; z-index: 5">
<b-button v-show="showSubdomainsList" class="float-right mb-2" variant="secondary" @click="showSubdomainsList = !showSubdomainsList">
<b-icon icon="list" aria-hidden="true" /><br>
</b-button>
<b-button type="button" variant="outline-secondary" size="sm" class="ml-2 w-100" @click="addSubdomain()">
<b-icon icon="server" />
{{ $t('domains.add-a-subdomain') }}
</b-button>
<a
v-for="(dn, index) in sortedDomains"
:key="index"
:href="'#' + (dn?dn:'@')"
:title="dn | fqdn(domain.domain)"
class="d-block text-truncate text-monospace text-muted"
:style="'max-width: none; padding-left: ' + (dn === '' ? 0 : (dn.split('.').length * 10)) + 'px'"
>
{{ dn | fqdn(domain.domain) }}
</a>
</b-col>
</b-row>
</template>
<script>
@ -116,6 +142,7 @@ export default {
modal: null,
myServices: null,
services: {},
showSubdomainsList: false,
updateServiceInProgress: false
}
},

View File

@ -51,9 +51,9 @@
"kind": "domain",
"actions": {
"reimport": "Re-import",
"view": "View",
"propagate": "Propagate",
"rollback": "Rollback"
"view": "View my zone",
"propagate": "Publish my changes",
"rollback": "Rollback to this version"
},
"alert": {
"remove": "This action will permanently remove the domain {domain} from your managed domains. All history and abstracted zones will be discarded. This action will not delete or unregister your domain from your provider, nor alterate what is currently served. It will only affect what you see in happyDNS. Are you sure you want to continue?",
@ -98,19 +98,23 @@
"live": "Live records",
"monitoring": "Monitoring",
"summary": "Summary",
"source": "Domain hoster",
"source": "Zone hosted on",
"title": "View zone"
},
"views": {
"as": "View as:",
"grid": {
"title": "Grid view (easiest)"
"title": "Grid view (easiest)",
"label": "Grid"
},
"list": {
"title": "List view (fastest)"
"title": "List view (fastest)",
"label": "List"
},
"source-parameters": "Hosting parameters",
"records": {
"title": "List records (advanced)"
"title": "List records (advanced)",
"label": "Records"
}
}
},

View File

@ -47,6 +47,7 @@ import {
BIconGridFill,
BIconLink,
BIconLink45deg,
BIconList,
BIconListTask,
BIconListUl,
BIconMenuButtonWideFill,
@ -125,6 +126,7 @@ Vue.component('BIconChevronUp', BIconChevronUp)
Vue.component('BIconGridFill', BIconGridFill)
Vue.component('BIconLink', BIconLink)
Vue.component('BIconLink45deg', BIconLink45deg)
Vue.component('BIconList', BIconList)
Vue.component('BIconListTask', BIconListTask)
Vue.component('BIconListUl', BIconListUl)
Vue.component('BIconMenuButtonWideFill', BIconMenuButtonWideFill)

View File

@ -107,32 +107,10 @@ const routes = [
},
{
path: '/domains/:domain',
name: 'domain-abstract',
component: function () {
return import(/* webpackChunkName: "domain" */ '../views/domain.vue')
},
children: [
{
path: '',
name: 'domain-home',
component: function () {
return import(/* webpackChunkName: "domain" */ '../views/domain-home.vue')
}
},
{
path: 'abstract',
name: 'domain-abstract',
component: function () {
return import(/* webpackChunkName: "domain" */ '../views/domain-abstract.vue')
}
},
{
path: 'source',
name: 'domain-source',
component: function () {
return import(/* webpackChunkName: "domain" */ '../views/domain-source.vue')
}
}
]
}
},
{
path: '/domains/:domain/new',

View File

@ -37,15 +37,21 @@ export default {
namespaced: true,
state: {
all: null
all: null,
detailed: {}
},
getters: {
domains_getAll: state => state.all,
domains_getDetailed: state => state.detailed,
sortedDomains: state => state.all
},
actions: {
dropDomain ({ commit }, domain) {
commit('removeDomain', domain)
},
getAllMyDomains ({ commit }) {
DomainsApi.listDomains()
.then(
@ -53,10 +59,30 @@ export default {
commit('setDomains', response.data)
})
// TODO: handle errors here
},
getDomainDetails ({ commit }, domain) {
DomainsApi.getDomain(domain)
.then(
response => {
var details = response.data
commit('setDomainDetailed', { domain, details })
}
)
// TODO: handle errors here
}
},
mutations: {
removeDomain (state, domain) {
Vue.delete(state.detailed, domain)
Vue.set(state, 'all', null)
},
setDomainDetailed (state, { domain, details }) {
Vue.set(state.detailed, domain, details)
},
setDomains (state, domains) {
domains.sort(function (a, b) { return domainCompare(a.domain, b.domain) })
Vue.set(state, 'all', domains)

View File

@ -1,284 +0,0 @@
<!--
Copyright or © or Copr. happyDNS (2020)
contact@happydns.org
This software is a computer program whose purpose is to provide a modern
interface to interact with DNS systems.
This software is governed by the CeCILL license under French law and abiding
by the rules of distribution of free software. You can use, modify and/or
redistribute the software under the terms of the CeCILL license as
circulated by CEA, CNRS and INRIA at the following URL
"http://www.cecill.info".
As a counterpart to the access to the source code and rights to copy, modify
and redistribute granted by the license, users are provided only with a
limited warranty and the software's author, the holder of the economic
rights, and the successive licensors have only limited liability.
In this respect, the user's attention is drawn to the risks associated with
loading, using, modifying and/or developing or reproducing the software by
the user in light of its specific status of free software, that may mean
that it is complicated to manipulate, and that also therefore means that it
is reserved for developers and experienced professionals having in-depth
computer knowledge. Users are therefore encouraged to load and test the
software's suitability as regards their requirements in conditions enabling
the security of their systems and/or data to be ensured and, more generally,
to use and operate it in the same conditions as regards security.
The fact that you are presently reading this means that you have had
knowledge of the CeCILL license and that you accept its terms.
-->
<template>
<div>
<div v-if="importInProgress" class="mt-4 text-center">
<b-spinner :label="$t('common.spinning')" />
<p>{{ $t('wait.importing') }}</p>
</div>
<div v-else-if="selectedHistory && domain.zone_history.length > 0">
<b-row class="mt-2">
<b-col cols="auto" class="mr-auto">
<b-form inline>
<label class="mr-2" for="zhistory">{{ $t('domains.history') }}:</label>
<b-form-select id="zhistory" v-model="selectedHistory" :options="domain.zone_history" value-field="id" text-field="last_modified" style="max-width:70%;" />
</b-form>
</b-col>
<b-col cols="auto" class="text-center ml-auto mr-auto">
<b-button-group>
<b-button size="sm" :variant="displayFormat === 'grid' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.grid.title')" @click="toogleGridView()">
<b-icon icon="grid-fill" aria-hidden="true" />
</b-button>
<b-button size="sm" :variant="displayFormat === 'list' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.list.title')" @click="toogleListView()">
<b-icon icon="list-ul" aria-hidden="true" />
</b-button>
<b-button size="sm" :variant="displayFormat === 'records' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.records.title')" @click="toogleRecordsView()">
<b-icon icon="menu-button-wide-fill" aria-hidden="true" />
</b-button>
</b-button-group>
</b-col>
<b-col cols="auto" class="text-right ml-auto">
<b-button size="sm" class="mx-1" @click="importZone()">
<b-icon icon="cloud-download" aria-hidden="true" /> {{ $t('domains.actions.reimport') }}
</b-button>
<b-button size="sm" class="mx-1" @click="viewZone()">
<b-icon icon="list-ul" aria-hidden="true" /> {{ $t('domains.actions.view') }}
</b-button>
<b-button v-if="selectedHistory === domain.zone_history[0].id" size="sm" variant="success" class="mx-1" @click="showDiff()">
<b-icon icon="cloud-upload" aria-hidden="true" /> {{ $t('domains.actions.propagate') }}
</b-button>
<b-button v-else size="sm" variant="warning" class="mx-1" @click="showDiff()">
<b-icon icon="cloud-upload" aria-hidden="true" /> {{ $t('domains.actions.rollback') }}
</b-button>
</b-col>
</b-row>
<h-subdomain-list :display-format="displayFormat" :domain="domain" :zone-id="selectedHistory" />
</div>
<b-modal id="modal-viewZone" :title="$t('domains.view.title')" size="lg" scrollable ok-only :ok-disabled="zoneContent === null">
<div v-if="zoneContent === null" class="my-2 text-center">
<b-spinner label="Spinning" />
<p>{{ $t('wait.formating') }}</p>
</div>
<pre v-else style="overflow: initial">{{ zoneContent }}</pre>
</b-modal>
<b-modal id="modal-applyZone" size="lg" scrollable @ok="applyDiff()">
<template #modal-title>
<i18n path="domains.view.description" tag="span">
<span class="text-monospace">{{ domain.domain }}</span>
</i18n>
</template>
<template #modal-footer="{ ok, cancel }">
<div v-if="zoneDiffAdd || zoneDiffDel">
<span v-if="zoneDiffAdd" class="text-success">
{{ $tc('domains.apply.additions', (zoneDiffAdd || []).length) }}
</span>
&ndash;
<span class="text-danger">
{{ $tc('domains.apply.deletions', (zoneDiffAdd || []).length) }}
</span>
</div>
<b-button variant="secondary" @click="cancel()">
{{ $t('common.cancel') }}
</b-button>
<b-button variant="success" :disabled="zoneDiffAdd === null && zoneDiffDel === null" @click="ok()">
{{ $t('domains.apply.button') }}
</b-button>
</template>
<div v-if="zoneDiffAdd === null && zoneDiffDel === null" class="my-2 text-center">
<b-spinner label="Spinning" />
<p>{{ $t('wait.exporting') }}</p>
</div>
<div v-for="(line, n) in zoneDiffAdd" :key="'a' + n" class="text-monospace text-success" style="white-space: nowrap">
+{{ line }}
</div>
<div v-for="(line, n) in zoneDiffDel" :key="'d' + n" class="text-monospace text-danger" style="white-space: nowrap">
-{{ line }}
</div>
</b-modal>
</div>
</template>
<script>
import axios from 'axios'
import ZoneApi from '@/services/ZoneApi'
export default {
components: {
hSubdomainList: () => import('@/components/hSubdomainList')
},
props: {
domain: {
type: Object,
required: true
}
},
data: function () {
return {
displayFormat: 'grid',
importInProgress: false,
selectedHistory: null,
zoneContent: null,
zoneDiffAdd: null,
zoneDiffDel: null
}
},
watch: {
domain: function () {
this.pullDomain()
}
},
created () {
if (localStorage && localStorage.getItem('displayFormat')) {
this.displayFormat = localStorage.getItem('displayFormat')
}
if (this.domain !== undefined && this.domain.domain !== undefined) {
this.pullDomain()
}
},
methods: {
pullDomain () {
if (this.domain.zone_history === null || this.domain.zone_history.length === 0) {
this.importZone()
} else {
this.selectedHistory = this.domain.zone_history[0].id
}
},
importZone () {
this.importInProgress = true
axios
.post('/api/domains/' + encodeURIComponent(this.domain.domain) + '/import_zone')
.then(
(response) => {
this.importInProgress = false
this.selectedHistory = response.data.id
this.$parent.$emit('update-domain-info')
}
)
},
showDiff () {
this.zoneDiffAdd = null
this.zoneDiffDel = null
this.$bvModal.show('modal-applyZone')
ZoneApi.diffZone(this.domain.domain, '@', this.selectedHistory)
.then(
(response) => {
if (response.data.toAdd == null && response.data.toDel == null) {
this.$bvModal.hide('modal-applyZone')
this.$bvModal.msgBoxOk(this.$t('domains.apply.nochange'))
} else {
this.zoneDiffAdd = response.data.toAdd
this.zoneDiffDel = response.data.toDel
}
},
(error) => {
this.$bvModal.hide('modal-applyZone')
this.$bvToast.toast(
error.response.data.errmsg, {
title: this.$t('errors.occurs', { when: 'exporting the zone' }),
autoHideDelay: 5000,
variant: 'danger',
toaster: 'b-toaster-content-right'
}
)
})
},
applyDiff () {
ZoneApi.applyZone(this.domain.domain, this.selectedHistory)
.then(
(response) => {
this.$bvToast.toast(
this.$t('domains.apply.done.description'), {
title: this.$t('domains.apply.done.title'),
autoHideDelay: 5000,
variant: 'success',
toaster: 'b-toaster-content-right'
}
)
},
(error) => {
this.$bvToast.toast(
error.response.data.errmsg, {
title: this.$t('errors.occurs', { when: 'applying the zone' }),
autoHideDelay: 5000,
variant: 'danger',
toaster: 'b-toaster-content-right'
}
)
})
},
toogleGridView () {
this.displayFormat = 'grid'
if (localStorage) {
localStorage.setItem('displayFormat', 'grid')
}
},
toogleListView () {
this.displayFormat = 'list'
if (localStorage) {
localStorage.setItem('displayFormat', 'list')
}
},
toogleRecordsView () {
this.displayFormat = 'records'
if (localStorage) {
localStorage.setItem('displayFormat', 'records')
}
},
viewZone () {
this.zoneContent = null
this.$bvModal.show('modal-viewZone')
ZoneApi.viewZone(this.domain.domain, this.selectedHistory)
.then(
(response) => {
this.zoneContent = response.data
},
(error) => {
this.$bvModal.hide('modal-viewZone')
this.$bvToast.toast(
error.response.data.errmsg, {
title: this.$t('errors.occurs', { when: 'exporting the zone' }),
autoHideDelay: 5000,
variant: 'danger',
toaster: 'b-toaster-content-right'
}
)
})
}
}
}
</script>

View File

@ -1,51 +0,0 @@
<!--
Copyright or © or Copr. happyDNS (2020)
contact@happydns.org
This software is a computer program whose purpose is to provide a modern
interface to interact with DNS systems.
This software is governed by the CeCILL license under French law and abiding
by the rules of distribution of free software. You can use, modify and/or
redistribute the software under the terms of the CeCILL license as
circulated by CEA, CNRS and INRIA at the following URL
"http://www.cecill.info".
As a counterpart to the access to the source code and rights to copy, modify
and redistribute granted by the license, users are provided only with a
limited warranty and the software's author, the holder of the economic
rights, and the successive licensors have only limited liability.
In this respect, the user's attention is drawn to the risks associated with
loading, using, modifying and/or developing or reproducing the software by
the user in light of its specific status of free software, that may mean
that it is complicated to manipulate, and that also therefore means that it
is reserved for developers and experienced professionals having in-depth
computer knowledge. Users are therefore encouraged to load and test the
software's suitability as regards their requirements in conditions enabling
the security of their systems and/or data to be ensured and, more generally,
to use and operate it in the same conditions as regards security.
The fact that you are presently reading this means that you have had
knowledge of the CeCILL license and that you accept its terms.
-->
<template>
<div />
</template>
<script>
export default {
props: {
domain: {
type: Object,
required: true
}
},
mounted () {
this.$router.replace('/domains/' + encodeURIComponent(this.domain.domain || this.$route.params.domain) + '/abstract')
}
}
</script>

View File

@ -33,67 +33,214 @@
<template>
<b-container fluid>
<b-alert variant="danger" :show="error.length != 0">
<strong>{{ $t('errors.error') }}</strong> {{ error }}
</b-alert>
<div v-if="!domain && error.length == 0" class="text-center">
<div v-if="!domain" class="mt-5 text-center">
<b-spinner label="Spinning" />
<p>{{ $t('wait.loading') }}</p>
</div>
<b-row style="min-height: inherit">
<b-col sm="4" md="3" class="bg-light pb-5">
<router-link to="/domains/" class="btn font-weight-bolder">
<b-icon icon="chevron-up" />
</router-link>
<b-nav pills vertical variant="secondary">
<b-nav-item :to="'/domains/' + domain.domain" :active="$route.name == 'domain-home'">
{{ $t('domains.view.summary') }}
</b-nav-item>
<b-nav-item :to="'/domains/' + domain.domain + '/abstract'" :active="$route.name == 'domain-abstract'">
{{ $t('domains.view.abstract') }}
</b-nav-item>
<b-nav-item :to="'/zones/' + domain.domain + '/records'" :active="$route.name == 'zone-records'">
{{ $t('domains.view.live') }}
</b-nav-item>
<b-nav-item :to="'/domain/' + domain.domain + '/monitoring'" :active="$route.name == 'domain-monitoring'">
{{ $t('domains.view.monitoring') }}
</b-nav-item>
<b-nav-item :to="'/domains/' + domain.domain + '/source'" :active="$route.name == 'domain-source'">
{{ $t('domains.view.source') }}
</b-nav-item>
<hr>
<b-nav-form>
<b-button type="button" variant="outline-danger" @click="detachDomain()">
<b-icon icon="trash-fill" /> {{ $t('domains.stop') }}
<b-row v-else style="min-height: inherit">
<b-col sm="4" md="3" class="bg-light pt-2 pb-2 sticky-top d-flex flex-column justify-content-between" style="height: 100vh; overflow-y: auto; z-index: 5">
<b-row>
<b-col class="pr-0" sm="auto">
<router-link to="/domains/" class="btn font-weight-bolder">
<b-icon icon="chevron-up" />
</router-link>
</b-col>
<b-col class="pl-0">
<b-form-select :value="domain.domain" :options="sortedDomains" value-field="domain" text-field="domain" @input="changeDomain($event)" />
</b-col>
</b-row>
<b-form class="mt-3">
<label class="font-weight-bolder" for="zhistory">{{ $t('domains.history') }}:</label>
<b-form-select id="zhistory" v-model="selectedHistory" :options="domain.zone_history" value-field="id" text-field="last_modified" />
</b-form>
<b-button-group class="mt-3 w-100">
<b-button size="sm" variant="outline-info" :title="$t('domains.actions.view')" @click="viewZone">
<b-icon icon="list-ul" aria-hidden="true" /><br>
{{ $t('domains.actions.view') }}
</b-button>
<b-button v-if="selectedHistory === domain.zone_history[0].id" size="sm" variant="success" :title="$t('domains.actions.propagate')" @click="showDiff">
<b-icon icon="cloud-upload" aria-hidden="true" /><br>
{{ $t('domains.actions.propagate') }}
</b-button>
<b-button v-else size="sm" variant="warning" :title="$t('domains.actions.rollback')" @click="showDiff">
<b-icon icon="cloud-upload" aria-hidden="true" /><br>
{{ $t('domains.actions.rollback') }}
</b-button>
</b-button-group>
<hr>
<b-form class="mt-3">
<label class="font-weight-bolder">{{ $t('domains.views.as') }}</label>
<b-button-group class="w-100">
<b-button :variant="displayFormat === 'grid' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.grid.title')" @click="toogleGridView()">
<b-icon icon="grid-fill" aria-hidden="true" /><br>
{{ $t('domains.views.grid.label') }}
</b-button>
</b-nav-form>
</b-nav>
<b-button :variant="displayFormat === 'list' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.list.title')" @click="toogleListView()">
<b-icon icon="list-ul" aria-hidden="true" /><br>
{{ $t('domains.views.list.label') }}
</b-button>
<b-button :variant="displayFormat === 'records' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.records.title')" @click="toogleRecordsView()">
<b-icon icon="menu-button-wide-fill" aria-hidden="true" /><br>
{{ $t('domains.views.records.label') }}
</b-button>
</b-button-group>
</b-form>
<hr>
<b-button class="w-100" type="button" variant="outline-danger" @click="detachDomain()">
<b-icon icon="trash-fill" /> {{ $t('domains.stop') }}
</b-button>
<b-form v-if="sources_getAll && sources_getAll[domain.id_source]" class="mt-5">
<label class="font-weight-bolder">{{ $t('domains.view.source') }}:</label>
<div class="pr-2 pl-2">
<b-button class="p-3 w-100 text-left" type="button" variant="outline-info" @click="goToSource()">
<div class="d-inline-block text-center" style="width: 50px;">
<img :src="'/api/source_specs/' + sources_getAll[domain.id_source]._srctype + '/icon.png'" :alt="sources_getAll[domain.id_source]._srctype" :title="sources_getAll[domain.id_source]._srctype" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
</div>
{{ sources_getAll[domain.id_source]._comment }}
</b-button>
</div>
</b-form>
</b-col>
<b-col sm="8" md="9" class="mb-5">
<router-view :domain="domain" />
<div v-if="importInProgress" class="mt-4 text-center">
<b-spinner :label="$t('common.spinning')" />
<p>{{ $t('wait.importing') }}</p>
</div>
<h-subdomain-list v-else-if="selectedHistory && domain.zone_history.length > 0" :display-format="displayFormat" :domain="domain" :zone-id="selectedHistory" />
</b-col>
</b-row>
<b-modal id="modal-viewZone" :title="$t('domains.view.title')" size="lg" scrollable ok-only :ok-disabled="zoneContent === null">
<div v-if="zoneContent === null" class="my-2 text-center">
<b-spinner label="Spinning" />
<p>{{ $t('wait.formating') }}</p>
</div>
<pre v-else style="overflow: initial">{{ zoneContent }}</pre>
</b-modal>
<b-modal id="modal-applyZone" size="lg" scrollable @ok="applyDiff()">
<template #modal-title>
<i18n path="domains.view.description" tag="span">
<span class="text-monospace">{{ domain.domain }}</span>
</i18n>
</template>
<template #modal-footer="{ ok, cancel }">
<div v-if="zoneDiffAdd || zoneDiffDel">
<span v-if="zoneDiffAdd" class="text-success">
{{ $tc('domains.apply.additions', (zoneDiffAdd || []).length) }}
</span>
&ndash;
<span class="text-danger">
{{ $tc('domains.apply.deletions', (zoneDiffAdd || []).length) }}
</span>
</div>
<b-button variant="secondary" @click="cancel()">
{{ $t('common.cancel') }}
</b-button>
<b-button variant="success" :disabled="zoneDiffAdd === null && zoneDiffDel === null" @click="ok()">
{{ $t('domains.apply.button') }}
</b-button>
</template>
<div v-if="zoneDiffAdd === null && zoneDiffDel === null" class="my-2 text-center">
<b-spinner label="Spinning" />
<p>{{ $t('wait.exporting') }}</p>
</div>
<div v-for="(line, n) in zoneDiffAdd" :key="'a' + n" class="text-monospace text-success" style="white-space: nowrap">
+{{ line }}
</div>
<div v-for="(line, n) in zoneDiffDel" :key="'d' + n" class="text-monospace text-danger" style="white-space: nowrap">
-{{ line }}
</div>
</b-modal>
</b-container>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import DomainsApi from '@/api/domains'
import ZonesApi from '@/api/zones'
export default {
components: {
hSubdomainList: () => import('@/components/hSubdomainList')
},
data: function () {
return {
error: '',
domain: {}
displayFormat: 'grid',
importInProgress: false,
selectedHistory: null,
zoneContent: null,
zoneDiffAdd: null,
zoneDiffDel: null
}
},
mounted () {
computed: {
domain () {
return this.domains_getDetailed[this.$route.params.domain]
},
...mapGetters('domains', ['domains_getDetailed', 'sortedDomains']),
...mapGetters('sources', ['sources_getAll'])
},
watch: {
domain: function () {
this.pullDomain()
if (!this.selectedHistory && this.domain.zone_history.length !== 0) {
this.selectedHistory = this.domain.zone_history[0].id
}
}
},
created () {
if (localStorage && localStorage.getItem('displayFormat')) {
this.displayFormat = localStorage.getItem('displayFormat')
}
this.$store.dispatch('domains/getAllMyDomains')
this.$store.dispatch('sources/getAllMySources')
this.updateDomainInfo()
this.$on('update-domain-info', this.updateDomainInfo)
},
methods: {
pullDomain () {
if (this.domain.zone_history === null || this.domain.zone_history.length === 0) {
this.importZone()
} else {
this.selectedHistory = this.domain.zone_history[0].id
}
},
importZone () {
this.importInProgress = true
ZonesApi.importZone(this.domain.domain)
.then(
(response) => {
this.importInProgress = false
this.updateDomainInfo()
this.selectedHistory = response.data.id
}
)
},
changeDomain (newDomain) {
this.$router.push('/domains/' + encodeURIComponent(newDomain))
this.updateDomainInfo()
},
goToSource () {
this.$router.push('/sources/' + encodeURIComponent(this.domain.id_source))
},
detachDomain () {
this.$bvModal.msgBoxConfirm(this.$t('domains.alert.remove', { domain: this.domain.domain }), {
title: this.$t('domains.removal'),
@ -105,30 +252,114 @@ export default {
})
.then(value => {
if (value) {
axios
.delete('/api/domains/' + encodeURIComponent(this.domain.domain))
.then(response => (
this.$router.push('/domains/')
))
DomainsApi.detachDomain(this.domain.domain)
.then(
() => {
this.$store.dispatch('domains/dropDomain', this.domain.domain)
this.$router.push('/domains/')
}
)
}
})
},
updateDomainInfo () {
var mydomain = this.$route.params.domain
axios
.get('/api/domains/' + encodeURIComponent(mydomain))
toogleGridView () {
this.displayFormat = 'grid'
if (localStorage) {
localStorage.setItem('displayFormat', 'grid')
}
},
toogleListView () {
this.displayFormat = 'list'
if (localStorage) {
localStorage.setItem('displayFormat', 'list')
}
},
toogleRecordsView () {
this.displayFormat = 'records'
if (localStorage) {
localStorage.setItem('displayFormat', 'records')
}
},
showDiff () {
this.zoneDiffAdd = null
this.zoneDiffDel = null
this.$bvModal.show('modal-applyZone')
ZonesApi.diffZone(this.domain.domain, '@', this.selectedHistory)
.then(
response => (this.domain = response.data),
error => {
this.$root.$bvToast.toast(this.$t('domains.alert.unable-retrieve.description', { domain: this.$route.params.domain }) + ' ' + error.response.data.errmsg, {
title: this.$t('domains.alert.unable-retrieve.title'),
autoHideDelay: 5000,
variant: 'danger',
toaster: 'b-toaster-content-right'
})
this.$router.push('/domains/')
(response) => {
if (response.data.toAdd == null && response.data.toDel == null) {
this.$bvModal.hide('modal-applyZone')
this.$bvModal.msgBoxOk(this.$t('domains.apply.nochange'))
} else {
this.zoneDiffAdd = response.data.toAdd
this.zoneDiffDel = response.data.toDel
}
},
(error) => {
this.$bvModal.hide('modal-applyZone')
this.$bvToast.toast(
error.response.data.errmsg, {
title: this.$t('errors.occurs', { when: 'exporting the zone' }),
autoHideDelay: 5000,
variant: 'danger',
toaster: 'b-toaster-content-right'
}
)
})
},
applyDiff () {
ZonesApi.applyZone(this.domain.domain, this.selectedHistory)
.then(
(response) => {
this.$bvToast.toast(
this.$t('domains.apply.done.description'), {
title: this.$t('domains.apply.done.title'),
autoHideDelay: 5000,
variant: 'success',
toaster: 'b-toaster-content-right'
}
)
},
(error) => {
this.$bvToast.toast(
error.response.data.errmsg, {
title: this.$t('errors.occurs', { when: 'applying the zone' }),
autoHideDelay: 5000,
variant: 'danger',
toaster: 'b-toaster-content-right'
}
)
})
},
viewZone () {
this.zoneContent = null
this.$bvModal.show('modal-viewZone')
ZonesApi.viewZone(this.domain.domain, this.selectedHistory)
.then(
(response) => {
this.zoneContent = response.data
},
(error) => {
this.$bvModal.hide('modal-viewZone')
this.$bvToast.toast(
error.response.data.errmsg, {
title: this.$t('errors.occurs', { when: 'exporting the zone' }),
autoHideDelay: 5000,
variant: 'danger',
toaster: 'b-toaster-content-right'
}
)
})
},
updateDomainInfo () {
this.$store.dispatch('domains/getDomainDetails', this.$route.params.domain)
}
}
}