✨ add ping service toggle

public/locales/en/layout/add-service-app-shelf.json

@@ -97,6 +97,9 @@
             "advancedOptions": {
                 "title": "Advanced Options",
                 "form": {
+                    "ping": {
+                        "label": "Ping Service"
+                    },
                     "httpStatusCodes": {
                         "label": "HTTP Status Codes",
                         "placeholder": "Select valid status codes",

src/components/AppShelf/AddAppShelfItem.tsx

@@ -10,6 +10,7 @@ import {
   MultiSelect,
   PasswordInput,
   Select,
+  Space,
   Stack,
   Switch,
   Tabs,
@@ -18,13 +19,13 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useDebouncedValue } from '@mantine/hooks';
 import { IconApps } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { useDebouncedValue } from '@mantine/hooks';
-import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
-import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
+import { ServiceTypeList, StatusCodes, tryMatchPort } from '../../tools/types';
 import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
@@ -109,6 +110,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       username: props.username ?? undefined,
       password: props.password ?? undefined,
       openedUrl: props.openedUrl ?? undefined,
+      ping: props.ping ?? true,
       status: props.status ?? ['200'],
       newTab: props.newTab ?? true,
     },
@@ -177,7 +179,11 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           if (newForm.newTab === true) newForm.newTab = undefined;
           if (newForm.openedUrl === '') newForm.openedUrl = undefined;
           if (newForm.category === null) newForm.category = undefined;
-          if (newForm.status.length === 1 && newForm.status[0] === '200') {
+          if (newForm.ping === true) newForm.ping = undefined;
+          if (
+            (newForm.status.length === 1 && newForm.status[0] === '200') ||
+            newForm.ping === false
+          ) {
             delete newForm.status;
           }
           // If service already exists, update it.
@@ -210,6 +216,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             <Tabs.Tab value="Advanced Options">{t('modal.tabs.advancedOptions.title')}</Tabs.Tab>
           </Tabs.List>
           <Tabs.Panel value="Options">
+            <Space h="sm" />
             <Stack>
               <TextInput
                 required
@@ -394,7 +401,14 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             </Stack>
           </Tabs.Panel>
           <Tabs.Panel value={t('modal.tabs.advancedOptions.title')}>
+            <Space h="sm" />
             <Stack>
+              <Switch
+                label={t('modal.tabs.advancedOptions.form.ping.label')}
+                defaultChecked={form.values.ping}
+                {...form.getInputProps('ping')}
+              />
+              {form.values.ping && (
                 <MultiSelect
                   required
                   label={t('modal.tabs.advancedOptions.form.httpStatusCodes.label')}
@@ -409,6 +423,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                   searchable
                   {...form.getInputProps('status')}
                 />
+              )}
               <Switch
                 label={t('modal.tabs.advancedOptions.form.openServiceInNewTab.label')}
                 defaultChecked={form.values.newTab}

src/components/AppShelf/AppShelfItem.tsx

@@ -1,21 +1,21 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import {
-  Text,
-  Card,
   Anchor,
   AspectRatio,
+  Card,
   Center,
   createStyles,
-  useMantineColorScheme,
   Image,
+  Text,
+  useMantineColorScheme,
 } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { serviceItem } from '../../tools/types';
 import PingComponent from '../../modules/ping/PingModule';
-import AppShelfMenu from './AppShelfMenu';
 import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
+import AppShelfMenu from './AppShelfMenu';
 
 const useStyles = createStyles((theme) => ({
   item: {
@@ -134,7 +134,7 @@ export function AppShelfItem(props: any) {
                 </Anchor>
               </motion.i>
             </AspectRatio>
-            <PingComponent url={service.url} status={service.status} />
+            {service.ping !== false && <PingComponent url={service.url} status={service.status} />}
           </Card.Section>
         </Center>
       </Card>

src/tools/types.ts

@@ -183,5 +183,6 @@ export interface serviceItem {
   username?: string;
   openedUrl?: string;
   newTab?: boolean;
+  ping?: boolean;
   status?: string[];
 }