improve add record section

2023-02-25 16:44:01 +01:00 · 2023-02-25 16:44:01 +01:00 · d06d745dcb
commit d06d745dcb
parent 960942c47f
2 changed files with 176 additions and 104 deletions
--- a/public/scripts/records.js
+++ b/public/scripts/records.js
@ -13,6 +13,12 @@ const rdataInputProperties = {
    MasterServerName: {label: 'Serveur primaire', type: 'text'},
    Expire: {label: 'Expiration', type: 'number'},
    Target: {label: 'Cible', type: 'text'},
+    Service: {label: 'Service', type: 'text'},
+    Protocol: {label: 'Protocole', type: 'text'},
+    Priority: {label: 'Priorité', type: 'number'},
+    Weight: {label: 'Poids', type: 'number'},
+    Port: {label: 'Port', type: 'number'},
+    Server: {label: 'Serveur', type: 'text'},
 };

 const realRecordDataConfig = {
@ -30,7 +36,7 @@ const realRecordDataConfig = {
    },
    'SRV': {
        friendlyType: 'service',
-        fields: [ /* TODO */ ],
+        fields: [ 'Priority', 'Weight', 'Port', 'Server' ],
    },
    'NS': {
        friendlyType: 'name_server',
@ -43,38 +49,84 @@ const realRecordDataConfig = {
 };

 function defaultBuildData(realRecordType) {
-    const defaultFields = realRecordDataConfig[realRecordType].fields.map(field => [field, null]);
+    const defaultFields = Object.fromEntries(realRecordDataConfig[realRecordType].fields.map(field => [field, null]));
    return (fields) => {
        return {...defaultFields, ...fields, Type: realRecordType};
    }
 }

-function defaultRecordToField(realRecord) {
+function defaultRecordToFields(realRecord) {
    const type = realRecord.Type;
    return realRecordDataConfig[type].fields.map(field => [field, realRecord[field]]);
 }

+function defaultGetName(name) {
+    return name;
+}
+
+function srvRecordToFields({ Name, Type, Class, ...fields }) {
+    const [ serviceName, protocol] = Name.split('.');
+    return {
+        Service: serviceName.replace(/^_/, ''),
+        Protocol: protocol.replace(/^_/, ''),
+        ...fields
+    }
+}
+
+function srvGetName(originalName) {
+    const [_serviceName, _protocol, ...name] = originalName.split('.');
+    return name.join('.');
+}
+
+function buildAddressRecord(fields) {
+    const address = fields.Address || '';
+    if (address.indexOf('.') >= 0) {
+        fields.Type = 'A';
+    } else if (address.indexOf(':') >= 0) {
+        fields.Type = 'AAAA';
+    } else {
+        fields.Type = '';
+    }
+    return fields;
+}
+
+function buildServiceRecord({ Name, Service, Protocol, ...fields}) {
+    fields.Name = `_${Service}._${Protocol}.${Name}`;
+    fields.Type = 'SRV';
+    return fields;
+}
+

 const friendlyRecordDataConfig = {
    'address': {
-        realRecordToFields: defaultRecordToField,
+        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['AAAA'].fields,
        buildData: buildAddressRecord,
+        getName: defaultGetName,
    },
    'alias': {
-        realRecordToFields: defaultRecordToField,
+        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['CNAME'].fields,
        buildData: defaultBuildData('CNAME'),
+        getName: defaultGetName,
    },
    'name_server': {
-        realRecordToFields: defaultRecordToField,
+        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['CNAME'].fields,
        buildData: defaultBuildData('NS'),
+        getName: defaultGetName,
    },
    'soa': {
-        realRecordToFields: defaultRecordToField,
+        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['SOA'].fields,
        buildData: defaultBuildData('SOA'),
+        getName: defaultGetName,
+    },
+    'service': {
+        realRecordToFields: srvRecordToFields,
+        fields: ['Service', 'Protocol', 'Priority', 'Weight', 'Port', 'Server'],
+        buildData: buildServiceRecord,
+        getName: srvGetName,
    },
 };

@ -87,11 +139,6 @@ const recordTypeNames = {
    'soa': 'SOA',
 }

-/* Type to use for SRV to derive name without port / service */
-function getNameForRecord(name, type) {
-    return name;
-}
-
 /* Name to use with _spf for example */
 function getFriendlyTypeForRecord(name, type) {
    return realRecordDataConfig[type].friendlyType;
@ -99,8 +146,8 @@ function getFriendlyTypeForRecord(name, type) {

 function processRecords(records) {
    return records.reduce((acc, record) => {
-        let name = getNameForRecord(record.Name, record.Type);
        let type = getFriendlyTypeForRecord(record.Name, record.Type);
+        let name = friendlyRecordDataConfig[type].getName(record.Name);
        if (!(name in acc)) {
            acc[name] = {};
        }
@ -112,13 +159,6 @@ function processRecords(records) {
    }, {});
 }

-function buildAddressRecord({ Address = ''}) {
-    return {
-        Type: Address.indexOf(':') > -1 ? 'AAAA' : 'A',
-        Address
-    }
-}
-
 function FriendlyRecord({type, record}) {
    let keys = friendlyRecordDataConfig[type].realRecordToFields(record);
    if (keys.length == 1) {
@ -154,8 +194,6 @@ function RecordsByName({ name, recordSets }) {
    `;
 }

-
-
 function RecordListFriendly({ zone }) {
    const [records, setRecords] = useState({});
    const [editable, setEditable] = useState(false);
@ -176,19 +214,21 @@ function RecordListFriendly({ zone }) {
    `;
 }

-function NewRecordFormFriendly({ zone, enabled, id, onCancel }) {
+function NewRecordFormFriendly({ zone }) {
+    const defaultVaules = {Name: '', TTL: 3600, Class: 'IN'};
    const [recordType, setRecordType] = useState(Object.keys(recordTypeNames)[0]);
-    const [recordData, setRecordData] = useState({});
+    const [recordData, setRecordData] = useState(defaultVaules);
    const [realRecordData, setRealRecordData] = useState({});
    const [realType, setRealType] = useState('');
-    const [domain, setDomain] = useState('');
-    const [ttl, setTTL] = useState(3600);
+
+    const absoluteName = (name) => name ? `${name}.${zone}` : zone;

    const setRecordDataFactory = (field) => {
        return (e) => {
            const newData = {...recordData};
-            newData[field] = e.target.value;
-            const newRealRecordData = friendlyRecordDataConfig[recordType].buildData(newData)
+            newData[field] = e.target.type == 'number' ? Number(e.target.value) : e.target.value;
+            const newRealRecordData = friendlyRecordDataConfig[recordType].buildData({...newData, Class: 'IN', Name: absoluteName(newData.Name)})
+
            setRecordData(newData);
            setRealRecordData(newRealRecordData);
            setRealType(newRealRecordData.Type);
@ -197,75 +237,90 @@ function NewRecordFormFriendly({ zone, enabled, id, onCancel }) {

    const createNewRecord = (e) => {
        e.preventDefault();
-        const newRecords = [{...realRecordData, Class: 'IN', TTL: ttl, Name: `${domain}.${zone}`}];
+        const newRecords = [realRecordData];
        console.log(newRecords)
        createRecords(zone, newRecords);
    }

-    // TODO: Reset valeurs champs quand changement de type => bound la valeur de l'input au state
+    const resetData = (resetName = false) => {
+        setRealType('');
+        const newName = resetName ? defaultVaules.Name : recordData.Name;
+        setRecordData({ Name: newName, TTL:  defaultVaules.TTL });
+        setRealRecordData({...defaultVaules, Name: absoluteName(newName)});
+    }
+
+    useEffect(() => resetData(true), []);
+
+    // TODO: Reset valeurs champs quand changement de type + "annuler" => bound la valeur de l'input au state
    // TODO: Dans le cas où un domain est dans le RDATA mettre le domaine absolue dans la preview
    // TODO: Déplacer preview dans son component, faire une vue en "diff" et l'appeler "prévisualisation des changements"
    // TODO: Validation des données client et serveur

    return html`
-        <form class="new-record ${enabled ? '' : 'disabled'}" id=${id}>
-            <h3>Nouvel enregistrement</h3>
-            <div class="form-row">
-                <div class="input-group">
-                    <label for="domain">Domaine</label>
-                    <div class="combined-input">
-                        <input type="text" id="domain" name="domain" onChange=${e => setDomain(e.target.value)}/>
-                        <span>.${ zone }</span>
+        <section class="new-record">
+            <header>
+                <h2>Nouvel enregistrement</h2>
+            </header>
+            <form>
+                <div class="form-row">
+                    <div class="input-group">
+                        <label for="domain">Domaine</label>
+                        <div class="combined-input">
+                            <input type="text" id="domain" name="domain" value=${recordData.Name} onInput=${setRecordDataFactory('Name')}/>
+                            <span>.${ zone }</span>
+                        </div>
+                    </div>
+                    <div class="input-group">
+                        <label for="record_type">Type d'enregistrement</label>
+                        <select id="record_type" name="record_type" onChange=${(e) => { setRecordType(e.target.value); resetData() }}>
+                            ${Object.entries(recordTypeNames).map(([type, name]) => html`<option value="${type}">${name}</option>`)}
+                        </select>
+                    </div>
+                    <div>
+                        ${friendlyRecordDataConfig[recordType].fields.map(fieldName => html`
+                        <div class="input-group">
+                                <label for="${fieldName}">${rdataInputProperties[fieldName].label}</label>
+                                <input id="${fieldName}" type="${rdataInputProperties[fieldName].type}" onInput=${setRecordDataFactory(fieldName)}></input>
+                            </div>
+                        `)}
+                    </div>
+                    <div class="input-group">
+                        <label for="ttl">Durée dans le cache</label>
+                        <input type="number" name="ttl" id="ttl" value=${recordData.TTL} onInput=${setRecordDataFactory('TTL')}/>
                    </div>
                </div>
-                <div class="input-group">
-                    <label for="record_type">Type d'enregistrement</label>
-                    <select id="record_type" name="record_type" onChange=${e => { setRecordType(e.target.value); setRealType(''); setRecordData({}); setRealRecordData({})}}>
-                        ${Object.entries(recordTypeNames).map(([type, name]) => html`<option value="${type}">${name}</option>`)}
-                    </select>
-                </div>
+                <article class="preview">
+                    <h3>Prévisualisation des changements</h3>
+                    <p>
+                        <img src="/images/plus.svg" alt="Ajout" title="Ajout" class="addition"/>
+                        <code class="addition">
+                            ${realRecordData.Name === zone ? '@' : realRecordData.Name} ${realRecordData.TTL} ${realRecordData.Class} ${realType} ${realType != '' ? realRecordDataConfig[realType].fields.map(field => realRecordData[field]).join(' ') : ''}
+                        </code>
+                    </p>
+                </article>
                <div>
-                    ${friendlyRecordDataConfig[recordType].fields.map(fieldName => html`
-                    <div class="input-group">
-                            <label for="${fieldName}">${rdataInputProperties[fieldName].label}</label>
-                            <input id="${fieldName}" type="${rdataInputProperties[fieldName].type}" onChange=${setRecordDataFactory(fieldName)}></input>
-                        </div>
-                    `)}
+                    <input type="submit" onClick=${createNewRecord} value="Ajouter"/>
+                    <button type="reset" onClick=${e => { resetData(true); e.preventDefault() }}>Annuler</button>
                </div>
-                <div class="input-group">
-                    <label for="ttl">TTL</label>
-                    <input type="number" name="ttl" id="ttl" value="${ttl}" onChange=${e => setTTL(e.target.value)}/>
-                </div>
-            </div>
-            <article class="preview">
-                <h4>Prévisualisation de l'enregistrement</h3>
-                <pre>
-                    ${domain == '' ? '@' : domain + '.' + zone} ${ttl} IN ${realType} ${realType != '' ? realRecordDataConfig[realType].fields.map(field => realRecordData[field]).join(' ') : ''}
-                </pre>
-            </article>
-            <div>
-                <input type="submit" onClick=${createNewRecord} value="Ajouter"/>
-                <button role="button" onClick=${onCancel}>Anuler</button>
-            </div>
-        </form>
+            </form>
+        </section>
    `;
 }

 function ZoneRecords({ zone }) {
-    const [addNewRecord, setAddNewRecord] = useState(true);
-
-    const onCancelNewRecord = (e) => { setAddNewRecord(false); e.preventDefault() };
-
    return html`
-        <header>
-            <h2>Enregistrements</h2>
-            <button onClick=${() => setAddNewRecord(true)} aria-controls="add-new-record-form" aria-expanded=${addNewRecord} disabled=${addNewRecord}>Ajouter un enregistrement</button>
-            <button>Éditer la zone</button>
-        </header>
-        <${NewRecordFormFriendly} zone=${zone} enabled=${addNewRecord} id="add-new-record-form" onCancel=${onCancelNewRecord}/>
-        <div class="zone-content">
-            <${RecordListFriendly} zone=${zone} />
-        </div>
+        <${NewRecordFormFriendly} zone=${zone}/>
+
+        <section>
+            <header>
+                <h2>Contenu de la zone</h2>
+                <button>Éditer la zone</button>
+            </header>
+
+            <div class="zone-content">
+                <${RecordListFriendly} zone=${zone} />
+            </div>
+        </section>
    `;
 }

--- a/public/styles/zone.css
+++ b/public/styles/zone.css
@ -35,6 +35,7 @@ header > :not(:last-of-type) {

 .zone-content article {
    display: flex;
+    flex-wrap: wrap;
 }

 .zone-content > article > div {
@ -78,26 +79,22 @@ header > :not(:last-of-type) {
    font-size: .7rem;
 }

-form.new-record {
+.new-record form {
    width: auto;
 }

-form.new-record > div.form-row > div:not(:last-child) {
+.new-record form > div.form-row > * {
    flex-grow: 1;
-    margin-right: 2ch;
 }

-form.new-record > div.form-row {
+.new-record form > div.form-row {
    display: flex;
    flex-wrap: wrap;
+    gap: 2ch;
 }

-form.new-record > div.form-row > div:first-child {
-    min-width: 30%;
-}
-
-form.new-record > div.form-row > div:nth-child(2) {
-    min-width: calc( .3 * (70% - 4ch));
+.new-record form label {
+    margin-top: .25rem;
 }

 form div.input-group {
@ -126,32 +123,52 @@ form.disabled {
    display: none;
 }

-input[name^="ttl"] {
-    max-width: 10ch;
-}
-
-form.new-record button,
-form.new-record input[type="submit"] {
+.new-record form button,
+.new-record form input[type="submit"] {
    margin-right: 1ch;
    margin-top: .75rem;
 }
-form.new-record h3 {
-    margin: 0;
+
+.new-record header {
+    margin-bottom: 0;
 }
-form.new-record .preview {
+
+.new-record form .preview {
    margin: .5rem 0;
    border: 1px solid rgb(var(--color-primary));
 }

-form.new-record .preview pre {
-    margin: .5rem 0 .5rem 0;
-    padding: 0 .5rem;
+.new-record form .preview p:first-of-type {
+    margin-top: .5rem;
 }

-form.new-record .preview h4 {
+.new-record form .preview p:last-of-type {
+    margin-bottom: .5rem;
+}
+
+.new-record form .preview p {
+    display: flex;
+}
+
+.new-record form .preview code {
+    padding: 0 .5rem;
+    flex: 1;
+}
+
+.new-record form .preview img {
+    padding: 0 .25rem;
+    border-right: 1px solid #1b841b;
+}
+
+.new-record form .preview .addition {
+    background: #d9fbd9;
+}
+
+.new-record form .preview h3 {
    margin: 0;
    padding: .0rem .5rem 0 .5rem;;
-    border-bottom: 1px solid rgb(var(--color-primary));
    font-size: 1rem;
-    font-weight: bold;
+    font-weight: normal;
+    background: rgb(var(--color-primary));
+    color: var(--color-contrast)
 }