feat: refactor sortable group component and add edit body component

src/client/components/DeprecatedBadge.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Badge } from './ui/badge';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { useTranslation } from '@i18next-toolkit/react';
+
+interface DeprecatedBadgeProps {
+  tip?: string;
+}
+
+export const DeprecatedBadge: React.FC<DeprecatedBadgeProps> = React.memo(
+  (props) => {
+    const { t } = useTranslation();
+
+    const el = (
+      <Badge className="mx-1 px-1 py-0.5 text-xs" variant="secondary">
+        {t('Deprecated')}
+      </Badge>
+    );
+
+    if (!props.tip) {
+      return el;
+    } else {
+      return (
+        <Tooltip>
+          <TooltipTrigger>{el}</TooltipTrigger>
+          <TooltipContent>
+            <p>{props.tip}</p>
+          </TooltipContent>
+        </Tooltip>
+      );
+    }
+  }
+);
+DeprecatedBadge.displayName = 'DeprecatedBadge';

src/client/components/Sortable/SortableContext.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { DragDropContext, DropResult } from 'react-beautiful-dnd';
 import { useEvent } from '@/hooks/useEvent';
 import { reorder } from '@/utils/reorder';
-import { BaseSortableData } from './types';
+import { SortableItem } from './types';
 
-interface SortableContextProps<T extends BaseSortableData = BaseSortableData> {
+interface SortableContextProps<T extends SortableItem> {
   list: T[];
   onChange: (list: T[]) => void;
   children: React.ReactNode;
 }
 
-export const SortableContext = <T extends BaseSortableData>(
+export const SortableContext = <T extends SortableItem>(
   props: SortableContextProps<T>
 ) => {
   const { list, onChange, children } = props;
@@ -37,50 +37,50 @@ export const SortableContext = <T extends BaseSortableData>(
 
       const final = [...list];
       const sourceGroupIndex = final.findIndex(
-        (group) => group.id === result.source.droppableId
+        (group) => group.key === result.source.droppableId
       );
       if (sourceGroupIndex === -1) {
         return;
       }
       const destinationGroupIndex = final.findIndex(
-        (group) => group.id === result.destination?.droppableId
+        (group) => group.key === result.destination?.droppableId
       );
       if (destinationGroupIndex === -1) {
         return;
       }
 
       if (sourceGroupIndex === destinationGroupIndex) {
-        if (!('items' in final[sourceGroupIndex])) {
+        if (!('children' in final[sourceGroupIndex])) {
           return;
         }
 
         // same group
-        final[sourceGroupIndex].items = reorder(
+        final[sourceGroupIndex].children = reorder(
-          final[sourceGroupIndex].items!,
+          final[sourceGroupIndex].children!,
           result.source.index,
           result.destination.index
         );
       } else {
         // cross group
         if (
-          !('items' in final[sourceGroupIndex]) ||
+          !('children' in final[sourceGroupIndex]) ||
-          !('items' in final[destinationGroupIndex])
+          !('children' in final[destinationGroupIndex])
         ) {
           return;
         }
 
         const sourceGroupItems = Array.from(
-          final[sourceGroupIndex].items ?? []
+          final[sourceGroupIndex].children ?? []
         );
         const [removed] = sourceGroupItems.splice(result.source.index, 1);
 
         const destinationGroupItems = Array.from(
-          final[destinationGroupIndex].items ?? []
+          final[destinationGroupIndex].children ?? []
         );
         destinationGroupItems.splice(result.destination.index, 0, removed);
 
-        final[sourceGroupIndex].items = sourceGroupItems;
+        final[sourceGroupIndex].children = sourceGroupItems;
-        final[destinationGroupIndex].items = destinationGroupItems;
+        final[destinationGroupIndex].children = destinationGroupItems;
       }
 
       onChange(final);

src/client/components/Sortable/SortableGroup.tsx

@@ -3,58 +3,70 @@ import { SortableContext } from './SortableContext';
 import { StrictModeDroppable } from './StrictModeDroppable';
 import { useEvent } from '@/hooks/useEvent';
 import { Draggable } from 'react-beautiful-dnd';
-import { BaseSortableData, ExtractGroup, ExtractItem } from './types';
+import { SortableGroupItem, SortableItem, SortableLeafItem } from './types';
 
-interface SortableGroupProps<T extends BaseSortableData> {
+interface SortableGroupProps<GroupProps, ItemProps> {
-  list: T[];
+  list: SortableItem<GroupProps, ItemProps>[];
-  onChange: (list: T[]) => void;
+  onChange: (list: SortableItem<GroupProps, ItemProps>[]) => void;
   renderGroup: (
-    group: ExtractGroup<T>,
+    group: SortableGroupItem<GroupProps, ItemProps>,
-    children: React.ReactNode
+    children: React.ReactNode,
+    level: number
+  ) => React.ReactNode;
+  renderItem: (
+    item: SortableLeafItem<ItemProps>,
+    index: number,
+    group: SortableGroupItem<GroupProps, ItemProps>
   ) => React.ReactNode;
-  renderItem: (item: ExtractItem<T>) => React.ReactNode;
 }
 
-export const SortableGroup = <T extends BaseSortableData>(
+export const SortableGroup = <GroupProps, ItemProps>(
-  props: SortableGroupProps<T>
+  props: SortableGroupProps<GroupProps, ItemProps>
 ) => {
   const { list, onChange, renderGroup, renderItem } = props;
 
-  const renderItemEl = useEvent((item: ExtractItem<T>, index: number) => {
+  const renderItemEl = useEvent(
+    (
+      item: SortableLeafItem<ItemProps>,
+      index: number,
+      group: SortableGroupItem<GroupProps, ItemProps>
+    ) => {
       return (
-      <Draggable key={item.id} draggableId={item.id} index={index}>
+        <Draggable key={item.key} draggableId={item.key} index={index}>
           {(dragProvided) => (
             <div
               ref={dragProvided.innerRef}
               {...dragProvided.draggableProps}
               {...dragProvided.dragHandleProps}
             >
-            {renderItem(item)}
+              {renderItem(item, index, group)}
             </div>
           )}
         </Draggable>
       );
-  });
+    }
+  );
 
-  const renderGroupEl = useEvent((group: ExtractGroup<T>, level = 0) => {
+  const renderGroupEl = useEvent(
+    (group: SortableGroupItem<GroupProps, ItemProps>, level = 0) => {
       return (
         <StrictModeDroppable
-        droppableId={group.id}
+          droppableId={group.key}
-        type={group.type}
+          type={level === 0 ? 'root' : 'group'}
-        key={group.id}
+          key={group.key}
         >
           {(dropProvided) => (
             <div ref={dropProvided.innerRef} {...dropProvided.droppableProps}>
               {renderGroup(
                 group,
                 <>
-                {group.items.map((item, index) =>
+                  {group.children.map((item, index) =>
-                  item.type === 'item' ? (
+                    !('children' in item) ? (
-                    renderItemEl(item as ExtractItem<T>, index)
+                      renderItemEl(item, index, group)
                     ) : (
                       <Draggable
-                      draggableId={item.id}
+                        draggableId={item.key}
-                      key={item.id}
+                        key={item.key}
                         index={index}
                       >
                         {(dragProvided) => (
@@ -63,13 +75,14 @@ export const SortableGroup = <T extends BaseSortableData>(
                             {...dragProvided.draggableProps}
                             {...dragProvided.dragHandleProps}
                           >
-                          {renderGroupEl(item as ExtractGroup<T>, level + 1)}
+                            {renderGroupEl(item, level + 1)}
                           </div>
                         )}
                       </Draggable>
                     )
                   )}
-              </>
+                </>,
+                level
               )}
 
               {dropProvided.placeholder}
@@ -77,16 +90,19 @@ export const SortableGroup = <T extends BaseSortableData>(
           )}
         </StrictModeDroppable>
       );
-  });
+    }
+  );
 
   return (
-    <SortableContext<T> list={list} onChange={onChange}>
+    <SortableContext<SortableItem<GroupProps, ItemProps>>
+      list={list}
+      onChange={onChange}
+    >
       {renderGroupEl(
         {
-          id: 'root',
+          key: 'root',
-          type: 'root' as const,
+          children: list,
-          items: list,
+        } as SortableGroupItem<GroupProps, ItemProps>,
-        } as any,
         0
       )}
     </SortableContext>

src/client/components/Sortable/types.ts

@@ -1,33 +1,14 @@
 import { Id } from 'react-beautiful-dnd';
 
-export type BaseSortableItem = {
+export type SortableItem<GroupProps = unknown, ItemProps = unknown> =
-  type: 'item';
+  | SortableLeafItem<ItemProps>
-  id: Id;
+  | SortableGroupItem<GroupProps, ItemProps>;
-};
 
-export type BaseSortableGroup<GroupProps = unknown, ItemProps = unknown> = {
+export type SortableGroupItem<GroupProps = unknown, ItemProps = unknown> = {
-  type: 'group';
+  key: Id;
-  id: Id;
+  children: SortableItem<GroupProps, ItemProps>[];
-  title?: string;
+} & GroupProps;
-  items: ((BaseSortableGroup & GroupProps) | (BaseSortableItem & ItemProps))[];
-};
 
-export type BaseSortableRoot<GroupProps = unknown> = {
+export type SortableLeafItem<ItemProps = unknown> = {
-  type: 'root';
+  key: Id;
-  id: Id;
+} & ItemProps;
-  title?: string;
-  items: (BaseSortableItem & GroupProps)[];
-};
-
-export type BaseSortableData =
-  | BaseSortableRoot
-  | BaseSortableGroup
-  | BaseSortableItem;
-
-export type SortableData<GroupProps = unknown, ItemProps = unknown> =
-  | BaseSortableRoot<GroupProps>
-  | (BaseSortableGroup<GroupProps, ItemProps> & GroupProps)
-  | (BaseSortableItem & ItemProps);
-
-export type ExtractGroup<T> = T extends { type: 'group' } ? T : never;
-export type ExtractItem<T> = T extends { type: 'item' } ? T : never;

src/client/components/monitor/StatusPage/EditForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MonitorPicker, MonitorPickerOld } from '../MonitorPicker';
+import { MonitorPicker } from '../MonitorPicker';
 import { useTranslation } from '@i18next-toolkit/react';
 import { Button } from '@/components/ui/button';
 import { LuMinusCircle, LuPlus } from 'react-icons/lu';
@@ -23,17 +23,11 @@ import { domainRegex, slugRegex } from '@tianji/shared';
 import { useElementSize } from '@/hooks/useResizeObserver';
 import { Switch } from '@/components/ui/switch';
 import { Separator } from '@/components/ui/separator';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { ColorTag } from '@/components/ColorTag';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { CollapsibleTrigger } from '@radix-ui/react-collapsible';
 import { CaretSortIcon } from '@radix-ui/react-icons';
+import { DeprecatedBadge } from '@/components/DeprecatedBadge';
+import { groupItemSchema, MonitorStatusPageServiceList } from './ServiceList';
 
 const Text = Typography.Text;
 
@@ -46,6 +40,15 @@ const editFormSchema = z.object({
     .regex(domainRegex, 'Invalid domain')
     .or(z.literal(''))
     .optional(),
+  body: z
+    .object({
+      groups: z.array(groupItemSchema),
+    })
+    .default({ groups: [] }),
+
+  /**
+   * @deprecated
+   */
   monitorList: z.array(
     z.object({
       id: z.string(),
@@ -77,10 +80,20 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
         description: '',
         domain: '',
         monitorList: [],
+        body: { groups: [] },
       },
     });
 
-    const { fields, append, remove } = useFieldArray({
+    const showDeprecatedMonitorList = props.initialValues
+      ? Array.isArray(props.initialValues.monitorList) &&
+        props.initialValues.monitorList.length > 0
+      : false;
+
+    const {
+      fields: oldMonitorFields,
+      append,
+      remove,
+    } = useFieldArray({
       control: form.control,
       name: 'monitorList',
       keyName: 'key',
@@ -191,14 +204,37 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
             </CollapsibleContent>
           </Collapsible>
 
+          {/* Body */}
+          <FormField
+            control={form.control}
+            name="body.groups"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('Body')}</FormLabel>
+                <FormControl>
+                  <MonitorStatusPageServiceList
+                    {...field}
+                    value={field.value ?? []}
+                    onChange={field.onChange}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           {/* MonitorList */}
+          {showDeprecatedMonitorList && (
             <FormField
               control={form.control}
               name="monitorList"
               render={() => (
-              <FormItem>
+                <FormItem className="opacity-50">
-                <FormLabel>{t('Monitor List')}</FormLabel>
+                  <FormLabel>
-                {fields.map((field, i) => (
+                    {t('Monitor List')}
+                    <DeprecatedBadge tip={t('Please use Body field')} />
+                  </FormLabel>
+                  {oldMonitorFields.map((field, i) => (
                     <>
                       {i !== 0 && <Separator />}
 
@@ -259,6 +295,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
                 </FormItem>
               )}
             />
+          )}
 
           <div className="!mt-8 flex justify-end gap-2">
             <Button type="submit" loading={isLoading}>

src/client/components/monitor/StatusPage/ServiceList.tsx

@@ -1,59 +1,243 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { SortableData } from '@/components/Sortable/types';
+import { SortableItem } from '@/components/Sortable/types';
 import { SortableGroup } from '@/components/Sortable/SortableGroup';
+import { z } from 'zod';
+import { useEvent } from '@/hooks/useEvent';
+import { v1 as uuid } from 'uuid';
+import { Button } from '@/components/ui/button';
+import { useTranslation } from '@i18next-toolkit/react';
+import { LuMinusCircle, LuPlusCircle, LuTrash } from 'react-icons/lu';
+import { cn } from '@/utils/style';
+import { Separator } from '@/components/ui/separator';
+import { MonitorPicker } from '../MonitorPicker';
+import { Switch } from '@/components/ui/switch';
+import { set } from 'lodash-es';
 
-type MonitorStatusPageServiceItem = SortableData<{}, { title: string }>;
+export const leafItemSchema = z.object({
+  key: z.string(),
+  id: z.string(),
+  type: z.enum(['monitor']),
+  showCurrent: z.boolean().default(false).optional(),
+});
 
-export const MonitorStatusPageServiceList: React.FC = React.memo(() => {
+export const groupItemSchema = z.object({
-  const [list, setList] = useState<MonitorStatusPageServiceItem[]>([
+  key: z.string(),
+  title: z.string(),
+  children: z.array(leafItemSchema),
+});
+
+type GroupItemProps = Omit<z.infer<typeof groupItemSchema>, 'key' | 'children'>;
+type LeafItemProps = Omit<z.infer<typeof leafItemSchema>, 'key'>;
+
+export type MonitorStatusPageServiceItem = SortableItem<
+  GroupItemProps,
+  LeafItemProps
+>;
+
+interface MonitorStatusPageServiceListProps {
+  value: MonitorStatusPageServiceItem[];
+  onChange: (list: MonitorStatusPageServiceItem[]) => void;
+}
+export const MonitorStatusPageServiceList: React.FC<MonitorStatusPageServiceListProps> =
+  React.memo((props) => {
+    const { t } = useTranslation();
+    const handleAddGroup = useEvent(() => {
+      props.onChange([
+        ...props.value,
         {
-      type: 'group',
+          key: uuid(),
-      title: 'Group 1',
+          title: 'Default',
-      id: 'group1',
+          children: [],
-      items: [
+        },
+      ]);
+    });
+
+    const handleAddItem = useEvent((groupKey: string) => {
+      const index = props.value.findIndex((item) => item.key === groupKey);
+      if (index === -1) {
+        return;
+      }
+
+      const newList = [...props.value];
+
+      if (!('children' in newList[index])) {
+        return;
+      }
+
+      newList[index].children = [
+        ...newList[index].children,
         {
-          id: 'item1',
+          key: uuid(),
-          type: 'item',
+          id: '',
-          title: 'Item 1',
+          type: 'monitor',
+          showCurrent: false,
         },
-        {
+      ] as MonitorStatusPageServiceItem[];
-          id: 'item2',
+
-          type: 'item',
+      props.onChange(newList);
-          title: 'Item 2',
+    });
-        },
+
-      ],
+    const handleDeleteGroup = useEvent((groupKey: string) => {
-    },
+      const index = props.value.findIndex((item) => item.key === groupKey);
-    {
+      if (index === -1) {
-      type: 'group',
+        return;
-      title: 'Group 2',
+      }
-      id: 'group2',
+
-      items: [
+      const newList = [...props.value];
-        {
+
-          id: 'item3',
+      newList.splice(index, 1);
-          type: 'item',
+
-          title: 'Item 3',
+      props.onChange(newList);
-        },
+    });
-        {
+
-          id: 'item4',
+    const handleDeleteItem = useEvent((groupKey: string, itemKey: string) => {
-          type: 'item',
+      const newList = [...props.value];
-          title: 'Item 4',
+      const groupIndex = newList.findIndex((item) => item.key === groupKey);
-        },
+      if (groupIndex === -1) {
-      ],
+        return;
-    },
+      }
-  ] as MonitorStatusPageServiceItem[]);
+      const group = newList[groupIndex];
+      if (!('children' in group)) {
+        return;
+      }
+
+      const itemIndex = group.children.findIndex(
+        (item) => item.key === itemKey
+      );
+      if (itemIndex === -1) {
+        return;
+      }
+
+      group.children.splice(itemIndex, 1);
+
+      props.onChange(newList);
+    });
+
+    const handleUpdateItem = useEvent(
+      (groupKey: string, itemKey: string, fieldName: string, value: any) => {
+        const newList = [...props.value];
+        const groupIndex = newList.findIndex((item) => item.key === groupKey);
+        if (groupIndex === -1) {
+          return;
+        }
+        const group = newList[groupIndex];
+        if (!('children' in group)) {
+          return;
+        }
+
+        const itemIndex = group.children.findIndex(
+          (item) => item.key === itemKey
+        );
+        if (itemIndex === -1) {
+          return;
+        }
+
+        set(group, `children[${itemIndex}].${fieldName}`, value);
+
+        props.onChange(newList);
+      }
+    );
 
     return (
-    <SortableGroup
+      <div className="rounded-lg border p-2">
-      list={list}
+        <SortableGroup<GroupItemProps, LeafItemProps>
-      onChange={(list) => setList(list)}
+          list={props.value}
-      renderGroup={(group, children) => (
+          onChange={props.onChange}
+          renderGroup={(group, children, level) => (
             <div>
-          <div>{group.title}</div>
+              <div className={cn('flex items-center gap-2')}>
-          <div className="p-2">{children}</div>
+                <span>{group.title}</span>
+
+                {level > 0 && (
+                  <>
+                    <Button
+                      className="h-6 w-6"
+                      variant="outline"
+                      size="icon"
+                      type="button"
+                      Icon={LuPlusCircle}
+                      onClick={() => handleAddItem(group.key)}
+                    />
+
+                    <Button
+                      className="h-6 w-6"
+                      variant="outline"
+                      size="icon"
+                      type="button"
+                      Icon={LuTrash}
+                      onClick={() => handleDeleteGroup(group.key)}
+                    />
+                  </>
+                )}
+              </div>
+              <div
+                className={cn(level > 0 && 'border-l-4 border-gray-600 p-2')}
+              >
+                {children}
+              </div>
             </div>
           )}
-      renderItem={(item) => <div>{item.id}</div>}
+          renderItem={(item, i, group) => {
+            if (item.type === 'monitor') {
+              return (
+                <div key={item.key}>
+                  {i !== 0 && <Separator />}
+
+                  <div className="mb-2 flex flex-col gap-2">
+                    <MonitorPicker
+                      value={item.id}
+                      onValueChange={(val) =>
+                        handleUpdateItem(group.key, item.key, 'id', val)
+                      }
                     />
+
+                    <div className="flex flex-1 items-center">
+                      <Switch
+                        checked={item.showCurrent ?? false}
+                        onCheckedChange={(val) =>
+                          handleUpdateItem(
+                            group.key,
+                            item.key,
+                            'showCurrent',
+                            val
+                          )
+                        }
+                      />
+
+                      <span className="ml-1 flex-1 align-middle text-sm">
+                        {t('Show Latest Value')}
+                      </span>
+
+                      <LuMinusCircle
+                        className="cursor-pointer text-lg"
+                        onClick={() => handleDeleteItem(group.key, item.key)}
+                      />
+                    </div>
+                  </div>
+                </div>
               );
-});
+            }
+
+            return null;
+          }}
+        />
+
+        {Array.isArray(props.value) && props.value.length === 0 && (
+          <p className="text-xs opacity-50">
+            {t('No any group has been created, click button to create one')}
+          </p>
+        )}
+
+        <Button
+          className="mt-2"
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={handleAddGroup}
+        >
+          {t('Add Group')}
+        </Button>
+      </div>
+    );
+  });
 MonitorStatusPageServiceList.displayName = 'MonitorStatusPageServiceList';

src/client/components/ui/form.tsx

@@ -87,7 +87,7 @@ FormItem.displayName = "FormItem"
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {optional?: boolean}
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { optional?: boolean }
 >(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField()
   const { t } = useTranslation()

src/client/routes/playground.tsx

@@ -1,6 +1,10 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
 import { isDev } from '@/utils/env';
-import { MonitorStatusPageServiceList } from '@/components/monitor/StatusPage/ServiceList';
+import {
+  MonitorStatusPageServiceItem,
+  MonitorStatusPageServiceList,
+} from '@/components/monitor/StatusPage/ServiceList';
+import { useState } from 'react';
 
 export const Route = createFileRoute('/playground')({
   beforeLoad: () => {
@@ -13,13 +17,35 @@ export const Route = createFileRoute('/playground')({
   component: PageComponent,
 });
 
-function PageComponent(this: {
+function PageComponent() {
-  beforeLoad: () => void;
+  const [list, setList] = useState<MonitorStatusPageServiceItem[]>([
-  component: () => import('react/jsx-runtime').JSX.Element;
+    {
-}) {
+      title: 'Group 1',
+      key: 'group1',
+      children: [
+        {
+          key: 'item1',
+          id: 'fooo',
+          type: 'monitor',
+        },
+      ],
+    },
+    {
+      title: 'Group 2',
+      key: 'group2',
+      children: [
+        {
+          key: 'item2',
+          id: 'barr',
+          type: 'monitor',
+        },
+      ],
+    },
+  ]);
+
   return (
     <div>
-      <MonitorStatusPageServiceList />
+      <MonitorStatusPageServiceList value={list} onChange={setList} />
     </div>
   );
 }