chore(pagination): fix the styles

* fix(infra-monitoring-jobs): title of the chart misleading

Ref: https://github.com/SigNoz/engineering-pod/issues/5211#issuecomment-4619888389

* fix(infra-monitoring-namespaces): wrong limit & using wrong filter for statefulsets

Ref: https://github.com/SigNoz/engineering-pod/issues/5211#issuecomment-4619023361

* feat(infra-monitoring-hosts): add new chart based on operations time

Ref: https://github.com/SigNoz/engineering-pod/issues/5211#issue-4578950064

* feat(infra-monitoring-hosts): add group by on chart for system disk io

Ref: https://github.com/SigNoz/engineering-pod/issues/5211#issuecomment-4611797867

* fix(infra-monitoring-hosts): chart for disk operations using the wrong metric

Ref: https://github.com/SigNoz/engineering-pod/issues/5211#issue-4578950064

* fix(infra-monitoring-deployments): little typo in the chart name

* fix(volumes): ensure the name/type are standard based on the metric type

docs/api/openapi.yml

@@ -2432,6 +2432,13 @@ components:
         url:
           type: string
       type: object
+    DashboardPanelDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2552,12 +2559,13 @@ components:
             $ref: '#/components/schemas/DashboardtypesDatasourceSpec'
           type: object
         display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/CommonDisplay'
         duration:
           type: string
         layouts:
           items:
             $ref: '#/components/schemas/DashboardtypesLayout'
+          nullable: true
           type: array
         links:
           items:
@@ -2566,6 +2574,7 @@ components:
         panels:
           additionalProperties:
             $ref: '#/components/schemas/DashboardtypesPanel'
+          nullable: true
           type: object
         refreshInterval:
           type: string
@@ -2573,19 +2582,10 @@ components:
           items:
             $ref: '#/components/schemas/DashboardtypesVariable'
           type: array
-      required:
-      - display
-      - variables
-      - panels
-      - layouts
-      - duration
       type: object
     DashboardtypesDatasourcePlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
-      required:
-      - kind
-      - spec
     DashboardtypesDatasourcePluginKind:
       enum:
       - signoz/Datasource
@@ -2612,15 +2612,6 @@ components:
         plugin:
           $ref: '#/components/schemas/DashboardtypesDatasourcePlugin'
       type: object
-    DashboardtypesDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      required:
-      - name
-      type: object
     DashboardtypesDynamicVariableSpec:
       properties:
         name:
@@ -2740,9 +2731,6 @@ components:
     DashboardtypesLayout:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec'
-      required:
-      - kind
-      - spec
     DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec:
       properties:
         kind:
@@ -2802,7 +2790,7 @@ components:
         defaultValue:
           $ref: '#/components/schemas/VariableDefaultValue'
         display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/VariableDisplay'
         name:
           type: string
         plugin:
@@ -2810,8 +2798,6 @@ components:
         sort:
           nullable: true
           type: string
-      required:
-      - display
       type: object
     DashboardtypesNumberPanelSpec:
       properties:
@@ -2831,9 +2817,6 @@ components:
           $ref: '#/components/schemas/DashboardtypesPanelKind'
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
-      required:
-      - kind
-      - spec
       type: object
     DashboardtypesPanelFormatting:
       properties:
@@ -2855,9 +2838,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
-      required:
-      - kind
-      - spec
     DashboardtypesPanelPluginKind:
       enum:
       - signoz/TimeSeriesPanel
@@ -2955,7 +2935,7 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/DashboardPanelDisplay'
         links:
           items:
             $ref: '#/components/schemas/DashboardLink'
@@ -2965,12 +2945,7 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
-          nullable: true
           type: array
-      required:
-      - display
-      - plugin
-      - queries
       type: object
     DashboardtypesPatchOp:
       enum:
@@ -3039,9 +3014,6 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5RequestType'
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
-      required:
-      - kind
-      - spec
       type: object
     DashboardtypesQueryPlugin:
       oneOf:
@@ -3051,9 +3023,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderTraceOperator'
-      required:
-      - kind
-      - spec
     DashboardtypesQueryPluginKind:
       enum:
       - signoz/BuilderQuery
