Add milliseconds to date logs in UI (#47)

* Add milliseconds to date logs in UI

* Fix imports

internal/entities/record.go

@@ -63,6 +63,11 @@ type RecordTime struct {
 	time.Time
 }
 
+func (t RecordTime) MarshalJSON() ([]byte, error) {
+	formattedTime := t.Format("2006-01-02T15:04:05.000Z07:00")
+	return serialize.JSONMarshal(formattedTime)
+}
+
 func (t *RecordTime) Scan(value interface{}) error {
 	if v, ok := value.(int64); ok {
 		t.Time = time.Unix(v, 0)

web/src/entities/log/model.ts

@@ -1,7 +1,6 @@
 import { Log, getLogs } from "@/shared/api";
 import { Level, LogsGroup, getLogGroup } from "@/shared/api";
-import { DATEFORMAT_OPTIONS, objectToQueryString, queryStringToObject } from "@/shared/lib";
-import { $preferredLanguage } from "@/shared/lib";
+import { $intl, objectToQueryString, queryStringToObject } from "@/shared/lib";
 import { combine, createEffect, createEvent, createStore, sample } from "effector";
 
 const reset = createEffect();
@@ -118,13 +117,12 @@ export const $groupedLogs = createStore<LogsGroup>({
 });
 
 sample({
-  source: $preferredLanguage,
+  source: $intl,
   clock: getLogGroupFx.doneData,
-  fn: (lang, logsResponse) => {
+  fn: (intl, logsResponse) => {
     // Extract to separate reducer
     const logs = logsResponse.data;
 
-    const intl = Intl.DateTimeFormat(lang, DATEFORMAT_OPTIONS);
     const logsGroup: LogsGroup = {
       kind: logs[0].kind,
       tags: Object.entries(logs[0]?.query),
@@ -142,8 +140,7 @@ sample({
   target: $groupedLogs,
 });
 
-export const $logsGroups = combine([$logs, $preferredLanguage], ([logs, lang]) => {
-  const intl = Intl.DateTimeFormat(lang, DATEFORMAT_OPTIONS);
+export const $logsGroups = combine([$logs, $intl], ([logs, intl]) => {
   const groupedLogs = logs.reduce((acc: Record<string, LogsGroup>, log) => {
     const key = JSON.stringify(log.query);
 

web/src/entities/user/model.ts

@@ -1,6 +1,6 @@
 import { User, getUsers, getUser } from "@/shared/api";
 import { setCurrentAccount } from "@/shared/session";
-import { setLanguage } from "@/shared/lib";
+import { setDateLanguage, setLanguage } from "@/shared/lib";
 import { createEffect, createEvent, createStore, sample } from "effector";
 
 const LOCALE_KEY = "locale";
@@ -69,6 +69,11 @@ sample({
   target: setLanguage,
 });
 
+sample({
+  source: loadLocaleFromStorageFx.doneData,
+  target: setDateLanguage,
+});
+
 export const effects = {
   getUsersFx,
   getUserFx,

web/src/features/filter-logs/index.ts

@@ -1 +1 @@
-export { Filter, type FilterItem, type KindItem } from "./ui";
+export { Filter } from "./ui";

web/src/features/filter-logs/ui.ts

@@ -1,19 +1,8 @@
-import { Button, ButtonVariant, DownIcon, Dropdown, FilterIcon } from "@/shared/ui";
+import { Button, ButtonVariant, DownIcon, Dropdown, FilterIcon, FilterItem, KindItem } from "@/shared/ui";
 import { Event, Store, createEvent, createStore, sample } from "effector";
 import { DOMElement, h, node, spec } from "forest";
 import { i18n } from "@/shared/lib";
 
-export type FilterItem = {
-  name: string;
-  key: string;
-  value: string;
-};
-
-export type KindItem = {
-  name: string;
-  title: string;
-};
-
 export const Filter = ({
   filterItems,
   filterChanged,

web/src/shared/lib/dates/index.ts

@@ -1,10 +1,25 @@
+import { createEvent, createStore, sample } from "effector";
+
 export const DATEFORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
   hour: "numeric",
   minute: "numeric",
   second: "numeric",
+  fractionalSecondDigits: 3,
   year: "numeric",
   month: "numeric",
   day: "numeric",
 };
 
 export const TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+export const setDateLanguage = createEvent<string>();
+
+export const $intl = createStore<Intl.DateTimeFormat>(Intl.DateTimeFormat());
+
+sample({
+  source: setDateLanguage,
+  fn: (lang) => {
+    return Intl.DateTimeFormat(lang, DATEFORMAT_OPTIONS);
+  },
+  target: $intl,
+});

web/src/shared/lib/index.ts

@@ -1,4 +1,4 @@
-export { DATEFORMAT_OPTIONS, TIMEZONE } from "./dates";
+export { DATEFORMAT_OPTIONS, TIMEZONE, setDateLanguage, $intl } from "./dates";
 export { rules } from "./forms";
 export { trigger } from "./trigger";
 export { hashCode } from "./hash";

web/src/shared/ui/dropdown/index.ts

@@ -1,8 +1,8 @@
 import { Event, Store, createEvent, sample } from "effector";
 import { h, list, spec } from "forest";
 import { FloatingInput, Select } from "@/shared/ui";
-import { FilterItem, KindItem } from "@/features";
 import { i18n } from "@/shared/lib/i18n";
+import { FilterItem, KindItem } from "../types";
 
 export const Dropdown = ({
   items,

web/src/shared/ui/filled-floating-input/index.ts

@@ -1,7 +1,7 @@
-import { FilterItem } from "@/features";
 import { Event, Store, createEvent, sample } from "effector";
 import { h, remap, spec } from "forest";
 import { CrossIcon } from "../icons";
+import { FilterItem } from "../types";
 
 export const FilledFloatingInput = (item: Store<FilterItem>, inputChanged: Event<any>) => {
   h("div", () => {

web/src/shared/ui/index.ts

@@ -52,3 +52,4 @@ export { Popup } from "./popup";
 export { Tooltip } from "./tooltip";
 export { GeneralTooltip, triggerTooltip } from "./general-tooltip";
 export { DiffText } from "./diff-text";
+export { type FilterItem, type KindItem } from "./types";

web/src/shared/ui/types.ts

@@ -0,0 +1,10 @@
+export type FilterItem = {
+  name: string;
+  key: string;
+  value: string;
+};
+
+export type KindItem = {
+  name: string;
+  title: string;
+};

web/src/widgets/logs-table/index.ts

@@ -45,7 +45,7 @@ export const LogsTable = ({
           h("tr", () => {
             h("th", {
               attr: { scope: "col" },
-              classList: ["px-4", "py-3", "w-24", "lg:w-48"],
+              classList: ["px-4", "py-3", "w-32", "lg:w-52"],
               text: i18n("tables.log_groups.time"),
             });