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}
- >
- }
- onClick={(): void => {
- logEvent('Dashboard List: Upload JSON file clicked', {});
- }}
+
+ false}
+ action="none"
+ data={jsonData}
>
- {' '}
- {t('upload_json_file')}
-
-
+ }
+ onClick={(): void => {
+ logEvent('Dashboard List: Upload JSON file clicked', {});
+ }}
+ >
+ {' '}
+ {t('upload_json_file')}
+
+
+
+ }
+ >
+ {t('view_template')}
+
+
+
+