@microlight/core 0.2.0

package/dist/server/app/tasks/[slug]/runs/[r_id]/ViewRun.js

@@ -0,0 +1,230 @@
+'use client';
+
+import PageHeader from "../../../../../components/PageHeader";
+import { Container, Table, Link, Chip, Typography, Sheet, Alert } from "@mui/joy";
+import { useRouter } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import StatusChip from "../../../../../components/StatusChip";
+import DropdownActions from "./_components/DropdownActions/DropdownActions";
+function generateBreadcrumbs({
+  task,
+  params
+}) {
+  let breadcrumbs = [{
+    text: "Library",
+    href: "/library"
+  }];
+  // Add task path segments to breadcrumbs if available
+  if (task._folderPath) {
+    const f_path = task._folderPath.split('/');
+    let folderPath = '/library';
+    f_path.forEach((folder, index) => {
+      folderPath += '/' + folder;
+      breadcrumbs.push({
+        text: folder,
+        href: folderPath
+      });
+    });
+    breadcrumbs.push({
+      text: task.slug,
+      href: '/tasks/' + task.slug
+    });
+    breadcrumbs.push({
+      text: params.r_id
+    });
+  }
+  return breadcrumbs;
+}
+export default function ViewRun({
+  params,
+  task,
+  run,
+  logs
+}) {
+  const breadcrumbs = generateBreadcrumbs({
+    task,
+    params
+  });
+  const router = useRouter();
+  let RightButtons = function () {
+    return <>
+      <DropdownActions run={run} />
+    </>;
+  };
+  useEffect(() => {
+    let intervalId;
+    if (run.status === 'running' || run.status === 'pending') {
+      intervalId = setInterval(() => {
+        // Refresh the page data using router.refresh()
+        router.refresh();
+      }, 500);
+    }
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [run]);
+  return <>
+    <Container>
+      <PageHeader breadcrumbs={breadcrumbs} header={{
+        part1: 'Task Run:',
+        part2: task.name
+      }} RightButtons={RightButtons}
+      // icon={<SendIcon sx={{color: '#6435c9'}} />}
+      />
+      <Table variant='outlined' borderAxis="bothBetween" aria-label="task runs table" size='md' sx={{
+        mt: 1,
+        maxWidth: 500,
+        '& th': {
+          height: {
+            sm: "22px",
+            md: "26px",
+            lg: "30px"
+          }
+        },
+        '& td': {
+          height: {
+            sm: "23px",
+            md: "27px",
+            lg: "31px"
+          }
+        }
+      }}>
+        <thead>
+          <tr>
+            {/* <th ></th> */}
+            <th>Created At</th>
+            <th>Started At</th>
+            {/* <th >ID</th> */}
+            <th>Status</th>
+            <th style={{
+              width: '58px'
+            }}>Duration</th>
+            <th>By</th>
+            {/* <th>User</th> */}
+          </tr>
+        </thead>
+        <tbody>
+          <tr key={run.id}>
+            <td>{new Date(run.created_at).toLocaleString()}</td>
+            <td>{run.started_at && new Date(run.started_at).toLocaleString()}</td>
+            
+            <td><StatusChip status={run.status} /></td>
+            <td style={{
+              textAlign: 'right'
+            }}>{run.duration / 1000 || 0}s</td>
+            <td>{run.by || 'user'}</td>
+            {/* <td>{run.user}</td> */}
+          </tr>
+        </tbody>
+      </Table>
+      <Typography level="title-lg" sx={{
+        mt: 3,
+        mb: 1
+      }}>Payload:</Typography>
+      <pre>{JSON.stringify(run.inputs, null, 2)}</pre>
+      <Typography level="title-lg" sx={{
+        mt: 3,
+        mb: 1
+      }}>Logs:</Typography>
+      <Sheet sx={{
+        bgcolor: 'white'
+      }}>
+        <Table borderAxis="xBetween" size="md" variant="outlined" sx={{
+          border: '1px solid #d9dada',
+          '--TableCell-borderColor': '#ebebeb'
+        }}>
+          <tbody>
+            {logs.map((log, index) => <tr key={index}>
+                <td style={{
+                width: 90,
+                padding: 7,
+                paddingLeft: 14,
+                verticalAlign: 'top',
+                height: 'auto'
+              }}>
+                  <Typography level="body-sm" fontFamily="monospace">
+                    {new Date(log.created_at).toLocaleTimeString()}
+                  </Typography>
+                </td>
+                <td style={{
+                padding: 7,
+                verticalAlign: 'top',
+                height: 'auto'
+              }}>
+                  {log.type == 'markdown' ? <Alert variant='soft' color="primary" sx={{
+                  p: 2,
+                  pb: 0,
+                  // bgcolor:'#e3fbe3',
+                  bgcolor: '#f8ffff',
+                  color: '#276f85',
+                  border: '1px solid #a8d4dd',
+                  '& h4, & h3,': {
+                    mt: 0
+                  }
+                }}>
+                      <div className='' dangerouslySetInnerHTML={{
+                    __html: log.content
+                  }} />
+                    </Alert> : log.type == 'json' ? <pre className="json-renderer" style={{
+                  padding: 0,
+                  margin: 0
+                }}>
+                      {JSON.stringify(JSON.parse(log.content), null, 2)}
+                    </pre> : log.type == 'error' ? <Alert variant='soft' color="danger" sx={{
+                  p: 2,
+                  pb: 0,
+                  overflow: 'auto',
+                  '&::-webkit-scrollbar': {
+                    display: 'none'
+                  },
+                  scrollbarWidth: 'none',
+                  // Firefox
+                  msOverflowStyle: 'none',
+                  // IE and Edge
+                  // bgcolor:'#e3fbe3',
+                  // bgcolor:'#f8ffff',
+                  // color:'#276f85',
+                  border: '1px solid #e0b4b4',
+                  '& h4, & h3,': {
+                    mt: 0
+                  }
+                }}>
+                      <div>
+                      <h4>Error : {JSON.parse(log.content)?.message}</h4>
+                      {JSON.parse(log.content)?.stack}
+                      
+                      </div>
+                    </Alert> : log.type == 'warn' ? <Alert variant='soft' color="warning" sx={{
+                  py: 1,
+                  my: -0.4
+                }}>
+                      {log.content}
+                    </Alert> : log.type == 'info' ? <Alert variant='soft' color="primary" sx={{
+                  py: 1,
+                  my: -0.4
+                }}>
+                      {log.content}
+                    </Alert> : log.type == 'danger' ? <Alert variant='soft' color="danger" sx={{
+                  py: 1,
+                  my: -0.4
+                }}>
+                      {log.content}
+                    </Alert> : log.type == 'success' ? <Alert variant='soft' color="success" sx={{
+                  py: 1,
+                  my: -0.4
+                }}>
+                      {log.content}
+                    </Alert> : <Typography level="body-sm" fontFamily="monospace">{log.content}</Typography>}
+                </td>
+              </tr>)}
+          </tbody>
+        </Table>
+      </Sheet>
+      <br />
+      {/* <pre>{JSON.stringify(task,null,2)}</pre> */}
+      {/* <pre>{JSON.stringify(run,null,2)}</pre> */}
+    </Container>
+  </>;
+}

package/dist/server/app/tasks/[slug]/runs/[r_id]/_components/DropdownActions/DropdownActions.js

@@ -0,0 +1,46 @@
+'use client';
+
+import { Menu, MenuItem, MenuButton, Dropdown } from '@mui/joy';
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+// import Divider from '@mui/joy/Divider';
+
+import { deleteRun } from "./action";
+export default function DropdownActions({
+  run
+}) {
+  async function onClickCreateVersion() {}
+  async function onClickCopyRerunAsCurl() {
+    let href = window.location.href;
+    let baseUrl = href.split('/runs/')[0].replace('/tasks/', '/api/tasks/');
+
+    // Convert input object to URL query parameters
+    const queryParams = new URLSearchParams();
+    Object.entries(run?.inputs).forEach(([key, value]) => {
+      queryParams.append(key, value);
+    });
+    const curlCommand = `curl -X POST "${baseUrl}?${queryParams.toString()}"`;
+    await navigator.clipboard.writeText(curlCommand);
+  }
+  return <>
+      <Dropdown size='sm'>
+        <MenuButton aria-label="master-data more options" variant="outlined" color="primary" size="sm" sx={{
+        // Add these styles to match IconButton
+        aspectRatio: '1',
+        // borderRadius: '50%',
+        p: 0.5,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }} onClick={event => {
+        event.preventDefault();
+        event.stopPropagation();
+      }}><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></MenuButton>
+        <Menu placement='bottom-end'>
+          <MenuItem disabled onClick={onClickCreateVersion}>Rerun job</MenuItem>
+          <MenuItem onClick={onClickCopyRerunAsCurl}>Copy rerun as curl</MenuItem>
+          {/* <MenuItem color='danger' onClick={()=>{setOpen(true);}}>Delete Part</MenuItem> */}
+        </Menu>
+      </Dropdown>
+		</>;
+}

package/dist/server/app/tasks/[slug]/runs/[r_id]/_components/DropdownActions/action.js

@@ -0,0 +1,35 @@
+"use server";
+
+// import analytics from '@/lib/analytics';
+// import db from '@/database';
+
+// export async function deleteRun(run) {
+//     // const user = await loginRequired();
+//     // analytics.track({event: 'part_delete', user: user.id, org: part.org});
+
+//     // Check for existing versions
+//     const versions = await db.PartVersions.findAll({
+//         where: { quote: part.id},
+//         raw: true
+//     });
+
+//     if (versions.length) {
+//         return {
+//             status: 'failed',
+//             message: 'Part contains versions. Please delete the versions first.'
+//         };
+//     } else {
+//         try {
+//             await db.Parts.destroy({
+//                 where: { id: part.id }
+//             });
+
+//             return {
+//                 status: 'done',
+//                 message: 'Part deleted.'
+//             };
+//         } catch (error) {
+//             throw error;
+//         }
+//     }
+// }

package/dist/server/app/tasks/[slug]/runs/[r_id]/page.js

@@ -0,0 +1,43 @@
+import getTaskDetails from "../../../../../lib/getTaskDetails";
+import ViewRun from "./ViewRun";
+import async from 'async';
+import microlightDB from "../../../../../database/microlight";
+import { notFound } from "next/navigation";
+export default async function Page({
+  params,
+  searchParams
+}) {
+  params = await params;
+  searchParams = await searchParams;
+  const workflow = {
+    getTask: async function () {
+      const task = await getTaskDetails({
+        params
+      });
+      delete task.fn;
+      return task;
+    },
+    getRun: async function () {
+      let run = await microlightDB.Runs.findOne({
+        where: {
+          task: params.slug,
+          id: params.r_id
+        }
+      });
+      if (!run) return notFound();
+      return run.toJSON();
+    },
+    getLogs: async function () {
+      let logs = await microlightDB.Logs.findAll({
+        where: {
+          run: params.r_id
+        },
+        order: [['created_at', 'ASC']]
+      });
+      logs = logs.map(l => l.toJSON());
+      return logs;
+    }
+  };
+  let results = await async.auto(workflow);
+  return <ViewRun params={params} searchParams={searchParams} task={results.getTask} run={results.getRun} logs={results.getLogs} />;
+}

package/dist/server/components/Icon.js

@@ -0,0 +1,22 @@
+/**
+ * there is an issue with mui icons. 
+ * manually setting the icons. 
+ * the svgs of icons are picked up from fontawesome
+ * https://fontawesome.com/search?ic=free
+ */
+import React from 'react';
+import { AspectRatio } from '@mui/joy';
+export default function Icon({
+  color,
+  icon
+}) {
+  return <>
+    <AspectRatio ratio="1" sx={{
+      width: 20
+    }} variant="plain">
+      {icon == 'send' && <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>}
+      {icon == 'folder' && <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32l132.1 0c19.1 0 37.4 7.6 50.9 21.1L289.9 96 448 96c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-256c0-8.8-7.2-16-16-16l-161.4 0c-10.6 0-20.8-4.2-28.3-11.7L213.1 87c-4.5-4.5-10.6-7-17-7L64 80z" /></svg>}
+      {icon == 'ellipsis-vertical' && <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z" /></svg>}
+    </AspectRatio>
+  </>;
+}

package/dist/server/components/Link.js

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import { Link as JoyLink } from '@mui/joy';
+import NextLink from 'next/link';
+import PropTypes from 'prop-types';
+export default function Link({
+  href = '/',
+  sx = {},
+  target = '_self',
+  onClick = () => {},
+  children,
+  Component = null
+}) {
+  if (Component) {
+    return <NextLink href={href} target={target} passHref>
+        <Component onClick={e => {
+        if (onClick) {
+          onClick(e);
+        }
+      }} sx={sx}>
+          {children}
+        </Component>
+      </NextLink>;
+  }
+  const defaultSx = {
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: "none"
+    }
+  };
+  return <JoyLink color="neutral" component={NextLink} underline="none" target={target} href={href} sx={{
+    ...defaultSx,
+    ...sx
+  }} onClick={e => {
+    if (onClick) {
+      onClick(e);
+    }
+  }}>
+      {children}
+    </JoyLink>;
+}
+
+// For Storybook Documentation
+Link.propTypes = {
+  children: PropTypes.node.isRequired,
+  sx: PropTypes.object,
+  onClick: PropTypes.func,
+  Component: PropTypes.elementType,
+  href: PropTypes.string.isRequired,
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])
+};

