fix: correct field name mismatch in performance test counters (#7860)

src/sections/Counters/index.js

@@ -12,8 +12,11 @@ const Counters = () => {
 
   useEffect(() => {
     fetch(URL)
-      .then(response => response.json())
-      .then(result => setPerformanceCount(result.total_runs));
+      .then((response) => response.json())
+      .then((result) => setPerformanceCount(result.totalRuns))
+      .catch((error) =>
+        console.error("Error fetching performance test count:", error),
+      );
   }, []);
 
   return (

src/sections/Meshery/Features-Col/index.js

@@ -18,7 +18,22 @@ function getServiceFeature(service, index) {
       <tbody>
         <tr>
           <td className="icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5" /><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20" /></svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="40"
+              height="40"
+              fill="none"
+              viewBox="0 0 40 40"
+            >
+              <rect width="40" height="40" fill="#C9FCF6" rx="5" />
+              <path
+                stroke="#00B39F"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M28 14L17 25L12 20"
+              />
+            </svg>
           </td>
           <td className="service">{service.content}</td>
         </tr>
@@ -38,7 +53,7 @@ function getFeatureBlock(feature, index, performanceCount) {
       </FeatureTitleInfoContainer>
       <FeatureInfoContainer>
         {feature.services.map((service, index) =>
-          getServiceFeature(service, index)
+          getServiceFeature(service, index),
         )}
       </FeatureInfoContainer>
       <CountBlockContainer>
@@ -49,7 +64,12 @@ function getFeatureBlock(feature, index, performanceCount) {
             end={
               feature.count.value !== 0 ? feature.count.value : performanceCount
             }
-            suffix= {(feature.count.description == "components" || feature.count.description == "cloud native integrations") ? "+" : " "}
+            suffix={
+              feature.count.description == "components" ||
+              feature.count.description == "cloud native integrations"
+                ? "+"
+                : " "
+            }
           />
         </h1>
         <p className="count-desc">{feature.count.description}</p>
@@ -60,7 +80,8 @@ function getFeatureBlock(feature, index, performanceCount) {
 
 const Features = () => {
   const [performanceCount, setPerformanceCount] = useState(0);
-  const performanceCountEndpoint = "https://cloud.layer5.io/api/performance/results/total";
+  const performanceCountEndpoint =
+    "https://cloud.layer5.io/api/performance/results/total";
 
   useEffect(() => {
     fetch(performanceCountEndpoint)
@@ -72,13 +93,13 @@ const Features = () => {
         return response.json();
       })
       .then((resultcount) => {
-        if (resultcount && typeof resultcount.total_runs === "number") {
-          setPerformanceCount(resultcount.total_runs);
+        if (resultcount && typeof resultcount.totalRuns === "number") {
+          setPerformanceCount(resultcount.totalRuns);
         }
       })
       .catch((error) => {
-        console.log("Failed to fetch performance count:", error.message);
-      // Keep default value of 0 if fetch fails
+        console.error("Failed to fetch performance count:", error.message);
+        // Keep default value of 0 if fetch fails
       });
   }, []);
 
@@ -94,12 +115,11 @@ const Features = () => {
       </TitleContainer>
       <FeaturesSectionContainer>
         {data.map((feature, index) =>
-          getFeatureBlock(feature, index, performanceCount)
+          getFeatureBlock(feature, index, performanceCount),
         )}
       </FeaturesSectionContainer>
     </FeaturesSectionWrapper>
   );
 };
 
-
 export default Features;

src/sections/Meshery/How-meshery-works/specs/data-card.js

@@ -8,41 +8,39 @@ import Counter from "../../../../reusecore/Counter";
 import { URL } from "../../../Counters/index";
 
 const DataCardWrapper = styled.div`
-  background: ${props => props.theme.grey222222ToWhite};
+  background: ${(props) => props.theme.grey222222ToWhite};
   border-radius: 10px;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   padding: 2rem;
   transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-  
-  ul{
+
+  ul {
     list-style: none;
     padding: 0;
   }
-    .col-1 li{
-      display: flex;
-      align-items: center;
-      vertical-align: center;
-      margin-bottom: 1.5rem;
-      img{
-        margin-right: 1rem;
-      }
-      h5{
-        font-weight: 600;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      }
-     }
-
-    .col-2 li {
-      h3{
-        color: ${props => props.theme.secondaryColor};
-        font-weight: 700;
-      }
-      p {
-        font-size: 16px;
-      }
-    } 
-
-
+  .col-1 li {
+    display: flex;
+    align-items: center;
+    vertical-align: center;
+    margin-bottom: 1.5rem;
+    img {
+      margin-right: 1rem;
+    }
+    h5 {
+      font-weight: 600;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+  }
+
+  .col-2 li {
+    h3 {
+      color: ${(props) => props.theme.secondaryColor};
+      font-weight: 700;
+    }
+    p {
+      font-size: 16px;
+    }
+  }
 `;
 
 const DataCard = () => {
@@ -51,7 +49,10 @@ const DataCard = () => {
   useEffect(() => {
     fetch(URL)
       .then((response) => response.json())
-      .then((result) => setPerformanceCount(result.total_runs));
+      .then((result) => setPerformanceCount(result.totalRuns))
+      .catch((error) =>
+        console.error("Error fetching performance test count:", error),
+      );
   }, []);
 
   return (
@@ -77,22 +78,13 @@ const DataCard = () => {
           <ul>
             <li>
               <h3>
-                <Counter
-                  duration={3}
-                  separator=","
-                  end={10000}
-                  suffix="+"
-                />
+                <Counter duration={3} separator="," end={10000} suffix="+" />
               </h3>
               <p>Users</p>
             </li>
             <li>
               <h3>
-                <Counter
-                  duration={3}
-                  separator=","
-                  end={performanceCount}
-                />
+                <Counter duration={3} separator="," end={performanceCount} />
               </h3>
               <p>Performance tests run</p>
             </li>