feat: handle list panel type options

This commit is contained in:
Yunus M 2025-06-09 11:24:29 +05:30 committed by SagarRajput-7
parent 1e7b2a7734
commit 62ecc44510
4 changed files with 42 additions and 28 deletions

View File

@ -70,6 +70,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
isAvailableToDisable={false} isAvailableToDisable={false}
queryVariant={config?.queryVariant || 'dropdown'} queryVariant={config?.queryVariant || 'dropdown'}
showOnlyWhereClause={showOnlyWhereClause} showOnlyWhereClause={showOnlyWhereClause}
isListViewPanel={isListViewPanel}
/> />
))} ))}
@ -95,7 +96,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
</div> </div>
)} )}
{!showOnlyWhereClause && ( {!showOnlyWhereClause && !isListViewPanel && (
<QueryFooter <QueryFooter
addNewBuilderQuery={addNewBuilderQuery} addNewBuilderQuery={addNewBuilderQuery}
addNewFormula={addNewFormula} addNewFormula={addNewFormula}
@ -103,7 +104,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
)} )}
</div> </div>
{!showOnlyWhereClause && ( {!showOnlyWhereClause && !isListViewPanel && (
<div className="query-names-section"> <div className="query-names-section">
{currentQuery.builder.queryData.map((query) => ( {currentQuery.builder.queryData.map((query) => (
<div key={query.queryName} className="query-name"> <div key={query.queryName} className="query-name">

View File

@ -88,6 +88,16 @@ function QueryAddOns({
}); });
useEffect(() => { useEffect(() => {
if (isListViewPanel) {
setAddOns([]);
setSelectedViews([
ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
]);
return;
}
if (panelType === PANEL_TYPES.VALUE) { if (panelType === PANEL_TYPES.VALUE) {
// Filter out all add-ons except legend format // Filter out all add-ons except legend format
setAddOns((prevAddOns) => setAddOns((prevAddOns) =>
@ -103,7 +113,7 @@ function QueryAddOns({
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [panelType]); }, [panelType, isListViewPanel]);
const handleOptionClick = (e: RadioChangeEvent): void => { const handleOptionClick = (e: RadioChangeEvent): void => {
if (selectedViews.find((view) => view.key === e.target.value.key)) { if (selectedViews.find((view) => view.key === e.target.value.key)) {

View File

@ -104,6 +104,7 @@ export const QueryV2 = memo(function QueryV2({
/> />
</div> </div>
{!isListViewPanel && (
<Dropdown <Dropdown
className="query-actions-dropdown" className="query-actions-dropdown"
menu={{ menu={{
@ -126,6 +127,7 @@ export const QueryV2 = memo(function QueryV2({
> >
<Ellipsis size={16} /> <Ellipsis size={16} />
</Dropdown> </Dropdown>
)}
</div> </div>
</div> </div>
)} )}
@ -150,7 +152,7 @@ export const QueryV2 = memo(function QueryV2({
</div> </div>
</div> </div>
{!showOnlyWhereClause && ( {!showOnlyWhereClause && !isListViewPanel && (
<QueryAggregation <QueryAggregation
dataSource={dataSource} dataSource={dataSource}
panelType={panelType || undefined} panelType={panelType || undefined}
@ -171,7 +173,7 @@ export const QueryV2 = memo(function QueryV2({
index={index} index={index}
query={query} query={query}
version="v3" version="v3"
isListViewPanel={false} isListViewPanel={isListViewPanel}
showReduceTo={showReduceTo} showReduceTo={showReduceTo}
panelType={panelType} panelType={panelType}
/> />

View File

@ -139,6 +139,7 @@ export default function QBEntityOptions({
)} )}
{showFunctions && {showFunctions &&
!isListViewPanel &&
(isMetricsDataSource || isLogsDataSource) && (isMetricsDataSource || isLogsDataSource) &&
query && query &&
onQueryFunctionsUpdates && ( onQueryFunctionsUpdates && (
@ -161,7 +162,7 @@ export default function QBEntityOptions({
)} )}
</div> </div>
{showDeleteButton && ( {showDeleteButton && !isListViewPanel && (
<Button className="periscope-btn ghost" onClick={onDelete}> <Button className="periscope-btn ghost" onClick={onDelete}>
<Trash2 size={14} /> <Trash2 size={14} />
</Button> </Button>