• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mendersoftware / gui / 1350829378

27 Jun 2024 01:46PM UTC coverage: 83.494% (-16.5%) from 99.965%
1350829378

Pull #4465

gitlab-ci

mzedel
chore: test fixes

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>
Pull Request #4465: MEN-7169 - feat: added multi sorting capabilities to devices view

4506 of 6430 branches covered (70.08%)

81 of 100 new or added lines in 14 files covered. (81.0%)

1661 existing lines in 163 files now uncovered.

8574 of 10269 relevant lines covered (83.49%)

160.6 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

80.84
/src/js/components/devices/authorized-devices.js
1
// Copyright 2015 Northern.tech AS
2
//
3
//    Licensed under the Apache License, Version 2.0 (the "License");
4
//    you may not use this file except in compliance with the License.
5
//    You may obtain a copy of the License at
6
//
7
//        http://www.apache.org/licenses/LICENSE-2.0
8
//
9
//    Unless required by applicable law or agreed to in writing, software
10
//    distributed under the License is distributed on an "AS IS" BASIS,
11
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
//    See the License for the specific language governing permissions and
13
//    limitations under the License.
14
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
15
import { useDispatch, useSelector } from 'react-redux';
16
import { useNavigate } from 'react-router-dom';
17

18
// material ui
19
import { Autorenew as AutorenewIcon, Delete as DeleteIcon, FilterList as FilterListIcon, LockOutlined } from '@mui/icons-material';
20
import { Button, MenuItem, Select } from '@mui/material';
21
import { makeStyles } from 'tss-react/mui';
22

23
import { setSnackbar } from '../../actions/appActions';
24
import { deleteAuthset, setDeviceFilters, setDeviceListState, updateDevicesAuth } from '../../actions/deviceActions';
25
import { getIssueCountsByType } from '../../actions/monitorActions';
26
import { advanceOnboarding } from '../../actions/onboardingActions';
27
import { saveUserSettings, updateUserColumnSettings } from '../../actions/userActions';
28
import { TIMEOUTS } from '../../constants/appConstants';
29
import { ALL_DEVICES, DEVICE_ISSUE_OPTIONS, DEVICE_STATES, UNGROUPED_GROUP } from '../../constants/deviceConstants';
30
import { onboardingSteps } from '../../constants/onboardingConstants';
31
import { duplicateFilter, toggle } from '../../helpers';
32
import {
33
  getAvailableIssueOptionsByType,
34
  getDeviceCountsByStatus,
35
  getDeviceFilters,
36
  getFilterAttributes,
37
  getIdAttribute,
38
  getLimitMaxed,
39
  getMappedDevicesList,
40
  getOnboardingState,
41
  getSelectedGroupInfo,
42
  getTenantCapabilities,
43
  getUserCapabilities,
44
  getUserSettings
45
} from '../../selectors';
46
import { useDebounce } from '../../utils/debouncehook';
47
import { getOnboardingComponentFor } from '../../utils/onboardingmanager';
48
import useWindowSize from '../../utils/resizehook';
49
import { clearAllRetryTimers, setRetryTimer } from '../../utils/retrytimer';
50
import Loader from '../common/loader';
51
import { defaultHeaders, defaultTextRender, getDeviceIdentityText, routes as states } from './base-devices';
52
import DeviceList, { minCellWidth } from './devicelist';
53
import ColumnCustomizationDialog from './dialogs/custom-columns-dialog';
54
import ExpandedDevice from './expanded-device';
55
import DeviceQuickActions from './widgets/devicequickactions';
56
import Filters from './widgets/filters';
57
import DeviceIssuesSelection from './widgets/issueselection';
58
import ListOptions from './widgets/listoptions';
59

60
const deviceRefreshTimes = {
8✔
61
  [DEVICE_STATES.accepted]: TIMEOUTS.refreshLong,
62
  [DEVICE_STATES.pending]: TIMEOUTS.refreshDefault,
63
  [DEVICE_STATES.preauth]: TIMEOUTS.refreshLong,
64
  [DEVICE_STATES.rejected]: TIMEOUTS.refreshLong,
65
  default: TIMEOUTS.refreshDefault
66
};
67

