feat: add seconds to recent call sumary

* feat: admin clear cache

* feat: admin clear cache

.github/workflows/docker-publish.yml

@@ -17,7 +17,7 @@ jobs:
       - name: prepare tag
         id: prepare_tag
         run: |
-          IMAGE_ID=$GITHUB_REPOSITORY
+          IMAGE_ID=jambonz/webapp
 
           # Strip git ref prefix from version
           VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')

entrypoint.sh

@@ -9,9 +9,15 @@ API_PORT="${API_PORT:-3000}"
 API_VERSION="${API_VERSION:-v1}"
 API_BASE_URL=${API_BASE_URL:-http://$PUBLIC_IPV4:$API_PORT/$API_VERSION}
 
+# Default to "false" if not set
+DISABLE_LCR=${DISABLE_LCR:-false}
+DISABLE_JAEGER_TRACING=${DISABLE_JAEGER_TRACING:-false}
+DISABLE_CUSTOM_SPEECH=${DISABLE_CUSTOM_SPEECH:-false}
+ENABLE_FORGOT_PASSWORD=${ENABLE_FORGOT_PASSWORD:-false}
+
 # Serialize window global to provide the API URL to static frontend dist
 # This is declared and utilized in the web app: src/api/constants.ts
-SCRIPT_TAG="<script>window.JAMBONZ = { API_BASE_URL: \"${API_BASE_URL}\" };</script>"
+SCRIPT_TAG="<script>window.JAMBONZ = {API_BASE_URL: \"${API_BASE_URL}\",DISABLE_LCR: \"${DISABLE_LCR}\",DISABLE_JAEGER_TRACING: \"${DISABLE_JAEGER_TRACING}\",DISABLE_CUSTOM_SPEECH: \"${DISABLE_CUSTOM_SPEECH}\",ENABLE_FORGOT_PASSWORD: \"${ENABLE_FORGOT_PASSWORD}\"};</script>"
 sed -i -e "\@</head>@i\    $SCRIPT_TAG" ./dist/index.html
 
 # Start the frontend web app static server

src/api/constants.ts

@@ -13,6 +13,10 @@ import type {
 /** The API url is constructed with the docker containers `ip:port` */
 interface JambonzWindowObject {
   API_BASE_URL: string;
+  DISABLE_LCR: string;
+  DISABLE_JAEGER_TRACING: string;
+  DISABLE_CUSTOM_SPEECH: string;
+  ENABLE_FORGOT_PASSWORD: string;
 }
 
 declare global {
@@ -29,24 +33,23 @@ export const API_BASE_URL =
 export const DEV_BASE_URL = import.meta.env.VITE_DEV_BASE_URL;
 
 /** Disable custom speech vendor*/
-export const DISABLE_CUSTOM_SPEECH: boolean = JSON.parse(
-  import.meta.env.VITE_DISABLE_CUSTOM_SPEECH || "false"
-);
+export const DISABLE_CUSTOM_SPEECH: boolean =
+  window.JAMBONZ?.DISABLE_CUSTOM_SPEECH === "true" ||
+  JSON.parse(import.meta.env.VITE_DISABLE_CUSTOM_SPEECH || "false");
 
 /** Enable Forgot Password */
-export const ENABLE_FORGOT_PASSWORD: boolean = JSON.parse(
-  import.meta.env.VITE_ENABLE_FORGOT_PASSWORD || "false"
-);
-
+export const ENABLE_FORGOT_PASSWORD: boolean =
+  window.JAMBONZ?.ENABLE_FORGOT_PASSWORD === "true" ||
+  JSON.parse(import.meta.env.VITE_ENABLE_FORGOT_PASSWORD || "false");
 /** Disable Lcr */
-export const DISABLE_LCR: boolean = JSON.parse(
-  import.meta.env.VITE_APP_LCR_DISABLED || "false"
-);
+export const DISABLE_LCR: boolean =
+  window.JAMBONZ?.DISABLE_LCR === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_LCR_DISABLED || "false");
 
 /** Disable jaeger tracing */
-export const DISABLE_JAEGER_TRACING: boolean = JSON.parse(
-  import.meta.env.VITE_APP_JAEGER_TRACING_DISABLED || "false"
-);
+export const DISABLE_JAEGER_TRACING: boolean =
+  window.JAMBONZ?.DISABLE_JAEGER_TRACING === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_JAEGER_TRACING_DISABLED || "false");
 
 /** TCP Max Port */
 export const TCP_MAX_PORT = 65535;
@@ -245,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) => {
@@ -635,11 +640,11 @@ export const getRecentCall = (sid: string, sipCallId: string) => {
   );
 };
 
-export const getPcap = (sid: string, sipCallId: string) => {
+export const getPcap = (sid: string, sipCallId: string, method: string) => {
   return getBlob(
     import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/pcap`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/pcap`
+      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
   );
 };
 
@@ -662,11 +667,15 @@ export const getServiceProviderRecentCall = (
   );
 };
 
-export const getServiceProviderPcap = (sid: string, sipCallId: string) => {
+export const getServiceProviderPcap = (
+  sid: string,
+  sipCallId: string,
+  method: string
+) => {
   return getBlob(
     import.meta.env.DEV
-      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/pcap`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/pcap`
+      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
   );
 };
 

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/carriers/pcap.tsx

@@ -24,14 +24,15 @@ export const PcapButton = ({
   const [pcap, setPcap] = useState<Pcap>();
 
   useEffect(() => {
+    if (!sipCallId) return;
     const p = accountSid
       ? getRecentCall(accountSid, sipCallId)
       : getServiceProviderRecentCall(serviceProviderSid, sipCallId);
     p.then(({ json }) => {
       if (json.total > 0) {
         const p1 = accountSid
-          ? getPcap(accountSid, sipCallId)
-          : getServiceProviderPcap(serviceProviderSid, sipCallId);
+          ? getPcap(accountSid, sipCallId, "register")
+          : getServiceProviderPcap(serviceProviderSid, sipCallId, "register");
         p1.then(({ blob }) => {
           if (blob) {
             setPcap({

src/containers/internal/views/recent-calls/details.tsx

@@ -32,7 +32,7 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
           <div className="item__info">
             <div className="item__title">
               <strong>
-                {dayjs(call.attempted_at).format("YYYY MM.DD hh:mm a")}
+                {dayjs(call.attempted_at).format("YYYY MM.DD hh:mm:ss a")}
               </strong>
               <span className="i txt--dark">
                 {call.direction === "inbound" ? (

src/containers/internal/views/recent-calls/pcap.tsx

@@ -13,7 +13,7 @@ export const PcapButton = ({ call }: PcapButtonProps) => {
   const [pcap, setPcap] = useState<Pcap>();
 
   useEffect(() => {
-    getPcap(call.account_sid, call.sip_callid)
+    getPcap(call.account_sid, call.sip_callid, "invite")
       .then(({ blob }) => {
         if (blob) {
           setPcap({

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);
-    // }
-  }, [passwordSettings, systemInformatin]); //
+    if (hasValue(systemInformation)) {
+      setDomainName(systemInformation.domain_name);
+      setSipDomainName(systemInformation.sip_domain_name);
+      setMonitoringDomainName(systemInformation.monitoring_domain_name);
+    }
+  }, [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>
+      )}
     </>
   );
 };