package/dist/server/components/MLInput.js

@@ -0,0 +1,29 @@
+import { FormControl, FormLabel, Input, Select, Option } from "@mui/joy";
+export default function MLInput({
+  def,
+  slug,
+  searchParams
+}) {
+  return <>
+    <FormControl required={def.required} sx={{
+      mb: 2
+    }}>
+      <FormLabel sx={{
+        mb: 0.25
+      }}>{def.name}:</FormLabel>
+      {['string', 'number', 'date'].includes(def.type) && <Input size="sm" name={slug} placeholder={def.placeholder} defaultValue={searchParams[slug] || def.default || ""} type={def.type} />}
+      {def.type === 'file' &&
+      // Placeholder for future file input implementation
+      <Input {...commonProps} type="file"
+      // Add any file-specific props here
+      />}
+      {def.type === 'dropdown' && <Select size="sm" name={slug} placeholder={def.placeholder} defaultValue={searchParams[slug] || def.default || ""}>
+          {def.options?.map(option => <Option key={option.value} value={option.value}>
+              {option.label || option.value}
+            </Option>)}
+        </Select>}
+    </FormControl>
+    {/* string input - {slug} <br/> */}
+    {/* <pre>{JSON.stringify(def,null,2)}</pre> */}
+  </>;
+}

