_www: refactoring, various bug fixes and cleanups

On refactoring,

  - standardize the method names on the rescached.js to match with the
    Client, for example prefixing block.d operations with Blockd.
  - use the GET /block.d, GET /hosts.d, GET /zone.d to fetch the
    resources instead of using GET /environment for all.

On bug fixes,

  - fix updating SOA record on zone.d due to refactoring

7 files changed, 400 insertions, 353 deletions

diff --git a/_www/block.d/index.html b/_www/block.d/index.html
index 27059c3..4471b69 100644
--- a/_www/block.d/index.html
+++ b/_www/block.d/index.html
@@ -82,7 +82,7 @@
     <div id="HostBlockd" class="block_source"></div>
 
     <div>
-        <button onclick="blockdUpdate()">Save</button>
+        <button onclick="BlockdUpdate()">Save</button>
     </div>
 
     <script src="/index.js"></script>
@@ -90,81 +90,75 @@
     <script>
         let resc = null
 
-        function onLoad() {
+        async function onLoad() {
             resc = new Rescached("")
-            getEnvironment()
-        }
 
-        async function getEnvironment() {
-            const res = await resc.getEnvironment()
+            const res = await resc.Blockd()
             if (res.code != 200) {
                 notifError(res.message)
                 return
             }
-
-            let env = res.data
-            renderHostBlockd(env.HostBlockd)
+            renderBlockd(resc.blockd)
         }
 
         function onCheckHostblock(key, val) {
-            resc.env.HostBlockd[key].IsEnabled = val
+            resc.blockd[key].IsEnabled = val
         }
 
-        async function blockdFetch(name) {
+        async function BlockdFetch(name) {
             const res = await resc.BlockdFetch(name)
             if (res.code != 200) {
-                notifError("blockdFetch: ", res.message)
+                notifError("BlockdFetch: ", res.message)
                 return
             }
 
-            resc.env.HostBlockd[name] = res.data
-
-            notifInfo("The hosts blocks has been updated.")
+            notifInfo(`The hosts for blockd.d ${name} has been fetched.`)
 
-            renderHostBlockd(resc.env.HostBlockd)
+            renderBlockd(resc.blockd)
         }
 
-        async function blockdUpdate() {
-            const res = await resc.BlockdUpdate(resc.env.HostBlockd)
+        async function BlockdUpdate() {
+            const res = await resc.BlockdUpdate(resc.blockd)
             if (res.code != 200) {
-                notifError("blockdUpdate: ", res.message)
+                notifError("BlockdUpdate: ", res.message)
                 return
             }
 
-            renderHostBlockd(res.data)
+            renderBlockd(resc.blockd)
             notifInfo("The hosts blocks has been updated.")
         }
 
-        function renderHostBlockd(hostsBlockd) {
+        function renderBlockd(blockd) {
             let parent = document.getElementById("HostBlockd")
             parent.innerHTML = ""
 
-            for (var k in hostsBlockd) {
-                if (!hostsBlockd.hasOwnProperty(k)) {
+            for (var k in blockd) {
+                if (!blockd.hasOwnProperty(k)) {
                     continue;
                 }
 
-                let hostsBlock = hostsBlockd[k]
+                let hostsBlock = blockd[k]
                 let item = document.createElement("div")
                 item.classList.add("item")
                 item.innerHTML = `
-						<span class="is-enabled">
-							<input
-								type="checkbox"
-								${hostsBlock.IsEnabled ? "checked" : ""}
-								oninput="onCheckHostblock('${k}', this.checked)"
-							/>
-						</span>
-						<span class="info">
-							<div>
-								${hostsBlock.Name}
-								<button onclick="blockdFetch('${k}')">
-									Update
-								</button>
-							</div>
-							<div> URL: <input value="${hostsBlock.URL}" disabled /> </div>
-							<div> Last updated at ${hostsBlock.LastUpdated} </div>
-						</span>`
+                    <span class="is-enabled">
+                        <input
+                            type="checkbox"
+                            ${hostsBlock.IsEnabled ? "checked" : ""}
+                            oninput="onCheckHostblock('${k}', this.checked)"
+                        />
+                    </span>
+                    <span class="info">
+                        <div>
+                            ${hostsBlock.Name}
+                            <button onclick="BlockdFetch('${k}')">
+                                Update
+                            </button>
+                        </div>
+                        <div> URL: <input value="${hostsBlock.URL}" disabled /> </div>
+                        <div> Last updated at ${hostsBlock.LastUpdated} </div>
+                    </span>
+                `
 
                 parent.appendChild(item)
             }
diff --git a/_www/doc/index.adoc b/_www/doc/index.adoc
index 3c9ff89..5586b42 100644
--- a/_www/doc/index.adoc
+++ b/_www/doc/index.adoc
@@ -18,6 +18,8 @@ link:benchmark.html[Benchmark]:: The latest benchmark of rescached server.
 [#todo]
 ==  TODO
 
+* Zoned create should fill default SOA
+
 * zone.d rr add - check for duplicate value.
 
 * Prioritize the order of hosts file to be loaded:
diff --git a/_www/environment/index.html b/_www/environment/index.html
index 3c439ae..af5a7be 100644
--- a/_www/environment/index.html
+++ b/_www/environment/index.html
@@ -208,7 +208,7 @@
 
         <div class="section-bottom">
             <div>
-                <button onclick="handleSave()">Save</button>
+                <button onclick="EnvironmentUpdate()">Save</button>
             </div>
         </div>
     </div>
@@ -218,32 +218,13 @@
     <script>
         let resc = null
 
-        async function getEnvironment() {
-            const res = await resc.getEnvironment()
-            if (res.code != 200) {
+        async function EnvironmentUpdate() {
+            let res = await resc.EnvironmentUpdate()
+            if (res.code !== 200) {
                 notifError(res.message)
                 return
             }
-
-            const env = res.data
-
-            // Set all input values using env data.
-            document.getElementById("FileResolvConf").value = env.FileResolvConf
-            document.getElementById("Debug").value = env.Debug
-
-            renderNameservers()
-
-            document.getElementById("ListenAddress").value = env.ListenAddress
-            document.getElementById("HTTPPort").value = env.HTTPPort
-            document.getElementById("TLSPort").value = env.TLSPort
-            document.getElementById("TLSCertFile").value = env.TLSCertFile
-            document.getElementById("TLSPrivateKey").value = env.TLSPrivateKey
-
-            document.getElementById("TLSAllowInsecure").checked = env.TLSAllowInsecure
-            document.getElementById("DoHBehindProxy").checked = env.DoHBehindProxy
-
-            document.getElementById("PruneDelay").value = env.PruneDelay
-            document.getElementById("PruneThreshold").value = env.PruneThreshold
+            notifInfo("Environment has been saved!")
         }
 
         function handleAddNameserver() {
@@ -251,16 +232,6 @@
             renderNameservers()
         }
 
-        async function handleSave() {
-            console.log("handleSave: ", resc.env)
-            let res = await resc.updateEnvironment()
-            if (res.code !== 200) {
-                notifError(res.message)
-                return
-            }
-            notifInfo("Environment has been saved!")
-        }
-
         function onDeleteNameserver(x) {
             resc.env.NameServers.splice(x, 1)
             renderNameservers()
@@ -275,9 +246,34 @@
             resc.env.NameServers[x] = newv
         }
 
-        function onLoad() {
+        async function onLoad() {
             resc = new Rescached("")
-            getEnvironment()
+
+            const res = await resc.Environment()
+            if (res.code != 200) {
+                notifError(res.message)
+                return
+            }
+
+            const env = res.data
+
+            // Set all input values using env data.
+            document.getElementById("FileResolvConf").value = env.FileResolvConf
+            document.getElementById("Debug").value = env.Debug
+
+            renderNameservers()
+
+            document.getElementById("ListenAddress").value = env.ListenAddress
+            document.getElementById("HTTPPort").value = env.HTTPPort
+            document.getElementById("TLSPort").value = env.TLSPort
+            document.getElementById("TLSCertFile").value = env.TLSCertFile
+            document.getElementById("TLSPrivateKey").value = env.TLSPrivateKey
+
+            document.getElementById("TLSAllowInsecure").checked = env.TLSAllowInsecure
+            document.getElementById("DoHBehindProxy").checked = env.DoHBehindProxy
+
+            document.getElementById("PruneDelay").value = env.PruneDelay
+            document.getElementById("PruneThreshold").value = env.PruneThreshold
         }
 
         function renderNameservers() {
@@ -295,10 +291,10 @@
                 let el = document.createElement("div")
                 el.classList.add("input-deletable")
                 el.innerHTML = `
-						<input value="${ns}" oninput="onInputNameserver(${x}, this.value)">
-						<button onclick="onDeleteNameserver(${x})">
-							Delete
-						</button>`
+                    <input value="${ns}" oninput="onInputNameserver(${x}, this.value)">
+                    <button onclick="onDeleteNameserver(${x})">
+                        Delete
+                    </button>`
                 listNS.appendChild(el)
             }
         }
diff --git a/_www/hosts.d/index.html b/_www/hosts.d/index.html
index c8f4b41..eb46a4e 100644
--- a/_www/hosts.d/index.html
+++ b/_www/hosts.d/index.html
@@ -79,7 +79,7 @@
                 <br />
                 <input id="newHostsFile" oninput="onInputNewHostsFile(this.value)" />
             </label>
-            <button onclick="onCreateHostsFile()">Create</button>
+            <button onclick="HostsdCreate()">Create</button>
         </div>
 
         <div id="activeHostsFile">
@@ -98,55 +98,55 @@
             Value: "",
         }
 
-        async function getHostsFile(name) {
-            activeHostsFile = resc.env.HostsFiles[name]
-            if (typeof activeHostsFile.Records === "undefined") {
-                activeHostsFile.Records = []
-            }
-            if (activeHostsFile.Records === null) {
-                activeHostsFile.Records = []
-            }
-            if (activeHostsFile.Records.length === 0) {
-                const res = await resc.HostsFileGet(name)
-                activeHostsFile.Records = res.data
-            }
-            renderHostsFile(activeHostsFile)
-            newRecord.Name = ""
-            newRecord.Value = ""
-        }
-
-        async function onCreateHostsFile() {
+        async function HostsdCreate() {
             if (newHostsFile === "") {
                 notifError("Please fill the hosts file name first")
                 return
             }
 
-            let res = await resc.HostsFileCreate(newHostsFile)
+            let res = await resc.HostsdCreate(newHostsFile)
 
             if (res.code >= 400) {
-                notifError("ERROR: HostsFileCreate: " + res.message)
+                notifError("ERROR: HostsdCreate: " + res.message)
                 return
             }
-            renderHostsFiles(resc.env.HostsFiles)
+            renderHostsd(resc.hostsd)
             notifInfo(res.message)
             resetInputs()
         }
 
-        async function onDeleteActiveHostsFile() {
-            const res = await resc.HostsFileDelete(activeHostsFile.Name)
+        async function HostsdDelete() {
+            const res = await resc.HostsdDelete(activeHostsFile.Name)
             if (res.code != 200) {
                 notifError(res.message)
                 return
             }
-            renderHostsFiles(resc.env.HostsFiles)
-            document.getElementById(
-                "activeHostsFile",
-            ).innerHTML = `<p>Select one of the hosts file to manage.</p>`
+
+            renderHostsd(resc.hostsd)
+
+            document.getElementById("activeHostsFile").innerHTML = `<p>Select one of the hosts file to manage.</p>`
+
             notifInfo(`Hosts file "${activeHostsFile.Name}" has been deleted`)
             activeHostsFile = null
         }
 
-        async function onCreateRecord(hostsFile) {
+        async function HostsdGet(name) {
+            activeHostsFile = resc.hostsd[name]
+            if (typeof activeHostsFile.Records === "undefined") {
+                activeHostsFile.Records = []
+            } else if (activeHostsFile.Records === null) {
+                activeHostsFile.Records = []
+            }
+            if (activeHostsFile.Records.length === 0) {
+                const res = await resc.HostsdGet(name)
+                activeHostsFile.Records = res.data
+            }
+            renderHostsFile(activeHostsFile)
+            newRecord.Name = ""
+            newRecord.Value = ""
+        }
+
+        async function HostsdRecordAdd(hostsFile) {
             if (hostsFile === "") {
                 notifError("invalid or empty hosts file name: " + hostsFile)
                 return
@@ -167,13 +167,13 @@
             renderNewRecord(res.data)
         }
 
-        async function onDeleteRecord(domain) {
+        async function HostsdRecordDelete(domain) {
             let res = await resc.HostsdRecordDelete(activeHostsFile.Name, domain)
             if (res.code !== 200) {
                 notifError("Failed to delete record " + domain)
                 return
             }
-            activeHostsFile = resc.env.HostsFiles[activeHostsFile.Name]
+            activeHostsFile = resc.hostsd[activeHostsFile.Name]
             renderHostsFile(activeHostsFile)
         }
 
@@ -188,52 +188,52 @@
         async function onLoad() {
             resc = new Rescached("")
 
-            let res = await resc.getEnvironment()
+            let res = await resc.Hostsd()
             if (res.code != 200) {
                 notifError(res.message)
                 return
             }
-
-            renderHostsFiles(res.data.HostsFiles)
+            renderHostsd(resc.hostsd)
             resetInputs()
         }
 
         function renderHostsFile(hf) {
             let content = document.getElementById("activeHostsFile")
             let innerHTML = `
-					<p>
-						${hf.Name} (${hf.Records.length} records)
-						<button onclick="onDeleteActiveHostsFile()">Delete</button>
-					</p>
-					<div class="host">
-						<input class="host_name" placeholder="Domain name" value=""
-							oninput="onInputNewRecord('Name', this.value)"
-						/>
-						<input class="host_value" placeholder="IP address" value=""
-							oninput="onInputNewRecord('Value', this.value)"
-						/>
-						<button onclick="onCreateRecord('${hf.Name}')">Create</button>
-					</div>
-					<div class="host header">
-						<span class="host_name"> Domain name </span>
-						<span class="host_value"> IP address </span>
-					</div>
-					<div id="records">
-				`
+                <p>
+                    ${hf.Name} (${hf.Records.length} records)
+                    <button onclick="HostsdDelete()">Delete</button>
+                </p>
+                <div class="host">
+                    <input class="host_name" placeholder="Domain name" value=""
+                        oninput="onInputNewRecord('Name', this.value)"
+                    />
+                    <input class="host_value" placeholder="IP address" value=""
+                        oninput="onInputNewRecord('Value', this.value)"
+                    />
+                    <button onclick="HostsdRecordAdd('${hf.Name}')">Create</button>
+                </div>
+                <div class="host header">
+                    <span class="host_name"> Domain name </span>
+                    <span class="host_value"> IP address </span>
+                </div>
+                <div id="records">
+            `
             for (let x = 0; x < hf.Records.length; x++) {
                 let rr = hf.Records[x]
                 innerHTML += `
-						<div class="host">
-							<span class="host_name"> ${rr.Name} </span>
-							<span class="host_value"> ${rr.Value} </span>
-							<button onclick="onDeleteRecord('${rr.Name}')">X</button>
-						</div>`
+                    <div class="host">
+                        <span class="host_name"> ${rr.Name} </span>
+                        <span class="host_value"> ${rr.Value} </span>
+                        <button onclick="HostsdRecordDelete('${rr.Name}')">X</button>
+                    </div>
+                `
             }
             innerHTML += "</div>"
             content.innerHTML = innerHTML
         }
 
-        function renderHostsFiles(hostsFiles) {
+        function renderHostsd(hostsFiles) {
             let parent = document.getElementById("HostsFiles")
             parent.innerHTML = ""
 
@@ -244,7 +244,7 @@
                 let hf = hostsFiles[k]
                 let item = document.createElement("div")
                 item.classList.add("item")
-                item.innerHTML = `<a href="#" onclick="getHostsFile('${k}')"> ${hf.Name} </a>`
+                item.innerHTML = `<a href="#" onclick="HostsdGet('${k}')"> ${hf.Name} </a>`
                 parent.appendChild(item)
             }
         }
@@ -253,11 +253,12 @@
         function renderNewRecord(rr) {
             let div = document.getElementById("records")
             innerHTML = `
-					<div class="host">
-						<span class="host_name"> ${rr.Name} </span>
-						<span class="host_value"> ${rr.Value} </span>
-						<button onclick="onDeleteRecord('${rr.Name}')">X</button>
-					</div>`
+                <div class="host">
+                    <span class="host_name"> ${rr.Name} </span>
+                    <span class="host_value"> ${rr.Value} </span>
+                    <button onclick="HostsdRecordDelete('${rr.Name}')">X</button>
+                </div>
+            `
             div.innerHTML = innerHTML + div.innerHTML
         }
 
diff --git a/_www/index.html b/_www/index.html
index 55653f8..f61ce22 100644
--- a/_www/index.html
+++ b/_www/index.html
@@ -134,10 +134,10 @@
             renderCaches(res.data);
         }
 
-        async function doCacheRemove(idx, qname) {
-            const res = await resc.CacheRemove(qname);
+        async function CachesRemove(idx, qname) {
+            const res = await resc.CachesRemove(qname);
             if (res.code != 200) {
-                notifError(`doCacheRemove ${qname}: ${res.message}`);
+                notifError(`CachesRemove ${qname}: ${res.message}`);
                 return;
             }
 
@@ -151,7 +151,7 @@
         async function doSearch() {
             const query = document.getElementsByName("query")[0].value;
             console.log("doSearch: ", query);
-            const res = await resc.Search(query);
+            const res = await resc.CachesSearch(query);
             if (res.code != 200) {
                 notifError(`doSearch ${query}: ${res.message}`);
                 return;
@@ -179,19 +179,19 @@
                 const divRecord = document.createElement("div");
                 divRecord.classList.add("message");
                 innerHTML = `
-						<div class="qname">
-							${record.Question.Name}
-							<button class="b-remove"
-								onclick="doCacheRemove(${x}, '${record.Question.Name}')"
-							>Remove from cache</button>
-						</div>
-						<div class="rr header">
-							<span class="kind"></span>
-							<span class="type"> Type </span>
-							<span class="ttl"> TTL </span>
-							<span class="value"> Value </span>
-						</div>
-					`;
+                    <div class="qname">
+                        ${record.Question.Name}
+                        <button class="b-remove"
+                            onclick="CachesRemove(${x}, '${record.Question.Name}')"
+                        >Remove from cache</button>
+                    </div>
+                    <div class="rr header">
+                        <span class="kind"></span>
+                        <span class="type"> Type </span>
+                        <span class="ttl"> TTL </span>
+                        <span class="value"> Value </span>
+                    </div>
+                `;
                 if (record.Answer !== null && record.Answer.length > 0) {
                     innerHTML += renderRR(record.Answer, "Answer");
                 }
@@ -208,22 +208,18 @@
         }
 
         function renderCaches(answers) {
-            document.getElementById("summary").innerHTML = `
-						Total caches: ${answers.length}
-				`;
+            document.getElementById("summary").innerHTML = `Total caches: ${answers.length}`;
             let w = document.getElementById("caches");
-            let out = `
-				`;
+            let out = "";
             for (let x = answers.length - 1; x >= 0; x--) {
                 let answer = answers[x];
                 out += `
-						<div class="cache">
-							<span class="AccessedAt">${dateFmt.format(
-                new Date(answer.AccessedAt * 1000)
-              )}</span>
-							<span class="RType">${resc.GetRRTypeName(answer.RType)}</span>
-							<span class="QName">${answer.QName}</span>
-						</div>`;
+                    <div class="cache">
+                        <span class="AccessedAt">${dateFmt.format( new Date(answer.AccessedAt * 1000))}</span>
+                        <span class="RType">${resc.GetRRTypeName(answer.RType)}</span>
+                        <span class="QName">${answer.QName}</span>
+                    </div>
+                `;
             }
             w.innerHTML = out;
         }
@@ -234,13 +230,13 @@
             for (let x = 0; x < listRR.length; x++) {
                 const rr = listRR[x];
                 innerHTML += `
-						<div class="rr">
-							<span class="kind"> ${title} </span>
-							<span class="type"> ${getRRTypeName(rr.Type)} </span>
-							<span class="ttl"> ${rr.TTL} </span>
-							<span class="value"> ${JSON.stringify(rr.Value, null, 2)} </span>
-						</div>
-					`;
+                    <div class="rr">
+                        <span class="kind"> ${title} </span>
+                        <span class="type"> ${getRRTypeName(rr.Type)} </span>
+                        <span class="ttl"> ${rr.TTL} </span>
+                        <span class="value"> ${JSON.stringify(rr.Value, null, 2)} </span>
+                    </div>
+                `;
             }
             return innerHTML;
         }
diff --git a/_www/rescached.js b/_www/rescached.js
index 12ee4da..a661f9e 100644
--- a/_www/rescached.js
+++ b/_www/rescached.js
@@ -40,18 +40,37 @@ function getRRTypeName(k) {
 
 class Rescached {
   static nanoSeconds = 1000000000;
+
   static apiBlockd = "/api/block.d";
   static apiBlockdFetch = "/api/block.d/fetch";
+
   static apiCaches = "/api/caches";
   static apiCachesSearch = "/api/caches/search";
+
+  static apiEnvironment = "/api/environment";
+
   static apiHostsd = "/api/hosts.d";
   static apiHostsdRR = "/api/hosts.d/rr";
+
   static apiZoned = "/api/zone.d";
   static apiZonedRR = "/api/zone.d/rr";
 
   constructor(server) {
-    this.server = server;
+    this.blockd = {};
+    this.hostsd = {};
     this.env = {};
+    this.server = server;
+    this.zoned = {};
+  }
+
+  // Blockd get list of block.d.
+  async Blockd() {
+    const httpRes = await fetch(Rescached.apiBlockd)
+    const res = await httpRes.json()
+    if (res.code === 200) {
+      this.blockd = res.data
+    }
+    return res
   }
 
   async BlockdFetch(name) {
@@ -65,7 +84,12 @@ class Rescached {
       },
       body : params.toString(),
     });
-    return await httpRes.json();
+
+    const res = await httpRes.json();
+    if (res.code === 200) {
+      this.blockd[name] = res.data
+    }
+    return res
   }
 
   async BlockdUpdate(hostsBlocks) {
@@ -76,11 +100,16 @@ class Rescached {
       },
       body : JSON.stringify(hostsBlocks),
     });
-    return await httpRes.json();
+
+    const res = await httpRes.json();
+    if (res.code === 200) {
+      this.blockd = res.data
+    }
+    return res
   }
 
   async Caches() {
-    const res = await fetch(this.server + Rescached.apiCaches, {
+    const res = await fetch(Rescached.apiCaches, {
       headers : {
         Connection : "keep-alive",
       },
@@ -88,23 +117,21 @@ class Rescached {
     return await res.json();
   }
 
-  async CacheRemove(qname) {
-    const res =
-        await fetch(this.server + Rescached.apiCaches + "?name=" + qname, {
-          method : "DELETE",
-        });
+  async CachesRemove(qname) {
+    const res = await fetch(Rescached.apiCaches + "?name=" + qname, {
+      method : "DELETE",
+    });
     return await res.json();
   }
 
-  async Search(query) {
-    console.log("Search: ", query);
-    const res = await fetch(this.server + Rescached.apiCachesSearch +
-                            "?query=" + query);
+  async CachesSearch(query) {
+    console.log("CachesSearch: ", query);
+    const res = await fetch(Rescached.apiCachesSearch + "?query=" + query);
     return await res.json();
   }
 
-  async getEnvironment() {
-    const httpRes = await fetch(this.server + "/api/environment");
+  async Environment() {
+    const httpRes = await fetch(Rescached.apiEnvironment);
     const res = await httpRes.json();
 
     if (httpRes.status === 200) {
@@ -125,6 +152,25 @@ class Rescached {
     return res;
   }
 
+  async EnvironmentUpdate() {
+    let got = {};
+
+    Object.assign(got, this.env);
+
+    got.PruneDelay = got.PruneDelay * Rescached.nanoSeconds;
+    got.PruneThreshold = got.PruneThreshold * Rescached.nanoSeconds;
+
+    const httpRes = await fetch("/api/environment", {
+      method : "POST",
+      headers : {
+        [headerContentType] : contentTypeJson,
+      },
+      body : JSON.stringify(got),
+    });
+
+    return await httpRes.json();
+  }
+
   GetRRTypeName(k) {
     let v = RRTypes[k];
     if (v === "") {
@@ -133,9 +179,18 @@ class Rescached {
     return v;
   }
 
-  async HostsFileCreate(name) {
-    var params = new URLSearchParams();
-    params.set(paramNameName, name);
+  async Hostsd() {
+    const httpRes = await fetch(Rescached.apiHostsd)
+    const res = await httpRes.json()
+    if (res.code === 200) {
+      this.hostsd = res.data
+    }
+    return res
+  }
+
+  async HostsdCreate(name) {
+    var params = new URLSearchParams()
+    params.set(paramNameName, name)
 
     const httpRes = await fetch(Rescached.apiHostsd, {
       method : "POST",
@@ -143,54 +198,54 @@ class Rescached {
         [headerContentType] : contentTypeForm,
       },
       body : params.toString(),
-    });
-    let res = await httpRes.json();
+    })
+    const res = await httpRes.json()
     if (res.code === 200) {
-      this.env.HostsFiles[name] = {
+      this.hostsd[name] = {
         Name : name,
         Records : [],
-      };
+      }
     }
-    return res;
+    return res
   }
 
-  async HostsFileDelete(name) {
-    var params = new URLSearchParams();
-    params.set(paramNameName, name);
+  async HostsdDelete(name) {
+    var params = new URLSearchParams()
+    params.set(paramNameName, name)
 
-    var url = Rescached.apiHostsd + "?" + params.toString();
+    var url = Rescached.apiHostsd + "?" + params.toString()
     const httpRes = await fetch(url, {
       method : "DELETE",
-    });
-    const res = await httpRes.json();
-    if (httpRes.status === 200) {
-      delete this.env.HostsFiles[name];
+    })
+    const res = await httpRes.json()
+    if (res.code === 200) {
+      delete this.hostsd[name]
     }
-    return res;
+    return res
   }
 
-  async HostsFileGet(name) {
-    var params = new URLSearchParams();
-    params.set(paramNameName, name);
+  async HostsdGet(name) {
+    var params = new URLSearchParams()
+    params.set(paramNameName, name)
 
-    var url = Rescached.apiHostsd + "?" + params.toString();
-    const httpRes = await fetch(url);
+    var url = Rescached.apiHostsd + "?" + params.toString()
+    const httpRes = await fetch(url)
 
-    let res = await httpRes.json();
+    let res = await httpRes.json()
     if (httpRes.Status === 200) {
-      this.env.HostsFiles[name] = {
+      this.hostsd[name] = {
         Name : name,
         Records : res.data,
-      };
+      }
     }
-    return res;
+    return res
   }
 
   async HostsdRecordAdd(hostsFile, domain, value) {
-    let params = new URLSearchParams();
-    params.set("name", hostsFile);
-    params.set("domain", domain);
-    params.set("value", value);
+    let params = new URLSearchParams()
+    params.set("name", hostsFile)
+    params.set("domain", domain)
+    params.set("value", value)
 
     const httpRes = await fetch(Rescached.apiHostsdRR, {
       method : "POST",
@@ -198,57 +253,48 @@ class Rescached {
         [headerContentType] : contentTypeForm,
       },
       body : params.toString(),
-    });
-    const res = await httpRes.json();
+    })
+    const res = await httpRes.json()
     if (httpRes.Status === 200) {
-      let hf = this.env.HostsFiles[hostsFile];
-      hf.Records.push(res.data);
+      let hf = this.hostsd[hostsFile]
+      hf.Records.push(res.data)
     }
-    return res;
+    return res
   }
 
   async HostsdRecordDelete(hostsFile, domain) {
-    let params = new URLSearchParams();
-    params.set("name", hostsFile);
-    params.set("domain", domain);
+    let params = new URLSearchParams()
+    params.set("name", hostsFile)
+    params.set("domain", domain)
 
-    const api = Rescached.apiHostsdRR + "?" + params.toString();
+    const api = Rescached.apiHostsdRR + "?" + params.toString()
 
     const httpRes = await fetch(api, {
       method : "DELETE",
-    });
-    const res = await httpRes.json();
+    })
+    const res = await httpRes.json()
     if (httpRes.Status === 200) {
-      let hf = this.env.HostsFiles[hostsFile];
+      let hf = this.hostsd[hostsFile];
       for (let x = 0; x < hf.Records.length; x++) {
         if (hf.Records[x].Name === domain) {
-          hf.Records.splice(x, 1);
+          hf.Records.splice(x, 1)
         }
       }
     }
-    return res;
+    return res
   }
 
-  async updateEnvironment() {
-    let got = {};
-
-    Object.assign(got, this.env);
-
-    got.PruneDelay = got.PruneDelay * Rescached.nanoSeconds;
-    got.PruneThreshold = got.PruneThreshold * Rescached.nanoSeconds;
-
-    const httpRes = await fetch("/api/environment", {
-      method : "POST",
-      headers : {
-        [headerContentType] : contentTypeJson,
-      },
-      body : JSON.stringify(got),
-    });
-
-    return await httpRes.json();
+  // Zoned fetch all of zones.
+  async Zoned() {
+    const httpRes = await fetch(Rescached.apiZoned)
+    const res = await httpRes.json();
+    if (res.code === 200) {
+      this.zoned = res.data
+    }
+    return res;
   }
 
-  async ZoneFileCreate(name) {
+  async ZonedCreate(name) {
     let params = new URLSearchParams();
     params.set(paramNameName, name);
 
@@ -259,14 +305,15 @@ class Rescached {
       },
       body : params.toString(),
     });
-    let res = await httpRes.json();
-    if (res.code == 200) {
-      this.env.Zones[name] = res.data;
+
+    const res = await httpRes.json();
+    if (res.code === 200) {
+      this.zoned[name] = res.data;
     }
     return res;
   }
 
-  async ZoneFileDelete(name) {
+  async ZonedDelete(name) {
     let params = new URLSearchParams();
     params.set(paramNameName, name);
 
@@ -276,19 +323,25 @@ class Rescached {
     });
     let res = await httpRes.json();
     if (res.code == 200) {
-      delete this.env.Zones[name];
+      delete this.zoned[name];
     }
     return res;
   }
 
-  // ZonedRecords fetch the RR on specific zone.
+  // ZonedRecords fetch all records on specific zone.
   async ZonedRecords(name) {
-    let params = new URLSearchParams();
-    params.set(paramNameName, name);
+    let params = new URLSearchParams()
+    params.set(paramNameName, name)
 
-    let url = Rescached.apiZonedRR + "?" + params.toString();
-    const httpRes = await fetch(url);
-    let res = await httpRes.json();
+    let url = Rescached.apiZonedRR + "?" + params.toString()
+    const httpRes = await fetch(url)
+    const res = await httpRes.json()
+    if (res.code === 200) {
+      this.zoned[name].Records = res.data
+      if (typeof this.zoned[name].SOA === "undefined") {
+        this.zoned[name].SOA = {}
+      }
+    }
     return res;
   }
 
@@ -309,12 +362,12 @@ class Rescached {
 
     let res = await httpRes.json();
     if (httpRes.status === 200) {
-      let zf = this.env.Zones[name];
+      let zf = this.zoned[name];
       if (rr.Type == 6) {
         zf.SOA = res.data;
       } else {
         let rr = res.data;
-        if (zf.Records == null) {
+        if (typeof zf.Records === "undefined" || zf.Records == null) {
           zf.Records = {};
         }
         zf.Records[rr.Name].push(rr);
@@ -337,7 +390,7 @@ class Rescached {
 
     let res = await httpRes.json();
     if (httpRes.status === 200) {
-      this.env.Zones[zone].Records = res.data;
+      this.zoned[zone].Records = res.data;
     }
     return res;
   }
diff --git a/_www/zone.d/index.html b/_www/zone.d/index.html
index 18483bf..e7e7171 100644
--- a/_www/zone.d/index.html
+++ b/_www/zone.d/index.html
@@ -112,11 +112,11 @@
 
     <div class="nav-left">
         <h3>Zone files</h3>
-        <div id="Zones"></div>
+        <div id="Zoned"></div>
 
         <label for="newZoneFile"> New zone file: </label>
         <input id="newZoneFile" />
-        <button onclick="createZoneFile()">Create</button>
+        <button onclick="ZonedCreate()">Create</button>
     </div>
 
     <div class="content">
@@ -273,7 +273,7 @@
             </div>
 
             <div class="actions">
-                <button class="create" onclick="createRR()">Create</button>
+                <button class="create" onclick="ZonedRecordAdd()">Create</button>
             </div>
         </div>
     </div>
@@ -291,41 +291,41 @@
         async function main() {
             resc = new Rescached("")
 
-            let res = await resc.getEnvironment()
+            let res = await resc.Zoned()
             if (res.code != 200) {
                 notifError(res.message)
                 return
             }
-            renderZones(resc.env.Zones)
+            renderZoned(resc.zoned)
             resetActiveZone()
         }
 
-        async function createZoneFile() {
+        async function ZonedCreate() {
             let name = document.getElementById("newZoneFile").value
             if (name === "") {
                 notifError("The zone file name must not be empty")
                 return
             }
-            let res = await resc.ZoneFileCreate(name)
+            let res = await resc.ZonedCreate(name)
             if (res.code != 200) {
                 notifError(res.message)
                 return
             }
-            renderZones(resc.env.Zones)
+            renderZoned(resc.zoned)
         }
 
-        async function deleteZoneFile() {
-            let res = await resc.ZoneFileDelete(activeZone.Name)
+        async function ZonedDelete() {
+            let res = await resc.ZonedDelete(activeZone.Name)
             if (res.code != 200) {
                 notifError(res.message)
                 return
             }
-            renderZones(resc.env.Zones)
+            renderZoned(resc.zoned)
             resetActiveZone()
             notifInfo(res.message)
         }
 
-        async function createRR() {
+        async function ZonedRecordAdd() {
             newRR.Type = parseInt(document.getElementById("rr_type").value)
             switch (newRR.Type) {
                 case 12: // PTR
@@ -345,7 +345,9 @@
                     newRR.Name = document.getElementById("rr_name").value
                     newRR.Value = document.getElementById("rr_value").value
             }
-            console.log("createRR: ", newRR)
+
+            console.log("ZonedRecordAdd: ", newRR)
+
             let res = await resc.ZonedRecordAdd(activeZone.Name, newRR)
             if (res.code != 200) {
                 notifError(res.message)
@@ -355,8 +357,9 @@
             notifInfo(res.message)
         }
 
-        async function deleteRR(name, idx) {
+        async function ZonedRecordDelete(name, idx) {
             let rr = activeZone.Records[name][idx]
+            console.log("ZonedRecordDelete: ", rr)
             let res = await resc.ZonedRecordDelete(activeZone.Name, rr)
             if (res.code != 200) {
                 notifError(res.message)
@@ -398,20 +401,20 @@
             }
         }
 
-        function renderZones(zones) {
-            let wrapper = document.getElementById("Zones")
+        function renderZoned(zoned) {
+            let wrapper = document.getElementById("Zoned")
             out = ""
-            for (let name in zones) {
-                if (!zones.hasOwnProperty(name)) {
+            for (let name in zoned) {
+                if (!zoned.hasOwnProperty(name)) {
                     continue
                 }
-                let zoneFile = zones[name]
+                let zoneFile = zoned[name]
                 out += `
-						<div class="item">
-							<span onclick="setActiveZone('${zoneFile.Name}')">
-								${zoneFile.Name}
-							</span>
-						</div>`
+                        <div class="item">
+                            <span onclick="setActiveZone('${zoneFile.Name}')">
+                                ${zoneFile.Name}
+                            </span>
+                        </div>`
             }
             wrapper.innerHTML = out
         }
@@ -419,29 +422,23 @@
         function renderActiveZone() {
             let w = document.getElementById("activeZone")
             w.innerHTML = `
-					<h3>
-						${activeZone.Name}
-						<button
-							class="action-delete"
-							onclick="deleteZoneFile()"
-						>
-							Delete
-						</button>
-					</h3>
-				`
+                <h3>
+                    ${activeZone.Name}
+                    <button
+                        class="action-delete"
+                        onclick="ZonedDelete()"
+                    >
+                        Delete
+                    </button>
+                </h3>
+            `
         }
 
-        function renderActiveZoneSOA() {
-            const w = document.getElementById("activeZone_soa")
-            w.style.display = "block"
-            const soa = activeZone.SOA
-            document.getElementById("soa_mname").value = soa.MName
-            document.getElementById("soa_rname").value = soa.RName
-            document.getElementById("soa_serial").value = soa.Serial
-            document.getElementById("soa_refresh").value = soa.Refresh
-            document.getElementById("soa_retry").value = soa.Retry
-            document.getElementById("soa_expire").value = soa.Expire
-            document.getElementById("soa_minimum").value = soa.Minimum
+        function renderActiveZoneForm() {
+            let form = document.getElementById("activeZone_form")
+            form.style.display = "block"
+            document.getElementById("rr_type").value = 1
+            onSelectRRType(1)
         }
 
         function renderActiveZoneRecords() {
@@ -455,29 +452,43 @@
                 }
                 listRR.forEach((rr, idx) => {
                     out += `
-							<div class="rr">
-								<span class="name">
-									${rr.Name}
-								</span>
-								<span class="type">
-									${resc.GetRRTypeName(rr.Type)}
-								</span>
-								<span class="value">
-									${renderRRValue(rr.Value)}
-								</span>
-								<span class="actions">
-									<button onclick="deleteRR('${rr.Name}', ${idx})">
-										X
-									</button>
-								</span>
-							</div>
-					`
+                        <div class="rr">
+                            <span class="name">
+                                ${rr.Name}
+                            </span>
+                            <span class="type">
+                                ${resc.GetRRTypeName(rr.Type)}
+                            </span>
+                            <span class="value">
+                                ${renderRecordValue(rr.Value)}
+                            </span>
+                            <span class="actions">
+                                <button onclick="ZonedRecordDelete('${rr.Name}', ${idx})">
+                                    X
+                                </button>
+                            </span>
+                        </div>
+                    `
                 })
             }
             w.innerHTML = out
         }
 
-        function renderRRValue(value) {
+        function renderActiveZoneSOA() {
+            const w = document.getElementById("activeZone_soa")
+            w.style.display = "block"
+            const soa = activeZone.SOA
+            document.getElementById("soa_mname").value = soa.MName
+            document.getElementById("soa_rname").value = soa.RName
+            document.getElementById("soa_serial").value = soa.Serial
+            document.getElementById("soa_refresh").value = soa.Refresh
+            document.getElementById("soa_retry").value = soa.Retry
+            document.getElementById("soa_expire").value = soa.Expire
+            document.getElementById("soa_minimum").value = soa.Minimum
+        }
+
+
+        function renderRecordValue(value) {
             if (typeof value === "object") {
                 let w = ""
                 for (const [k, v] of Object.entries(value)) {
@@ -491,17 +502,8 @@
             return value
         }
 
-        function renderActiveZoneForm() {
-            let form = document.getElementById("activeZone_form")
-            form.style.display = "block"
-            document.getElementById("rr_type").value = 1
-            onSelectRRType(1)
-        }
-
         function resetActiveZone() {
-            document.getElementById("activeZone").innerHTML = `
-					<p>Select one of the zone file to manage.</p>
-				`
+            document.getElementById("activeZone").innerHTML = `<p>Select one of the zone file to manage.</p>`
             document.getElementById("activeZone_soa").style.display = "none"
             document.getElementById("activeZone_records").style.display = "none"
             document.getElementById("activeZone_form").style.display = "none"
@@ -509,10 +511,13 @@
         }
 
         async function saveSOA() {
-            console.log("saveSOA: ", activeZone.SOA.Value)
-            let rr = activeZone.SOA
-            rr.Type = 6
-            let res = await resc.ZonedRecordAdd(activeZone.Name, rr)
+            activeZone.SOA.Type = 6
+            let req = {
+                Name: activeZone.Name,
+                Type: 6,
+                Value: activeZone.SOA,
+            }
+            let res = await resc.ZonedRecordAdd(activeZone.Name, req)
             if (res.code != 200) {
                 notifError(res.message)
                 return
@@ -521,13 +526,13 @@
         }
 
         async function setActiveZone(name) {
-            activeZone = resc.env.Zones[name]
             let res = await resc.ZonedRecords(name)
             if (res.code != 200) {
                 notifError(res.message)
                 return
             }
-            activeZone.Records = res.data
+
+            activeZone = resc.zoned[name]
             console.log("setActiveZone: records: ", activeZone.Records)
             renderActiveZone()
             renderActiveZoneSOA()
@@ -536,7 +541,7 @@
         }
 
         function updateSOA(k, v) {
-            activeZone.SOA.Value[k] = v
+            activeZone.SOA[k] = v
         }
     </script>
 </body>