PMM-6288 get rid of fontawesome dependencies (#869)

* PMM-6288 get rid of fontawesome dependencies * PMM-6288 fix message * PMM-6288 fix explains loading * PMM-6288 fix tables loading * PMM-6288 fix tables loading * PMM-6288 fixed error text
percona · Jul 27, 2020 · 60a43f3 · 60a43f3
1 parent ef9dae8
commit 60a43f3
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 49 deletions.
diff --git a/pmm-app/package-lock.json b/pmm-app/package-lock.json
diff --git a/pmm-app/package.json b/pmm-app/package.json
@@ -33,8 +33,6 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^4.0.6",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@grafana/data": "^7.0.6",
     "@grafana/runtime": "^7.0.6",
     "@grafana/ui": "^7.0.6",

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Details.messages.ts b/pmm-app/src/pmm-qan/panel/components/Details/Details.messages.ts
@@ -2,7 +2,7 @@ export const Messages = {
   noExamplesFound: 'Sorry, no examples found for this query',
   noClassicExplain: 'No classic explain found',
   noJsonExplain: 'No JSON explain found',
-  cantExtractTables: 'Couldn&apos;t get tables info neither from example nor explain',
+  cantExtractTables: 'No table info from example nor explain',
   noDataFound: 'No data found',
   closeDetails: 'Close',
   tabs: {

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Details.tsx b/pmm-app/src/pmm-qan/panel/components/Details/Details.tsx
@@ -101,7 +101,6 @@ export const DetailsSection: FC = () => {
               <TableCreateContainer
                 databaseType={databaseType}
                 examples={examples}
-                loading={loading}
               />
             </TabPane>
           ) : null}

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Explain/Explain.hooks.ts b/pmm-app/src/pmm-qan/panel/components/Details/Explain/Explain.hooks.ts
@@ -18,6 +18,8 @@ export const useExplains = (examples, databaseType): any[] => {
       const notEmptyExample = examples ? examples.filter((example) => example.example) : [];
 
       try {
+        setJsonExplain(actionResult);
+        setClassicExplain(actionResult);
         if (!notEmptyExample.length) {
           setJsonExplain({ ...actionResult, loading: false });
           setClassicExplain({ ...actionResult, loading: false });

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Table/TableContainer.hooks.ts b/pmm-app/src/pmm-qan/panel/components/Details/Table/TableContainer.hooks.ts
@@ -6,9 +6,12 @@ import { Databases } from '../Details.types';
 export const useTables = (examples, databaseType): any[] => {
   const [jsonExplain, classicExplain] = useExplains(examples, databaseType);
   const [tables, setTables] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     const getTables = async () => {
+      setLoading(true);
+      setTables([]);
       if (databaseType === Databases.mysql && jsonExplain.value) {
         const parsedJSON = JSON.parse(jsonExplain.value);
 
@@ -25,10 +28,12 @@ export const useTables = (examples, databaseType): any[] => {
 
         setTables(tablesResult);
       }
+
+      setLoading(false);
     };
 
     getTables();
   }, [jsonExplain, classicExplain, examples, databaseType]);
 
-  return [tables];
+  return [tables, loading];
 };
diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Table/TableContainer.tsx b/pmm-app/src/pmm-qan/panel/components/Details/Table/TableContainer.tsx
@@ -16,9 +16,8 @@ const { Panel } = Collapse;
 const TableCreateContainer: FC<TableContainerProps> = ({
   databaseType,
   examples,
-  loading
 }) => {
-  const [tables] = useTables(examples, databaseType);
+  const [tables, loading] = useTables(examples, databaseType);
 
   return (
     <Spin spinning={loading}>

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Table/TableContainer.types.ts b/pmm-app/src/pmm-qan/panel/components/Details/Table/TableContainer.types.ts
@@ -3,5 +3,4 @@ import { DatabasesType } from '../Details.types';
 export interface TableContainerProps {
   databaseType: DatabasesType;
   examples: any[];
-  loading?: boolean;
 }
diff --git a/pmm-app/src/pmm-qan/panel/qan.scss b/pmm-app/src/pmm-qan/panel/qan.scss
@@ -43,25 +43,27 @@
   width: 100%;
   z-index: 1000;
   position: relative;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-  font-family: FontAwesome;
-  font-weight: normal;
-  font-style: normal;
-  text-decoration: none;
 }
 
+
+.Resizer.horizontal:before,
 .Resizer.horizontal:after {
-  content: '\f0d7';
+  border: 4px solid transparent;
+  content: '';
+  display: block;
+  height: 0;
+  right: 50%;
+  top: 50%;
   position: absolute;
-  top: -1px;
-  left: 49%;
+  width: 0;
 }
 .Resizer.horizontal:before {
-  content: '\f0d8';
-  position: absolute;
-  top: -7px;
-  left: 49%;
+  border-bottom-color: rgba(255, 255, 255, 0.8);
+  margin-top: -9px;
+}
+.Resizer.horizontal:after {
+  border-top-color: rgba(255, 255, 255, 0.8);
+  margin-top: 1px;
 }
 
 .Resizer.disabled {

diff --git a/pmm-app/src/shared/components/Elements/Spinner/Spinner.tsx b/pmm-app/src/shared/components/Elements/Spinner/Spinner.tsx
@@ -1,16 +1,12 @@
 import React from 'react';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fas } from '@fortawesome/free-solid-svg-icons';
 import { Spin } from 'antd';
-import { css, cx } from 'emotion';
-
-library.add(fas);
+import { css } from 'emotion';
+import { Spinner } from '@grafana/ui';
 
 const spinnerStyle = css`
   color: rgb(211, 211, 211);
-  font-size: 36px;
 `;
 
 Spin.setDefaultIndicator(
-  <i className={cx('fa fa-spinner fa-spin spinner', spinnerStyle)} data-qa="loading-spinner" />
+  <Spinner className={spinnerStyle} data-qa="loading-spinner" />
 );