feat(usage): fix Resource Events filters — real event types, name search, no user filter
- Event type: trim the dropdown to the four types that are actually emitted (Created / Started / Stopped / Deleted) — updated/attached/detached were never recorded — and actually send the selection (event_types) to the API, which previously dropped it so the filter did nothing. - Add a resource-name text filter (debounced, case-insensitive substring). - Remove the "filter by user" select: the events list has no User column. Scope still applies (members see only their own events).
This commit is contained in:
@@ -90,6 +90,7 @@ export default {
|
|||||||
// --- Resource events ---
|
// --- Resource events ---
|
||||||
'usage.events.resourceType': 'Resource type',
|
'usage.events.resourceType': 'Resource type',
|
||||||
'usage.events.eventType': 'Event type',
|
'usage.events.eventType': 'Event type',
|
||||||
|
'usage.events.resourceName': 'Filter by name',
|
||||||
'usage.events.col.time': 'Time',
|
'usage.events.col.time': 'Time',
|
||||||
'usage.events.col.resource': 'Resource',
|
'usage.events.col.resource': 'Resource',
|
||||||
'usage.events.col.event': 'Event',
|
'usage.events.col.event': 'Event',
|
||||||
|
|||||||
@@ -90,6 +90,7 @@ export default {
|
|||||||
// --- Resource events ---
|
// --- Resource events ---
|
||||||
'usage.events.resourceType': 'リソースタイプ',
|
'usage.events.resourceType': 'リソースタイプ',
|
||||||
'usage.events.eventType': 'イベントタイプ',
|
'usage.events.eventType': 'イベントタイプ',
|
||||||
|
'usage.events.resourceName': '名前で絞り込み',
|
||||||
'usage.events.col.time': '時刻',
|
'usage.events.col.time': '時刻',
|
||||||
'usage.events.col.resource': 'リソース',
|
'usage.events.col.resource': 'リソース',
|
||||||
'usage.events.col.event': 'イベント',
|
'usage.events.col.event': 'イベント',
|
||||||
|
|||||||
@@ -90,6 +90,7 @@ export default {
|
|||||||
// --- Resource events ---
|
// --- Resource events ---
|
||||||
'usage.events.resourceType': 'Тип ресурса',
|
'usage.events.resourceType': 'Тип ресурса',
|
||||||
'usage.events.eventType': 'Тип события',
|
'usage.events.eventType': 'Тип события',
|
||||||
|
'usage.events.resourceName': 'Фильтр по имени',
|
||||||
'usage.events.col.time': 'Время',
|
'usage.events.col.time': 'Время',
|
||||||
'usage.events.col.resource': 'Ресурс',
|
'usage.events.col.resource': 'Ресурс',
|
||||||
'usage.events.col.event': 'Событие',
|
'usage.events.col.event': 'Событие',
|
||||||
|
|||||||
@@ -90,6 +90,7 @@ export default {
|
|||||||
// --- Resource events ---
|
// --- Resource events ---
|
||||||
'usage.events.resourceType': 'Kaynak türü',
|
'usage.events.resourceType': 'Kaynak türü',
|
||||||
'usage.events.eventType': 'Olay türü',
|
'usage.events.eventType': 'Olay türü',
|
||||||
|
'usage.events.resourceName': 'Ada göre filtrele',
|
||||||
'usage.events.col.time': 'Zaman',
|
'usage.events.col.time': 'Zaman',
|
||||||
'usage.events.col.resource': 'Kaynak',
|
'usage.events.col.resource': 'Kaynak',
|
||||||
'usage.events.col.event': 'Olay',
|
'usage.events.col.event': 'Olay',
|
||||||
|
|||||||
@@ -90,6 +90,7 @@ export default {
|
|||||||
// --- Resource events ---
|
// --- Resource events ---
|
||||||
'usage.events.resourceType': '资源类型',
|
'usage.events.resourceType': '资源类型',
|
||||||
'usage.events.eventType': '事件类型',
|
'usage.events.eventType': '事件类型',
|
||||||
|
'usage.events.resourceName': '按名称筛选',
|
||||||
'usage.events.col.time': '时间',
|
'usage.events.col.time': '时间',
|
||||||
'usage.events.col.resource': '资源',
|
'usage.events.col.resource': '资源',
|
||||||
'usage.events.col.event': '事件',
|
'usage.events.col.event': '事件',
|
||||||
|
|||||||
@@ -399,6 +399,7 @@ export async function queryResourceEvents(
|
|||||||
scope?: 'self' | 'all';
|
scope?: 'self' | 'all';
|
||||||
filters?: ResourceUsageFilters;
|
filters?: ResourceUsageFilters;
|
||||||
resource_types?: string[];
|
resource_types?: string[];
|
||||||
|
resource_name?: string;
|
||||||
event_types?: string[];
|
event_types?: string[];
|
||||||
page?: number;
|
page?: number;
|
||||||
perPage?: number;
|
perPage?: number;
|
||||||
@@ -412,9 +413,13 @@ export async function queryResourceEvents(
|
|||||||
end_date: data.end_date,
|
end_date: data.end_date,
|
||||||
scope: data.scope ?? 'all',
|
scope: data.scope ?? 'all',
|
||||||
resource_type: data.resource_types?.[0],
|
resource_type: data.resource_types?.[0],
|
||||||
// GET endpoints take creator_ids as a CSV string (avoids axios array
|
// GET endpoints take list params as CSV strings (avoids axios array
|
||||||
// serialization quirks); the server splits it back into a list.
|
// serialization quirks); the server splits them back into lists.
|
||||||
...(creatorIds?.length ? { creator_ids: creatorIds.join(',') } : {}),
|
...(creatorIds?.length ? { creator_ids: creatorIds.join(',') } : {}),
|
||||||
|
...(data.event_types?.length
|
||||||
|
? { event_types: data.event_types.join(',') }
|
||||||
|
: {}),
|
||||||
|
...(data.resource_name ? { resource_name: data.resource_name } : {}),
|
||||||
page: data.page ?? 1,
|
page: data.page ?? 1,
|
||||||
perPage: data.perPage ?? 50
|
perPage: data.perPage ?? 50
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -9,25 +9,31 @@
|
|||||||
* event-type selects ride in the bar's ``extra`` slot.
|
* event-type selects ride in the bar's ``extra`` slot.
|
||||||
*/
|
*/
|
||||||
import { useAccess, useIntl } from '@umijs/max';
|
import { useAccess, useIntl } from '@umijs/max';
|
||||||
import { Select, Table, Tag } from 'antd';
|
import { Input, Select, Table, Tag } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import React, { useEffect, useMemo, useState } from 'react';
|
import _ from 'lodash';
|
||||||
|
import React, {
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useState
|
||||||
|
} from 'react';
|
||||||
import {
|
import {
|
||||||
queryResourceEvents,
|
queryResourceEvents,
|
||||||
ResourceEventItem,
|
ResourceEventItem,
|
||||||
ResourceEventsResponse
|
ResourceEventsResponse
|
||||||
} from '../apis/resource';
|
} from '../apis/resource';
|
||||||
import useResourceMeta from '../hooks/use-resource-meta';
|
|
||||||
import ResourceFilterBar from './resource-filter-bar';
|
import ResourceFilterBar from './resource-filter-bar';
|
||||||
|
|
||||||
|
// Only these four are ever emitted (see resource_event_logger): create/delete
|
||||||
|
// + the metering-window pair. updated/attached/detached exist as enum values
|
||||||
|
// but are intentionally not recorded, so they're not offered as filters.
|
||||||
const EVENT_COLOR: Record<string, string> = {
|
const EVENT_COLOR: Record<string, string> = {
|
||||||
created: 'green',
|
created: 'green',
|
||||||
deleted: 'red',
|
deleted: 'red',
|
||||||
phase_to_metered: 'blue',
|
phase_to_metered: 'blue',
|
||||||
phase_left_metered: 'orange',
|
phase_left_metered: 'orange'
|
||||||
updated: 'cyan',
|
|
||||||
attached: 'purple',
|
|
||||||
detached: 'gold'
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Humanize a failure phase enum for display, e.g. "SSHPublicKeyCreateFailed" →
|
// Humanize a failure phase enum for display, e.g. "SSHPublicKeyCreateFailed" →
|
||||||
@@ -85,18 +91,6 @@ const ResourceEvents: React.FC = () => {
|
|||||||
{
|
{
|
||||||
value: 'phase_left_metered',
|
value: 'phase_left_metered',
|
||||||
label: intl.formatMessage({ id: 'usage.events.type.stopped' })
|
label: intl.formatMessage({ id: 'usage.events.type.stopped' })
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'updated',
|
|
||||||
label: intl.formatMessage({ id: 'usage.events.type.updated' })
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'attached',
|
|
||||||
label: intl.formatMessage({ id: 'usage.events.type.attached' })
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'detached',
|
|
||||||
label: intl.formatMessage({ id: 'usage.events.type.detached' })
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
[intl]
|
[intl]
|
||||||
@@ -112,42 +106,70 @@ const ResourceEvents: React.FC = () => {
|
|||||||
[EVENT_TYPE_OPTIONS]
|
[EVENT_TYPE_OPTIONS]
|
||||||
);
|
);
|
||||||
|
|
||||||
const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs]>([
|
// All filters live in one query-params object; ``resourceType`` is single
|
||||||
dayjs().subtract(29, 'day'),
|
// (the backend filters by one) and ``nameQuery`` is the debounced substring.
|
||||||
dayjs()
|
type QueryParams = {
|
||||||
]);
|
dateRange: [dayjs.Dayjs, dayjs.Dayjs];
|
||||||
const [selectedUsers, setSelectedUsers] = useState<number[]>([]);
|
resourceType?: string;
|
||||||
const [resourceTypes, setResourceTypes] = useState<string[]>([]);
|
eventTypes: string[];
|
||||||
const [eventTypes, setEventTypes] = useState<string[]>([]);
|
nameQuery: string;
|
||||||
const [page, setPage] = useState(1);
|
page: number;
|
||||||
const [data, setData] = useState<ResourceEventsResponse | null>(null);
|
|
||||||
const [refreshKey, setRefreshKey] = useState(0);
|
|
||||||
|
|
||||||
const { creators: userOptions } = useResourceMeta(scope);
|
|
||||||
|
|
||||||
const fetch = async () => {
|
|
||||||
try {
|
|
||||||
const res = await queryResourceEvents({
|
|
||||||
start_date: dateRange[0].format('YYYY-MM-DD'),
|
|
||||||
end_date: dateRange[1].format('YYYY-MM-DD'),
|
|
||||||
scope,
|
|
||||||
filters: selectedUsers.length
|
|
||||||
? { creator_ids: selectedUsers }
|
|
||||||
: undefined,
|
|
||||||
resource_types: resourceTypes,
|
|
||||||
event_types: eventTypes,
|
|
||||||
page,
|
|
||||||
perPage: 50
|
|
||||||
});
|
|
||||||
setData(res);
|
|
||||||
} catch {
|
|
||||||
// Keep last response on failure.
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
const [queryParams, setQueryParams] = useState<QueryParams>({
|
||||||
|
dateRange: [dayjs().subtract(29, 'day'), dayjs()],
|
||||||
|
resourceType: undefined,
|
||||||
|
eventTypes: [],
|
||||||
|
nameQuery: '',
|
||||||
|
page: 1
|
||||||
|
});
|
||||||
|
const [data, setData] = useState<ResourceEventsResponse | null>(null);
|
||||||
|
|
||||||
|
// Latest params, so the stable debounced name handler reads current values.
|
||||||
|
const queryRef = useRef(queryParams);
|
||||||
|
queryRef.current = queryParams;
|
||||||
|
|
||||||
|
// Single fetch entry point: merge the patch into the current params, persist
|
||||||
|
// them, then request — triggered from each handler rather than from effect
|
||||||
|
// dependencies, so there's exactly one request per user action.
|
||||||
|
const fetchEvents = useCallback(
|
||||||
|
async (patch: Partial<QueryParams>) => {
|
||||||
|
const params = { ...queryRef.current, ...patch };
|
||||||
|
setQueryParams(params);
|
||||||
|
try {
|
||||||
|
const res = await queryResourceEvents({
|
||||||
|
start_date: params.dateRange[0].format('YYYY-MM-DD'),
|
||||||
|
end_date: params.dateRange[1].format('YYYY-MM-DD'),
|
||||||
|
scope,
|
||||||
|
resource_types: params.resourceType
|
||||||
|
? [params.resourceType]
|
||||||
|
: undefined,
|
||||||
|
resource_name: params.nameQuery || undefined,
|
||||||
|
event_types: params.eventTypes,
|
||||||
|
page: params.page,
|
||||||
|
perPage: 50
|
||||||
|
});
|
||||||
|
setData(res);
|
||||||
|
} catch {
|
||||||
|
// Keep last response on failure.
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[scope]
|
||||||
|
);
|
||||||
|
|
||||||
|
// First load only — subsequent fetches are driven by the handlers below.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch();
|
fetchEvents({});
|
||||||
}, [dateRange, selectedUsers, resourceTypes, eventTypes, page, refreshKey]);
|
}, []);
|
||||||
|
|
||||||
|
// Debounced name search; a filter change always resets to page 1.
|
||||||
|
const onNameChange = useMemo(
|
||||||
|
() =>
|
||||||
|
_.debounce(
|
||||||
|
(value: string) => fetchEvents({ nameQuery: value.trim(), page: 1 }),
|
||||||
|
400
|
||||||
|
),
|
||||||
|
[fetchEvents]
|
||||||
|
);
|
||||||
|
|
||||||
const columns = useMemo(
|
const columns = useMemo(
|
||||||
() => [
|
() => [
|
||||||
@@ -204,32 +226,32 @@ const ResourceEvents: React.FC = () => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ResourceFilterBar
|
<ResourceFilterBar
|
||||||
value={dateRange}
|
value={queryParams.dateRange}
|
||||||
onChange={(dates) => {
|
onChange={(dates) => fetchEvents({ dateRange: dates, page: 1 })}
|
||||||
setDateRange(dates);
|
// No user filter here — the events list has no User column. Scope is
|
||||||
setPage(1);
|
// still applied to the query (members see only their own events).
|
||||||
}}
|
canManageUsers={false}
|
||||||
canManageUsers={canManageUsers}
|
userOptions={[]}
|
||||||
userOptions={userOptions}
|
selectedUsers={[]}
|
||||||
selectedUsers={selectedUsers}
|
onUsersChange={() => {}}
|
||||||
onUsersChange={(ids) => {
|
onRefresh={() => fetchEvents({})}
|
||||||
setSelectedUsers(ids);
|
|
||||||
setPage(1);
|
|
||||||
}}
|
|
||||||
onRefresh={() => setRefreshKey((k) => k + 1)}
|
|
||||||
extra={
|
extra={
|
||||||
<>
|
<>
|
||||||
|
<Input
|
||||||
|
allowClear
|
||||||
|
placeholder={intl.formatMessage({
|
||||||
|
id: 'usage.events.resourceName'
|
||||||
|
})}
|
||||||
|
onChange={(e) => onNameChange(e.target.value)}
|
||||||
|
style={{ width: 200 }}
|
||||||
|
/>
|
||||||
<Select
|
<Select
|
||||||
mode="multiple"
|
|
||||||
allowClear
|
allowClear
|
||||||
placeholder={intl.formatMessage({
|
placeholder={intl.formatMessage({
|
||||||
id: 'usage.events.resourceType'
|
id: 'usage.events.resourceType'
|
||||||
})}
|
})}
|
||||||
value={resourceTypes}
|
value={queryParams.resourceType}
|
||||||
onChange={(v) => {
|
onChange={(v) => fetchEvents({ resourceType: v, page: 1 })}
|
||||||
setResourceTypes(v);
|
|
||||||
setPage(1);
|
|
||||||
}}
|
|
||||||
options={RESOURCE_TYPE_OPTIONS}
|
options={RESOURCE_TYPE_OPTIONS}
|
||||||
style={{ minWidth: 200 }}
|
style={{ minWidth: 200 }}
|
||||||
/>
|
/>
|
||||||
@@ -239,11 +261,8 @@ const ResourceEvents: React.FC = () => {
|
|||||||
placeholder={intl.formatMessage({
|
placeholder={intl.formatMessage({
|
||||||
id: 'usage.events.eventType'
|
id: 'usage.events.eventType'
|
||||||
})}
|
})}
|
||||||
value={eventTypes}
|
value={queryParams.eventTypes}
|
||||||
onChange={(v) => {
|
onChange={(v) => fetchEvents({ eventTypes: v, page: 1 })}
|
||||||
setEventTypes(v);
|
|
||||||
setPage(1);
|
|
||||||
}}
|
|
||||||
options={EVENT_TYPE_OPTIONS}
|
options={EVENT_TYPE_OPTIONS}
|
||||||
style={{ minWidth: 240 }}
|
style={{ minWidth: 240 }}
|
||||||
/>
|
/>
|
||||||
@@ -257,10 +276,10 @@ const ResourceEvents: React.FC = () => {
|
|||||||
columns={columns as any}
|
columns={columns as any}
|
||||||
style={{ marginTop: 24 }}
|
style={{ marginTop: 24 }}
|
||||||
pagination={{
|
pagination={{
|
||||||
current: page,
|
current: queryParams.page,
|
||||||
pageSize: data?.pagination.perPage ?? 50,
|
pageSize: data?.pagination.perPage ?? 50,
|
||||||
total: data?.pagination.total ?? 0,
|
total: data?.pagination.total ?? 0,
|
||||||
onChange: (p) => setPage(p)
|
onChange: (p) => fetchEvents({ page: p })
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user