68
const idAttributeTitleMap = {
8✔
69
  id: 'Device ID',
70
  name: 'Name'
71
};
72

73
const headersReducer = (accu, header) => {
8✔
74
  if (header.attribute.scope === accu.column.scope && header.attribute.name === accu.column.name) {
40✔
75
    accu.header = { ...accu.header, ...header };
6✔
76
  }
77
  return accu;
40✔
78
};
79

80
const useStyles = makeStyles()(theme => ({
8✔
81
  filterCommon: {
82
    borderStyle: 'solid',
83
    borderWidth: 1,
84
    borderRadius: 5,
85
    borderColor: theme.palette.grey[100],
86
    background: theme.palette.background.default,
87
    [`.filter-list > .MuiChip-root`]: {
88
      marginBottom: theme.spacing()
89
    },
90
    [`.filter-list > .MuiChip-root > .MuiChip-label`]: {
91
      whiteSpace: 'normal'
92
    },
93
    ['&.filter-header']: {
94
      overflow: 'hidden',
95
      zIndex: 2
96
    },
97
    ['&.filter-toggle']: {
98
      background: 'transparent',
99
      borderBottomRightRadius: 0,
100
      borderBottomLeftRadius: 0,
101
      borderBottomColor: theme.palette.background.default,
102
      marginBottom: -1
103
    },
104
    ['&.filter-wrapper']: {
105
      padding: 20,
106
      borderTopLeftRadius: 0
107
    }
108
  },
109
  selection: {
110
    fontSize: 13,
111
    marginLeft: theme.spacing(0.5),
112
    marginTop: 2,
113
    '>div': {
114
      paddingLeft: theme.spacing(0.5)
115
    }
116
  }
117
}));
118

119
export const getHeaders = (columnSelection = [], currentStateHeaders, idAttribute, openSettingsDialog) => {
8!
120
  const headers = columnSelection.length
47✔
121
    ? columnSelection.map(column => {
122
        let header = { ...column, attribute: { ...column }, textRender: defaultTextRender, sortable: true };
4✔
123
        header = Object.values(defaultHeaders).reduce(headersReducer, { column, header }).header;
4✔
124
        header = currentStateHeaders.reduce(headersReducer, { column, header }).header;
4✔
125
        return header;
4✔
126
      })
127
    : currentStateHeaders;
128
  return [
47✔
129
    {
130
      title: idAttributeTitleMap[idAttribute.attribute] ?? idAttribute.attribute,
62✔
131
      customize: openSettingsDialog,
132
      attribute: { name: idAttribute.attribute, scope: idAttribute.scope },
133
      sortable: true,
134
      textRender: getDeviceIdentityText
135
    },
136
    ...headers,
137
    defaultHeaders.deviceStatus
138
  ];
139
};
140

141
const calculateColumnSelectionSize = (changedColumns, customColumnSizes) =>
8✔
142
  changedColumns.reduce(
1✔
143
    (accu, column) => {
144
      const size = customColumnSizes.find(({ attribute }) => attribute.name === column.key && attribute.scope === column.scope)?.size || minCellWidth;
4✔
145
      accu.columnSizes.push({ attribute: { name: column.key, scope: column.scope }, size });
4✔
146
      accu.selectedAttributes.push({ attribute: column.key, scope: column.scope });
4✔
147
      return accu;
4✔
148
    },
149
    { columnSizes: [], selectedAttributes: [] }
150
  );
151

