feat: admin clear cache (#263)

* feat: admin clear cache

* feat: admin clear cache

src/api/constants.ts

@@ -248,3 +248,4 @@ export const API_SYSTEM_INFORMATION = `${API_BASE_URL}/SystemInformation`;
 export const API_LCRS = `${API_BASE_URL}/Lcrs`;
 export const API_LCR_ROUTES = `${API_BASE_URL}/LcrRoutes`;
 export const API_LCR_CARRIER_SET_ENTRIES = `${API_BASE_URL}/LcrCarrierSetEntries`;
+export const API_TTS_CACHE = `${API_BASE_URL}/TtsCache`;

src/api/index.ts

@@ -24,6 +24,7 @@ import {
   API_LCR_ROUTES,
   API_LCR_CARRIER_SET_ENTRIES,
   API_LCRS,
+  API_TTS_CACHE,
 } from "./constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import {
@@ -577,6 +578,10 @@ export const deleteLcrRoute = (sid: string) => {
   return deleteFetch<EmptyResponse>(`${API_LCR_ROUTES}/${sid}`);
 };
 
+export const deleteTtsCache = () => {
+  return deleteFetch<EmptyResponse>(API_TTS_CACHE);
+};
+
 /** Named wrappers for `getFetch` */
 
 export const getUser = (sid: string) => {

src/api/types.ts

@@ -123,6 +123,10 @@ export interface SystemInformation {
   monitoring_domain_name: string;
 }
 
+export interface TtsCache {
+  size: number;
+}
+
 /** API responses/payloads */
 
 export interface User {

src/containers/internal/views/settings/admin-settings.tsx

@@ -1,22 +1,25 @@
 import React, { useEffect, useState } from "react";
 
-import { ButtonGroup, Button } from "@jambonz/ui-kit";
+import { ButtonGroup, Button, MS, P } from "@jambonz/ui-kit";
 import {
   useApiData,
   postPasswordSettings,
   postSystemInformation,
+  deleteTtsCache,
 } from "src/api";
-import { PasswordSettings, SystemInformation } from "src/api/types";
+import { PasswordSettings, SystemInformation, TtsCache } from "src/api/types";
 import { toastError, toastSuccess } from "src/store";
 import { Selector } from "src/components/forms";
 import { hasValue } from "src/utils";
 import { PASSWORD_LENGTHS_OPTIONS, PASSWORD_MIN } from "src/api/constants";
+import { Modal } from "src/components";
 
 export const AdminSettings = () => {
   const [passwordSettings, passwordSettingsFetcher] =
     useApiData<PasswordSettings>("PasswordSettings");
-  const [systemInformatin, systemInformationFetcher] =
+  const [systemInformation, systemInformationFetcher] =
     useApiData<SystemInformation>("SystemInformation");
+  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>("TtsCache");
   // Min value is 8
   const [minPasswordLength, setMinPasswordLength] = useState(PASSWORD_MIN);
   const [requireDigit, setRequireDigit] = useState(false);
@@ -24,6 +27,19 @@ export const AdminSettings = () => {
   const [domainName, setDomainName] = useState("");
   const [sipDomainName, setSipDomainName] = useState("");
   const [monitoringDomainName, setMonitoringDomainName] = useState("");
+  const [clearTtsCacheFlag, setClearTtsCacheFlag] = useState(false);
+
+  const handleClearCache = () => {
+    deleteTtsCache()
+      .then(() => {
+        ttsCacheFetcher();
+        setClearTtsCacheFlag(false);
+        toastSuccess("Tts Cache successfully cleaned");
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -62,12 +78,12 @@ export const AdminSettings = () => {
         setMinPasswordLength(passwordSettings.min_password_length);
       }
     }
-    if (hasValue(systemInformatin)) {
-      setDomainName(systemInformatin.domain_name);
-      setSipDomainName(systemInformatin.sip_domain_name);
-      setMonitoringDomainName(systemInformatin.monitoring_domain_name);
+    if (hasValue(systemInformation)) {
+      setDomainName(systemInformation.domain_name);
+      setSipDomainName(systemInformation.sip_domain_name);
+      setMonitoringDomainName(systemInformation.monitoring_domain_name);
     }
-  }, [passwordSettings, systemInformatin]);
+  }, [passwordSettings, systemInformation]);
 
   return (
     <>
@@ -132,6 +148,23 @@ export const AdminSettings = () => {
           <div>Password require special character</div>
         </label>
       </fieldset>
+      <fieldset>
+        <ButtonGroup left>
+          <Button
+            onClick={(e: React.FormEvent) => {
+              e.preventDefault();
+              setClearTtsCacheFlag(true);
+            }}
+            small
+            disabled={!ttsCache || ttsCache.size === 0}
+          >
+            Clear TTS Cache
+          </Button>
+        </ButtonGroup>
+        <MS>{`There are ${
+          ttsCache ? ttsCache.size : 0
+        } cached TTS prompts`}</MS>
+      </fieldset>
       <fieldset>
         <ButtonGroup left>
           <Button onClick={handleSubmit} small>
@@ -139,6 +172,14 @@ export const AdminSettings = () => {
           </Button>
         </ButtonGroup>
       </fieldset>
+      {clearTtsCacheFlag && (
+        <Modal
+          handleSubmit={handleClearCache}
+          handleCancel={() => setClearTtsCacheFlag(false)}
+        >
+          <P>Are you sure you want to clean TTS cache?</P>
+        </Modal>
+      )}
     </>
   );
 };