Skip to content

Commit cec515c

Browse files
iamfaraniamfaran
committed
add managed filter
1 parent 009d6fa commit cec515c

File tree

3 files changed

+90
-36
lines changed

3 files changed

+90
-36
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col } from 'antd';
3-
import { SyncOutlined, CloudUploadOutlined, AuditOutlined, AppstoreOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined } from '@ant-design/icons';
3+
import { SyncOutlined, CloudUploadOutlined, AuditOutlined, AppstoreOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined, FilterOutlined } from '@ant-design/icons';
44
import Title from 'antd/lib/typography/Title';
55
import { Environment } from '../types/environment.types';
66
import { App, AppStats } from '../types/app.types';
@@ -31,6 +31,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
3131
const [error, setError] = useState<string | null>(null);
3232
const [searchText, setSearchText] = useState('');
3333
const { openDeployModal } = useDeployModal();
34+
const [showManagedOnly, setShowManagedOnly] = useState(false);
3435

3536
// Fetch apps
3637
const fetchApps = async () => {
@@ -132,6 +133,10 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
132133
app.applicationId.toLowerCase().includes(searchText.toLowerCase()))
133134
: apps;
134135

136+
const displayedApps = showManagedOnly
137+
? filteredApps.filter(app => app.managed)
138+
: filteredApps;
139+
135140
// Table columns
136141
const columns = [
137142
{
@@ -366,8 +371,8 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
366371
/>
367372
) : (
368373
<>
369-
{/* Search Bar */}
370-
<div style={{ marginBottom: 20 }}>
374+
{/* Search and Filter Bar */}
375+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
371376
<Search
372377
placeholder="Search apps by name or ID"
373378
allowClear
@@ -376,16 +381,28 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
376381
style={{ width: 300 }}
377382
size="large"
378383
/>
379-
{searchText && filteredApps.length !== apps.length && (
380-
<div style={{ marginTop: 8, color: '#8c8c8c' }}>
381-
Showing {filteredApps.length} of {apps.length} apps
382-
</div>
383-
)}
384+
<Button
385+
onClick={() => setShowManagedOnly(!showManagedOnly)}
386+
type="default"
387+
icon={<FilterOutlined />}
388+
style={{
389+
marginLeft: '8px',
390+
backgroundColor: showManagedOnly ? '#1890ff' : 'white',
391+
color: showManagedOnly ? 'white' : '#1890ff',
392+
borderColor: '#1890ff'
393+
}}
394+
/>
384395
</div>
385396

397+
{searchText && displayedApps.length !== apps.length && (
398+
<div style={{ marginTop: 8, color: '#8c8c8c' }}>
399+
Showing {displayedApps.length} of {apps.length} apps
400+
</div>
401+
)}
402+
386403
<Table
387404
columns={columns}
388-
dataSource={filteredApps}
405+
dataSource={displayedApps}
389406
rowKey="applicationId"
390407
pagination={{
391408
pageSize: 10,

‎client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
ApiOutlined,
99
CheckCircleFilled,
1010
CloudServerOutlined,
11-
DisconnectOutlined
11+
DisconnectOutlined,
12+
FilterOutlined
1213
} from '@ant-design/icons';
1314
import Title from 'antd/lib/typography/Title';
1415
import { Environment } from '../types/environment.types';
@@ -40,6 +41,7 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
4041
const [error, setError] = useState<string | null>(null);
4142
const [searchText, setSearchText] = useState('');
4243
const { openDeployModal } = useDeployModal();
44+
const [showManagedOnly, setShowManagedOnly] = useState(false);
4345

4446
// Fetch data sources
4547
const fetchDataSources = async () => {
@@ -122,13 +124,17 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
122124
}
123125
};
124126

125-
// Filter data sources based on search
127+
// Filter data sources based on managed status and search
126128
const filteredDataSources = searchText
127129
? dataSources.filter(ds =>
128130
ds.name.toLowerCase().includes(searchText.toLowerCase()) ||
129131
ds.id.toString().toLowerCase().includes(searchText.toLowerCase()))
130132
: dataSources;
131133

134+
const displayedDataSources = showManagedOnly
135+
? filteredDataSources.filter(ds => ds.managed)
136+
: filteredDataSources;
137+
132138
// Table columns
133139
const columns = [
134140
{
@@ -356,6 +362,29 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
356362
</Col>
357363
</Row>
358364

365+
{/* Update the search and filter bar */}
366+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
367+
<Search
368+
placeholder="Search data sources by name or ID"
369+
allowClear
370+
onSearch={value => setSearchText(value)}
371+
onChange={e => setSearchText(e.target.value)}
372+
style={{ width: 300 }}
373+
size="large"
374+
/>
375+
<Button
376+
onClick={() => setShowManagedOnly(!showManagedOnly)}
377+
type="default"
378+
icon={<FilterOutlined />}
379+
style={{
380+
marginLeft: '8px',
381+
backgroundColor: showManagedOnly ? '#1890ff' : 'white',
382+
color: showManagedOnly ? 'white' : '#1890ff',
383+
borderColor: '#1890ff'
384+
}}
385+
/>
386+
</div>
387+
359388
{/* Content */}
360389
<Card
361390
style={{
@@ -375,25 +404,15 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
375404
) : (
376405
<>
377406
{/* Search Bar */}
378-
<div style={{ marginBottom: 20 }}>
379-
<Search
380-
placeholder="Search data sources by name or ID"
381-
allowClear
382-
onSearch={value => setSearchText(value)}
383-
onChange={e => setSearchText(e.target.value)}
384-
style={{ width: 300 }}
385-
size="large"
386-
/>
387-
{searchText && filteredDataSources.length !== dataSources.length && (
388-
<div style={{ marginTop: 8, color: '#8c8c8c' }}>
389-
Showing {filteredDataSources.length} of {dataSources.length} data sources
390-
</div>
391-
)}
392-
</div>
407+
{searchText && displayedDataSources.length !== dataSources.length && (
408+
<div style={{ marginTop: 8, color: '#8c8c8c' }}>
409+
Showing {displayedDataSources.length} of {dataSources.length} data sources
410+
</div>
411+
)}
393412

394413
<Table
395414
columns={columns}
396-
dataSource={filteredDataSources}
415+
dataSource={displayedDataSources}
397416
rowKey="id"
398417
pagination={{
399418
pageSize: 10,

‎client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
CloudServerOutlined,
1010
DisconnectOutlined,
1111
ApiOutlined,
12-
ThunderboltOutlined
12+
ThunderboltOutlined,
13+
FilterOutlined
1314
} from '@ant-design/icons';
1415
import Title from 'antd/lib/typography/Title';
1516
import { Environment } from '../types/environment.types';
@@ -41,6 +42,7 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
4142
const [error, setError] = useState<string | null>(null);
4243
const [searchText, setSearchText] = useState('');
4344
const { openDeployModal } = useDeployModal();
45+
const [showManagedOnly, setShowManagedOnly] = useState(false);
4446

4547
// Fetch queries
4648
const fetchQueries = async () => {
@@ -130,6 +132,10 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
130132
query.id.toLowerCase().includes(searchText.toLowerCase()))
131133
: queries;
132134

135+
const displayedQueries = showManagedOnly
136+
? filteredQueries.filter(query => query.managed)
137+
: filteredQueries;
138+
133139
// Helper function to generate colors from strings
134140
const stringToColor = (str: string) => {
135141
let hash = 0;
@@ -367,8 +373,8 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
367373
/>
368374
) : (
369375
<>
370-
{/* Search Bar */}
371-
<div style={{ marginBottom: 20 }}>
376+
{/* Search and Filter Bar */}
377+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
372378
<Search
373379
placeholder="Search queries by name or ID"
374380
allowClear
@@ -377,16 +383,28 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
377383
style={{ width: 300 }}
378384
size="large"
379385
/>
380-
{searchText && filteredQueries.length !== queries.length && (
381-
<div style={{ marginTop: 8, color: '#8c8c8c' }}>
382-
Showing {filteredQueries.length} of {queries.length} queries
383-
</div>
384-
)}
386+
<Button
387+
onClick={() => setShowManagedOnly(!showManagedOnly)}
388+
type="default"
389+
icon={<FilterOutlined />}
390+
style={{
391+
marginLeft: '8px',
392+
backgroundColor: showManagedOnly ? '#1890ff' : 'white',
393+
color: showManagedOnly ? 'white' : '#1890ff',
394+
borderColor: '#1890ff'
395+
}}
396+
/>
385397
</div>
386398

399+
{searchText && displayedQueries.length !== queries.length && (
400+
<div style={{ marginTop: 8, color: '#8c8c8c' }}>
401+
Showing {displayedQueries.length} of {queries.length} queries
402+
</div>
403+
)}
404+
387405
<Table
388406
columns={columns}
389-
dataSource={filteredQueries}
407+
dataSource={displayedQueries}
390408
rowKey="id"
391409
pagination={{
392410
pageSize: 10,

0 commit comments

Comments
 (0)