From b981ede0e75ed9fac9dd43754ffe3adaef3fb1ac Mon Sep 17 00:00:00 2001 From: Hengfei Yang Date: Thu, 16 Feb 2023 20:09:54 +0800 Subject: [PATCH] fix: ingestion page (#91) --- web/package-lock.json | 2 +- web/package.json | 6 ++-- web/src/components/ingestion/Curl.vue | 17 +++++++++--- web/src/components/ingestion/FluentBit.vue | 26 ++++++++++++------ web/src/components/ingestion/Fluentd.vue | 32 ++++++++++++++-------- web/src/components/ingestion/Vector.vue | 20 ++++++++++---- web/src/layouts/MainLayout.vue | 4 +-- web/src/locales/languages/zh.json | 2 +- web/src/plugins/logs/Index.vue | 4 +-- web/src/services/organizations.ts | 18 ++++++------ web/src/stores/index.ts | 2 +- web/vite.config.ts | 6 ++-- 12 files changed, 88 insertions(+), 51 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 138721501f..2fbf19e4fa 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -16,7 +16,7 @@ "@segment/analytics-next": "^1.45.0", "@sentry/tracing": "^7.17.4", "@sentry/vue": "^7.17.4", - "aws-amplify": "*", + "aws-amplify": "latest", "js-cookie": "^3.0.1", "jwt-decode": "^3.1.2", "lodash-es": "^4.17.21", diff --git a/web/package.json b/web/package.json index 3f8c90f5d5..83d83af7c8 100644 --- a/web/package.json +++ b/web/package.json @@ -1,6 +1,6 @@ { - "name": "zinc-oxide-web", - "version": "0.0.0", + "name": "zinc-observe-web", + "version": "0.1.0", "license": "Apache-2.0", "private": true, "scripts": { @@ -24,7 +24,7 @@ "@segment/analytics-next": "^1.45.0", "@sentry/tracing": "^7.17.4", "@sentry/vue": "^7.17.4", - "aws-amplify": "latest", + "aws-amplify": "4.3.43", "js-cookie": "^3.0.1", "jwt-decode": "^3.1.2", "lodash-es": "^4.17.21", diff --git a/web/src/components/ingestion/Curl.vue b/web/src/components/ingestion/Curl.vue index 959ba47700..621a7637e2 100644 --- a/web/src/components/ingestion/Curl.vue +++ b/web/src/components/ingestion/Curl.vue @@ -29,10 +29,8 @@ 
-  curl -u {{ currUserEmail }}:{{ store.state.organizationPasscode }} -k {{
-        config.zincENLIngestion
-      }}/api/{{ currOrgIdentifier }}/default/_json -d [JSON-DATA]
+curl -u {{ currUserEmail }}:{{ store.state.organizationPasscode }} -k {{ endpoint.url }}/api/{{ currOrgIdentifier }}/default/_json -d [JSON-DATA] + @@ -53,11 +51,22 @@ export default defineComponent({ }, setup() { const store = useStore(); + const endpoint = ref(""); + + const url = new URL(store.state.API_ENDPOINT); + endpoint.value = { + url: store.state.API_ENDPOINT, + host: url.hostname, + port: url.port, + protocol: url.protocol.replace(":", ""), + tls: url.protocol === "https:" ? "On" : "Off", + }; const content = ref(null); return { store, config, + endpoint, content, }; }, diff --git a/web/src/components/ingestion/FluentBit.vue b/web/src/components/ingestion/FluentBit.vue index a5abb67b3c..6a084051f2 100644 --- a/web/src/components/ingestion/FluentBit.vue +++ b/web/src/components/ingestion/FluentBit.vue @@ -33,15 +33,14 @@ Name http Match * Path /api/{{ currOrgIdentifier }}/default/_json - Host {{ config.zincENLIngestion }} - index default - Port 443 - tls On - Suppress_Type_Name On - Generate_ID On + Host {{ endpoint.host }} + Port {{ endpoint.port }} + tls {{ endpoint.tls }} + Format json + Json_date_key _timestamp + Json_date_format iso8601 HTTP_User {{ currUserEmail }} - HTTP_Passwd {{ store.state.organizationPasscode }} + HTTP_Passwd {{ store.state.organizationPasscode }} @@ -62,11 +61,22 @@ export default defineComponent({ }, setup() { const store = useStore(); + const endpoint = ref(""); + + const url = new URL(store.state.API_ENDPOINT); + endpoint.value = { + url: store.state.API_ENDPOINT, + host: url.hostname, + port: url.port, + protocol: url.protocol.replace(":", ""), + tls: url.protocol === "https:" ? "On" : "Off", + }; const fluentbitContent = ref(null); return { store, config, + endpoint, fluentbitContent, }; }, diff --git a/web/src/components/ingestion/Fluentd.vue b/web/src/components/ingestion/Fluentd.vue index ea914cf23f..8a04dc8576 100644 --- a/web/src/components/ingestion/Fluentd.vue +++ b/web/src/components/ingestion/Fluentd.vue @@ -36,19 +36,16 @@ </source> <match **> - @type copy - <store> - @type http - host {{ config.zincENLIngestion }} - port 443 - scheme https - path /api/{{ currOrgIdentifier }}/default/_json - user {{ currUserEmail }} + @type http + endpoint {{ endpoint.url }}/api/{{ currOrgIdentifier }}/default/_json + content_type json + json_array true + <auth> + method basic + username {{ currUserEmail }} password {{ store.state.organizationPasscode }} - index_name default - </store> -</match> + </auth> +</match> @@ -69,11 +66,22 @@ export default defineComponent({ }, setup() { const store = useStore(); + const endpoint = ref(""); + + const url = new URL(store.state.API_ENDPOINT); + endpoint.value = { + url: store.state.API_ENDPOINT, + host: url.hostname, + port: url.port, + protocol: url.protocol.replace(":", ""), + tls: url.protocol === "https:" ? "On" : "Off", + }; const fluentdContent = ref(null); return { store, config, + endpoint, fluentdContent, }; }, diff --git a/web/src/components/ingestion/Vector.vue b/web/src/components/ingestion/Vector.vue index a54567ba44..c809c14d47 100644 --- a/web/src/components/ingestion/Vector.vue +++ b/web/src/components/ingestion/Vector.vue @@ -32,15 +32,14 @@ [sinks.zinc] type = "http" inputs = [ source or transform id ] -endpoint = "{{ config.zincENLEndPoint }}/api/{{ currOrgIdentifier }}/" -mode = "bulk" +endpoint = "{{ endpoint.url }}/api/{{ currOrgIdentifier }}/default/_json" auth.strategy = "basic" auth.user = "{{ currUserEmail }}" auth.password = "{{ store.state.organizationPasscode }}" -bulk.index = "default" compression = "none" -healthcheck.enabled = false +encoding.codec = "json" +encoding.timestamp_format = "rfc3339" +healthcheck.enabled = false @@ -61,11 +60,22 @@ export default defineComponent({ }, setup() { const store = useStore(); + const endpoint = ref(""); + + const url = new URL(store.state.API_ENDPOINT); + endpoint.value = { + url: store.state.API_ENDPOINT, + host: url.hostname, + port: url.port, + protocol: url.protocol.replace(":", ""), + tls: url.protocol === "https:" ? "On" : "Off", + }; const vectorContent = ref(null); return { store, config, + endpoint, vectorContent, }; }, diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue index a578f4e5be..d6de424c7a 100644 --- a/web/src/layouts/MainLayout.vue +++ b/web/src/layouts/MainLayout.vue @@ -38,14 +38,14 @@ >", - "ingestionMsg": "看来你没有向选定的组织发生任何数据，有多种方式可以采集数据，比如 fluentbit。", + "ingestionMsg": "看来你没有向选定的组织发送任何数据，有多种方式可以采集数据，比如 fluentbit。", "inestedInSearch": "尝试搜索日志", "searchInDemoOrg": "你可以通过切换到演示组织来探索搜索功能，要切换到演示组织，请使用顶部的组织下拉列表选择 “演示组织”。我们一直在向演示组织发生演示数据。" } diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue index a8ce2d60d6..bab0d012f3 100644 --- a/web/src/plugins/logs/Index.vue +++ b/web/src/plugins/logs/Index.vue @@ -409,7 +409,7 @@ export default defineComponent({ } } - function buildZincENLSearch() { + function buildSearch() { try { let query = searchObj.data.editorValue; @@ -609,7 +609,7 @@ export default defineComponent({ } dismiss = Notify(); - const queryReq = buildZincENLSearch(); + const queryReq = buildSearch(); searchService .search({ diff --git a/web/src/services/organizations.ts b/web/src/services/organizations.ts index 0570cca2e8..d49b8f7f98 100644 --- a/web/src/services/organizations.ts +++ b/web/src/services/organizations.ts @@ -44,37 +44,37 @@ const organizations = { return http().post("/api/organizations", data); }, add_members: (data: any, orgIdentifier: string) => { - return http().post(`api/organizations/${orgIdentifier}/members`, data); + return http().post(`/api/organizations/${orgIdentifier}/members`, data); }, process_subscription: (s: string) => { - return http().get(`api/organizations/member_subscription/${s}`); + return http().get(`/api/organizations/member_subscription/${s}`); }, get_associated_members: (orgIdentifier: string) => { - return http().get(`api/organizations/associated_members/${orgIdentifier}`); + return http().get(`/api/organizations/associated_members/${orgIdentifier}`); }, update_member_role: (data: any, orgIdentifier: string) => { if (config.isZincObserveCloud === "true") { - return http().put(`api/organizations/${orgIdentifier}/member`, data); + return http().put(`/api/organizations/${orgIdentifier}/member`, data); } else { - return http().patch(`api/${orgIdentifier}/users/${encodeURIComponent(data.email)}`, { role: data.role }); + return http().patch(`/api/${orgIdentifier}/users/${encodeURIComponent(data.email)}`, { role: data.role }); } }, verify_identifier: (name: string) => { - return http().get(`api/organizations/verify_identifier/${name}`); + return http().get(`/api/organizations/verify_identifier/${name}`); }, get_organization_passcode: (orgIdentifier: string) => { if (config.isZincObserveCloud === "true") { return http().get(`/api/organizations/passcode/${orgIdentifier}`); } else { - return http().get(`api/${orgIdentifier}/organizations/passcode`); + return http().get(`/api/${orgIdentifier}/organizations/passcode`); } }, update_organization_passcode: (orgIdentifier: string) => { if (config.isZincObserveCloud === "true") { - return http().put(`api/organizations/passcode/${orgIdentifier}`, {}); + return http().put(`/api/organizations/passcode/${orgIdentifier}`, {}); } else { - return http().put(`api/${orgIdentifier}/organizations/passcode`, {}); + return http().put(`/api/${orgIdentifier}/organizations/passcode`, {}); } }, get_organization_summary: (orgIdentifier: string) => { diff --git a/web/src/stores/index.ts b/web/src/stores/index.ts index 70e982034a..0be2e29266 100644 --- a/web/src/stores/index.ts +++ b/web/src/stores/index.ts @@ -17,7 +17,7 @@ import { useLocalOrganization, useLocalCurrentUser } from "../utils/zincutils"; export default createStore({ state: { - API_ENDPOINT: import.meta.env.VITE_ZINCOBSERVE_ENDPOINT, + API_ENDPOINT: import.meta.env.VITE_ZINCOBSERVE_ENDPOINT || (window.location.origin != "http://localhost:8081" ? window.location.origin : "http://localhost:5080"), userInfo: {}, loggedIn: false, loadingState: true, diff --git a/web/vite.config.ts b/web/vite.config.ts index 2b1acd081d..811a3f9c8e 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -39,9 +39,9 @@ export default defineConfig({ // testNamePattern: "DateTime", // ... }, - // server: { - // port: 8081, - // }, + server: { + port: 8081, + }, base: "/", plugins: [ vue({