feat(notification): add option to convert metric units in request body (#147)

* feat(notification): add option to convert metric units in request body

* rename fields

* add prettierignore

* chore: auto-fix linting and formatting issues

.prettierignore

@@ -0,0 +1 @@
+src/main.tsx

src/components/notifier.tsx

@@ -57,6 +57,7 @@ const notificationFormSchema = z.object({
     request_body: z.string(),
     verify_tls: asOptionalField(z.boolean()),
     skip_check: asOptionalField(z.boolean()),
+    format_metric_units: asOptionalField(z.boolean()),
 })
 
 export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
@@ -75,6 +76,7 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                   request_body: data.request_body ?? "",
                   verify_tls: (data as any).verify_tls ?? false,
                   skip_check: (data as any).skip_check ?? false,
+                  format_metric_units: (data as any).format_body ?? false,
               }
             : {
                   name: "",
@@ -85,6 +87,7 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                   request_body: "",
                   verify_tls: false,
                   skip_check: false,
+                  format_body: false,
               },
         resetOptions: {
             keepDefaultValues: false,
@@ -283,6 +286,26 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                         </FormItem>
                                     )}
                                 />
+                                <FormField
+                                    control={form.control}
+                                    name="format_metric_units"
+                                    render={({ field }) => (
+                                        <FormItem className="flex items-center space-x-2">
+                                            <FormControl>
+                                                <div className="flex items-center gap-2">
+                                                    <Checkbox
+                                                        checked={field.value}
+                                                        onCheckedChange={field.onChange}
+                                                    />
+                                                    <Label className="text-sm">
+                                                        {t("FormatMetricUnits")}
+                                                    </Label>
+                                                </div>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
                                 <DialogFooter className="justify-end">
                                     <DialogClose asChild>
                                         <Button type="button" className="my-2" variant="secondary">

src/components/server.tsx

@@ -446,7 +446,9 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                     {publicNoteObj.billingDataMod
                                                                         ?.startDate
                                                                         ? new Date(
-                                                                              publicNoteObj.billingDataMod!.startDate!,
+                                                                              publicNoteObj
+                                                                                  .billingDataMod!
+                                                                                  .startDate!,
                                                                           ).toLocaleDateString()
                                                                         : "YYYY-MM-DD"}
                                                                 </Button>
@@ -471,7 +473,9 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                                 .billingDataMod
                                                                                 ?.startDate
                                                                                 ? new Date(
-                                                                                      publicNoteObj.billingDataMod!.startDate!,
+                                                                                      publicNoteObj
+                                                                                          .billingDataMod!
+                                                                                          .startDate!,
                                                                                   )
                                                                                 : undefined
                                                                         }

src/components/ui/badge.tsx

@@ -23,8 +23,7 @@ const badgeVariants = cva(
 )
 
 export interface BadgeProps
-    extends HTMLAttributes<HTMLDivElement>,
+    extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-        VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
     return <div className={cn(badgeVariants({ variant }), className)} {...props} />

src/components/ui/button.tsx

@@ -31,8 +31,7 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-    extends ButtonHTMLAttributes<HTMLButtonElement>,
+    extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-        VariantProps<typeof buttonVariants> {
     asChild?: boolean
 }
 

src/components/xui/multi-select.tsx

@@ -67,7 +67,8 @@ const multiSelectVariants = cva(
  * Props for MultiSelect component
  */
 interface MultiSelectProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    extends
+        React.ButtonHTMLAttributes<HTMLButtonElement>,
         VariantProps<typeof multiSelectVariants> {
     /**
      * An array of option objects to be displayed in the multi-select component.

src/components/xui/overlayless-sheet.tsx

@@ -37,7 +37,8 @@ const sheetVariants = cva(
 )
 
 interface SheetContentProps
-    extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    extends
+        ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
         VariantProps<typeof sheetVariants> {
     setOpen: Dispatch<SetStateAction<boolean>>
 }

src/locales/en/translation.json

@@ -254,5 +254,6 @@
     "CopiedToClipboard": "Copied to clipboard",
     "ClipboardWriteFailed": "Clipboard write failed",
     "PastedFromClipboard": "Pasted from clipboard",
-    "ClipboardReadFailed": "Clipboard read failed"
+    "ClipboardReadFailed": "Clipboard read failed",
+    "FormatMetricUnits": "Format Metric Units"
 }

src/locales/zh-CN/translation.json

@@ -254,5 +254,6 @@
     "CopiedToClipboard": "已复制到剪贴板",
     "ClipboardWriteFailed": "无法写入剪贴板",
     "PastedFromClipboard": "已从剪贴板粘贴",
-    "ClipboardReadFailed": "无法读取剪贴板"
+    "ClipboardReadFailed": "无法读取剪贴板",
+    "FormatMetricUnits": "格式化数据单位"
 }

src/locales/zh-TW/translation.json

@@ -185,5 +185,6 @@
     "EditServerConfig": "編輯伺服器配置",
     "Option": "選項",
     "Value": "值",
-    "Preview": "預覽"
+    "Preview": "預覽",
+    "FormatMetricUnits": "格式化資料單位"
 }

src/main.tsx

@@ -1,3 +1,4 @@
+// NOTE: Do not modify the import order unless absolutely necessary.
 import { createRoot } from "react-dom/client"
 import { RouterProvider, createBrowserRouter } from "react-router-dom"
 

src/types/api.ts

@@ -389,6 +389,7 @@ export interface ModelNotification {
     updated_at: string
     url: string
     verify_tls: boolean
+    format_metric_units: boolean
 }
 
 export interface ModelNotificationForm {