TransformerOptimus · nihiragarwal24 · Jul 19, 2023 · Jul 19, 2023 · Jul 19, 2023 · Jul 19, 2023
diff --git a/gui/pages/Content/Agents/ActivityFeed.js b/gui/pages/Content/Agents/ActivityFeed.js
@@ -159,16 +159,7 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat
           </div>
         }
         {!agent?.is_scheduled && !agent?.is_running && feeds.length < 1 &&
-          <div style={{
-            color: 'white',
-            fontSize: '14px',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            textAlign: 'center'
-          }}>
-            The Agent is not scheduled
-          </div>
+            <div style={{color: 'white', fontSize: '14px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center'}}>The Agent is not scheduled</div>
         }
       </div>
       {feedContainerRef.current && feedContainerRef.current.scrollTop >= 1200 &&

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
@@ -21,15 +21,7 @@ import {EventBus} from "@/utils/eventBus";
 import 'moment-timezone';
 import AgentSchedule from "@/pages/Content/Agents/AgentSchedule";
 
-export default function AgentCreate({
-                                      sendAgentData,
-                                      selectedProjectId,
-                                      fetchAgents,
-                                      toolkits,
-                                      organisationId,
-                                      template,
-                                      internalId
-                                    }) {
+export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgents, toolkits, organisationId, template, internalId, env}) {
   const [advancedOptions, setAdvancedOptions] = useState(false);
   const [agentName, setAgentName] = useState("");
   const [agentDescription, setAgentDescription] = useState("");
@@ -987,23 +979,7 @@ export default function AgentCreate({
                     onClick={() => removeTab(-1, "new agent", "Create_Agent", internalId)}>Cancel
             </button>
             <div style={{display: 'flex', position: 'relative'}}>
-              {createDropdown && (<div className="custom_select_option" style={{
-                background: '#3B3B49',
-                borderRadius: '8px',
-                position: 'absolute',
-                top: '-40px',
-                right: '0',
-                zIndex: '1',
-                boxShadow: '0 2px 7px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.22)',
-                height: '40px',
-                width: '150px',
-                paddingTop: '10px',
-                textAlign: 'center'
-              }}
-                                       onClick={() => {
-                                         setCreateModal(true);
-                                         setCreateDropdown(false);
-                                       }}>Create & Schedule Run
+              {createDropdown && (<div className="create_agent_dropdown_options" onClick={() => {setCreateModal(true);setCreateDropdown(false);}}>Create & Schedule Run
               </div>)}
               <div className="primary_button"
                    style={{backgroundColor: 'white', marginBottom: '4px', paddingLeft: '0', paddingRight: '5px'}}>
@@ -1020,7 +996,7 @@ export default function AgentCreate({
           </div>
 
           {createModal && (
-            <AgentSchedule internalId={internalId} closeCreateModal={closeCreateModal} type="create_agent"/>
+            <AgentSchedule env={env} internalId={internalId} closeCreateModal={closeCreateModal} type="create_agent"/>
           )}
 
         </div>

diff --git a/gui/pages/Content/Agents/AgentSchedule.js b/gui/pages/Content/Agents/AgentSchedule.js
@@ -9,21 +9,14 @@ import {agentScheduleComponent, createAndScheduleRun, updateSchedule} from "@/pa
 import {EventBus} from "@/utils/eventBus";
 import moment from 'moment';
 
-export default function AgentSchedule({
-                                        internalId,
-                                        closeCreateModal,
-                                        type,
-                                        agentId,
-                                        setCreateModal,
-                                        setCreateEditModal
-                                      }) {
+export default function AgentSchedule({internalId, closeCreateModal, type, agentId, setCreateModal, setCreateEditModal, env}) {
   const [isRecurring, setIsRecurring] = useState(false);
   const [timeDropdown, setTimeDropdown] = useState(false);
   const [expiryDropdown, setExpiryDropdown] = useState(false);
 
   const [startTime, setStartTime] = useState('');
 
-  const timeUnitArray = ['Days', 'Hours', 'Minutes'];
+  const timeUnitArray = (env === 'PROD') ? ['Days', 'Hours'] : ['Days', 'Hours', 'Minutes'];
   const [timeUnit, setTimeUnit] = useState(timeUnitArray[1]);
   const [timeValue, setTimeValue] = useState(null);
 

diff --git a/gui/pages/Content/Agents/AgentTemplatesList.js b/gui/pages/Content/Agents/AgentTemplatesList.js
@@ -5,14 +5,7 @@ import {fetchAgentTemplateListLocal} from "@/pages/api/DashboardService";
 import AgentCreate from "@/pages/Content/Agents/AgentCreate";
 import {setLocalStorageValue, openNewTab} from "@/utils/utils";
 
-export default function AgentTemplatesList({
-                                             sendAgentData,
-                                             selectedProjectId,
-                                             fetchAgents,
-                                             toolkits,
-                                             organisationId,
-                                             internalId
-                                           }) {
+export default function AgentTemplatesList({sendAgentData, selectedProjectId, fetchAgents, toolkits, organisationId, internalId, env}) {
   const [agentTemplates, setAgentTemplates] = useState([])
   const [createAgentClicked, setCreateAgentClicked] = useState(false)
   const [sendTemplate, setSendTemplate] = useState(null)
@@ -112,7 +105,7 @@ export default function AgentTemplatesList({
           </div>
         </div> : <AgentCreate internalId={internalId} organisationId={organisationId} sendAgentData={sendAgentData}
                               selectedProjectId={selectedProjectId} fetchAgents={fetchAgents} toolkits={toolkits}
-                              template={sendTemplate}/>}
+                              template={sendTemplate} env={env} />}
     </div>
   )
 };
diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -24,7 +24,7 @@ import {EventBus} from "@/utils/eventBus";
 import 'moment-timezone';
 import AgentSchedule from "@/pages/Content/Agents/AgentSchedule";
 
-export default function AgentWorkspace({agentId, agentName, selectedView, agents, internalId}) {
+export default function AgentWorkspace({env, agentId, agentName, selectedView, agents, internalId}) {
   const [leftPanel, setLeftPanel] = useState('activity_feed')
   const [rightPanel, setRightPanel] = useState('')
   const [history, setHistory] = useState(true)
@@ -374,10 +374,10 @@ export default function AgentWorkspace({agentId, agentName, selectedView, agents
             </div>}
 
             {createModal &&
-              <AgentSchedule internalId={internalId} closeCreateModal={closeCreateModal} type="schedule_agent"
+              <AgentSchedule env={env} internalId={internalId} closeCreateModal={closeCreateModal} type="schedule_agent"
                              agentId={agentId} setCreateModal={() => setCreateModal(false)}/>}
             {createEditModal &&
-              <AgentSchedule internalId={internalId} closeCreateModal={closeCreateModal} type="edit_schedule_agent"
+              <AgentSchedule env={env} internalId={internalId} closeCreateModal={closeCreateModal} type="edit_schedule_agent"
                              agentId={agentId} setCreateEditModal={() => setCreateEditModal(false)}/>}
             {createStopModal && (
               <div className="modal" onClick={closeCreateModal}>

diff --git a/gui/pages/Dashboard/Content.js b/gui/pages/Dashboard/Content.js
@@ -337,7 +337,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
                 <div key={index}>
                   {selectedTab === index && <div>
                     {tab.contentType === 'Agents' &&
-                      <AgentWorkspace internalId={tab.internalId || index} agentId={tab.id} agentName={tab.name} selectedView={selectedView}
+                      <AgentWorkspace env={env} internalId={tab.internalId || index} agentId={tab.id} agentName={tab.name} selectedView={selectedView}
                                       agents={agents} fetchAgents={fetchAgents}/>}
                     {tab.contentType === 'Toolkits' &&
                       <ToolkitWorkspace env={env} internalId={tab.internalId || index} toolkitDetails={toolkitDetails}/>}
@@ -347,7 +347,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
                     {tab.contentType === 'Create_Agent' &&
                       <AgentTemplatesList internalId={tab.internalId || index} organisationId={organisationId}
                                           sendAgentData={addTab} selectedProjectId={selectedProjectId}
-                                          fetchAgents={fetchAgents} toolkits={toolkits}/>}
+                                          fetchAgents={fetchAgents} toolkits={toolkits} env={env} />}
                     {tab.contentType === 'APM' && <ApmDashboard/>}
                   </div>}
                 </div>

diff --git a/gui/pages/Dashboard/Settings/Settings.js b/gui/pages/Dashboard/Settings/Settings.js
@@ -41,7 +41,7 @@ export default function Settings({organisationId}) {
 
     function handleClickOutside(event) {
       if (sourceRef.current && !sourceRef.current.contains(event.target)) {
-        setSourceDropdown(false)
+        setSourceDropdown(false);
       }
     }
 
@@ -52,15 +52,14 @@ export default function Settings({organisationId}) {
   }, [organisationId]);
 
   function updateKey(key, value) {
-    const configData = {"key": key, "value": value};
-    updateOrganisationConfig(organisationId, configData)
+    const configData = { "key": key, "value": value };
+    return updateOrganisationConfig(organisationId, configData)
       .then((response) => {
-        getKey("model_api_key");
-        EventBus.emit("keySet", {});
-        toast.success("Settings updated", {autoClose: 1800});
+        return response.data;
       })
       .catch((error) => {
-        console.error('Error fetching project:', error);
+        console.error('Error updating settings:', error);
+        throw new Error('Failed to update settings');
       });
   }
 
@@ -75,19 +74,32 @@ export default function Settings({organisationId}) {
 
   const saveSettings = () => {
     if (modelApiKey === null || modelApiKey.replace(/\s/g, '') === '') {
-      toast.error("API key is empty", {autoClose: 1800});
-      return
+      toast.error("API key is empty", { autoClose: 1800 });
+      return;
     }
 
     validateLLMApiKey(source, modelApiKey)
-        .then((response) => {
-          if (response.data.status==="success") {
-            updateKey("model_api_key", modelApiKey);
-            updateKey("model_source", source);
-          } else {
-            toast.error("Invalid API key", {autoClose: 1800});
-          }
-        })
+      .then((response) => {
+        if (response.data.status === "success") {
+          Promise.all([
+            updateKey("model_api_key", modelApiKey),
+            updateKey("model_source", source)
+          ])
+              .then(() => {
+                toast.success("Settings updated", { autoClose: 1800 });
+              })
+              .catch((error) => {
+                console.error('Error updating settings:', error);
+                toast.error("Failed to update settings", { autoClose: 1800 });
+              });
+        } else {
+          toast.error("Invalid API key", { autoClose: 1800 });
+        }
+      })
+      .catch((error) => {
+        console.error('Error validating API key:', error);
+        toast.error("Failed to validate API key", { autoClose: 1800 });
+      });
   };
 
   const handleTemperatureChange = (event) => {

diff --git a/gui/pages/_app.css b/gui/pages/_app.css
@@ -415,7 +415,7 @@ input[type="range"]::-moz-range-track {
     background-color: transparent;
 }
 
-.custom_select_option {
+.custom_select_option, .create_agent_dropdown_options {
     cursor: pointer;
     font-size: 12px;
     color: white;
@@ -427,16 +427,29 @@ input[type="range"]::-moz-range-track {
     text-overflow: ellipsis;
 }
 
-.custom_select_option:hover {
+.custom_select_option:hover, .create_agent_dropdown_options:hover {
     background: #3B3B49;
     border-radius: 8px;
 }
 
-.custom_select_option:active {
+.custom_select_option:active, .create_agent_dropdown_options:active {
     background: #3B3B49;
     border-radius: 8px;
 }
 
+.create_agent_dropdown_options{
+    background: #3B3B49;
+    border-radius: 8px;
+    position: absolute;
+    top: -40px;
+    right: 0;
+    box-shadow: 0 2px 7px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.22);
+    height: 40px;
+    width: 150px;
+    padding-top: 10px;
+    text-align: center;
+}
+
 @keyframes scale-in {
     from {
         opacity: 0;

diff --git a/gui/utils/utils.js b/gui/utils/utils.js
@@ -18,13 +18,15 @@ export const convertToGMT = (dateTime) => {
 
 export const formatTimeDifference = (timeDifference) => {
   const units = ['years', 'months', 'days', 'hours', 'minutes'];
+  const singularUnits = ['year', 'month', 'day', 'hour', 'minute'];
 
-  for (const unit of units) {
+  for (let i = 0; i < units.length; i++) {
+    const unit = units[i];
     if (timeDifference[unit] !== 0) {
       if (unit === 'minutes') {
-        return `${timeDifference[unit]} minutes ago`;
+        return `${timeDifference[unit]} ${timeDifference[unit] === 1 ? singularUnits[i] : unit} ago`;
       } else {
-        return `${timeDifference[unit]} ${unit} ago`;
+        return `${timeDifference[unit]} ${timeDifference[unit] === 1 ? singularUnits[i] : unit} ago`;
       }
     }
   }