package/dist/server/components/Navbar/Navbar.js

@@ -0,0 +1,38 @@
+'use client';
+
+// import Logo from '../Logo';
+import { Box, Sheet } from '@mui/joy';
+export default function Navbar({
+  user,
+  signOut
+}) {
+  return <Sheet component="nav" sx={{
+    px: 1,
+    // py: 0.5,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    // boxShadow: 'sm',
+    borderBottom: '1px solid',
+    borderColor: 'divider',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '40px',
+    zIndex: 1000,
+    bgcolor: 'background.surface'
+    // bgcolor: 'white',
+  }}>
+			<Box sx={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    }}>
+				{/* <Logo offering='Transactions' /> */}
+				Microlight
+			</Box>
+
+		</Sheet>;
+}
+;

package/dist/server/components/Navbar/NavbarContainer.js

@@ -0,0 +1,26 @@
+import Navbar from "./Navbar";
+import { Box } from "@mui/joy";
+export default function NavbarContainer({
+  children
+}) {
+  return <>
+    <Navbar /> 
+    <Box component="main" sx={{
+      pt: '40px',
+      display: 'flex'
+    }}>
+      <Box sx={{
+        flex: 1,
+        px: {
+          xs: 1,
+          sm: 1.5
+        },
+        pt: 0.5,
+        pb: 0,
+        minWidth: 0
+      }}>
+        {children}
+      </Box>
+    </Box>
+  </>;
+}

