Resolve conflict in cherry-pick of 20af6669629e8a31147cedb1ca1bb57d26…

…f4c93b and change the commit message

.github/workflows/deploy-ui-staging.yml

@@ -0,0 +1,115 @@
+name: Deploy UI to Staging
+
+on:
+  pull_request:
+    branches: [ main ]
+    paths:
+      - "ui/**"
+    types:
+      - labeled
+
+permissions:
+  id-token: write
+  contents: read
+
+env:
+  IMAGE_NAME_SERVER: multiwoven/multiwoven-server-ee
+  IMAGE_NAME_UI: multiwoven/multiwoven-ui-ee-staging
+  IMAGE_TAG_SERVER: edge
+  IMAGE_TAG_UI: pr-${{ github.event.number }}-${{ github.sha }}
+
+jobs:
+  build_and_push:
+    if: ${{ github.event.label.name == 'deploy-to-staging' || contains( github.event.pull_request.labels.*.name, 'deploy-to-staging') }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and Push Docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: ./ui
+          file: ./ui/Dockerfile
+          push: true
+          tags: |
+            ${{ env.IMAGE_NAME_UI }}:${{ env.IMAGE_TAG_UI }}
+  deploy:
+    needs: build_and_push
+    if: ${{ github.event.label.name == 'deploy-to-staging' || contains( github.event.pull_request.labels.*.name, 'deploy-to-staging') }}
+    environment: staging
+    runs-on: self-hosted
+    steps:
+      - uses: azure/setup-helm@v4.2.0
+        with:
+          version: 'latest'
+        id: install
+
+      - name: Azure Login
+        uses: Azure/login@v2.1.0
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+      - name: Setup kubelogin
+        uses: azure/use-kubelogin@v1
+        with:
+          kubelogin-version: 'v0.1.3'
+
+      - name: Gets K8s context
+        uses: azure/aks-set-context@v3
+        with:
+            resource-group: ${{ vars.RESOURCE_GROUP }}
+            cluster-name: ${{ vars.CLUSTER_NAME }}
+            admin: 'false'
+            use-kubelogin: 'true'
+
+      - name: Deploy main to staging
+        env:
+          API_HOST: ${{ vars.API_HOST }}
+          APP_REVISION: ${{ github.head_ref }}-${{ github.sha }}
+          DB_HOST: ${{ secrets.DB_HOST }}
+          DB_USERNAME: ${{ secrets.DB_USERNAME }}
+          DB_PASSWORD: ${{ secrets.DB_PASSWORD }}
+          TEMPORAL_HOST: ${{ secrets.TEMPORAL_HOST }}
+          TEMPORAL_NAMESPACE: ${{ secrets.TEMPORAL_NAMESPACE }}
+          TLS_ADMIN_EMAIL: ${{ secrets.TLS_ADMIN_EMAIL }}
+          UI_HOST: ${{ vars.UI_HOST }}
+          VITE_API_HOST: ${{ vars.VITE_API_HOST }}
+          VITE_APPSIGNAL_PUSH_API_KEY: ${{ secrets.VITE_APPSIGNAL_PUSH_API_KEY }}
+          VITE_BRAND_COLOR: ${{ vars.VITE_BRAND_COLOR }}
+          VITE_BRAND_HOVER_COLOR: ${{ vars.VITE_BRAND_HOVER_COLOR }}
+          VITE_BRAND_NAME: ${{ vars.VITE_BRAND_NAME }}
+          VITE_FAV_ICON_URL: ${{ vars.VITE_FAV_ICON_URL }}
+          VITE_LOGO_URL: ${{ vars.VITE_LOGO_URL }}
+        run: |
+          helm repo add multiwoven https://multiwoven.github.io/helm-charts
+          helm upgrade -i --reuse-values multiwoven multiwoven/multiwoven \
+            --set multiwovenConfig.appRevision=$APP_REVISION \
+            --set multiwovenConfig.privateRepo=true \
+            --set multiwovenConfig.registrySecretName=myregistrykey \
+            --set multiwovenConfig.tlsAdminEmail=$TLS_ADMIN_EMAIL \
+            --set multiwovenConfig.tlsCertIssuer="letsencrypt-prod" \
+            --set multiwovenConfig.uiHost=$UI_HOST \
+            --set multiwovenConfig.viteApiHost=$VITE_API_HOST \
+            --set multiwovenConfig.viteBrandName="$VITE_BRAND_NAME" \
+            --set multiwovenConfig.viteBrandColor="$VITE_BRAND_COLOR" \
+            --set multiwovenConfig.viteBrandHoverColor="$VITE_BRAND_HOVER_COLOR" \
+            --set multiwovenConfig.viteLogoUrl=$VITE_LOGO_URL \
+            --set multiwovenConfig.viteFavIconUrl=$VITE_FAV_ICON_URL \
+            --set multiwovenServer.multiwovenServer.image.repository=$IMAGE_NAME_SERVER \
+            --set multiwovenServer.multiwovenServer.image.tag=$IMAGE_TAG_SERVER \
+            --set multiwovenUI.multiwovenUI.image.repository=$IMAGE_NAME_UI \
+            --set multiwovenUI.multiwovenUI.image.tag=$IMAGE_TAG_UI \
+            --set multiwovenWorker.multiwovenWorker.args="{./app/temporal/cli/worker}" \
+            --set multiwovenWorker.multiwovenWorker.image.repository=$IMAGE_NAME_SERVER \
+            --set multiwovenWorker.multiwovenWorker.image.tag=$IMAGE_TAG_SERVER \
+            --set temporal.enabled=false \
+            --set multiwovenConfig.allowedHost=".staging.squared.ai"
+          kubectl rollout restart deployment/multiwoven-worker -n multiwoven
+          kubectl rollout restart deployment/multiwoven-server -n multiwoven

ui/src/utils/formatDuration.ts

@@ -0,0 +1,29 @@
+const formatDuration = (durationInSeconds: number): string => {
+  if (
+    durationInSeconds === null ||
+    durationInSeconds === undefined ||
+    Number.isNaN(durationInSeconds) ||
+    durationInSeconds < 0
+  ) {
+    return '';
+  }
+
+  let duration: number;
+  let unit: string;
+
+  if (durationInSeconds >= 3600) {
+    duration = durationInSeconds / 3600;
+    unit = 'hour';
+  } else if (durationInSeconds >= 60) {
+    duration = durationInSeconds / 60;
+    unit = 'minute';
+  } else {
+    duration = durationInSeconds;
+    unit = 'second';
+  }
+
+  const roundedDuration = Math.round(duration * 10) / 10;
+  return `${roundedDuration} ${unit}${roundedDuration === 1 ? '' : 's'}`;
+};
+
+export default formatDuration;

ui/src/views/Activate/Syncs/SyncRecords/SyncRecordsTopBar.tsx

@@ -94,21 +94,23 @@ export const SyncRecordsTopBar = ({ syncId, syncRunId }: { syncId: string; syncR
           <Text size='sm' fontWeight='semibold'>
             {moment(syncRunData?.data?.attributes?.started_at).format('DD/MM/YYYY HH:mm a')}
           </Text>
-          <Divider
-            orientation='vertical'
-            height='24px'
-            borderColor='gray.500'
-            opacity='1'
-            marginX='13px'
-          />
-          <Text size='sm' fontWeight='medium'>
-            Duration :{' '}
-          </Text>
-          <Text size='sm' fontWeight='semibold'>
-            {syncRunData?.data?.attributes?.duration
-              ? syncRunData?.data.attributes.duration?.toPrecision(3) + ' seconds '
-              : 'No Duration Available'}
-          </Text>
+          {syncRunData?.data?.attributes?.duration && (
+            <>
+              <Divider
+                orientation='vertical'
+                height='24px'
+                borderColor='gray.500'
+                opacity='1'
+                marginX='13px'
+              />
+              <Text size='sm' fontWeight='medium'>
+                Duration :{' '}
+              </Text>
+              <Text size='sm' fontWeight='semibold'>
+                {syncRunData?.data?.attributes?.duration?.toPrecision(3) + ' seconds '}
+              </Text>
+            </>
+          )}
         </Box>
       }
     />

ui/src/views/Activate/Syncs/SyncRuns/SyncRunsColumns.tsx

@@ -7,6 +7,7 @@ import { FiCheckCircle, FiRefreshCw } from 'react-icons/fi';
 import StatusTag from '@/components/StatusTag';
 import { StatusTagText, StatusTagVariants } from '@/components/StatusTag/StatusTag';
 import { ResultEntity } from './ResultEntity';
+import formatDuration from '@/utils/formatDuration';
 
 const StatusCell = ({ value }: { value: StatusTagVariants }) => {
   const tagText = StatusTagText[value];
@@ -27,14 +28,13 @@ const SyncRunTypeCell = ({ value }: { value: string }) => {
 };
 
 const DurationCell = ({ value }: { value: number }) => {
-  if (value == null) return null;
-  return <Text fontSize='sm'>{value.toPrecision(3)} seconds</Text>;
+  return <Text fontSize='sm'>{formatDuration(value)}</Text>;
 };
 
 const RowCountCell = ({ value, label }: { value: number; label: string }) => {
   return (
     <Text fontSize='sm'>
-      {value} {label}
+      {value} {label + (value > 1 ? 's' : '')}
     </Text>
   );
 };
@@ -82,12 +82,12 @@ export const SyncRunsColumns: ColumnDef<SyncRunsResponse>[] = [
   {
     accessorKey: 'attributes.total_query_rows',
     header: () => <span>Rows Queried</span>,
-    cell: (info) => <RowCountCell value={info.getValue() as number} label='rows' />,
+    cell: (info) => <RowCountCell value={info.getValue() as number} label='row' />,
   },
   {
     accessorKey: 'attributes.skipped_rows',
     header: () => <span>Skipped Rows</span>,
-    cell: (info) => <RowCountCell value={info.getValue() as number} label='rows' />,
+    cell: (info) => <RowCountCell value={info.getValue() as number} label='row' />,
   },
   {
     accessorKey: 'attributes',