@@ -3141,8 +3110,6 @@ components:
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesQueryPlugin'
-      required:
-      - plugin
       type: object
     DashboardtypesQueryVariableSpec:
       properties:
@@ -3313,9 +3280,6 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
-      required:
-      - kind
-      - spec
     DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
       properties:
         kind:
@@ -3345,9 +3309,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpec'
-      required:
-      - kind
-      - spec
     DashboardtypesVariablePluginKind:
       enum:
       - signoz/DynamicVariable

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3152,6 +3152,17 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
+export interface DashboardPanelDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3856,17 +3867,6 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 export enum DashboardtypesPanelKindDTO {
 	Panel = 'Panel',
 }
-export interface DashboardtypesDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4415,36 +4415,42 @@ export interface DashboardtypesQuerySpecDTO {
 	 * @type string
 	 */
 	name?: string;
-	plugin: DashboardtypesQueryPluginDTO;
+	plugin?: DashboardtypesQueryPluginDTO;
 }
 
 export interface DashboardtypesQueryDTO {
-	kind: Querybuildertypesv5RequestTypeDTO;
-	spec: DashboardtypesQuerySpecDTO;
+	kind?: Querybuildertypesv5RequestTypeDTO;
+	spec?: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display: DashboardtypesDisplayDTO;
+	display?: DashboardPanelDisplayDTO;
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
-	plugin: DashboardtypesPanelPluginDTO;
+	plugin?: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	queries: DashboardtypesQueryDTO[] | null;
+	queries?: DashboardtypesQueryDTO[];
 }
 
 export interface DashboardtypesPanelDTO {
-	kind: DashboardtypesPanelKindDTO;
-	spec: DashboardtypesPanelSpecDTO;
+	kind?: DashboardtypesPanelKindDTO;
+	spec?: DashboardtypesPanelSpecDTO;
 }
 
-export type DashboardtypesDashboardSpecDTOPanels = {
+export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
 	[key: string]: DashboardtypesPanelDTO;
 };
 
+/**
+ * @nullable
+ */
+export type DashboardtypesDashboardSpecDTOPanels =
+	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
+
 export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
@@ -4541,7 +4547,7 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display: DashboardtypesDisplayDTO;
+	display?: VariableDisplayDTO;
 	/**
 	 * @type string
 	 */
@@ -4583,23 +4589,23 @@ export interface DashboardtypesDashboardSpecDTO {
 	 * @type object
 	 */
 	datasources?: DashboardtypesDashboardSpecDTODatasources;
-	display: DashboardtypesDisplayDTO;
+	display?: CommonDisplayDTO;
 	/**
 	 * @type string
 	 */
-	duration: string;
+	duration?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	layouts: DashboardtypesLayoutDTO[];
+	layouts?: DashboardtypesLayoutDTO[] | null;
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
 	/**
-	 * @type object
+	 * @type object,null
 	 */
-	panels: DashboardtypesDashboardSpecDTOPanels;
+	panels?: DashboardtypesDashboardSpecDTOPanels;
 	/**
 	 * @type string
 	 */
@@ -4607,7 +4613,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	variables: DashboardtypesVariableDTO[];
+	variables?: DashboardtypesVariableDTO[];
 }
 
 export enum DashboardtypesDatasourcePluginKindDTO {

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -123,11 +123,13 @@
 		align-items: center;
 		justify-content: flex-end;
 		width: 100%;
-		padding: var(--padding-2) 0;
+	}
 
