Opinionated style review

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+FROM registry.hub.docker.com/library/node:24.1-bookworm@sha256:c332080545f1de96deb1c407e6fbe9a7bc2be3645e127845fdcce57a7af3cf56 as dev
+
+ENV APP_DIR /app
+
+# install pre-requisites
+RUN apt-get update && \
+    apt-get install -y curl && \
+    apt-get clean
+
+
+# COPY . ${APP_DIR}
+WORKDIR ${APP_DIR}
+
+
+# CMD ["npm", "run", "preview"]
+CMD bash

.devcontainer/devcontainer.json

@@ -0,0 +1,61 @@
+{
+  "name": "Squid - User Interfaces",
+  "build": {
+    // Sets the run context to one level up instead of the .devcontainer folder.
+    "context": "..",
+    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
+    "dockerfile": "./Dockerfile",
+    "target": "dev"
+  },
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  "features": {
+    // Some default things like git config, zsh and ssh keys
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "upgradePackages": false
+    }
+  },
+  // "initializeCommand": "bash -c 'for i in $HOME/.inputrc; do [ -f $i ] || touch $i; done'",
+  "runArgs": [
+    "--net=host",
+    "--security-opt=label=disable",
+    // Mount the user sockets folder
+    "-v${localEnv:XDG_RUNTIME_DIR}:${localEnv:XDG_RUNTIME_DIR}",
+    // add the docker socket environment variable to the container
+    "-e=DOCKER_HOST=${localEnv:DOCKER_HOST}"
+  ],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [
+    8080
+  ],
+  "mounts": [
+    "source=${localEnv:HOME}/.ssh,target=/root/.ssh,type=bind",
+    "source=${localEnv:HOME}/.inputrc,target=/root/.inputrc,type=bind"
+  ],
+  "customizations": {
+    "vscode": {
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": [
+        "bierner.markdown-mermaid",
+        "christian-kohler.path-intellisense",
+        "eamodio.gitlens",
+        "espenp.prettier-vscode",
+        "foxundermoon.shell-format",
+        "hediet.vscode-drawio",
+        "rvest.vs-code-prettier-eslint",
+        "rodrigovallades.es7-react-js",
+        "Vercel.turbo-vsc",
+        "kamikillerto.vscode-colorize",
+        "vitest.explorer",
+        "naumovs.color-highlight"
+      ]
+    }
+  },
+  // make the workspace folder the same inside and outside of the container
+  "workspaceMount": "source=${localWorkspaceFolder},target=${localWorkspaceFolder},type=bind",
+  "workspaceFolder": "${localWorkspaceFolder}",
+  // for rootless we must not to mess with user ids inside the container
+  "updateRemoteUserUID": false,
+  // for rootless we are root inside the container
+  "remoteUser": "root",
+  "postStartCommand": "yarn"
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": false,
+  "singleQuote": true
+}

eslint.config.js

@@ -0,0 +1,6 @@
+const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
+
+module.exports = [
+    // Any other config imports go at the top
+    eslintPluginPrettierRecommended,
+];

package.json

@@ -31,6 +31,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "lint": "yarn prettier \"src/**/*.{js,jsx,ts,tsx}\" --write",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -53,7 +54,9 @@
     ]
   },
   "devDependencies": {
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
     "openapi-typescript": "^6.7.2",
-    "prettier": "3.3.1"
+    "prettier": "^3.5.3"
   }
-}
+}

src/components/InstrumentInfoCard.tsx

@@ -0,0 +1,53 @@
+
+import {
+    Card,
+    CardBody,
+    CardHeader,
+    Image,
+    Link,
+    Text
+} from '@chakra-ui/react'
+
+import { Link as LinkRouter } from 'react-router-dom'
+import { InstrumentInfo } from 'utils/types'
+
+
+const getUrl = (endpoint: string) => {
+    return process.env.REACT_APP_HUB_ENDPOINT + endpoint
+}
+
+
+type InstrumentInfoCardProps = {
+    sessionStorageSetup: (ininfo: InstrumentInfo) => void
+    ini: InstrumentInfo
+}
+
+export function InstrumentInfoCard({ sessionStorageSetup, ini }: InstrumentInfoCardProps) {
+    const imgUrl = getUrl(
+        `instrument/${ini.instrument_name}/image`
+    )
+    const linkTarget = process.env.REACT_APP_BACKEND_AUTH_TYPE ===
+        'cookie'
+        ? `/home`
+        : `/login`
+
+    return <Link
+        w={{ base: '100%', md: '19.6%' }}
+        _hover={{ textDecor: 'none' }}
+        as={LinkRouter}
+        to={linkTarget}
+    >
+        <Card
+            align="center"
+            onClick={() => sessionStorageSetup(ini)}
+        >
+            <CardHeader>
+                <Image
+                    src={imgUrl} />
+            </CardHeader>
+            <CardBody>
+                <Text>{ini.display_name}</Text>
+            </CardBody>
+        </Card>
+    </Link>
+}

src/components/SessionRow.tsx

