From 098371729e8bb23d689f3df4659ceb7a1072e4cf Mon Sep 17 00:00:00 2001 From: yaojp123 <15989103230@163.com> Date: Fri, 24 Jan 2025 15:56:12 +0800 Subject: [PATCH] chore: add column `Builtin` to `View` (#101) * chore: add column `Builtin` to `View` * chore: adjust TopN's UI --------- Co-authored-by: yaojiping --- .../saved_objects/simple_saved_object.ts | 3 +- .../index_patterns/index_pattern.ts | 2 + .../index_patterns/index_patterns.ts | 6 ++- .../edit_index_pattern_container.tsx | 3 ++ .../index_pattern_table.tsx | 9 ++++- .../public/components/utils.ts | 3 +- web/src/locales/en-US/explore.js | 3 ++ web/src/locales/zh-CN/explore.js | 3 ++ .../components/TopN/GradientColorPicker.jsx | 6 +-- .../components/TopN/GradientColorPicker.less | 2 +- .../Overview/components/TopN/index.jsx | 39 +++++++++++-------- .../Overview/components/TopN/index.less | 11 +++++- 12 files changed, 62 insertions(+), 28 deletions(-) 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 index 4aa5fcf0..7d94afaa 100644 --- 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,7 +43,7 @@ export class SimpleSavedObject { constructor( private client: SavedObjectsClientContract, - { id, type, version, attributes, error, references, migrationVersion, complex_fields }: SavedObjectType + { id, type, version, attributes, error, references, migrationVersion }: SavedObjectType ) { this.id = id; this.type = type; @@ -51,7 +51,6 @@ export class SimpleSavedObject { 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/index_patterns/index_pattern.ts b/web/src/components/vendor/data/common/index_patterns/index_patterns/index_pattern.ts index 6f340963..706b2a34 100644 --- 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 @@ -140,6 +140,7 @@ export class IndexPattern implements IIndexPattern { return this.deserializeFieldFormatMap(mapping); }); this.viewName = spec.viewName || ""; + this.builtin = spec.builtin; } /** @@ -440,6 +441,7 @@ export class IndexPattern implements IIndexPattern { fieldFormatMap, type: this.type, typeMeta: this.typeMeta ? JSON.stringify(this.typeMeta) : undefined, + builtin: this.builtin }; } 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 index f85d8085..18596c5c 100644 --- 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,7 +358,8 @@ export class IndexPatternsService { sourceFilters, fieldFormatMap, typeMeta, - complexFields, + complex_fields: complexFields, + builtin }, type, } = savedObject; @@ -385,7 +386,8 @@ export class IndexPatternsService { fields: this.fieldArrayToMap(parsedFields), typeMeta: parsedTypeMeta, type, - complexFields: parsedComplexFields + complexFields: parsedComplexFields, + builtin }; }; diff --git a/web/src/components/vendor/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern_container.tsx b/web/src/components/vendor/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern_container.tsx index 94658069..888c227a 100644 --- a/web/src/components/vendor/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern_container.tsx +++ b/web/src/components/vendor/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern_container.tsx @@ -40,6 +40,9 @@ const EditIndexPatternCont: React.FC> = ({ if (!ip.id) { ip.id = props.match.params.id; } + if (ip.builtin) { + props.history.push(""); + } setIndexPattern(ip); // setBreadcrumbs(getEditBreadcrumbs(ip)); }); diff --git a/web/src/components/vendor/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/web/src/components/vendor/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx index 07883d19..732bf7f5 100644 --- a/web/src/components/vendor/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx +++ b/web/src/components/vendor/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx @@ -211,11 +211,18 @@ export const IndexPatternTable = ({ dataIndex: "title", sorter: (a: string, b: string) => sorter.string(a, b, "title"), }, + { + title: formatMessage({ id: "explore.createview.field.builtin" }), + dataIndex: "builtin", + render: (val) => { + return formatMessage({ id: `explore.createview.field.builtin.${val === true ? "true" : "false"}` }); + }, + }, { title: formatMessage({ id: "table.field.actions" }), render: (text, record) => (
- {canSave ? ( + {canSave && !record.builtin ? ( <> {formatMessage({ id: "form.button.edit" })} diff --git a/web/src/components/vendor/index_pattern_management/public/components/utils.ts b/web/src/components/vendor/index_pattern_management/public/components/utils.ts index d8bb32c7..7bd8f3c6 100644 --- a/web/src/components/vendor/index_pattern_management/public/components/utils.ts +++ b/web/src/components/vendor/index_pattern_management/public/components/utils.ts @@ -38,8 +38,8 @@ export async function getIndexPatterns( const id = pattern.id; const title = pattern.get('title'); const viewName = pattern.get('viewName'); + const builtin = pattern.get('builtin'); const isDefault = defaultIndex === id; - const tags = (indexPatternManagementStart as IndexPatternManagementStart).list.getIndexPatternTags( pattern, isDefault @@ -55,6 +55,7 @@ export async function getIndexPatterns( // so the sorting will but the default index on top // or on bottom of a the table sort: `${isDefault ? '0' : '1'}${title}`, + builtin, }; }) .sort((a, b) => { diff --git a/web/src/locales/en-US/explore.js b/web/src/locales/en-US/explore.js index 45c12cd0..06e1b829 100644 --- a/web/src/locales/en-US/explore.js +++ b/web/src/locales/en-US/explore.js @@ -27,6 +27,9 @@ export default { "explore.createview.field.match_rule": "Match Rule", "explore.createview.field.match_rule.help": 'Use (*) to match multiple indices and cannot contain spaces or characters , /, ?, ", <, >, |.', + "explore.createview.field.builtin": "Builtin", + "explore.createview.field.builtin.true": "True", + "explore.createview.field.builtin.false": "false", "explore.createview.status.match_index_num": "Matching {length} indices", "explore.createview.status.match_special_index": "The current matching rule did not match the Elasticsearch index.To match the special index, turn on the Include special index switch.", diff --git a/web/src/locales/zh-CN/explore.js b/web/src/locales/zh-CN/explore.js index fe52b22c..31392a4a 100644 --- a/web/src/locales/zh-CN/explore.js +++ b/web/src/locales/zh-CN/explore.js @@ -26,6 +26,9 @@ export default { "explore.createview.field.match_rule": "匹配规则", "explore.createview.field.match_rule.help": '使用 (*) 来匹配多个索引。 不能包含空格或者字符 , /, ?, ", <, >, |.', + "explore.createview.field.builtin": "是否内置", + "explore.createview.field.builtin.true": "是", + "explore.createview.field.builtin.false": "否", "explore.createview.status.match_index_num": "当前匹配到 {length} 个索引", "explore.createview.status.match_special_index": "当前规则没有匹配到任何索引。如需匹配特殊索引，请打开包含特殊索引开关。", diff --git a/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.jsx b/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.jsx index a3119c3b..1f04c455 100644 --- a/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.jsx +++ b/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.jsx @@ -36,18 +36,18 @@ export default ({ value = [], onChange, style = {}, className = '' }) => { { value.map((item, index) => ( onRemove(index)} onChange={(color) => handleChange(color, index)}> - )) } - +
)}> -
+
diff --git a/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.less b/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.less index ee1670d0..5a0807ef 100644 --- a/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.less +++ b/web/src/pages/Platform/Overview/components/TopN/GradientColorPicker.less @@ -2,7 +2,7 @@ :global { .ant-popover-inner-content { padding: 8px; - max-width: 136px; + max-width: 100px; } .ant-popover-arrow { display: none; diff --git a/web/src/pages/Platform/Overview/components/TopN/index.jsx b/web/src/pages/Platform/Overview/components/TopN/index.jsx index f6ce7c5c..d865b732 100644 --- a/web/src/pages/Platform/Overview/components/TopN/index.jsx +++ b/web/src/pages/Platform/Overview/components/TopN/index.jsx @@ -72,8 +72,7 @@ export default (props) => { }) if (res && !res.error && Array.isArray(res.saved_objects) && res.saved_objects[0]) { const newView = res.saved_objects[0] - let { fieldFormatMap, fields } = newView.attributes || {} - let { complex_fields: complexFields } = newView + let { fieldFormatMap, fields, complex_fields: complexFields } = newView.attributes || {} try { fieldFormatMap = JSON.parse(fieldFormatMap) || {} fields = JSON.parse(fields) || [] @@ -413,12 +412,12 @@ export default (props) => {
- + setCurrentMode(e.target.value)} className={styles.mode} - style={{ marginRight: 12, marginBottom: 12 }} + style={{ marginRight: 10 }} > { /> -
+
Top
{ precision={0} onChange={(value) => onFormDataChange({ top: value })} /> -
+
{formatMessage({ id: "cluster.monitor.topn.area" })}
- -
+ +
{formatMessage({ id: "cluster.monitor.topn.color" })}
-
+
{formatMessage({ id: "cluster.monitor.topn.theme" })}
- { + { onFormDataChange({ colors: value }) setConfig({ ...cloneDeep(config), colors: value }) }}/> - +
diff --git a/web/src/pages/Platform/Overview/components/TopN/index.less b/web/src/pages/Platform/Overview/components/TopN/index.less index 3ea68b6c..c80fe809 100644 --- a/web/src/pages/Platform/Overview/components/TopN/index.less +++ b/web/src/pages/Platform/Overview/components/TopN/index.less @@ -3,17 +3,20 @@ display: flex; align-items: center; gap: 12px; - flex-wrap: wrap; + flex-wrap: nowrap; + margin-bottom: 12px; :global { .ant-input-group { display: flex !important; - flex-wrap: wrap !important; + flex-wrap: nowrap !important; + width: 100%; } } .mode { width: 84px; + min-width: 84px; :global { .ant-radio-button-wrapper { width: 42px; @@ -34,6 +37,10 @@ border-radius: 4px; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-grow: 0; } }