152
const OnboardingComponent = ({ deviceListRef, onboardingState }) => {
8✔
153
  let onboardingComponent = null;
23✔
154
  const element = deviceListRef.current?.querySelector('body .deviceListItem > div');
23✔
155
  if (element) {
23✔
156
    const anchor = { left: 200, top: element.offsetTop + element.offsetHeight };
17✔
157
    onboardingComponent = getOnboardingComponentFor(onboardingSteps.DEVICES_PENDING_ONBOARDING, onboardingState, { anchor }, onboardingComponent);
17✔
158
  } else if (deviceListRef.current) {
6✔
159
    const anchor = { top: deviceListRef.current.offsetTop + deviceListRef.current.offsetHeight / 3, left: deviceListRef.current.offsetWidth / 2 + 30 };
3✔
160
    onboardingComponent = getOnboardingComponentFor(
3✔
161
      onboardingSteps.DEVICES_PENDING_ONBOARDING_START,
162
      onboardingState,
163
      { anchor, place: 'top' },
164
      onboardingComponent
165
    );
166
  }
167
  return onboardingComponent;
23✔
168
};
169

170
export const Authorized = ({
8✔
171
  addDevicesToGroup,
172
  onGroupClick,
173
  onGroupRemoval,
174
  onMakeGatewayClick,
175
  onPreauthClick,
176
  openSettingsDialog,
177
  removeDevicesFromGroup,
178
  showsDialog
179
}) => {
180
  const limitMaxed = useSelector(getLimitMaxed);
24✔
181
  const devices = useSelector(state => getMappedDevicesList(state, 'deviceList'));
83✔
182
  const { selectedGroup, groupFilters = [] } = useSelector(getSelectedGroupInfo);
24!
183
  const { columnSelection = [] } = useSelector(getUserSettings);
24!
184
  const attributes = useSelector(getFilterAttributes);
24✔
185
  const { accepted: acceptedCount, pending: pendingCount, rejected: rejectedCount } = useSelector(getDeviceCountsByStatus);
24✔
186
  const allCount = acceptedCount + rejectedCount;
24✔
187
  const availableIssueOptions = useSelector(getAvailableIssueOptionsByType);
24✔
188
  const customColumnSizes = useSelector(state => state.users.customColumns);
83✔
189
  const deviceListState = useSelector(state => state.devices.deviceList);
83✔
190
  const { total: deviceCount } = deviceListState;
24✔
191
  const filters = useSelector(getDeviceFilters);
24✔
192
  const idAttribute = useSelector(getIdAttribute);
24✔
193
  const onboardingState = useSelector(getOnboardingState);
24✔
194
  const settingsInitialized = useSelector(state => state.users.settingsInitialized);
83✔
195
  const tenantCapabilities = useSelector(getTenantCapabilities);
24✔
196
  const userCapabilities = useSelector(getUserCapabilities);
24✔
197
  const dispatch = useDispatch();
24✔
198
  const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);
24✔
199

200
  const {
201
    refreshTrigger,
202
    selectedId,
203
    selectedIssues = [],
×
204
    isLoading: pageLoading,
205
    selection: selectedRows,
206
    state: selectedState,
207
    detailsTab: tabSelection
208
  } = deviceListState;
24✔
209
  const { canManageDevices } = userCapabilities;
24✔
210
  const { hasMonitor } = tenantCapabilities;
24✔
211
  const currentSelectedState = states[selectedState] ?? states.devices;
24!
212
  const [columnHeaders, setColumnHeaders] = useState([]);
24✔
213
  const [isInitialized, setIsInitialized] = useState(false);
24✔
214
  const [devicesInitialized, setDevicesInitialized] = useState(!!devices.length);
24✔
215
  const [showFilters, setShowFilters] = useState(false);
24✔
216
  const [showCustomization, setShowCustomization] = useState(false);
24✔
217
  const deviceListRef = useRef();
24✔
218
  const timer = useRef();
24✔
219
  const navigate = useNavigate();
24✔
220

221
  // eslint-disable-next-line no-unused-vars
222
  const size = useWindowSize();
24✔
223

224
  const { classes } = useStyles();
24✔
225

