feat: Улучшить фильтрацию по community в менеджерах ASNs, Domains и IPRanges, добавив подсказки с метаданными для опций выбора

2025-08-27 19:05:11 +07:00
parent 61f0db7b03
commit 960f68b8ec
3 changed files with 63 additions and 12 deletions
@@ -572,11 +572,28 @@ function ASNsNewManager() {
              <h3 className="card-title mb-0">Список ASN <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
              <div className="d-flex gap-2 w-50">
                {/* Фильтр по community */}
-                <select className="form-select w-auto" value={filterCommunity} onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}>
+                <select
+                  className="form-select w-auto"
+                  value={filterCommunity}
+                  onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
+                  title={(() => {
+                    const meta = communities.find(c => c.value === filterCommunity);
+                    if (!meta) return 'Все community';
+                    const name = meta.name ? meta.name + ' — ' : '';
+                    const desc = meta.description || '';
+                    const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
+                    return name + desc + tags;
+                  })()}
+                >
                  <option value="">Все community</option>
-                  {allCommunities.map(community => (
-                    <option key={community} value={community}>{community}</option>
-                  ))}
+                  {allCommunities.map(community => {
+                    const meta = communities.find(c => c.value === community);
+                    const label = meta && meta.name ? `${community} — ${meta.name}` : community;
+                    const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
+                    return (
+                      <option key={community} value={community} title={title}>{label}</option>
+                    );
+                  })}
                </select>
                {/* Поиск */}
                <div className="input-icon flex-grow-1">
@@ -578,11 +578,28 @@ function DomainsNewManager() {
              <h3 className="card-title mb-0">Список доменов <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
              <div className="d-flex gap-2 w-50">
                {/* Фильтр по community */}
-                <select className="form-select w-auto" value={filterCommunity} onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}>
+                <select
+                  className="form-select w-auto"
+                  value={filterCommunity}
+                  onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
+                  title={(() => {
+                    const meta = communities.find(c => c.value === filterCommunity);
+                    if (!meta) return 'Все community';
+                    const name = meta.name ? meta.name + ' — ' : '';
+                    const desc = meta.description || '';
+                    const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
+                    return name + desc + tags;
+                  })()}
+                >
                  <option value="">Все community</option>
-                  {allCommunities.map(community => (
-                    <option key={community} value={community}>{community}</option>
-                  ))}
+                  {allCommunities.map(community => {
+                    const meta = communities.find(c => c.value === community);
+                    const label = meta && meta.name ? `${community} — ${meta.name}` : community;
+                    const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
+                    return (
+                      <option key={community} value={community} title={title}>{label}</option>
+                    );
+                  })}
                </select>
                {/* Поиск */}
                <div className="input-icon flex-grow-1">
@@ -828,11 +828,28 @@ function IPRangesManager() {
              <h3 className="card-title mb-0">Список IP-диапазонов <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
              <div className="d-flex gap-2 w-50">
                {/* Фильтр по community */}
-                <select className="form-select w-auto" value={filterCommunity} onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}>
+                <select
+                  className="form-select w-auto"
+                  value={filterCommunity}
+                  onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
+                  title={(() => {
+                    const meta = communities.find(c => c.value === filterCommunity);
+                    if (!meta) return 'Все community';
+                    const name = meta.name ? meta.name + ' — ' : '';
+                    const desc = meta.description || '';
+                    const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
+                    return name + desc + tags;
+                  })()}
+                >
                  <option value="">Все community</option>
-                  {allCommunities.map(community => (
-                    <option key={community} value={community}>{community}</option>
-                  ))}
+                  {allCommunities.map(community => {
+                    const meta = communities.find(c => c.value === community);
+                    const label = meta && meta.name ? `${community} — ${meta.name}` : community;
+                    const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
+                    return (
+                      <option key={community} value={community} title={title}>{label}</option>
+                    );
+                  })}
                </select>
                {/* Поиск */}
                <div className="input-icon flex-grow-1">