Merge branch 'features/design' of https://github.com/kloudlite/web in…

…to features/design

gql-queries-generator/doc/queries.graphql

@@ -2846,6 +2846,7 @@ query consoleListBuildRuns($repoName: String!, $search: SearchBuildRuns, $pq: Cu
     edges {
       cursor
       node {
+        id
         clusterName
         creationTime
         markedForDeletion
@@ -3989,8 +3990,8 @@ query authCli_getDevice($clusterName: String!, $name: String!) {
   }
 }
 
-query authCli_listDevices($pq: CursorPaginationIn) {
-  infra_listVPNDevices(pq: $pq) {
+query authCli_listDevices($pq: CursorPaginationIn, $clusterName: String) {
+  infra_listVPNDevices(clusterName: $clusterName, pq: $pq) {
     edges {
       node {
         displayName

src/apps/auth/server/gql/queries/device-queries.ts

@@ -13,7 +13,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.core_updateVPNDevicePorts,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
   cli_CoreUpdateDeviceEnv: executor(
@@ -32,7 +32,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.core_updateVPNDeviceEnv,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
 
@@ -69,7 +69,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.core_listVPNDevicesForUser,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
   cli_getCoreDevice: executor(
@@ -98,7 +98,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.core_getVPNDevice,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
   cli_createCoreDevice: executor(
@@ -117,7 +117,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.core_createVPNDevice,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
 
@@ -129,7 +129,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.core_updateVPNDevicePorts,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
 
@@ -170,14 +170,17 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.infra_getVPNDevice,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
 
   cli_listDevices: executor(
     gql`
-      query Infra_listVPNDevices($pq: CursorPaginationIn) {
-        infra_listVPNDevices(pq: $pq) {
+      query Infra_listVPNDevices(
+        $pq: CursorPaginationIn
+        $clusterName: String
+      ) {
+        infra_listVPNDevices(clusterName: $clusterName, pq: $pq) {
           edges {
             node {
               displayName
@@ -210,7 +213,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.infra_listVPNDevices,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
 
@@ -246,7 +249,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.infra_updateVPNDevice,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
 
@@ -266,7 +269,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.infra_updateVPNDevicePorts,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
   cli_updateDeviceNs: executor(
@@ -285,7 +288,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.infra_updateVPNDeviceNs,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
   cli_createDevice: executor(
@@ -306,7 +309,7 @@ export const vpnQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: any) => data.infra_createVPNDevice,
-      vars: (_: any) => { },
+      vars: (_: any) => {},
     }
   ),
 });

src/apps/console/components/color-generator.tsx

@@ -69,4 +69,8 @@ const generateColor = (str = '#', contrast: Contrast = 'dark') => {
   )}, ${generateColorFromName(`${str + str + str}`, cc, contrast)})`;
 };
 
+export const generatePlainColor = (str = '#') => {
+  const cc = colorCode(str);
+  return generateColorFromName(str, cc, 'dark');
+};
 export default generateColor;

src/apps/console/components/logger.tsx

@@ -16,7 +16,7 @@ import {
 import useClass from '~/root/lib/client/hooks/use-class';
 import logger from '~/root/lib/client/helpers/log';
 import { socketUrl } from '~/root/lib/configs/base-url.cjs';
-import generateColor from './color-generator';
+import { generatePlainColor } from './color-generator';
 import Pulsable from './pulsable';
 import { logsMockData } from '../dummy/data';
 
@@ -331,8 +331,9 @@ const LogLine = ({
 
       <div
         className="w-[3px] mr-xl ml-sm h-full pulsable pulsable-hidden"
-        style={{ backgroundImage: generateColor(log.pod_name) }}
+        style={{ background: generatePlainColor(log.pod_name) }}
       />
+
       <div className="inline-flex gap-xl pulsable">
         <HighlightIt
           {...{
@@ -597,16 +598,18 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => {
           };
 
           w.onopen = () => {
+            // console.log('socket connected');
             res(w);
           };
 
           w.onerror = (e) => {
+            console.error(e);
             rej(e);
           };
 
           w.onclose = () => {
             // wsclient.send(newMessage({ event: 'unsubscribe', data: 'test' }));
-            logger.log('socket disconnected');
+            // logger.log('socket disconnected');
           };
         } catch (e) {
           rej(e);
@@ -633,6 +636,7 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => {
         setIsLoading(true);
 
         const client = await wsclient;
+        console.log('client', client);
 
         setSocState(client);
 

src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { toast } from '~/components/molecule/toast';
-import { generateKey, titleCase } from '~/components/utils';
+import { cn, generateKey, titleCase } from '~/components/utils';
 import {
   ListBody,
   ListTitle,
@@ -18,8 +18,21 @@ import {
 } from '~/console/server/r-utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
-import { useParams } from '@remix-run/react';
+import { useOutletContext, useParams } from '@remix-run/react';
 import { IBuildRuns } from '~/console/server/gql/queries/build-run-queries';
+import AnimateHide from '~/components/atoms/animate-hide';
+import LogComp from '~/console/components/logger';
+import { Button } from '~/components/atoms/button';
+import {
+  CheckCircleFill,
+  GitBranch,
+  PlayCircleFill,
+  Tag,
+  XCircleFill,
+} from '@jengaicons/react';
+import dayjs from 'dayjs';
+import { Badge } from '~/components/atoms/badge';
+import { IAccountContext } from '../../../_layout';
 
 const RESOURCE_NAME = 'build run';
 type BaseType = ExtractNodeType<IBuildRuns>;
@@ -77,13 +90,13 @@ const GridView = ({ items, onDelete }: IResource) => {
                   <ListTitle
                     title={name}
                     subtitle={id}
-                  // action={
-                  //   <ExtraButton
-                  //     onDelete={() => {
-                  //       onDelete(item);
-                  //     }}
-                  //   />
-                  // }
+                    // action={
+                    //   <ExtraButton
+                    //     onDelete={() => {
+                    //       onDelete(item);
+                    //     }}
+                    //   />
+                    // }
                   />
                 ),
               },
@@ -102,21 +115,127 @@ const GridView = ({ items, onDelete }: IResource) => {
 };
 
 const ListItem = ({ item }: { item: BaseType }) => {
-  const { name, id, updateInfo } = parseItem(item);
+  const [open, setOpen] = useState<boolean>(false);
+  const { account } = useOutletContext<IAccountContext>();
+  const commitHash = item.metadata?.annotations['github.com/commit'];
+
+  // eslint-disable-next-line no-nested-ternary
+  const state: 'running' | 'done' | 'error' = item.status?.isReady
+    ? 'done'
+    : item.status?.message?.RawMessage
+    ? 'error'
+    : 'running';
+
+  const isLatest = dayjs(item.updateTime).isAfter(dayjs().subtract(3, 'hour'));
+
   return (
-    <div className="flex flex-col">
-      <div className="flex flex-row">
-        <ListTitle title={name} subtitle={id} />
+    <div className="flex flex-col flex-1">
+      <div className="flex flex-row justify-between items-center gap-6xl">
+        <div className="flex justify-between items-center flex-1">
+          <div className="flex gap-xl items-center justify-start flex-1">
+            <div>
+              <span
+                className={cn({
+                  'text-text-success': state === 'done',
+                  'text-text-critical': state === 'error',
+                  'text-text-warning': state === 'running',
+                })}
+                title={
+                  // eslint-disable-next-line no-nested-ternary
+                  state === 'done'
+                    ? 'Build completed successfully'
+                    : state === 'error'
+                    ? 'Build failed'
+                    : 'Build in progress'
+                }
+              >
+                {state === 'done' && (
+                  <CheckCircleFill size={16} color="currentColor" />
+                )}
+
+                {state === 'error' && (
+                  <XCircleFill size={16} color="currentColor" />
+                )}
+
+                {state === 'running' && (
+                  <PlayCircleFill size={16} color="currentColor" />
+                )}
+              </span>
+            </div>
+            <ListTitle
+              title={
+                <div className="flex items-center gap-xl">
+                  {item.metadata?.annotations['github.com/repository']}{' '}
+                </div>
+              }
+              subtitle={
+                <div className="flex items-center gap-md">
+                  {`#${commitHash.substring(
+                    commitHash.length - 7,
+                    commitHash.length
+                  )}`}
+                  <GitBranch size={12} />
+                  {item.metadata?.annotations['github.com/branch']}{' '}
+                </div>
+              }
+            />
+          </div>
+
+          <div className="flex-1 flex items-center justify-center">
+            <div className="flex flex-row items-center gap-lg mb-md">
+              {item.spec?.registry.repo.tags.map((tag) => (
+                <button
+                  key={tag}
+                  className="rounded-full outline-none ring-offset-1 focus-visible:ring-2 focus-visible:ring-border-focus hover:underline text-text-primary"
+                >
+                  <Badge type="info" icon={<Tag />}>
+                    {tag}
+                  </Badge>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="bodyMd text-text-soft truncate">
+          {parseUpdateOrCreatedOn(item)}
+        </div>
+
+        {/* <pre>{JSON.stringify(item, null, 2)}</pre> */}
+        {isLatest && (
+          <Button
+            size="sm"
+            variant="basic"
+            content={open ? 'Hide Logs' : 'Show Logs'}
+            onClick={() => setOpen((s) => !s)}
+          />
+        )}
       </div>
-      <div className="">Logs</div>
+
+      <AnimateHide show={open} className="w-full pt-4xl">
+        <LogComp
+          {...{
+            dark: true,
+            width: '100%',
+            height: '40rem',
+            title: 'Logs',
+            hideLines: true,
+            websocket: {
+              account: parseName(account),
+              cluster: item.clusterName,
+              trackingId: item.id,
+            },
+          }}
+        />
+      </AnimateHide>
     </div>
   );
 };
 const ListView = ({ items, onDelete }: IResource) => {
   return (
     <List.Root>
       {items.map((item, index) => {
-        const { name, id, updateInfo } = parseItem(item);
+        const { name, id } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         return (
           <List.Row
@@ -125,6 +244,7 @@ const ListView = ({ items, onDelete }: IResource) => {
             columns={[
               {
                 key: generateKey(keyPrefix, name + id),
+                className: 'w-full',
                 render: () => <ListItem item={item} />,
               },
             ]}