226
  useEffect(() => {
24✔
227
    clearAllRetryTimers(dispatchedSetSnackbar);
3✔
228
    if (!filters.length && selectedGroup && groupFilters.length) {
3!
UNCOV
229
      dispatch(setDeviceFilters(groupFilters));
×
230
    }
231
    return () => {
3✔
232
      clearInterval(timer.current);
3✔
233
      clearAllRetryTimers(dispatchedSetSnackbar);
3✔
234
    };
235
    // eslint-disable-next-line react-hooks/exhaustive-deps
236
  }, [dispatch, dispatchedSetSnackbar]);
237

238
  useEffect(() => {
24✔
239
    const columnHeaders = getHeaders(columnSelection, currentSelectedState.defaultHeaders, idAttribute, openSettingsDialog);
7✔
240
    setColumnHeaders(columnHeaders);
7✔
241
    // eslint-disable-next-line react-hooks/exhaustive-deps
242
  }, [columnSelection, idAttribute.attribute, currentSelectedState.defaultHeaders, openSettingsDialog]);
243

244
  useEffect(() => {
24✔
245
    // only set state after all devices id data retrieved
246
    setIsInitialized(isInitialized => isInitialized || (settingsInitialized && devicesInitialized && pageLoading === false));
8✔
247
    setDevicesInitialized(devicesInitialized => devicesInitialized || pageLoading === false);
8✔
248
  }, [settingsInitialized, devicesInitialized, pageLoading]);
249

250
  const onDeviceStateSelectionChange = useCallback(
24✔
UNCOV
251
    newState => dispatch(setDeviceListState({ state: newState, page: 1, refreshTrigger: !refreshTrigger }, true, false, false)),
×
252
    [dispatch, refreshTrigger]
253
  );
254

255
  useEffect(() => {
24✔
256
    if (onboardingState.complete) {
7!
UNCOV
257
      return;
×
258
    }
259
    if (pendingCount) {
7!
260
      dispatch(advanceOnboarding(onboardingSteps.DEVICES_PENDING_ONBOARDING_START));
7✔
261
      return;
7✔
262
    }
UNCOV
263
    if (!acceptedCount) {
×
UNCOV
264
      return;
×
265
    }
266

UNCOV
267
    if (acceptedCount < 2 && !window.sessionStorage.getItem('pendings-redirect')) {
×
UNCOV
268
      window.sessionStorage.setItem('pendings-redirect', true);
×
UNCOV
269
      onDeviceStateSelectionChange(DEVICE_STATES.accepted);
×
270
    }
271
    // eslint-disable-next-line react-hooks/exhaustive-deps
272
  }, [acceptedCount, allCount, pendingCount, onboardingState.complete, dispatch, onDeviceStateSelectionChange, dispatchedSetSnackbar]);
273

274
  useEffect(() => {
24✔
275
    setShowFilters(false);
3✔
276
  }, [selectedGroup]);
277

278
  const dispatchDeviceListState = useCallback(
24✔
279
    (options, shouldSelectDevices = true, forceRefresh = false, fetchAuth = false) => {
45✔
280
      return dispatch(setDeviceListState(options, shouldSelectDevices, forceRefresh, fetchAuth));
15✔
281
    },
282
    [dispatch]
283
  );
284

285
  const refreshDevices = useCallback(() => {
24✔
UNCOV
286
    const refreshLength = deviceRefreshTimes[selectedState] ?? deviceRefreshTimes.default;
×
UNCOV
287
    return dispatchDeviceListState({}, true, true).catch(err =>
×
UNCOV
288
      setRetryTimer(err, 'devices', `Devices couldn't be loaded.`, refreshLength, dispatchedSetSnackbar)
×
289
    );
290
  }, [dispatchedSetSnackbar, selectedState, dispatchDeviceListState]);
291

292
  useEffect(() => {
24✔
293
    if (!devicesInitialized) {
4✔
294
      return;
1✔
295
    }
296
    const refreshLength = deviceRefreshTimes[selectedState] ?? deviceRefreshTimes.default;
3!
297
    clearInterval(timer.current);
3✔
298
    timer.current = setInterval(() => refreshDevices(), refreshLength);
3✔
299
  }, [devicesInitialized, refreshDevices, selectedState]);
