[yugabyte#8324] Platform: Disabled the query monitoring under Quries tab. (yugabyte#8576)

Description:
When the Universe is in a paused state the users will not perform any actions for that respective universe. But for now, when the users go under the Queries tab they can perform the actions like query monitoring and reset stats. This is not supposed to happen.

Test Plan:

1. Go to the universe page.
2. Hit the Action button next to connect and hit Pause universe.
3. Once the universe is paused then hit the Queries tab for that universe.
4. Click on Show queries.
5. Check whether Reset stats and Query Monitoring is present or not.

If the above-mentioned buttons are not present then it's working fine. Check for both the Universes:

1. For Pasued Universe - Buttons are not supposed to be there on the UI.
2. For Normal Universe(Ready State) - Buttons are supposed to be there.

Reviewers: @sshev @jaydeepkumara @gaurav061 @yb-andrew 
Reviewed by: @yb-andrew

Author: nishantSharma459

managed/ui/src/components/queries/SlowQueries.js

@@ -98,6 +98,7 @@ const SlowQueriesComponent = () => {
   const [columns, setColumns] = useState(initialColumns);
   const currentUniverse = useSelector((state) => state.universe.currentUniverse);
   const universeUUID = currentUniverse?.data?.universeUUID;
+  const universePaused = currentUniverse?.data?.universeDetails?.universePaused;
   const { ysqlQueries, loading, errors, getSlowQueries } = useSlowQueriesApi({
     universeUUID,
     enabled: queryMonitoring
@@ -262,21 +263,23 @@ const SlowQueriesComponent = () => {
                 </Alert>
               )
             )}
-            <div className="slow-queries__actions">
-              <YBButtonLink
-                btnIcon="fa fa-undo"
-                btnClass="btn btn-default"
-                btnText="Reset Stats"
-                onClick={handleResetQueries}
-              />
-              <YBToggle
-                label="Query Monitoring"
-                input={{
-                  value: queryMonitoring,
-                  onChange: handleToggleMonitoring
-                }}
-              />
-            </div>
+            {!universePaused && (
+              <div className="slow-queries__actions">
+                <YBButtonLink
+                  btnIcon="fa fa-undo"
+                  btnClass="btn btn-default"
+                  btnText="Reset Stats"
+                  onClick={handleResetQueries}
+                />
+                <YBToggle
+                  label="Query Monitoring"
+                  input={{
+                    value: queryMonitoring,
+                    onChange: handleToggleMonitoring
+                  }}
+                />
+              </div>
+            )}
           </div>
         }
         leftPanel={
@@ -288,7 +291,10 @@ const SlowQueriesComponent = () => {
                 panelState === PANEL_STATE.MAXIMIZED && 'maximized'
               )}
             >
-              <span className="panel-close-icon" onClick={() => setPanelState(PANEL_STATE.MINIMIZED)}>
+              <span
+                className="panel-close-icon"
+                onClick={() => setPanelState(PANEL_STATE.MINIMIZED)}
+              >
                 <i className="fa fa-window-minimize" />
               </span>
               <div className="slow-queries__column-selector">
@@ -313,7 +319,8 @@ const SlowQueriesComponent = () => {
                 </ul>
               </div>
             </div>
-          )}
+          )
+        }
         bodyClassName={clsx(
           panelState === PANEL_STATE.MINIMIZED && 'expand',
           panelState === PANEL_STATE.MAXIMIZED && 'shrink',
@@ -343,9 +350,7 @@ const SlowQueriesComponent = () => {
                 {tableColHeaders}
               </BootstrapTable>
             ) : (
-              <>
-                Enable query monitoring to see slow queries.
-              </>
+              <>Enable query monitoring to see slow queries.</>
             )}
           </div>
         }