@@ -0,0 +1,208 @@
+
+import {
+    Button,
+    GridItem,
+    Heading,
+    HStack,
+    IconButton,
+    Link,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Stack,
+    Stat,
+    StatLabel,
+    Tooltip,
+    useDisclosure,
+    VStack
+} from '@chakra-ui/react'
+
+import { sessionTokenCheck } from 'loaders/jwt'
+import { finaliseSession } from 'loaders/rsyncers'
+import { deleteSessionData } from 'loaders/session_clients'
+import { GiMagicBroom } from 'react-icons/gi'
+import { MdDelete } from 'react-icons/md'
+import { Link as LinkRouter } from 'react-router-dom'
+import { PuffLoader } from 'react-spinners'
+
+import React, { useEffect } from 'react'
+import { Session } from "utils/types"
+
+export const SessionRow = (session: Session) => {
+    const {
+        isOpen: isOpenDelete,
+        onOpen: onOpenDelete,
+        onClose: onCloseDelete,
+    } = useDisclosure()
+    const {
+        isOpen: isOpenCleanup,
+        onOpen: onOpenCleanup,
+        onClose: onCloseCleanup,
+    } = useDisclosure()
+
+    const cleanupSession = async (sessid: number) => {
+        await finaliseSession(sessid)
+        onCloseCleanup()
+    }
+
+    const [sessionActive, setSessionActive] = React.useState(false)
+
+    useEffect(() => {
+        sessionTokenCheck(session.id).then((active) => setSessionActive(active))
+    }, [])
+
+    if (!session) {
+        return <VStack w="100%" spacing={0}>
+            <Stack w="100%" spacing={5} py="0.8em">
+                <GridItem colSpan={5}>
+                    <Heading textAlign="center" py={4} variant="notFound">
+                        None Found
+                    </Heading>
+                </GridItem>
+
+            </Stack>
+        </VStack>
+    }
+
+    return (
+        <VStack w="100%" spacing={0}>
+            <Stack w="100%" spacing={5} py="0.8em">
+                <HStack>
+                    <Modal
+                        isOpen={isOpenDelete}
+                        onClose={onCloseDelete}
+                    >
+                        <ModalOverlay />
+                        <ModalContent>
+                            <ModalHeader>
+                                Confirm removing session {session.name}{' '}
+                                from list
+                            </ModalHeader>
+                            <ModalCloseButton />
+                            <ModalBody>
+                                Are you sure you want to continue? This
+                                action is not reversible
+                            </ModalBody>
+                            <ModalFooter>
+                                <Button
+                                    colorScheme="blue"
+                                    mr={3}
+                                    onClick={onCloseDelete}
+                                >
+                                    Close
+                                </Button>
+                                <Button
+                                    variant="ghost"
+                                    onClick={() => {
+                                        deleteSessionData(
+                                            session.id
+                                        ).then(() =>
+                                            window.location.reload()
+                                        )
+                                    }}
+                                >
+                                    Confirm
+                                </Button>
+                            </ModalFooter>
+                        </ModalContent>
+                    </Modal>
+                    <Modal
+                        isOpen={isOpenCleanup}
+                        onClose={onCloseCleanup}
+                    >
+                        <ModalOverlay />
+                        <ModalContent>
+                            <ModalHeader>
+                                Confirm removing files for session{' '}
+                                {session.name}
+                            </ModalHeader>
+                            <ModalCloseButton />
+                            <ModalBody>
+                                Are you sure you want to continue? This
+                                action is not reversible
+                            </ModalBody>
+                            <ModalFooter>
+                                <Button
+                                    colorScheme="blue"
+                                    mr={3}
+                                    onClick={onCloseCleanup}
+                                >
+                                    Close
+                                </Button>
+                                <Button
+                                    variant="ghost"
+                                    onClick={() => {
+                                        cleanupSession(session.id)
+                                    }}
+                                >
+                                    Confirm
+                                </Button>
+                            </ModalFooter>
+                        </ModalContent>
+                    </Modal>
+                    <Tooltip label={session.name}>
+                        <Link
+                            key={session.id}
+                            _hover={{ textDecor: 'none' }}
+                            as={LinkRouter}
+                            display={'flex'}
+                            to={`../sessions/${session.id ?? 0}`}
+                        >
+                            <Stat
+                                _hover={{
+                                    borderColor: 'murfey.400',
+                                }}
+                                bg={'murfey.400'}
+                                overflow="auto"
+                                w="calc(100%)"
+                                p={2}
+                                border="1px solid grey"
+                                borderRadius={5}
+                                display={'flex'}
+                            >
+                                <HStack>
+                                    <StatLabel
+                                        whiteSpace="nowrap"
+                                        textOverflow="ellipsis"
+                                        overflow="hidden"
+                                    >
+                                        {session.name}: {session.id}
+                                    </StatLabel>
+                                    {sessionActive ? (
+                                        <PuffLoader
+                                            size={25}
+                                            color="red"
+                                        />
+                                    ) : (
+                                        <></>
+                                    )}
+                                </HStack>
+                            </Stat>
+                        </Link>
+                    </Tooltip>
+                    <Tooltip label="Remove from list">
+                        <IconButton
+                            aria-label="Delete session"
+                            icon={<MdDelete />}
+                            onClick={onOpenDelete}
+                            isDisabled={sessionActive}
+                        />
+                    </Tooltip>
+                    <Tooltip label="Clean up visit files">
+                        <IconButton
+                            aria-label="Clean up session"
+                            icon={<GiMagicBroom />}
+                            onClick={onOpenCleanup}
+                            isDisabled={!sessionActive}
+                        />
+                    </Tooltip>
+                </HStack>
+
+            </Stack>
+        </VStack >
+    )
+}