300

301
  useEffect(() => {
24✔
302
    Object.keys(availableIssueOptions).map(key => dispatch(getIssueCountsByType(key, { filters, group: selectedGroup, state: selectedState })));
6✔
303
    availableIssueOptions[DEVICE_ISSUE_OPTIONS.authRequests.key]
5!
304
      ? dispatch(getIssueCountsByType(DEVICE_ISSUE_OPTIONS.authRequests.key, { filters: [] }))
305
      : undefined;
306
    // eslint-disable-next-line react-hooks/exhaustive-deps
307
  }, [selectedIssues.join(''), JSON.stringify(availableIssueOptions), selectedState, selectedGroup, dispatch, JSON.stringify(filters)]);
308

309
  /*
310
   * Devices
311
   */
312
  const devicesToIds = devices => devices.map(device => device.id);
24✔
313

314
  const onRemoveDevicesFromGroup = devices => {
24✔
UNCOV
315
    const deviceIds = devicesToIds(devices);
×
UNCOV
316
    removeDevicesFromGroup(deviceIds);
×
317
    // if devices.length = number on page but < deviceCount
318
    // move page back to pageNO 1
UNCOV
319
    if (devices.length === deviceIds.length) {
×
UNCOV
320
      handlePageChange(1);
×
321
    }
322
  };
323

324
  const onAuthorizationChange = (devices, changedState) => {
24✔
UNCOV
325
    const deviceIds = devicesToIds(devices);
×
UNCOV
326
    return dispatchDeviceListState({ isLoading: true })
×
UNCOV
327
      .then(() => dispatch(updateDevicesAuth(deviceIds, changedState)))
×
UNCOV
328
      .then(() => onSelectionChange([]));
×
329
  };
330

331
  const onDeviceDismiss = devices =>
24✔
UNCOV
332
    dispatchDeviceListState({ isLoading: true })
×
333
      .then(() => {
UNCOV
334
        const deleteRequests = devices.reduce((accu, device) => {
×
UNCOV
335
          if (device.auth_sets?.length) {
×
UNCOV
336
            accu.push(dispatch(deleteAuthset(device.id, device.auth_sets[0].id)));
×
337
          }
UNCOV
338
          return accu;
×
339
        }, []);
UNCOV
340
        return Promise.all(deleteRequests);
×
341
      })
UNCOV
342
      .then(() => onSelectionChange([]));
×
343

344
  const handlePageChange = useCallback(page => dispatchDeviceListState({ selectedId: undefined, page }), [dispatchDeviceListState]);
24✔
345

346
  const onPageLengthChange = perPage => dispatchDeviceListState({ perPage, page: 1, refreshTrigger: !refreshTrigger });
24✔
347

348
  const onSortChange = useCallback(sortItem => dispatchDeviceListState({ sort: [sortItem] }), [dispatchDeviceListState]);
24✔
349

350
  const setDetailsTab = detailsTab => dispatchDeviceListState({ detailsTab, setOnly: true });
24✔
351

352
  const onDeviceIssuesSelectionChange = ({ target: { value: selectedIssues } }) =>
24✔
353
    dispatchDeviceListState({ selectedIssues, page: 1, refreshTrigger: !refreshTrigger });
1✔
354

355
  const onSelectionChange = (selection = []) => {
24!
356
    if (!onboardingState.complete && selection.length) {
1!
357
      dispatch(advanceOnboarding(onboardingSteps.DEVICES_PENDING_ACCEPTING_ONBOARDING));
1✔
358
    }
359
    dispatchDeviceListState({ selection, setOnly: true });
1✔
360
  };
361

362
  const onToggleCustomizationClick = () => setShowCustomization(toggle);
24✔
363