-		.ant-pagination-total-text {
-			margin-right: auto;
-		}
+	&__pagination-count {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		margin-right: auto;
 	}
 
 	&__pagination-range {

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -5,7 +5,8 @@ import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Pagination, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
+import { Pagination } from '@signozhq/ui/pagination';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountsQueryKey,
@@ -529,25 +530,25 @@ function ServiceAccountDrawer({
 	const footer = (
 		<div className="sa-drawer__footer">
 			{activeTab === ServiceAccountDrawerTab.Keys ? (
-				<Pagination
-					current={keysPage}
-					pageSize={PAGE_SIZE}
-					total={keys.length}
-					showTotal={(total: number, range: number[]): JSX.Element => (
-						<>
+				<div className="sa-drawer__keys-pagination">
+					{keys.length > 0 && (
+						<div className="sa-drawer__pagination-count">
 							<span className="sa-drawer__pagination-range">
-								{range[0]} &#8212; {range[1]}
+								{(keysPage - 1) * PAGE_SIZE + 1} &#8212;{' '}
+								{Math.min(keysPage * PAGE_SIZE, keys.length)}
 							</span>
-							<span className="sa-drawer__pagination-total"> of {total}</span>
-						</>
+							<span className="sa-drawer__pagination-total">of {keys.length}</span>
+						</div>
 					)}
-					showSizeChanger={false}
-					hideOnSinglePage
-					onChange={(page): void => {
-						void setKeysPage(page);
-					}}
-					className="sa-drawer__keys-pagination"
-				/>
+					<Pagination
+						current={keysPage}
+						pageSize={PAGE_SIZE}
+						total={keys.length}
+						onPageChange={(page): void => {
+							void setKeysPage(page);
+						}}
+					/>
+				</div>
 			) : (
 				<>
 					{!isDeleted && (

frontend/src/container/InfraMonitoringK8s/Deployments/constants.ts

@@ -72,7 +72,7 @@ export const deploymentWidgetInfo = [
 		yAxisUnit: '',
 	},
 	{
-		title: 'Memory usage, request, limits)',
+		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
 	},
 	{

frontend/src/container/InfraMonitoringK8s/Jobs/constants.ts

@@ -69,7 +69,7 @@ export const jobWidgetInfo = [
 		yAxisUnit: '',
 	},
 	{
-		title: 'Memory usage, request, limits',
+		title: 'Memory Usage',
 		yAxisUnit: 'bytes',
 	},
 	{

frontend/src/container/InfraMonitoringK8s/Namespaces/constants.ts

@@ -703,7 +703,7 @@ export const getNamespaceMetricsQueryPayload = (
 							],
 							having: [],
 							legend: `{{${k8sPodNameKey}}}`,
-							limit: 20,
+							limit: 10,
 							orderBy: [],
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
@@ -1014,8 +1014,8 @@ export const getNamespaceMetricsQueryPayload = (
 										id: '5f2a55c5',
 										key: {
 											dataType: DataTypes.String,
-											id: k8sStatefulsetNameKey,
-											key: k8sStatefulsetNameKey,
+											id: k8sNamespaceNameKey,
+											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
 										op: '=',

frontend/src/container/InfraMonitoringK8s/Volumes/constants.ts

@@ -317,9 +317,9 @@ export const getVolumeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_volume_inodes_used--float64----true',
+								id: 'k8s_volume_inodes_used--float64--Gauge--true',
 								key: k8sVolumeInodesUsedKey,
-								type: '',
+								type: 'Gauge',
 							},
 							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
@@ -409,9 +409,9 @@ export const getVolumeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_volume_inodes--float64----true',
+								id: 'k8s_volume_inodes--float64--Gauge--true',
 								key: k8sVolumeInodesKey,
-								type: '',
+								type: 'Gauge',
 							},
 							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
@@ -501,9 +501,9 @@ export const getVolumeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_volume_inodes_free--float64----true',
+								id: 'k8s_volume_inodes_free--float64--Gauge--true',
 								key: k8sVolumeInodesFreeKey,
-								type: '',
+								type: 'Gauge',
 							},
 							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -1619,6 +1619,9 @@ export const getHostQueryPayload = (
 	const diskOpTimeKey = dotMetricsEnabled
 		? 'system.disk.operation_time'
 		: 'system_disk_operation_time';
+	const diskOpsKey = dotMetricsEnabled
+		? 'system.disk.operations'
+		: 'system_disk_operations';
 	const diskPendingKey = dotMetricsEnabled
 		? 'system.disk.pending_operations'
 		: 'system_disk_pending_operations';
@@ -2375,9 +2378,24 @@ export const getHostQueryPayload = (
 								op: 'AND',
 							},
 							functions: [],
-							groupBy: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'direction--string--tag--false',
+
+									key: 'direction',
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'device--string--tag--false',
+
+									key: 'device',
+									type: 'tag',
+								},
+							],
 							having: [],
-							legend: 'system disk io',
+							legend: '{{device}}::{{direction}}',
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
@@ -2409,9 +2427,9 @@ export const getHostQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'system_disk_operation_time--float64--Sum--true',
+								id: 'system_disk_operations--float64--Sum--true',
 
-								key: diskOpTimeKey,
+								key: diskOpsKey,
 								type: 'Sum',
 							},
 							aggregateOperator: 'rate',
@@ -2421,7 +2439,7 @@ export const getHostQueryPayload = (
 							filters: {
 								items: [
 									{
-										id: 'diskop_f1',
+										id: 'diskops_f1',
 										key: {
 											dataType: DataTypes.String,
 											id: 'host_name--string--tag--false',
@@ -2454,7 +2472,7 @@ export const getHostQueryPayload = (
 							],
 							having: [
 								{
-									columnName: `SUM(${diskOpTimeKey})`,
+									columnName: `SUM(${diskOpsKey})`,
 									op: '>',
 									value: 0,
 								},
@@ -2557,6 +2575,88 @@ export const getHostQueryPayload = (
 			start,
 			end,
 		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_disk_operation_time--float64--Sum--true',
+
+								key: diskOpTimeKey,
+								type: 'Sum',
+							},
+							aggregateOperator: 'rate',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'diskoptime_f1',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'device--string--tag--false',
+
+									key: 'device',
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'direction--string--tag--false',
+
+									key: 'direction',
+									type: 'tag',
+								},
+							],
+							having: [
+								{
+									columnName: `SUM(${diskOpTimeKey})`,
+									op: '>',
+									value: 0,
+								},
+							],
+							legend: '{{device}}::{{direction}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'rate',
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				id: 'a8b3d2e1-4f5c-4a6b-9c8d-7e2f1a0b3c4f',
+				promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
 	];
 };
 
@@ -2631,5 +2731,5 @@ export const hostWidgetInfo = [
 	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
 	{ title: 'System disk operations/s', yAxisUnit: 'short' },
 	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'Disk operations time', yAxisUnit: 's' },
+	{ title: 'System disk operation time/s', yAxisUnit: 's' },
 ];

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Pagination, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
+import { Pagination } from '@signozhq/ui/pagination';
 import { useListRoles } from 'api/generated/services/role';
 import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
@@ -153,15 +154,6 @@ function RolesListingTable({
 		return result;
 	}, [displayList, currentPage]);
 
-	const showPaginationItem = (total: number, range: number[]): JSX.Element => (
-		<>
-			<span className="numbers">
-				{range[0]} &#8212; {range[1]}
-			</span>
-			<span className="total"> of {total}</span>
-		</>
-	);
-
 	if (!hasListPermission && listPerms !== null) {
 		return <PermissionDeniedFullPage permissionName="role:list" />;
 	}
@@ -280,16 +272,23 @@ function RolesListingTable({
 				</div>
 			</div>
 
-			<Pagination
-				current={currentPage}
-				pageSize={PAGE_SIZE}
-				total={totalRoleCount}
-				showTotal={showPaginationItem}
-				showSizeChanger={false}
-				hideOnSinglePage
-				onChange={(page): void => setCurrentPage(page)}
-				className="roles-table-pagination"
-			/>
+			<div className="roles-table-pagination">
+				{totalRoleCount > 0 && (
+					<div className="roles-table-count">
+						<span className="numbers">
+							{(currentPage - 1) * PAGE_SIZE + 1} &#8212;{' '}
+							{Math.min(currentPage * PAGE_SIZE, totalRoleCount)}
+						</span>
+						<span className="total">of {totalRoleCount}</span>
+					</div>
+				)}
+				<Pagination
+					current={currentPage}
+					pageSize={PAGE_SIZE}
+					total={totalRoleCount}
+					onPageChange={(page): void => setCurrentPage(page)}
+				/>
+			</div>
 		</div>
 	);
 }

frontend/src/container/RolesSettings/RolesSettings.styles.scss

@@ -212,7 +212,10 @@
 	justify-content: flex-end;
 	padding: 8px 16px;
 
-	.ant-pagination-total-text {
+	.roles-table-count {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-2);
 		margin-right: auto;
 
 		.numbers {

pkg/types/dashboardtypes/perses_dashboard.go

@@ -12,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/perses/spec/go/common"
 	"k8s.io/apimachinery/pkg/util/validation"
 )
 
@@ -157,6 +158,9 @@ func (p *PostableDashboardV2) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
 	}
 	*p = PostableDashboardV2(tmp)
+	if p.Spec.Display == nil {
+		p.Spec.Display = &common.Display{}
+	}
 	if !p.GenerateName && p.Spec.Display.Name == "" {
 		p.Spec.Display.Name = p.Name
 	}
@@ -183,7 +187,7 @@ func (p *PostableDashboardV2) validateName() error {
 	if p.Name != "" {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "name must be empty when generateName is true, got %q", p.Name)
 	}
-	if p.Spec.Display.Name == "" {
+	if p.Spec.Display == nil || p.Spec.Display.Name == "" {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.display.name is required when generateName is true")
 	}
 	return nil
@@ -327,6 +331,9 @@ func (u *UpdatableDashboardV2) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
 	}
 	*u = UpdatableDashboardV2(tmp)
+	if u.Spec.Display == nil {
+		u.Spec.Display = &common.Display{}
+	}
 	if u.Spec.Display.Name == "" {
 		u.Spec.Display.Name = u.Name
 	}

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -8,9 +8,10 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/perses/spec/go/common"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
@@ -165,7 +166,7 @@ func TestPostableDashboardV2NewDashboardV2(t *testing.T) {
 			DashboardV2MetadataBase: DashboardV2MetadataBase{SchemaVersion: SchemaVersion},
 			GenerateName:            true,
 			Spec: DashboardSpec{
-				Display: Display{Name: "My Dashboard!"},
+				Display: &common.Display{Name: "My Dashboard!"},
 			},
 		}
 

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -17,12 +17,12 @@ import (
 // occurrence is replaced with a typed SigNoz plugin whose OpenAPI schema is a
 // per-site discriminated oneOf.
 type DashboardSpec struct {
-	Display         Display                    `json:"display" required:"true"`
+	Display         *common.Display            `json:"display,omitempty"`
 	Datasources     map[string]*DatasourceSpec `json:"datasources,omitempty"`
-	Variables       []Variable                 `json:"variables" required:"true" nullable:"false"`
-	Panels          map[string]*Panel          `json:"panels" required:"true" nullable:"false"`
-	Layouts         []Layout                   `json:"layouts" required:"true" nullable:"false"`
-	Duration        common.DurationString      `json:"duration"  required:"true" nullable:"false"`
+	Variables       []Variable                 `json:"variables,omitempty"`
+	Panels          map[string]*Panel          `json:"panels"`
+	Layouts         []Layout                   `json:"layouts"`
+	Duration        common.DurationString      `json:"duration"`
 	RefreshInterval common.DurationString      `json:"refreshInterval,omitempty"`
 	Links           []dashboard.Link           `json:"links,omitempty"`
 }

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -18,8 +18,8 @@ import (
 // ══════════════════════════════════════════════
 
 type PanelPlugin struct {
-	Kind PanelPluginKind `json:"kind" required:"true"`
-	Spec any             `json:"spec" required:"true"`
+	Kind PanelPluginKind `json:"kind"`
+	Spec any             `json:"spec"`
 }
 
 // PrepareJSONSchema drops the reflected struct shape (type: object, properties)
@@ -72,8 +72,8 @@ func (v PanelPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ══════════════════════════════════════════════
 
 type QueryPlugin struct {
-	Kind QueryPluginKind `json:"kind" required:"true"`
-	Spec any             `json:"spec" required:"true"`
+	Kind QueryPluginKind `json:"kind"`
+	Spec any             `json:"spec"`
 }
 
 func (QueryPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -123,8 +123,8 @@ func (v QueryPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ══════════════════════════════════════════════
 
 type VariablePlugin struct {
-	Kind VariablePluginKind `json:"kind" required:"true"`
-	Spec any                `json:"spec" required:"true"`
+	Kind VariablePluginKind `json:"kind"`
+	Spec any                `json:"spec"`
 }
 
 func (VariablePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -171,8 +171,8 @@ func (v VariablePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error
 // ══════════════════════════════════════════════
 
 type DatasourcePlugin struct {
-	Kind DatasourcePluginKind `json:"kind" required:"true"`
-	Spec any                  `json:"spec" required:"true"`
+	Kind DatasourcePluginKind `json:"kind"`
+	Spec any                  `json:"spec"`
 }
 
 func (DatasourcePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {

pkg/types/dashboardtypes/perses_replicas.go

@@ -13,11 +13,6 @@ import (
 	"github.com/swaggest/jsonschema-go"
 )
 
-type Display struct {
-	Name        string `json:"name" required:"true"`
-	Description string `json:"description,omitempty"`
-}
-
 // ══════════════════════════════════════════════
 // Datasource
 // ══════════════════════════════════════════════
@@ -33,8 +28,8 @@ type DatasourceSpec struct {
 // ══════════════════════════════════════════════
 
 type Panel struct {
-	Kind PanelKind `json:"kind" required:"true"`
-	Spec PanelSpec `json:"spec" required:"true"`
+	Kind PanelKind `json:"kind"`
+	Spec PanelSpec `json:"spec"`
 }
 
 // PanelKind is the panel envelope discriminator. Perses leaves it a free
@@ -59,10 +54,10 @@ func (k *PanelKind) UnmarshalJSON(data []byte) error {
 }
 
 type PanelSpec struct {
-	Display Display          `json:"display" required:"true"`
-	Plugin  PanelPlugin      `json:"plugin" required:"true"`
-	Queries []Query          `json:"queries" required:"true"`
-	Links   []dashboard.Link `json:"links,omitempty"`
+	Display *dashboard.PanelDisplay `json:"display,omitempty"`
+	Plugin  PanelPlugin             `json:"plugin"`
+	Queries []Query                 `json:"queries,omitempty"`
+	Links   []dashboard.Link        `json:"links,omitempty"`
 }
 
 // ══════════════════════════════════════════════
@@ -70,13 +65,13 @@ type PanelSpec struct {
 // ══════════════════════════════════════════════
 
 type Query struct {
-	Kind qb.RequestType `json:"kind" required:"true"`
-	Spec QuerySpec      `json:"spec" required:"true"`
+	Kind qb.RequestType `json:"kind"`
+	Spec QuerySpec      `json:"spec"`
 }
 
 type QuerySpec struct {
 	Name   string      `json:"name,omitempty"`
-	Plugin QueryPlugin `json:"plugin" required:"true"`
+	Plugin QueryPlugin `json:"plugin"`
 }
 
 // ══════════════════════════════════════════════
@@ -87,8 +82,8 @@ type QuerySpec struct {
 // *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
 // discriminated oneOf (see JSONSchemaOneOf).
 type Variable struct {
-	Kind variable.Kind `json:"kind" required:"true"`
-	Spec any           `json:"spec" required:"true"`
+	Kind variable.Kind `json:"kind"`
+	Spec any           `json:"spec"`
 }
 
 func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -140,7 +135,7 @@ func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
 // fields + Name) but with a typed VariablePlugin replacing common.Plugin.
 type ListVariableSpec struct {
-	Display         Display                `json:"display" required:"true"`
+	Display         *variable.Display      `json:"display,omitempty"`
 	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
 	AllowAllValue   bool                   `json:"allowAllValue"`
 	AllowMultiple   bool                   `json:"allowMultiple"`
@@ -160,8 +155,8 @@ type ListVariableSpec struct {
 // based on Kind. No plugin is involved, so we reuse the Perses spec types as
 // leaf imports.
 type Layout struct {
-	Kind dashboard.LayoutKind `json:"kind" required:"true"`
-	Spec any                  `json:"spec" required:"true"`
+	Kind dashboard.LayoutKind `json:"kind"`
+	Spec any                  `json:"spec"`
 }
 
 // layoutSpecs is the layout sum type factory. Perses only defines