ui: add hash to css filenames

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx

@@ -21,8 +21,11 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
 
   const onErrorClick = (e: any, error: any) => {
     e.stopPropagation();
+    const urlParams = new URLSearchParams(props.location.search);
+    // add new param to old ones
+    urlParams.set('errorId', error.errorId);
     props.history.replace({
-      search: new URLSearchParams({ errorId: error.errorId }).toString(),
+      search: urlParams.toString(),
     });
   };
 
@@ -37,14 +40,12 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
           props.history.location.pathname.includes('/dashboard') ||
           props.history.location.pathname.includes('/metrics/')
         ) {
-          props.history.replace({ search: '' });
+          const urlParams = new URLSearchParams(props.location.search);
+          urlParams.delete('errorId');
+          props.history.replace({ search: urlParams.toString() });
         }
       },
     });
-
-    return () => {
-      hideModal();
-    };
   }, [errorId]);
 
   return (

frontend/app/components/Dashboard/components/WidgetChart/LongLoader.tsx

@@ -26,9 +26,9 @@ function LongLoader({ onClick }: { onClick: () => void }) {
         />
       </div>
       <div>{t('This is taking longer than expected.')}</div>
-      <div>
+      {/*<div>*/}
-        {t('Use sample data to speed up query and get a faster response.')}
+      {/*  {t('Use sample data to speed up query and get a faster response.')}*/}
-      </div>
+      {/*</div>*/}
       {/*<div>*/}
       {/*  Use sample data to speed up query and get a faster response.*/}
       {/*</div>*/}

frontend/app/components/Errors/Error/DistributionBar.tsx

@@ -40,16 +40,13 @@ function DistributionBar({ className, title, partitions }) {
                 {`${Math.round(p.prc)}%`}
               </div>
             }
-            style={{
-              marginLeft: '1px',
-              width: `${p.prc}%`,
-              backgroundColor: colors(index),
-            }}
           >
             <div
               className="h-full bg-tealx"
               style={{
                 backgroundColor: colors(index),
+                marginLeft: '1px',
+                width: `${p.prc}%`,
               }}
             />
           </Tooltip>

frontend/app/components/Errors/Error/SideSection.tsx

@@ -11,6 +11,7 @@ import DateAgo from './DateAgo';
 import DistributionBar from './DistributionBar';
 import Trend from './Trend';
 import { useTranslation } from 'react-i18next';
+import i18n from 'App/i18n'
 
 const MAX_PERCENTAGE = 3;
 const MIN_COUNT = 4;
@@ -20,8 +21,9 @@ function hidePredicate(percentage, index) {
   if (index < MAX_COUNT && percentage < MAX_PERCENTAGE) return false;
   return true;
 }
+
 function partitionsWrapper(partitions = [], mapCountry = false) {
-  const { t } = useTranslation();
+  const t = i18n.t
   const counts = partitions.map(({ count }) => count);
   const sum = counts.reduce((a, b) => parseInt(a) + parseInt(b), 0);
   if (sum === 0) {
@@ -69,21 +71,10 @@ function SideSection(props) {
     chart30: [],
     tags: [],
   });
-  const [loading, setLoading] = React.useState(false);
   const { className } = props;
   const { errorStore } = useStore();
   const error = errorStore.instance;
 
-  const grabData = async () => {
-    setLoading(true);
-    errorService
-      .fetchErrorStats(error.errorId)
-      .then((data) => {
-        setData(dataWrapper(data));
-      })
-      .finally(() => setLoading(false));
-  };
-
   React.useEffect(() => {
     setData(dataWrapper(error));
   }, [error.errorId]);
@@ -108,16 +99,14 @@ function SideSection(props) {
       {data.tags.length > 0 && (
         <h4 className="text-xl mt-6 mb-3">{t('Summary')}</h4>
       )}
-      <Loader loading={loading}>
+      {data.tags.map(({ name, partitions }) => (
-        {data.tags.map(({ name, partitions }) => (
+        <DistributionBar
-          <DistributionBar
+          key={name}
-            key={name}
+          title={name}
-            title={name}
+          partitions={partitions}
-            partitions={partitions}
+          className="mb-6"
-            className="mb-6"
+        />
-          />
+      ))}
-        ))}
-      </Loader>
     </div>
   );
 }

frontend/app/mstore/metricStore.ts

@@ -166,7 +166,6 @@ export default class MetricStore {
   }
 
   updateKey(key: string, value: any) {
-    console.log('key', key, value);
     // @ts-ignore
     this[key] = value;