chore: adjust TopN (#96)

* chore: optimize the chart when only the color metric is selected in TopN * chore: add metric_config to form of View's field * feat: add `Complex Field` to `View` * chore: adjust topn's metrics * fix: fix the issue of switching metrics in TopN * chore: add columns(function, format) to `Complex fields` * chore: verify if the complex field is builtin * fix: set func to max by default in create complex field * chore: change text of button for fetching data to `Apply` in TopN * chore: check if metric support some statistics if rollup is enabled * fix: add `time_field`` to params of fetching data if statistic is `latency`` * chore: check if field support some statistics if rollup is enabled * chore: remove layout in view * fix: format does not work in TopN * fix: adjust filters of fetching data in TopN --------- Co-authored-by: yaojiping <[email protected]>
infinilabs · Jan 23, 2025 · d828fe8 · d828fe8
1 parent 16c08e7
commit d828fe8
Show file tree

Hide file tree

Showing 40 changed files with 2,437 additions and 351 deletions.
diff --git a/web/src/components/ListView/index.jsx b/web/src/components/ListView/index.jsx
@@ -531,6 +531,7 @@ const Index = forwardRef((props, ref) => {
                 <WidgetRender
                   widget={histogramState.widget}
                   range={histogramState.range}
+                  queryParams={queryParams?.filters || {}}
                 />
               </div>
             ) : null}

diff --git a/web/src/components/Overview/Monitor/index.jsx b/web/src/components/Overview/Monitor/index.jsx
@@ -13,6 +13,7 @@ import { getTimezone } from "@/utils/utils";
 import { getContext } from "@/pages/DataManagement/context";
 import { ESPrefix } from "@/services/common";
 import CollectStatus from "@/components/CollectStatus";
+import styles from "./index.less"
 
 const { TabPane } = Tabs;
 
@@ -140,7 +141,7 @@ const Monitor = (props) => {
     <div>
       <BreadcrumbList data={breadcrumbList} />
 
-      <Card bodyStyle={{ padding: 15 }}>
+      <Card bodyStyle={{ padding: 16 }}>
         {
           selectedCluster?.id ? (
             <>
@@ -187,58 +188,59 @@ const Monitor = (props) => {
                   <CollectStatus fetchUrl={`${ESPrefix}/${selectedCluster?.id}/_collection_stats`}/>
                 </div>
               </div>
-
-              <Tabs
-                activeKey={param?.tab || panes[0]?.key}
-                onChange={(key) => {
-                  setParam({ ...param, tab: key });
-                }}
-                tabBarGutter={10}
-                destroyInactiveTabPane
-                animated={false}
-              >
-                {panes.map((pane) => (
-                  <TabPane tab={pane.title} key={pane.key}>
-                    <Spin spinning={spinning && !!state.refresh}>
-                      <StatisticBar
-                        setSpinning={setSpinning}
-                        onInfoChange={onInfoChange}
-                        {...state}
-                        {...extraParams}
-                      />
-                    </Spin>
-                    <div style={{ marginTop: 15 }}>
-                      {checkPaneParams({
-                        ...state,
-                        ...extraParams,
-                      }) ? (
-                        typeof pane.component == "string" ? (
-                          pane.component
-                        ) : (
-                          <pane.component
-                            selectedCluster={selectedCluster}
-                            isAgent={isAgent}
-                            {...state}
-                            handleTimeChange={handleTimeChange}
-                            handleTimeIntervalChange={(timeInterval) => {
-                              onTimeSettingsChange({
-                                timeInterval,
-                              })
-                              setState({
-                                ...state,
-                                timeInterval,
-                              });
-                            }}
-                            setSpinning={setSpinning}
-                            {...extraParams}
-                            bucketSize={state.timeInterval}
-                          />
-                        )
-                      ) : null}
-                    </div>
-                  </TabPane>
-                ))}
-              </Tabs>
+              <div className={styles.tabs}>
+                <Tabs
+                  activeKey={param?.tab || panes[0]?.key}
+                  onChange={(key) => {
+                    setParam({ ...param, tab: key });
+                  }}
+                  tabBarGutter={10}
+                  destroyInactiveTabPane
+                  animated={false}
+                >
+                  {panes.map((pane) => (
+                    <TabPane tab={pane.title} key={pane.key}>
+                      <Spin spinning={spinning && !!state.refresh}>
+                        <StatisticBar
+                          setSpinning={setSpinning}
+                          onInfoChange={onInfoChange}
+                          {...state}
+                          {...extraParams}
+                        />
+                      </Spin>
+                      <div style={{ marginTop: 15 }}>
+                        {checkPaneParams({
+                          ...state,
+                          ...extraParams,
+                        }) ? (
+                          typeof pane.component == "string" ? (
+                            pane.component
+                          ) : (
+                            <pane.component
+                              selectedCluster={selectedCluster}
+                              isAgent={isAgent}
+                              {...state}
+                              handleTimeChange={handleTimeChange}
+                              handleTimeIntervalChange={(timeInterval) => {
+                                onTimeSettingsChange({
+                                  timeInterval,
+                                })
+                                setState({
+                                  ...state,
+                                  timeInterval,
+                                });
+                              }}
+                              setSpinning={setSpinning}
+                              {...extraParams}
+                              bucketSize={state.timeInterval}
+                            />
+                          )
+                        ) : null}
+                      </div>
+                    </TabPane>
+                  ))}
+                </Tabs>
+              </div>
             </>
           ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
         }

diff --git a/web/src/components/Overview/Monitor/index.less b/web/src/components/Overview/Monitor/index.less
@@ -0,0 +1,7 @@
+.tabs {
+    :global {
+        .ant-tabs .ant-tabs-right-content {
+            padding-right: 16px !important;
+        }
+    }
+}
diff --git a/web/src/components/vendor/core/public/saved_objects/simple_saved_object.ts b/web/src/components/vendor/core/public/saved_objects/simple_saved_object.ts
@@ -43,14 +43,15 @@ export class SimpleSavedObject<T = unknown> {
 
   constructor(
     private client: SavedObjectsClientContract,
-    { id, type, version, attributes, error, references, migrationVersion }: SavedObjectType<T>
+    { id, type, version, attributes, error, references, migrationVersion, complex_fields }: SavedObjectType<T>
   ) {
     this.id = id;
     this.type = type;
     this.attributes = attributes || ({} as T);
     this.references = references || [];
     this._version = version;
     this.migrationVersion = migrationVersion;
+    this.attributes.complexFields = complex_fields
     if (error) {
       this.error = error;
     }

diff --git a/web/src/components/vendor/data/common/index_patterns/fields/field_list.ts b/web/src/components/vendor/data/common/index_patterns/fields/field_list.ts
@@ -57,7 +57,7 @@ export const fieldList = (
       }
       this.groups.get(field.type)!.set(field.name, field);
     };
-    private removeByGroup = (field: IFieldType) => this.groups.get(field.type)!.delete(field.name);
+    private removeByGroup = (field: IFieldType) => this.groups.get(field.type)?.delete(field.name);
     private calcDisplayName = (name: string) =>
       shortDotsEnable ? shortenDottedString(name) : name;
     constructor() {
@@ -71,7 +71,7 @@ export const fieldList = (
       ...(this.groups.get(type) || new Map()).values(),
     ];
     public readonly add = (field: FieldSpec) => {
-      const newField = new IndexPatternField(field, this.calcDisplayName(field.name));
+      const newField = new IndexPatternField(field, this.calcDisplayName(field.displayName || field.name));
       this.push(newField);
       this.setByName(newField);
       this.setByGroup(newField);

diff --git a/web/src/components/vendor/data/common/index_patterns/fields/index_pattern_field.ts b/web/src/components/vendor/data/common/index_patterns/fields/index_pattern_field.ts
@@ -134,6 +134,14 @@ export class IndexPatternField implements IFieldType {
     return this.aggregatable && !notVisualizableFieldTypes.includes(this.spec.type);
   }
 
+  public set metric_config(metric_config) {
+    this.spec.metric_config = metric_config;
+  }
+
+  public get metric_config() {
+    return this.spec.metric_config;
+  }
+
   public toJSON() {
     return {
       count: this.count,
@@ -148,7 +156,8 @@ export class IndexPatternField implements IFieldType {
       searchable: this.searchable,
       aggregatable: this.aggregatable,
       readFromDocValues: this.readFromDocValues,
-      subType: this.subType,
+      subType: this.subType,      
+      metric_config: this.metric_config,
     };
   }
 
@@ -171,6 +180,7 @@ export class IndexPatternField implements IFieldType {
       readFromDocValues: this.readFromDocValues,
       subType: this.subType,
       format: getFormatterForField ? getFormatterForField(this).toJSON() : undefined,
+      metric_config: this.metric_config,
     };
   }
 }
diff --git a/web/src/components/vendor/data/common/index_patterns/index_patterns/index_pattern.ts b/web/src/components/vendor/data/common/index_patterns/index_patterns/index_pattern.ts
@@ -117,7 +117,14 @@ export class IndexPattern implements IIndexPattern {
 
     // set values
     this.id = spec.id;
-    const fieldFormatMap = this.fieldSpecsToFieldFormatMap(spec.fields);
+
+    this.complexFields = fieldList([], this.shortDotsEnable);
+    this.complexFields.replaceAll(this.complexFieldsToArray(spec.complexFields));
+
+    const fieldFormatMap = {
+      ...this.fieldSpecsToFieldFormatMap(spec.fields),
+      ...this.complexfieldSpecsToFieldFormatMap(spec.complexFields)
+    }
 
     this.version = spec.version;
 
@@ -185,6 +192,31 @@ export class IndexPattern implements IIndexPattern {
       {}
     );
 
+  private complexfieldSpecsToFieldFormatMap = (
+      fldList: IndexPatternSpec["fields"] = {}
+    ) =>
+      Object.entries(fldList).reduce<Record<string, SerializedFieldFormat>>(
+        (col, [key, fieldSpec]) => {
+          if (fieldSpec.format) {
+            col[key] = { ...fieldSpec.format };
+          }
+          return col;
+        },
+        {}
+      );
+
+  private complexFieldsToArray = (complexFields) => {
+    const keys = Object.keys(complexFields || {})
+    return keys.map((key) => {
+      const item = complexFields?.[key] || {}
+      return {
+        ...item,
+        name: key,
+        metric_name: item.name
+      }
+    })
+  }; 
+
   getComputedFields() {
     const scriptFields: any = {};
     if (!this.fields) {
@@ -381,6 +413,20 @@ export class IndexPattern implements IIndexPattern {
       ? undefined
       : JSON.stringify(serialized);
 
+    let formatComplexFields
+    if (this.complexFields) {
+      formatComplexFields = {}
+      this.complexFields.map((item) => {
+        if (item.spec?.name) {
+          const { metric_name, format, type, ...rest } = item.spec
+          formatComplexFields[item.spec.name] = {
+            ...rest,
+            name: metric_name
+          }
+        }
+      })
+    }
+
     return {
       title: this.title,
       viewName: this.viewName,
@@ -390,6 +436,7 @@ export class IndexPattern implements IIndexPattern {
         ? JSON.stringify(this.sourceFilters)
         : undefined,
       fields: this.fields ? JSON.stringify(this.fields) : undefined,
+      complex_fields: formatComplexFields ? JSON.stringify(formatComplexFields) : undefined,
       fieldFormatMap,
       type: this.type,
       typeMeta: this.typeMeta ? JSON.stringify(this.typeMeta) : undefined,

diff --git a/web/src/components/vendor/data/common/index_patterns/index_patterns/index_patterns.ts b/web/src/components/vendor/data/common/index_patterns/index_patterns/index_patterns.ts
@@ -358,6 +358,7 @@ export class IndexPatternsService {
         sourceFilters,
         fieldFormatMap,
         typeMeta,
+        complexFields,
       },
       type,
     } = savedObject;
@@ -370,6 +371,7 @@ export class IndexPatternsService {
       ? JSON.parse(fieldFormatMap)
       : {};
     const parsedFields: FieldSpec[] = fields ? JSON.parse(fields) : [];
+    const parsedComplexFields = complexFields ? JSON.parse(complexFields) : [];
 
     this.addFormatsToFields(parsedFields, parsedFieldFormatMap);
     return {
@@ -383,6 +385,7 @@ export class IndexPatternsService {
       fields: this.fieldArrayToMap(parsedFields),
       typeMeta: parsedTypeMeta,
       type,
+      complexFields: parsedComplexFields
     };
   };
 
@@ -409,7 +412,6 @@ export class IndexPatternsService {
     // if (!savedObject.version) {
     //   throw new SavedObjectNotFound(savedObjectType, id, 'management/kibana/indexPatterns');
     // }
-
     const spec = this.savedObjectToSpec(savedObject);
     const { title, type, typeMeta } = spec;
     const parsedFieldFormats: FieldFormatMap = savedObject.attributes
@@ -512,7 +514,6 @@ export class IndexPatternsService {
       UI_SETTINGS.SHORT_DOTS_ENABLE
     );
     const metaFields = await this.config.get(UI_SETTINGS.META_FIELDS);
-
     const indexPattern = new IndexPattern({
       spec,
       savedObjectsClient: this.savedObjectsClient,
@@ -623,8 +624,12 @@ export class IndexPatternsService {
         version: indexPattern.version,
       })
       .then((resp) => {
-        indexPattern.id = resp.id;
-        indexPattern.version = resp.version;
+        if (resp.id) {
+          indexPattern.id = resp.id;
+        }
+        if (resp.version) {
+          indexPattern.version = resp.version;
+        }
       })
       .catch(async (err) => {
         if (

diff --git a/...ponents/vendor/index_pattern_management/public/components/edit_index_pattern/constants.ts b/...ponents/vendor/index_pattern_management/public/components/edit_index_pattern/constants.ts
@@ -18,5 +18,6 @@
  */
 
 export const TAB_INDEXED_FIELDS = 'indexedFields';
+export const TAB_COMPLEX_FIELDS = 'complexFields';
 export const TAB_SCRIPTED_FIELDS = 'scriptedFields';
 export const TAB_SOURCE_FILTERS = 'sourceFilters';