364
  const onChangeColumns = useCallback(
24✔
365
    (changedColumns, customColumnSizes) => {
366
      const { columnSizes, selectedAttributes } = calculateColumnSelectionSize(changedColumns, customColumnSizes);
1✔
367
      dispatch(updateUserColumnSettings(columnSizes));
1✔
368
      dispatch(saveUserSettings({ columnSelection: changedColumns }));
1✔
369
      // we don't need an explicit refresh trigger here, since the selectedAttributes will be different anyway & otherwise the shown list should still be valid
370
      dispatchDeviceListState({ selectedAttributes });
1✔
371
      setShowCustomization(false);
1✔
372
    },
373
    [dispatch, dispatchDeviceListState]
374
  );
375

376
  const onExpandClick = (device = {}) => {
24!
UNCOV
377
    dispatchedSetSnackbar('');
×
UNCOV
378
    const { id } = device;
×
UNCOV
379
    dispatchDeviceListState({ selectedId: deviceListState.selectedId === id ? undefined : id, detailsTab: deviceListState.detailsTab || 'identity' });
×
UNCOV
380
    if (!onboardingState.complete) {
×
UNCOV
381
      dispatch(advanceOnboarding(onboardingSteps.DEVICES_PENDING_ONBOARDING));
×
382
    }
383
  };
384

385
  const onCreateDeploymentClick = devices => navigate(`/deployments?open=true&${devices.map(({ id }) => `deviceId=${id}`).join('&')}`);
24✔
386

387
  const onCloseExpandedDevice = useCallback(() => dispatchDeviceListState({ selectedId: undefined, detailsTab: '' }), [dispatchDeviceListState]);
24✔
388

389
  const onResizeColumns = useCallback(columns => dispatch(updateUserColumnSettings(columns)), [dispatch]);
24✔
390

391
  const actionCallbacks = {
24✔
392
    onAddDevicesToGroup: addDevicesToGroup,
393
    onAuthorizationChange,
394
    onCreateDeployment: onCreateDeploymentClick,
395
    onDeviceDismiss,
396
    onPromoteGateway: onMakeGatewayClick,
397
    onRemoveDevicesFromGroup
398
  };
399

400
  const listOptionHandlers = [{ key: 'customize', title: 'Customize', onClick: onToggleCustomizationClick }];
24✔
401
  const EmptyState = currentSelectedState.emptyState;
24✔
402

403
  const groupLabel = selectedGroup ? decodeURIComponent(selectedGroup) : ALL_DEVICES;
24✔
404
  const isUngroupedGroup = selectedGroup && selectedGroup === UNGROUPED_GROUP.id;
24✔
405
  const selectedStaticGroup = selectedGroup && !groupFilters.length ? selectedGroup : undefined;
24✔
406

407
  const openedDevice = useDebounce(selectedId, TIMEOUTS.debounceShort);