package/dist/server/components/PageHeader.js

@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { Box, Typography, Breadcrumbs } from '@mui/joy';
+import { Link as JoyLink } from '@mui/joy';
+import NextLink from 'next/link';
+
+// Create a basic link component in switchless and import it here
+const BreadcrumbLink = ({
+  href,
+  children
+}) => {
+  return <JoyLink color="primary" component={NextLink} href={href}>
+			{children}
+		</JoyLink>;
+};
+const BreadcrumbsCustom = function ({
+  breadcrumbs
+}) {
+  return <Breadcrumbs separator="›" aria-label="breadcrumbs" sx={{
+    p: 0
+  }}>
+			{breadcrumbs.map((b, index) => <React.Fragment key={index}>
+					{b.href ? <BreadcrumbLink key={b.href} href={b.href}>
+							{b.text}
+						</BreadcrumbLink> : <Typography key={b.text}>{b.text}</Typography>}
+				</React.Fragment>)}
+		</Breadcrumbs>;
+};
+export default function PageHeader({
+  header = "PageHeader",
+  RightButtons = null,
+  level = 'h3',
+  headerLevel = null,
+  breadcrumbs = null
+}) {
+  if (headerLevel) level = headerLevel;
+  const renderHeader = () => {
+    if (React.isValidElement(header)) {
+      return header; // Return React component as is
+    } else if (typeof header === 'string') {
+      return <Typography level={level}>{header}</Typography>;
+    } else if (typeof header === 'object') {
+      const headerParts = Object.values(header);
+      return <Typography level={level}>
+					{headerParts.length === 1 ? <span>
+							{headerParts[0]}
+						</span> : headerParts.map((part, index) => <span key={index} style={{
+          opacity: index === 1 ? 1 : 0.5
+        }}>
+								{part}{index < headerParts.length - 1 && ' '}
+							</span>)}
+				</Typography>;
+    }
+    return null;
+  };
+  return <Box data-cy='page-header' sx={{
+    display: 'flex',
+    flexDirection: {
+      xs: 'column',
+      sm: 'row'
+    },
+    alignItems: {
+      xs: 'flex-start',
+      sm: 'center'
+    },
+    gap: {
+      xs: 1,
+      sm: 1
+    },
+    pt: 0.5
+  }}>
+			<Box sx={{
+      flexGrow: 1
+    }}>
+				{breadcrumbs && <BreadcrumbsCustom breadcrumbs={breadcrumbs} />}
+				{renderHeader()}
+			</Box>
+			{RightButtons && <Box sx={{
+      flexGrow: 0,
+      width: 'auto',
+      margin: "auto 0"
+    }}>
+					{typeof RightButtons === 'function' ? <RightButtons /> : RightButtons}
+				</Box>}
+		</Box>;
+}

package/dist/server/components/StatusChip.js

@@ -0,0 +1,11 @@
+import { Chip } from '@mui/joy';
+function chipStatusColor(status) {
+  if (status === 'complete') return 'success';else if (status === 'pending') return 'warning';else if (status === 'running') return 'primary';else return 'danger';
+}
+export default function StatusChip({
+  status
+}) {
+  return <Chip variant="soft" color={chipStatusColor(status)} size="sm">
+      {status || 'pending'}
+    </Chip>;
+}

package/dist/server/components/Test.js

@@ -0,0 +1,5 @@
+export default function Test() {
+  return <>
+    this is a test component
+  </>;
+}

package/dist/server/components/TopLoader.js

@@ -0,0 +1,8 @@
+"use client";
+
+import { AppProgressBar } from 'next-nprogress-bar';
+export default function TopLoader() {
+  return <AppProgressBar color="#0d99fd" height="4px" options={{
+    showSpinner: false
+  }} />;
+}