diff --git a/services/webui/package-lock.json b/services/webui/package-lock.json index 2ada8ab08..58adf1142 100644 --- a/services/webui/package-lock.json +++ b/services/webui/package-lock.json @@ -78,6 +78,7 @@ "swagger-typescript-api": "^13.0.23", "swr": "^2.2.4", "typescript": "^4.9.5", + "uuid": "^11.1.0", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -26423,6 +26424,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -28681,11 +28690,15 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz", + "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], "bin": { - "uuid": "dist/bin/uuid" + "uuid": "dist/esm/bin/uuid" } }, "node_modules/v8-to-istanbul": { diff --git a/services/webui/package.json b/services/webui/package.json index 4b5ed97bb..744012290 100644 --- a/services/webui/package.json +++ b/services/webui/package.json @@ -73,6 +73,7 @@ "swagger-typescript-api": "^13.0.23", "swr": "^2.2.4", "typescript": "^4.9.5", + "uuid": "^11.1.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/services/webui/src/App.tsx b/services/webui/src/App.tsx index 1a58dd8c4..85e53c6d0 100644 --- a/services/webui/src/App.tsx +++ b/services/webui/src/App.tsx @@ -106,7 +106,6 @@ const GetLayout = (meResponse :any) => { }) } const SetDefaultLayout = (layout: any, meResponse: any) => { - console.log(layout) let url = '' if (window.location.origin === 'http://localhost:3000') { url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL @@ -131,7 +130,6 @@ const SetDefaultLayout = (layout: any, meResponse: any) => { is_default: true, is_private: true, } - console.log(body) axios .post(`${url}/main/core/api/v4/layout/set/widgets`, body, config) diff --git a/services/webui/src/components/widgets/WidgetLayout/index.tsx b/services/webui/src/components/widgets/WidgetLayout/index.tsx index 627d73e90..6707566fa 100644 --- a/services/webui/src/components/widgets/WidgetLayout/index.tsx +++ b/services/webui/src/components/widgets/WidgetLayout/index.tsx @@ -24,8 +24,8 @@ import { array } from 'prop-types' import Shortcuts from '../Shortcuts' import Integrations from '../Integrations' import SRE from '../KPI_Cards' -import { APIToWidget, WidgetAPI, WidgetToAPI } from '../../../utilities/widget' - +import { APIToWidget, Widget, WidgetAPI, WidgetToAPI } from '../../../utilities/widget' +import { v4 as uuid } from 'uuid' const COMPONENT_MAPPING = { table: TableWidget, chart: ChartWidget, @@ -121,7 +121,9 @@ export default function WidgetLayout({ id: layout?.id, is_default: layout.is_default, user_id: me?.username, - layout_config: layout_config, + widget_ids: layout_config?.map((widget: any) => { + return widget?.id + }), name: layout.name, description: layout.description, is_private: layout.is_private, @@ -134,43 +136,57 @@ export default function WidgetLayout({ console.log(err) }) } - const GetDefaultLayout = () => { - setLayoutLoading(true) - let url = '' - if (window.location.origin === 'http://localhost:3000') { - url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL - } else { - url = window.location.origin - } - // @ts-ignore - const token = JSON.parse(localStorage.getItem('openg_auth')).token +const GetDefaultLayout = () => { + const id = layout?.id + axios + .get( + `https://raw.githubusercontent.com/opengovern/platform-configuration/refs/heads/main/default_layout.json` + ) + .then((res) => { + SetDefaultLayoutWithDashbord(res?.data, me, id) + setLayout(res?.data) - const config = { - headers: { - Authorization: `Bearer ${token}`, - }, - } - const body = { - user_id: me?.username, - } + setLayoutLoading(false) + }) + .catch((err) => { + setLayoutLoading(false) + }) +} +const SetDefaultLayoutWithDashbord = (layout: any, meResponse: any,id: string) => { + let url = '' + if (window.location.origin === 'http://localhost:3000') { + url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL + } else { + url = window.location.origin + } + // @ts-ignore + const token = JSON.parse(localStorage.getItem('openg_auth')).token + + const config = { + headers: { + Authorization: `Bearer ${token}`, + }, + } + const body = { + user_id: meResponse?.username, + widgets: layout?.widgets?.map((widget: Widget) => { + return WidgetToAPI(widget, meResponse?.username, true, true) + }), + name: layout?.name, + description: layout?.description, + is_default: true, + is_private: true, + id: id, + } + + axios + .post(`${url}/main/core/api/v4/layout/set/widgets`, body, config) + .then((res) => {}) + .catch((err) => { + console.log(err) + }) +} - axios - .post(`${url}/main/core/api/v4/layout/get-default`, body, config) - .then((res) => { - const layout = res?.data - layout.widgets = layout?.widgets?.map((widget: WidgetAPI) => { - return APIToWidget(widget) - }) - setLayout(res?.data) - setLayoutLoading(false) - }) - .catch((err) => { - console.log(err) - // check if error is 404 - GetDefaultLayout() - setLayoutLoading(false) - }) - } const HandleRemoveItemByID = (id: string) => { const newItems = items.filter((item: any) => item.id !== id) setItems(newItems) @@ -323,7 +339,7 @@ export default function WidgetLayout({ return } const newItem = { - id: `${selectedAddItem}-${items?.length}`, + id: uuid(), data: { componentId: selectedAddItem, props: widgetProps, @@ -351,7 +367,7 @@ export default function WidgetLayout({ } if (id == 'integration') { const new_item = { - id: 'integration', + id: uuid(), data: { componentId: 'integration', title: 'Integrations', @@ -366,7 +382,7 @@ export default function WidgetLayout({ } if (id == 'shortcut') { const new_item = { - id: 'shortcut', + id: uuid(), data: { componentId: 'shortcut', title: 'Shortcuts', @@ -381,7 +397,7 @@ export default function WidgetLayout({ } if (id == 'sre') { const new_item = { - id: 'sre', + id: uuid(), data: { componentId: 'sre', title: 'SRE', @@ -493,7 +509,7 @@ export default function WidgetLayout({ // description={} actions={
- {/* Add Widget - */} +
} >