diff --git a/frontend/public/locales/en/dashboard.json b/frontend/public/locales/en/dashboard.json index d2e90237a9..26e8f289a9 100644 --- a/frontend/public/locales/en/dashboard.json +++ b/frontend/public/locales/en/dashboard.json @@ -1,6 +1,7 @@ { "create_dashboard": "Create Dashboard", "import_json": "Import Dashboard JSON", + "view_template": "View templates", "import_grafana_json": "Import Grafana JSON", "copy_to_clipboard": "Copy To ClipBoard", "download_json": "Download JSON", diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss index ef4a7c0a67..cf9ec283d2 100644 --- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss +++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss @@ -590,6 +590,8 @@ } .new-dashboard-menu { + width: 200px; + .create-dashboard-menu-item { display: flex; align-items: center; diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx index 8de34fdaf1..421c7e31c4 100644 --- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx +++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx @@ -45,6 +45,8 @@ import { Ellipsis, EllipsisVertical, Expand, + ExternalLink, + Github, HdmiPort, LayoutGrid, Link2, @@ -53,6 +55,8 @@ import { RotateCw, Search, } from 'lucide-react'; +// #TODO: lucide will be removing brand icons like Github in future, in that case we can use simple icons +// see more: https://github.com/lucide-icons/lucide/issues/94 import { handleContactSupport } from 'pages/Integrations/utils'; import { useDashboard } from 'providers/Dashboard/Dashboard'; import { @@ -600,6 +604,28 @@ function DashboardsList(): JSX.Element { ), key: '1', }, + { + label: ( + + +
+ View templates +
+ +
+
+ ), + key: '2', + }, ]; if (createNewDashboard) { diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx index 9bf1db2051..62767e6799 100644 --- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx +++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx @@ -4,7 +4,15 @@ import { red } from '@ant-design/colors'; import { ExclamationCircleTwoTone } from '@ant-design/icons'; import MEditor, { Monaco } from '@monaco-editor/react'; import { Color } from '@signozhq/design-tokens'; -import { Button, Modal, Space, Typography, Upload, UploadProps } from 'antd'; +import { + Button, + Flex, + Modal, + Space, + Typography, + Upload, + UploadProps, +} from 'antd'; import logEvent from 'api/common/logEvent'; import createDashboard from 'api/dashboard/create'; import ROUTES from 'constants/routes'; @@ -13,7 +21,9 @@ import { MESSAGE } from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout'; import history from 'lib/history'; -import { MonitorDot, MoveRight, X } from 'lucide-react'; +import { ExternalLink, Github, MonitorDot, MoveRight, X } from 'lucide-react'; +// #TODO: Lucide will be removing brand icons like GitHub in the future. In that case, we can use Simple Icons. https://simpleicons.org/ +// See more: https://github.com/lucide-icons/lucide/issues/94 import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { generatePath } from 'react-router-dom'; @@ -174,27 +184,43 @@ function ImportJSON({ )}
- false} - action="none" - data={jsonData} - > - - + + + + + +