fix(style): dashboard usage filters

src/pages/dashboard/components/usage-inner/filter-bar.tsx

@@ -7,44 +7,15 @@ import { useIntl } from '@umijs/max';
 import { Button, DatePicker, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
-import styled from 'styled-components';
 import { DASHBOARD_STATS_API } from '../../apis';
 import useRangePickerPreset from '../../hooks/use-rangepicker-preset';
-
+import FilterBarCss from '../../styles/filter-bar.less';
-const OptionWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const LabelWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
 
 const DefaultDateConfig = {
   maxRange: 60,
   defaultRange: 29
 };
 
-const FilterWrapper = styled.div`
-  position: relative;
-  z-index: 10;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0px;
-  .selection {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  .ant-select-selection-overflow-item > span {
-    height: 24px;
-  }
-`;
-
 interface FilterBarProps {
   query: any;
   userList: any[];
@@ -105,28 +76,28 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
 
     if (data.providerType === 'deployments') {
       return (
-        <OptionWrapper>
+        <span className={FilterBarCss.optionsWrapper}>
           <ProviderLogo provider={data.providerType as string} />
-          <AutoTooltip ghost maxWidth={105}>
+          <AutoTooltip ghost>
             {intl.formatMessage({ id: 'menu.models.deployment' })}
           </AutoTooltip>
-        </OptionWrapper>
+        </span>
       );
     }
 
     return (
-      <OptionWrapper>
+      <span className={FilterBarCss.optionsWrapper}>
         <ProviderLogo provider={data.providerType as string} />
-        <AutoTooltip ghost maxWidth={105}>
+        <AutoTooltip ghost>
           <span>{data.label}</span>
         </AutoTooltip>
-      </OptionWrapper>
+      </span>
     );
   };
 
   return (
-    <FilterWrapper>
+    <div className={FilterBarCss.wrapper}>
-      <div className="selection">
+      <div className={FilterBarCss.selection}>
         <DatePicker.RangePicker
           maxDate={dayjs()}
           defaultValue={[
@@ -149,7 +120,7 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
           placeholder={intl.formatMessage({
             id: 'dashboard.usage.selectuser'
           })}
-          style={{ maxWidth: 200, minWidth: 160 }}
+          style={{ width: '100%' }}
           value={query.user_ids}
           onChange={handleUsersChange}
         ></SimpleSelect>
@@ -164,9 +135,12 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
           }}
           styles={{
             root: {
-              width: cascaderWidth
+              width: '100%'
             },
             popup: {
+              list: {
+                flex: 1
+              },
               listItem: {
                 padding: '5px 10px'
               }
@@ -190,7 +164,7 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
           </Tooltip>
         )}
       </div>
-    </FilterWrapper>
+    </div>
   );
 };
 

src/pages/dashboard/components/usage-inner/index.tsx

@@ -2,23 +2,17 @@ import breakpoints from '@/config/breakpoints';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import { FC, useContext, useEffect, useMemo } from 'react';
-import styled from 'styled-components';
 import { DASHBOARD_STATS_API } from '../../apis';
 import { baseColorMap } from '../../config';
 import { DashboardContext } from '../../config/dashboard-context';
 import { DashboardUsageData } from '../../config/types';
+import FilterBarCss from '../../styles/filter-bar.less';
 import ExportData from './export-data';
 import FilterBar from './filter-bar';
 import RequestTokenInner from './request-token-inner';
 import TopUser from './top-user';
 import useUsageData from './use-usage-data';
 
-const TitleWrapper = styled.div`
-  margin: 0;
-  font-weight: 700;
-  min-width: max-content;
-`;
-
 const UsageInner: FC<{ maxWidth: number }> = ({ maxWidth }) => {
   const intl = useIntl();
   const { model_usage } = useContext(DashboardContext);
@@ -95,17 +89,10 @@ const UsageInner: FC<{ maxWidth: number }> = ({ maxWidth }) => {
     <div>
       <Row gutter={maxWidth < breakpoints.xl ? [0, 0] : [20, 20]}>
         <Col xs={24} sm={24} md={24} lg={24} xl={16}>
-          <div
+          <div className={FilterBarCss.usageTitle}>
-            style={{
+            <div className={FilterBarCss.usageTitleText}>
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              margin: '20px 0 '
-            }}
-          >
-            <TitleWrapper>
               {intl.formatMessage({ id: 'dashboard.usage' })}
-            </TitleWrapper>
+            </div>
             <FilterBar
               url={DASHBOARD_STATS_API}
               query={query}
@@ -129,9 +116,9 @@ const UsageInner: FC<{ maxWidth: number }> = ({ maxWidth }) => {
           <div
             style={{ margin: maxWidth < breakpoints.xl ? '26px 0' : '32px 0' }}
           >
-            <TitleWrapper>
+            <div className={FilterBarCss.usageTitleText}>
               {intl.formatMessage({ id: 'dashboard.topusers' })}
-            </TitleWrapper>
+            </div>
           </div>
           <TopUser
             userData={topUserData.userData}

src/pages/dashboard/styles/filter-bar.less

@@ -0,0 +1,46 @@
+.wrapper {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  gap: 16px;
+  flex: 1;
+
+  .selection {
+    display: grid;
+    flex: 1;
+    grid-template-columns:
+      max-content minmax(160px, 200px) minmax(300px, 1fr)
+      max-content;
+    gap: 12px;
+    align-items: center;
+  }
+
+  :global {
+    .ant-select-selection-overflow-item > span {
+      height: 24px;
+    }
+  }
+}
+
+.optionsWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 4px;
+}
+
+.usageTitle {
+  margin: 20px 0;
+  display: grid;
+  align-items: center;
+  grid-template-columns: minmax(45px, 200px) 1fr;
+}
+
+.usageTitleText {
+  margin: 0;
+  font-weight: 700;
+  min-width: max-content;
+}