24✔
408
  return (
24✔
409
    <>
410
      <div className="margin-left-small">
411
        <div className="flexbox">
412
          <h3 className="margin-right">{isUngroupedGroup ? UNGROUPED_GROUP.name : groupLabel}</h3>
24!
413
          <div className="flexbox space-between center-aligned" style={{ flexGrow: 1 }}>
414
            <div className="flexbox">
415
              <DeviceStateSelection onStateChange={onDeviceStateSelectionChange} selectedState={selectedState} states={states} />
416
              {hasMonitor && (
37✔
417
                <DeviceIssuesSelection
418
                  classes={classes}
419
                  onChange={onDeviceIssuesSelectionChange}
420
                  options={Object.values(availableIssueOptions)}
421
                  selection={selectedIssues}
422
                />
423
              )}
424
              {selectedGroup && !isUngroupedGroup && (
38✔
425
                <div className="margin-left muted flexbox centered">
426
                  {!groupFilters.length ? <LockOutlined fontSize="small" /> : <AutorenewIcon fontSize="small" />}
7!
427
                  <span>{!groupFilters.length ? 'Static' : 'Dynamic'}</span>
7!
428
                </div>
429
              )}
430
            </div>
431
            {canManageDevices && selectedGroup && !isUngroupedGroup && (
62✔
432
              <Button onClick={onGroupRemoval} startIcon={<DeleteIcon />}>
433
                Remove group
434
              </Button>
435
            )}
436
          </div>
437
        </div>
438
        <div className="flexbox space-between">
439
          {!isUngroupedGroup && (
48✔
440
            <div className={`flexbox centered filter-header ${showFilters ? `${classes.filterCommon} filter-toggle` : ''}`}>
24!
441
              <Button
442
                color="secondary"
443
                disableRipple
UNCOV
444
                onClick={() => setShowFilters(toggle)}
×
445
                startIcon={<FilterListIcon />}
446
                style={{ backgroundColor: 'transparent' }}
447
              >
448
                {filters.length > 0 ? `Filters (${filters.length})` : 'Filters'}
24!
449
              </Button>
450
            </div>
451
          )}
452
          <ListOptions options={listOptionHandlers} title="Table options" />
453
        </div>
454
        <Filters className={classes.filterCommon} onGroupClick={onGroupClick} open={showFilters} />
455
      </div>
456
      <Loader show={!isInitialized} />
457
      <div className="padding-bottom" ref={deviceListRef}>
458
        {devices.length > 0 ? (
24✔
459
          <DeviceList
460
            columnHeaders={columnHeaders}
461
            customColumnSizes={customColumnSizes}
462
            devices={devices}
463
            deviceListState={deviceListState}
464
            idAttribute={idAttribute}
465
            onChangeRowsPerPage={onPageLengthChange}
466
            onExpandClick={onExpandClick}
467
            onPageChange={handlePageChange}
468
            onResizeColumns={onResizeColumns}
469
            onSelect={onSelectionChange}
470
            onSort={onSortChange}
471
            pageLoading={pageLoading}
472
            pageTotal={deviceCount}
473
          />
474
        ) : (
475
          <EmptyState allCount={allCount} canManageDevices={canManageDevices} filters={filters} limitMaxed={limitMaxed} onClick={onPreauthClick} />
476
        )}
477
      </div>
478
      <ExpandedDevice
479
        actionCallbacks={actionCallbacks}
480
        deviceId={openedDevice}
481
        onClose={onCloseExpandedDevice}
482
        setDetailsTab={setDetailsTab}
483
        tabSelection={tabSelection}
484
      />
485
      {!selectedId && !showsDialog && <OnboardingComponent deviceListRef={deviceListRef} onboardingState={onboardingState} />}
72✔
486
      {canManageDevices && !!selectedRows.length && (
56✔
487
        <DeviceQuickActions actionCallbacks={actionCallbacks} deviceId={openedDevice} selectedGroup={selectedStaticGroup} />
488
      )}
489
      <ColumnCustomizationDialog
490
        attributes={attributes}
491
        columnHeaders={columnHeaders}
492
        customColumnSizes={customColumnSizes}
493
        idAttribute={idAttribute}
494
        open={showCustomization}
495
        onCancel={onToggleCustomizationClick}
496
        onSubmit={onChangeColumns}
497
      />
498
    </>
499
  );
500
};
501

502
export default Authorized;
503

504
export const DeviceStateSelection = ({ onStateChange, selectedState = '', states }) => {
8!
505
  const { classes } = useStyles();
25✔
506
  const availableStates = useMemo(() => Object.values(states).filter(duplicateFilter), [states]);
25✔
507

508
  return (
25✔
509
    <div className="flexbox centered">
510
      Status:
511
      <Select className={classes.selection} disableUnderline onChange={e => onStateChange(e.target.value)} value={selectedState}>
1✔
512
        {availableStates.map(state => (
513
          <MenuItem key={state.key} value={state.key}>
127✔
514
            {state.title()}
515
          </MenuItem>
516
        ))}
517
      </Select>
518
    </div>
519
  );
520
};
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc