Merge branch 'master' into patch-1

vr-varad · web-flow · commit 0b48d260f6f0 · 2025-07-28T11:05:52.000+05:30
diff --git a/.github/workflows/bump-meshery-version.yml b/.github/workflows/bump-meshery-version.yml
@@ -45,13 +45,13 @@ jobs:
         uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.RELEASEDRAFTER_PAT }}
-          commit-message: Bump sistent v${{ needs.versions-check.outputs.current }} dependencies
+          commit-message: Update to Sistent v${{ needs.versions-check.outputs.current }} dependencies
           committer: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: true
           branch: bump-sistent-bot
           delete-branch: true
-          title: '[Chore]: Bump Sistent v${{ needs.versions-check.outputs.current }}'
+          title: '[Chore]: Update to Sistent v${{ needs.versions-check.outputs.current }}'
           add-paths: |
             ui/package.json
             ui/package-lock.json
@@ -84,13 +84,13 @@ jobs:
         uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.RELEASEDRAFTER_PAT }}
-          commit-message: Bump sistent v${{ needs.versions-check.outputs.current }} dependencies
+          commit-message: Update to Sistent v${{ needs.versions-check.outputs.current }} dependencies
           committer: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: true
           branch: bump-sistent-bot
           delete-branch: true
-          title: '[Chore]: Bump Sistent v${{needs.versions-check.outputs.current }}'
+          title: '[Chore]: Update to Sistent v${{needs.versions-check.outputs.current }}'
           add-paths: |
             meshmap/package.json
             meshmap/package-lock.json
@@ -128,7 +128,7 @@ jobs:
                   signoff: true
                   branch: bump-sistent-bot
                   delete-branch: true
-                  title: '[Chore]: Bump Sistent v${{ needs.versions-check.outputs.current }}'
+                  title: '[Chore]: Update to Sistent v${{ needs.versions-check.outputs.current }}'
                   add-paths: |
                     package.json
                     package-lock.json
@@ -161,13 +161,13 @@ jobs:
         uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.RELEASEDRAFTER_PAT }}
-          commit-message: Bump sistent v${{ needs.versions-check.outputs.current }} dependencies
+          commit-message: Update to Sistent v${{ needs.versions-check.outputs.current }} dependencies
           committer: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: true
           branch: bump-sistent-bot
           delete-branch: true
-          title: '[Chore]: Bump Sistent v${{ needs.versions-check.outputs.current }}'
+          title: '[Chore]: Update to Sistent v${{ needs.versions-check.outputs.current }}'
           add-paths: |
             ui/package.json
             ui/package-lock.json
diff --git a/src/custom/LearningCard/LearningCard.tsx b/src/custom/LearningCard/LearningCard.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Typography } from '../../base';
 import { ExternalLinkIcon } from '../../icons';
+import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
 import {
   Card2,
   CardActive,
@@ -30,7 +32,8 @@ interface Props {
   path?: string;
   courseCount: number;
   courseType: string;
-  cardKey?: string;
+  orgId?: string;
+  modalContent?: string;
 }
 
 const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string; isExternal?: boolean }>> = ({
@@ -53,9 +56,19 @@ const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string; isExternal
   );
 };
 
