ui: Prettier all the things

scality · Jan 11, 2021 · e424155 · e424155
1 parent aed514e
commit e424155
Show file tree

Hide file tree

Showing 35 changed files with 546 additions and 339 deletions.
diff --git a/ui/src/components/InformationList.js b/ui/src/components/InformationList.js
@@ -7,7 +7,7 @@ import {
 import styled from 'styled-components';
 
 export const InformationListContainer = styled.div`
-  color: ${props => props.theme.brand.textPrimary};
+  color: ${(props) => props.theme.brand.textPrimary};
   display: flex;
   flex-direction: column;
   margin: ${padding.base};

diff --git a/ui/src/containers/About.js b/ui/src/containers/About.js
@@ -13,11 +13,11 @@ const AboutContainer = styled.div`
   padding: 30px;
   flex-direction: column;
   align-items: center;
-  color: ${props => props.theme.brand.textPrimary};
+  color: ${(props) => props.theme.brand.textPrimary};
 `;
 
-const About = props => {
-  const clusterVersion = useSelector(state => state.app.nodes.clusterVersion);
+const About = (props) => {
+  const clusterVersion = useSelector((state) => state.app.nodes.clusterVersion);
   return (
     <AboutContainer>
       <Title>{intl.translate('product_name')}</Title>

diff --git a/ui/src/containers/App.js b/ui/src/containers/App.js
@@ -25,11 +25,11 @@ const messages = {
 
 addLocaleData([...locale_en, ...locale_fr]);
 
-const App = props => {
+const App = (props) => {
   const { language, api, theme, userManager } = useSelector(
-    state => state.config,
+    (state) => state.config,
   );
-  const isUserLoaded = useSelector(state => state.config.isUserLoaded);
+  const isUserLoaded = useSelector((state) => state.config.isUserLoaded);
   const dispatch = useDispatch();
 
   useEffect(() => {

diff --git a/ui/src/containers/Login.js b/ui/src/containers/Login.js
@@ -48,7 +48,7 @@ const LogoContainer = styled.div`
   top: 45px;
 `;
 
-const LoginForm = props => {
+const LoginForm = (props) => {
   const {
     values,
     touched,
@@ -60,12 +60,12 @@ const LoginForm = props => {
     asyncErrors,
   } = props;
   //handleChange of the Formik props does not update 'values' when field value is empty
-  const handleChange = field => e => {
+  const handleChange = (field) => (e) => {
     const { value, checked, type } = e.target;
     setFieldValue(field, type === 'checkbox' ? checked : value, true);
   };
   //touched is not "always" correctly set
-  const handleOnBlur = e => setFieldTouched(e.target.name, true);
+  const handleOnBlur = (e) => setFieldTouched(e.target.name, true);
 
   return (
     <Form autoComplete="off">
@@ -115,18 +115,18 @@ const validationSchema = yup.object().shape({
   password: yup.string().required(),
 });
 
-const Login = props => {
-  const asyncErrors = useSelector(state => state.login.errors);
+const Login = (props) => {
+  const asyncErrors = useSelector((state) => state.login.errors);
   const dispatch = useDispatch();
-  const authenticate = values => dispatch(authenticateAction(values));
+  const authenticate = (values) => dispatch(authenticateAction(values));
 
   return (
     <LoginFormContainer>
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={authenticate}
-        render={renderProps => {
+        render={(renderProps) => {
           const formikProps = {
             ...renderProps,
             ...props,

diff --git a/ui/src/containers/LoginCallback.js b/ui/src/containers/LoginCallback.js
@@ -6,16 +6,16 @@ import Loader from '../components/Loader';
 import { intl } from '../translations/IntlGlobalProvider';
 
 const CallbackPage = () => {
-  const userManager = useSelector(state => state.config.userManager);
+  const userManager = useSelector((state) => state.config.userManager);
   const history = useHistory();
   return (
     <CallbackComponent
       userManager={userManager}
-      successCallback={user => {
+      successCallback={(user) => {
         const path = (user.state && user.state.path) || '/';
         history.push(path);
       }}
-      errorCallback={error => {
+      errorCallback={(error) => {
         history.push('/');
       }}
     >

diff --git a/ui/src/containers/NodeDeployment.js b/ui/src/containers/NodeDeployment.js
@@ -23,21 +23,21 @@ const NodeDeploymentContainer = styled.div`
 `;
 
 const InfoMessage = styled.div`
-  color: ${props => props.theme.brand.textPrimary};
+  color: ${(props) => props.theme.brand.textPrimary};
   font-size: ${fontSize.base};
   padding: ${padding.base};
 `;
 
 const NodeDeploymentTitle = styled.div`
-  color: ${props => props.theme.brand.textPrimary};
+  color: ${(props) => props.theme.brand.textPrimary};
   font-weight: ${fontWeight.bold};
   font-size: ${fontSize.large};
   margin: ${padding.base};
 `;
 
 const NodeDeploymentEvent = styled.div`
   background-color: ${grayLighter};
-  color: ${props => props.theme.brand.textPrimary};
+  color: ${(props) => props.theme.brand.textPrimary};
   padding: ${padding.base};
   margin: ${padding.base};
   border-radius: 5px;
@@ -59,21 +59,21 @@ const NodeDeploymentStatus = styled.div`
 `;
 
 const ErrorLabel = styled.span`
-  color: ${props => props.theme.brand.danger};
+  color: ${(props) => props.theme.brand.danger};
 `;
 
 const NodeDeployment = () => {
   const history = useHistory();
   const match = useRouteMatch();
   const nodeName = match?.params?.id;
 
-  const jobs = useSelector(state =>
+  const jobs = useSelector((state) =>
     state.app.salt.jobs.filter(
-      job => job.type === 'deploy-node' && job.node === nodeName,
+      (job) => job.type === 'deploy-node' && job.node === nodeName,
     ),
   );
 
-  let activeJob = jobs.find(job => !job.completed);
+  let activeJob = jobs.find((job) => !job.completed);
   if (activeJob === undefined) {
     // Pick most recent one
     const sortedJobs = jobs.sort(
@@ -85,7 +85,7 @@ const NodeDeployment = () => {
   let steps = [{ title: intl.translate('node_registered') }];
   let success = false;
   if (activeJob) {
-    if (activeJob.events.find(event => event.tag.includes('/new'))) {
+    if (activeJob.events.find((event) => event.tag.includes('/new'))) {
       steps.push({ title: intl.translate('deployment_started') });
     }
 

diff --git a/ui/src/containers/VolumePage.js b/ui/src/containers/VolumePage.js
@@ -74,7 +74,9 @@ const VolumePage = (props) => {
   const node = useTypedSelector((state) => makeGetNodeFromUrl(state, props));
   const nodes = useTypedSelector((state) => state.app.nodes.list);
   const volumes = useTypedSelector((state) => state.app.volumes.list);
-  const volumesLoading = useTypedSelector((state) => state.app.volumes.isLoading);
+  const volumesLoading = useTypedSelector(
+    (state) => state.app.volumes.isLoading,
+  );
   const currentVolumeObject = useTypedSelector(
     (state) => state.app.volumes.currentVolumeObject,
   );

diff --git a/ui/src/ducks/app/alerts.js b/ui/src/ducks/app/alerts.js
@@ -1,12 +1,18 @@
 //@flow
-import { Effect, takeEvery, takeLatest, call, put, delay, select } from 'redux-saga/effects';
+import {
+  Effect,
+  takeEvery,
+  takeLatest,
+  call,
+  put,
+  delay,
+  select,
+} from 'redux-saga/effects';
 import * as ApiAlertmanager from '../../services/alertmanager/api';
-import type {RootState} from '../reducer';
-import type {Result} from '../../types';
+import type { RootState } from '../reducer';
+import type { Result } from '../../types';
 
-import {
-  REFRESH_TIMEOUT,
-} from '../../constants';
+import { REFRESH_TIMEOUT } from '../../constants';
 
 // Actions
 const FETCH_ALERTS_ALERTMANAGER = 'FETCH_ALERTS_ALERTMANAGER';
@@ -26,10 +32,13 @@ const defaultState = {
 
 export type AlertsState = {
   isRefreshing: boolean,
-  list: ApiAlertmanager.PrometheusAlert[]
-}
+  list: ApiAlertmanager.PrometheusAlert[],
+};
 
-export default function reducer(state: AlertsState = defaultState, action: any = {}) {
+export default function reducer(
+  state: AlertsState = defaultState,
+  action: any = {},
+) {
   switch (action.type) {
     case UPDATE_ALERTS_ALERTMANAGER:
       return { ...state, ...action.payload };
@@ -43,7 +52,9 @@ export const fetchAlertsAlertmanagerAction = () => {
   return { type: FETCH_ALERTS_ALERTMANAGER };
 };
 
-export const updateAlertsAlertmanagerAction = (payload: $Shape<AlertsState>) => {
+export const updateAlertsAlertmanagerAction = (
+  payload: $Shape<AlertsState>,
+) => {
   return { type: UPDATE_ALERTS_ALERTMANAGER, payload };
 };
 
@@ -55,9 +66,12 @@ export const stopRefreshAlertManagerAction = () => {
   return { type: STOP_REFRESH_ALERTS_ALERTMANAGER };
 };
 
-
 // Sagas
-export function* fetchAlertsAlertmanager(): Generator<Effect, Result<ApiAlertmanager.PrometheusAlert[]>, Result<ApiAlertmanager.PrometheusAlert[]>> {
+export function* fetchAlertsAlertmanager(): Generator<
+  Effect,
+  Result<ApiAlertmanager.PrometheusAlert[]>,
+  Result<ApiAlertmanager.PrometheusAlert[]>,
+> {
   const result = yield call(ApiAlertmanager.getAlerts);
 
   if (!result.error) {
@@ -66,7 +80,11 @@ export function* fetchAlertsAlertmanager(): Generator<Effect, Result<ApiAlertman
   return result;
 }
 
-export function* refreshAlertsAlertmanager(): Generator<Effect, void, Result<ApiAlertmanager.PrometheusAlert[]>> {
+export function* refreshAlertsAlertmanager(): Generator<
+  Effect,
+  void,
+  Result<ApiAlertmanager.PrometheusAlert[]>,
+> {
   yield put(updateAlertsAlertmanagerAction({ isRefreshing: true }));
   const result = yield call(fetchAlertsAlertmanager);
   if (!result.error) {
@@ -78,13 +96,19 @@ export function* refreshAlertsAlertmanager(): Generator<Effect, void, Result<Api
   }
 }
 
-export function* stopRefreshAlertsAlertmanager(): Generator<Effect, void, void> {
+export function* stopRefreshAlertsAlertmanager(): Generator<
+  Effect,
+  void,
+  void,
+> {
   yield put(updateAlertsAlertmanagerAction({ isRefreshing: false }));
 }
 
-
 export function* alertsSaga(): Generator<Effect, void, void> {
   yield takeLatest(FETCH_ALERTS_ALERTMANAGER, fetchAlertsAlertmanager);
   yield takeEvery(REFRESH_ALERTS_ALERTMANAGER, refreshAlertsAlertmanager);
-  yield takeEvery(STOP_REFRESH_ALERTS_ALERTMANAGER, stopRefreshAlertsAlertmanager);
+  yield takeEvery(
+    STOP_REFRESH_ALERTS_ALERTMANAGER,
+    stopRefreshAlertsAlertmanager,
+  );
 }
diff --git a/ui/src/ducks/app/layout.js b/ui/src/ducks/app/layout.js
@@ -1,5 +1,5 @@
 //@flow
-import type {RootState} from '../reducer'
+import type { RootState } from '../reducer';
 import { Effect, put, takeEvery, select } from 'redux-saga/effects';
 
 // Actions
@@ -18,10 +18,13 @@ const defaultState = {
 export type LayoutState = {
   sidebar: {
     expanded: boolean,
-  }
-}
+  },
+};
 
-export default function reducer(state: LayoutState = defaultState, action: any = {}) {
+export default function reducer(
+  state: LayoutState = defaultState,
+  action: any = {},
+) {
   switch (action.type) {
     case SET_TOGGLE_SIDEBAR:
       return {

diff --git a/ui/src/ducks/app/monitoring.js b/ui/src/ducks/app/monitoring.js
@@ -147,20 +147,20 @@ export type MonitoringState = {
   volumeStats: {
     metricsTimeSpan: string,
     metrics: {
-      volumeUsed: any[],// todo, identify this type
-      volumeThroughputWrite: any[],// todo, identify this type
-      volumeThroughputRead: any[],// todo, identify this type
-      volumeLatency: any[],// todo, identify this type
-      volumeIOPSRead: any[],// todo, identify this type
-      volumeIOPSWrite: any[],// todo, identify this type
+      volumeUsed: any[], // todo, identify this type
+      volumeThroughputWrite: any[], // todo, identify this type
+      volumeThroughputRead: any[], // todo, identify this type
+      volumeLatency: any[], // todo, identify this type
+      volumeIOPSRead: any[], // todo, identify this type
+      volumeIOPSWrite: any[], // todo, identify this type
     },
     isRefreshing: boolean,
   },
   volumeCurrentStats: {
     metrics: {
-      volumeUsedCurrent: [],// todo, identify this type
-      volumeCapacityCurrent: [],// todo, identify this type
-      volumeLatencyCurrent: [],// todo, identify this type
+      volumeUsedCurrent: [], // todo, identify this type
+      volumeCapacityCurrent: [], // todo, identify this type
+      volumeLatencyCurrent: [], // todo, identify this type
     },
     isRefreshing: boolean,
   },
@@ -170,20 +170,20 @@ export type MonitoringState = {
     controlPlaneInterface: string,
     workloadPlaneInterface: string,
     metrics: {
-      cpuUsage: any[],// todo, identify this type
-      systemLoad: any[],// todo, identify this type
-      memory: any[],// todo, identify this type
-      iopsRead: any[],// todo, identify this type
-      iopsWrite: any[],// todo, identify this type
-      controlPlaneNetworkBandwidthIn: any[],// todo, identify this type
-      controlPlaneNetworkBandwidthOut: any[],// todo, identify this type
-      workloadPlaneNetworkBandwidthIn: any[],// todo, identify this type
-      workloadPlaneNetworkBandwidthOut: any[],// todo, identify this type
+      cpuUsage: any[], // todo, identify this type
+      systemLoad: any[], // todo, identify this type
+      memory: any[], // todo, identify this type
+      iopsRead: any[], // todo, identify this type
+      iopsWrite: any[], // todo, identify this type
+      controlPlaneNetworkBandwidthIn: any[], // todo, identify this type
+      controlPlaneNetworkBandwidthOut: any[], // todo, identify this type
+      workloadPlaneNetworkBandwidthIn: any[], // todo, identify this type
+      workloadPlaneNetworkBandwidthOut: any[], // todo, identify this type
       queryStartingTime: number,
     },
     isRefreshing: boolean,
   },
-  unameInfo: any[],// todo, identify this type
+  unameInfo: any[], // todo, identify this type
 };
 
 export default function reducer(state = defaultState, action = {}) {

diff --git a/ui/src/ducks/app/nodes.js b/ui/src/ducks/app/nodes.js
@@ -165,20 +165,26 @@ export type NodesState = {
   clusterVersion: string,
   isRefreshing: boolean,
   isLoading: boolean,
-  IPsInfo: any, // TODO: define the type of this 
-  currentNodeObject: any, // TODO: define the type of this 
+  IPsInfo: any, // TODO: define the type of this
+  currentNodeObject: any, // TODO: define the type of this
   list: {
     name: string,
     metalk8s_version: string,
-    status: "ready" | "not_ready" | "unknown",
-    conditions: ("DiskPressure" | "MemoryPressure" | "PIDPressure" | "NetworkUnavailable" | "Unschedulable")[],
+    status: 'ready' | 'not_ready' | 'unknown',
+    conditions: (
+      | 'DiskPressure'
+      | 'MemoryPressure'
+      | 'PIDPressure'
+      | 'NetworkUnavailable'
+      | 'Unschedulable'
+    )[],
     roles: string,
     deploying: boolean,
     internalIP: string,
     creationTimestamp: string,
     kubeletVersion: string,
-  }[]
-}
+  }[],
+};
 
 export default function reducer(state = defaultState, action = {}) {
   switch (action.type) {