models scroll fix, format of log timestamp fix, adding of loader to m…

…odels, toolkit metrics dropdown bug fixed, publish agent dropdown bug (#1171)
TransformerOptimus · Sep 1, 2023 · b2709b0 · b2709b0
1 parent d0fd847
commit b2709b0
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/gui/pages/Content/Agents/Agents.module.css b/gui/pages/Content/Agents/Agents.module.css
@@ -473,7 +473,7 @@
     z-index: 9999;
     padding: 0px;
     width: fit-content;
-    height: 65px;
+    height: fit-content;
     margin-right: 40px;
     background: #3B3B49;
     border-radius: 8px;

diff --git a/gui/pages/Content/Models/ModelDetails.js b/gui/pages/Content/Models/ModelDetails.js
@@ -3,17 +3,21 @@ import Image from "next/image";
 import ModelMetrics from "./ModelMetrics";
 import ModelInfo from "./ModelInfo";
 import {fetchModel} from "@/pages/api/DashboardService";
+import {loadingTextEffect} from "@/utils/utils";
 
 export default function ModelDetails({modelId, modelName}){
     const [modelDetails, setModelDetails] = useState([])
     const [selectedOption, setSelectedOption] = useState('metrics')
+    const [isLoading, setIsLoading] = useState(true)
+    const [loadingText, setLoadingText] = useState("Loading Models");
 
     useEffect(() => {
+        loadingTextEffect('Loading Models', setLoadingText, 500);
         const fetchModelDetails = async () => {
             try {
                 const response = await fetchModel(modelId);
-                console.log(response.data)
                 setModelDetails(response.data)
+                setIsLoading(false)
             } catch(error) {
                 console.log(`Error Fetching the Details of the Model ${modelName}`, error)
             }
@@ -23,8 +27,8 @@ export default function ModelDetails({modelId, modelName}){
     },[])
 
     return(
-        <div id="model_details" className="ml_3 mr_3">
-            <div className="vertical_containers padding_16_8">
+        <div id="model_details" className="col-12 padding_5 overflowY_auto h_calc92">
+            {!isLoading && <div className="vertical_containers padding_16_8">
                 <span className="text_16">{ modelDetails.name ? (modelDetails.name.split('/')[1] || modelDetails.name) : ""}</span>
                 <span className="text_12 color_gray mt_8 lh_18">{modelDetails.description}</span>
                 <div className="horizontal_container gap_4 mt_16 mb_2">
@@ -33,9 +37,10 @@ export default function ModelDetails({modelId, modelName}){
                     <button className={selectedOption === 'details' ? 'tab_button_selected' : 'tab_button'}
                             onClick={() => setSelectedOption('details')}>Details</button>
                 </div>
-            </div>
-            {selectedOption === 'metrics' && <ModelMetrics modelDetails={modelDetails} />}
-            {selectedOption === 'details' && <ModelInfo modelDetails={modelDetails} />}
+            </div>}
+            {selectedOption === 'metrics' && !isLoading && <ModelMetrics modelDetails={modelDetails} />}
+            {selectedOption === 'details' && !isLoading &&  <ModelInfo modelDetails={modelDetails} />}
+            {isLoading && <div className="loading_container h_75vh"><div className="signInInfo loading_text">{loadingText}</div></div>}
         </div>
     )
 }
diff --git a/gui/pages/Content/Models/ModelInfo.js b/gui/pages/Content/Models/ModelInfo.js
@@ -8,7 +8,7 @@ export default function ModelInfo(modelDetails){
             <hr className="horizontal_line padding_0" />
             <div className="row">
                 <div className="col-3" />
-                <div className="col-6 col-6-scrollable vertical_containers">
+                <div className="col-6 vertical_containers">
                     <span>Installation Type</span>
                     <div className="horizontal_container mt_8 color_white gap_4">
                         {modelData === 'Marketplace' && <Image width={16} height={16} src="/images/marketplace_logo.png" alt="marketplace_logo" />}

diff --git a/gui/pages/Content/Models/ModelMetrics.js b/gui/pages/Content/Models/ModelMetrics.js
@@ -69,7 +69,7 @@ export default function ModelMetrics(modelDetails) {
                                     <tbody>
                                     {modelRunData.map((data, index) => (
                                         <tr key={index}>
-                                            <td className="table_data w_20">{data.created_at}</td>
+                                            <td className="table_data w_20">{data.created_at.slice(0, 19).replace('T', ' ')}</td>
                                             <td className="table_data w_20">{data.agent_name}</td>
                                             <td className="table_data w_20">{data.agent_execution_name}</td>
                                             <td className="table_data" style={{width: '100%', display: 'flex', alignItems: 'center'}}>

diff --git a/gui/pages/Content/Toolkits/ToolkitWorkspace.js b/gui/pages/Content/Toolkits/ToolkitWorkspace.js
@@ -150,6 +150,7 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
             </div>
           </div>
           <div className="horizontal_container mb_10 border_bottom_grey pd_bottom">
+            <div className="w_50 display_flex_container">
             <div className={activeTab === 'metrics' ? 'tab_button_small_selected' : 'tab_button_small'}
                  onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'metrics', setActiveTab)}>
               <div className="text_12 color_white padding_8">Metrics</div>
@@ -162,10 +163,10 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
                  onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'tools_included', setActiveTab)}>
               <div className="text_12 color_white padding_8">Tools Included</div>
             </div>
-            {!loading && activeTab === 'metrics' && <div className="display_flex_container w_73 justify_end">
-              <div className="dropdown_container_search w_20">
-                <div className="custom_select_container" onClick={() => setToolDropdown(!toolDropdown)}
-                     style={{width: '100%'}}>
+            </div>
+            {!loading && activeTab === 'metrics' && <div className="display_flex_container w_50 justify_end">
+              <div className="dropdown_container_search ">
+                <div className="custom_select_container w_180p" onClick={() => setToolDropdown(!toolDropdown)}>
                   {currTool}<Image width={20} height={21}
                                         src={!toolDropdown ? '/images/dropdown_down.svg' : '/images/dropdown_up.svg'}
                                         alt="expand-icon"/>

diff --git a/gui/pages/_app.css b/gui/pages/_app.css
@@ -1084,6 +1084,7 @@ p {
 .h_auto{height: auto}
 .h_60vh{height: 60vh}
 .h_75vh{height: 75vh}
+.h_calc92{height: calc(100vh - 92px)}
 
 .mxh_78vh{max-height: 78vh}