-const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType, cardKey }) => {
-  const isCreateLearningPath = cardKey === 'create-learning-path';
+const LearningCard: React.FC<Props> = ({
+  tutorial,
+  path,
+  courseCount,
+  courseType,
+  orgId,
+  modalContent
+}) => {
+  const isCreateLearningPath = courseType === 'learning-card';
+  const [modalOpen, setModalOpen] = useState(false);
 
+  const handleModalOpen = () => setModalOpen(true);
+  const handleModalClose = () => setModalOpen(false);
   return (
     <CardWrapper>
       {tutorial.frontmatter.disabled === 'yes' ? (
@@ -82,9 +95,9 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
           </CardParent>
         </Card2>
       ) : (
-        <OptionalLink path={path} isExternal={isCreateLearningPath}>
+        <>
           {isCreateLearningPath ? (
-            <OwnLearningCard>
+            <OwnLearningCard onClick={handleModalOpen} style={{ cursor: 'pointer' }}>
               <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
                 <div>
                   <CardHead>
@@ -112,41 +125,72 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
               </CardParent>
             </OwnLearningCard>
           ) : (
-            <CardActive>
-              <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
-                <div>
-                  <CardHead>
-                    <h3>
-                      {tutorial.frontmatter.title
-                        ? tutorial.frontmatter.title
-                        : tutorial.frontmatter.courseTitle}
-                    </h3>
-                    {tutorial.frontmatter.status ? (
-                      <p>
-                        <span>New</span>
-                      </p>
-                    ) : null}
-                  </CardHead>
-                  <CardDesc>
-                    <p className="summary">{tutorial.frontmatter.description}</p>
-                  </CardDesc>
-                  {!isCreateLearningPath && (
-                    <CardSubdata className="card-subdata">
-                      <p>
-                        {courseCount} {courseType}
-                        {courseCount > 1 ? 's' : ''}
-                      </p>
-                    </CardSubdata>
-                  )}
-                  <CardImage>
-                    <img src={tutorial.frontmatter.cardImage} />
-                  </CardImage>
-                </div>
-              </CardParent>
-            </CardActive>
+            <OptionalLink path={path} isExternal={isCreateLearningPath}>
+              <CardActive>
+                <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
+                  <div>
+                    <CardHead>
+                      <h3>
+                        {tutorial.frontmatter.title
+                          ? tutorial.frontmatter.title
+                          : tutorial.frontmatter.courseTitle}
+                      </h3>
+                      {tutorial.frontmatter.status ? (
+                        <p>
+                          <span>New</span>
+                        </p>
+                      ) : null}
+                    </CardHead>
+                    <CardDesc>
+                      <p className="summary">{tutorial.frontmatter.description}</p>
+                    </CardDesc>
+                    {!isCreateLearningPath && (
+                      <CardSubdata className="card-subdata">
+                        <p>
+                          {courseCount} {courseType}
+                          {courseCount > 1 ? 's' : ''}
+                        </p>
+                      </CardSubdata>
+                    )}
+                    <CardImage>
+                      <img src={tutorial.frontmatter.cardImage} />
+                    </CardImage>
+                  </div>
+                </CardParent>
+              </CardActive>
+            </OptionalLink>
           )}
-        </OptionalLink>
+        </>
       )}
+
+      <Modal
+        open={modalOpen}
+        closeModal={handleModalClose}
+        title={tutorial.frontmatter.title || tutorial.frontmatter.courseTitle}
+        maxWidth="sm"
+      >
+        <ModalBody>
+          <Typography variant="body1">{modalContent}</Typography>
+          {orgId && (
+            <Typography variant="body1" color="textSecondary">
+              Your Organization ID: {orgId}
+            </Typography>
+          )}
+        </ModalBody>
+        <ModalFooter variant="filled">
+          <ModalButtonSecondary onClick={handleModalClose}>Close</ModalButtonSecondary>
+          {path && (
+            <ModalButtonPrimary
+              onClick={() => {
+                window.open(path, '_blank');
+                handleModalClose();
+              }}
+            >
+              Visit Docs
+            </ModalButtonPrimary>
+          )}
+        </ModalFooter>
+      </Modal>
     </CardWrapper>
   );
 };
diff --git a/src/custom/LearningCard/style.tsx b/src/custom/LearningCard/style.tsx
@@ -20,23 +20,31 @@ const CardActive = styled('div')(({ theme }) => ({
 const OwnLearningCard = styled('div')(({ theme }) => ({
   cursor: 'pointer',
   transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
+  position: 'relative',
+  overflow: 'hidden',
   '&:hover': {
     boxShadow: `${theme.palette.background.brand?.default} 0px 0px 19px 6px`
   },
-  background: `
-      repeating-linear-gradient(
-        45deg,
-        transparent,
-        transparent 10px,
-        #ccc 10px,
-        #ccc 20px
-      ),
-      linear-gradient(
-        to bottom,
-        #eee,
-        #999
-      )
-    `
+  background: `linear-gradient(135deg, 
+        rgba(255, 255, 255, 0.85) 0%, 
+        rgba(248, 250, 252, 0.9) 50%, 
+        rgba(241, 245, 249, 0.85) 100%)`,
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 15px,
+          rgba(148, 163, 184, 0.1) 15px,
+          rgba(148, 163, 184, 0.1) 30px
+        )`,
+    pointerEvents: 'none'
+  }
 }));
 
 const CardLink = styled('a')({
diff --git a/src/custom/ResourceDetailFormatters/Formatter.tsx b/src/custom/ResourceDetailFormatters/Formatter.tsx
@@ -57,7 +57,7 @@ import {
   TableDataFormatterProps,
   TextWithLinkFormatterProps
 } from './types';
-import { splitCamelCaseString } from './utils';
+import { parseCpu, splitCamelCaseString } from './utils';
 
 interface ResourceProgressProps {
   title: string;
@@ -368,10 +368,12 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
     return parseInt(kiValue.replace('Ki', '')) * 1024;
   }, []);
 
-  const cpuUsage = useMemo(() => {
+  const reservedCpu = useMemo(() => {
     if (!allocatable || !capacity) return 0;
-    const usedCPU = parseInt(capacity.cpu) - parseInt(allocatable.cpu);
-    return (usedCPU / parseInt(capacity.cpu)) * 100;
+    const usedCPU = parseCpu(capacity.cpu) - parseCpu(allocatable.cpu);
+    const capacityCPU = parseCpu(capacity.cpu);
+
+    return (usedCPU / capacityCPU) * 100;
   }, [allocatable, capacity]);
 
   const memoryUsage = useMemo(() => {
@@ -382,12 +384,14 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
     return (usedMemory / totalMemory) * 100;
   }, [allocatable, capacity]);
 
-  const diskUsage = useMemo(() => {
+  const diskUsagePercent = useMemo(() => {
     if (!allocatable || !capacity) return 0;
-    const totalStorageInBytes = convertKiToBytes(capacity['ephemeral-storage']);
-    const availableStorageInBytes = parseInt(allocatable['ephemeral-storage']);
-    const usedStorageInBytes = totalStorageInBytes - availableStorageInBytes;
-    return (usedStorageInBytes / totalStorageInBytes) * 100;
+
+    const total = convertKiToBytes(capacity['ephemeral-storage']);
+    const available = convertKiToBytes(allocatable['ephemeral-storage']);
+
+    const used = total - available;
+    return (used / total) * 100;
   }, [allocatable, capacity, convertKiToBytes]);
 
   const chartOptions = useCallback(
@@ -439,9 +443,9 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
 
   return (
     <FlexResourceContainer>
-      <ResourceProgress title="CPU Usage" percentage={cpuUsage} type={'CPU'} />
+      <ResourceProgress title="System Reserved Cpu" percentage={reservedCpu} type={'CPU'} />
       <ResourceProgress title="Memory Usage" percentage={memoryUsage} type={'Memory'} />
-      <ResourceProgress title="Disk Usage" percentage={diskUsage} type={'Disk'} />
+      <ResourceProgress title="Disk Usage" percentage={diskUsagePercent} type={'Disk'} />
     </FlexResourceContainer>
   );
 };
diff --git a/src/custom/ResourceDetailFormatters/utils.ts b/src/custom/ResourceDetailFormatters/utils.ts
@@ -103,3 +103,24 @@ export const convertToReadableUnit = (value: number): string => {
 
   return `${value.toFixed(2)} ${units[index]}`;
 };
+
+/**
+ * Parses a Kubernetes CPU string (e.g., "100m", "1", "1000000n")
+ * and returns the CPU value in cores as a float.
+ */
+export function parseCpu(cpu: string): number {
+  if (!cpu) return 0;
+
+  if (cpu.endsWith('n')) {
+    // Nanocores → cores
+    return parseInt(cpu.slice(0, -1), 10) / 1_000_000_000;
+  }
+
+  if (cpu.endsWith('m')) {
+    // Millicores → cores
+    return parseInt(cpu.slice(0, -1), 10) / 1000;
+  }
+
+  // No suffix = cores
+  return parseFloat(cpu);
+}
diff --git a/src/custom/TeamTable/TeamTable.tsx b/src/custom/TeamTable/TeamTable.tsx
@@ -16,6 +16,8 @@ interface TeamTableProps {
   columns: MUIDataTableColumn[];
   updateCols: (cols: any) => void;
   isRemoveFromTeamAllowed: boolean;
+  isEditUserAllowed?: any;
+  handleEditUser?: any;
   org_id: string;
   useGetUsersForOrgQuery: any;
   useNotificationHandlers: any;
@@ -39,6 +41,8 @@ const TeamTable: React.FC<TeamTableProps> = ({
   columns,
   updateCols,
   isRemoveFromTeamAllowed,
+  isEditUserAllowed,
+  handleEditUser,
   org_id,
   useGetUsersForOrgQuery,
   useNotificationHandlers,
@@ -66,6 +70,8 @@ const TeamTable: React.FC<TeamTableProps> = ({
                   <UsersTable
                     teamID={teamID}
                     isRemoveFromTeamAllowed={isRemoveFromTeamAllowed}
+                    isEditUserAllowed={isEditUserAllowed}
+                    handleEditUser={handleEditUser}
                     org_id={org_id}
                     useGetUsersForOrgQuery={useGetUsersForOrgQuery}
                     useNotificationHandlers={useNotificationHandlers}
diff --git a/src/custom/UsersTable/UsersTable.tsx b/src/custom/UsersTable/UsersTable.tsx
