1501783099

Committed 18 Oct 2024 07:49AM UTC coverage: 72.799%. First build

Build # 1501783099

Build Type

push

gitlab-ci

Committed by

web-flow

Commit Message

Merge pull request #101 from mineralsfree/MEN-7568

feat: tenant list added

Run Details

4408 of 6393 branches covered (68.95%)

Branch coverage included in aggregate %.

88 of 182 new or added lines in 10 files covered. (48.35%)

42624 of 58212 relevant lines covered (73.22%)

28.08 hits per line

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

0.0

/frontend/src/js/components/tenants/tenantlist.tsx

// Copyright 2024 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { ArrowForward as ArrowForwardIcon, Check as CheckIcon } from '@mui/icons-material';

import { getDeviceLimit, getTenantsList } from '@northern.tech/store/selectors';
import { AppDispatch } from '@northern.tech/store/store';
import { getTenants, setTenantsListState } from '@northern.tech/store/thunks';
import dayjs from 'dayjs';

import { ColumnHeader, CommonList, ListItemComponentProps, RendererProp } from '../common/list';
import { ExpandedTenant } from './expanded-tenant';
import { Tenant } from './types';

export const defaultTextRender = (props: RendererProp<Tenant>) => {
  const { column, item } = props;
  const attributeValue = item?.[column.attribute.name];
  return typeof attributeValue === 'object' ? JSON.stringify(attributeValue) : attributeValue;
};
export const DeviceLimitRender = (props: RendererProp<Tenant>) => {
  //TODO: use better alternative once backend is ready (MEN-7615)
  const deviceLimit = useSelector(getDeviceLimit);
  const { column, item } = props;
  const attributeValue = item?.[column.attribute.name];
  return `${attributeValue}/${deviceLimit}`;
};
export const BoolRender = (props: RendererProp<Tenant>) => {
  const { column, item } = props;
  return <div>{item?.[column.attribute.name] ? <CheckIcon /> : <div>-</div>}</div>;
};
const AttributeRenderer = ({ content, textContent }) => (
  <div title={typeof textContent === 'string' ? textContent : ''}>
    <div className="text-overflow">{content}</div>
  </div>
);
const DateRender = (props: RendererProp<Tenant>) => {
  const { column, item } = props;
  const attributeValue = dayjs(item?.[column.attribute.name]).format('YYYY-MM-DD HH:mm');
  return <AttributeRenderer content={attributeValue} textContent={item?.[column.attribute.name]}></AttributeRenderer>;
};
const moreDetailsRender = () => {
  return (
    <div className="link-color">
      View details <ArrowForwardIcon sx={{ fontSize: 12 }} />
    </div>
  );
};
const columnHeaders: ColumnHeader<Tenant>[] = [
  {
    title: 'Name',
    attribute: {
      name: 'name',
      scope: ''
    },
    sortable: false,
    textRender: defaultTextRender
  },
  {
    title: 'Devices',
    attribute: {
      name: 'device_limit',
      scope: ''
    },
    sortable: false,
    textRender: DeviceLimitRender
  },
  {
    title: 'Delta updates enabled ',
    attribute: {
      name: 'binary_delta',
      scope: ''
    },
    sortable: false,
    textRender: BoolRender
  },
  {
    title: 'Created',
    attribute: {
      name: 'created_at',
      scope: ''
    },
    sortable: false,
    textRender: DateRender
  },
  {
    title: 'More details',
    attribute: {
      name: '',
      scope: ''
    },
    sortable: false,
    textRender: moreDetailsRender
  }
];

const DefaultAttributeRenderer = (props: RendererProp<Tenant>) => {
  const { column, item } = props;
  const text = column.textRender({ item, column });
  return <AttributeRenderer content={text} textContent={text} />;
};

const TenantListItem = (props: ListItemComponentProps<Tenant>) => {
  const { listItem, columnHeaders, onClick } = props;
  const handleOnClick = useCallback(() => {
    onClick(listItem);
  }, [listItem.id, onClick]);

  return (
    <div onClick={handleOnClick} className={`deviceListRow deviceListItem clickable`}>
      {columnHeaders.map((column: ColumnHeader<Tenant>) => {
        const Component = column.component ? column.component : DefaultAttributeRenderer;
        return <Component column={column} item={listItem} key={column.title} />;
      })}
    </div>
  );
};
export const TenantList = () => {
  const tenantListState = useSelector(getTenantsList);
  const { tenants, perPage, selectedTenant } = tenantListState;
  const dispatch: AppDispatch = useDispatch();
  useEffect(() => {
    dispatch(getTenants());
  }, [dispatch]);
  const onExpandClick = useCallback(
    (tenant: Tenant) => {
      return dispatch(setTenantsListState({ selectedTenant: tenant }));
    },
    [dispatch]
  );
  const onCloseClick = useCallback(() => {
    return dispatch(setTenantsListState({ selectedTenant: null }));
  }, [dispatch]);
  const onChangePagination = useCallback(
    (page, currentPerPage = perPage) => {
      dispatch(setTenantsListState({ page, perPage: currentPerPage }));
    },
    [dispatch, perPage]
  );
  return (
    <div>
      <CommonList
        columnHeaders={columnHeaders}
        listItems={tenants}
        listState={tenantListState}
        onChangeRowsPerPage={newPerPage => onChangePagination(1, newPerPage)}
        onExpandClick={onExpandClick}
        onPageChange={onChangePagination}
        onResizeColumns={false}
        onSelect={false}
        pageLoading={false}
        ListItemComponent={TenantListItem}
      ></CommonList>
      {selectedTenant && <ExpandedTenant onCloseClick={onCloseClick} tenantId={selectedTenant.id}></ExpandedTenant>}
    </div>
  );
};

1	// Copyright 2024 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 } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16
17	import { ArrowForward as ArrowForwardIcon, Check as CheckIcon } from '@mui/icons-material';
18
19	import { getDeviceLimit, getTenantsList } from '@northern.tech/store/selectors';
20	import { AppDispatch } from '@northern.tech/store/store';
21	import { getTenants, setTenantsListState } from '@northern.tech/store/thunks';
22	import dayjs from 'dayjs';
23
24	import { ColumnHeader, CommonList, ListItemComponentProps, RendererProp } from '../common/list';
25	import { ExpandedTenant } from './expanded-tenant';
26	import { Tenant } from './types';
27
NEW 28	export const defaultTextRender = (props: RendererProp<Tenant>) => {	×
NEW 29	const { column, item } = props;	×
NEW 30	const attributeValue = item?.[column.attribute.name];	×
NEW 31	return typeof attributeValue === 'object' ? JSON.stringify(attributeValue) : attributeValue;	×
32	};
NEW 33	export const DeviceLimitRender = (props: RendererProp<Tenant>) => {	×
34	//TODO: use better alternative once backend is ready (MEN-7615)
NEW 35	const deviceLimit = useSelector(getDeviceLimit);	×
NEW 36	const { column, item } = props;	×
NEW 37	const attributeValue = item?.[column.attribute.name];	×
NEW 38	return `${attributeValue}/${deviceLimit}`;	×
39	};
NEW 40	export const BoolRender = (props: RendererProp<Tenant>) => {	×
NEW 41	const { column, item } = props;	×
NEW 42	return <div>{item?.[column.attribute.name] ? <CheckIcon /> : <div>-</div>}</div>;	×
43	};
NEW 44	const AttributeRenderer = ({ content, textContent }) => (	×
NEW 45	<div title={typeof textContent === 'string' ? textContent : ''}>	×
46	<div className="text-overflow">{content}</div>
47	</div>
48	);
NEW 49	const DateRender = (props: RendererProp<Tenant>) => {	×
NEW 50	const { column, item } = props;	×
NEW 51	const attributeValue = dayjs(item?.[column.attribute.name]).format('YYYY-MM-DD HH:mm');	×
NEW 52	return <AttributeRenderer content={attributeValue} textContent={item?.[column.attribute.name]}></AttributeRenderer>;	×
53	};
NEW 54	const moreDetailsRender = () => {	×
NEW 55	return (	×
56	<div className="link-color">
57	View details <ArrowForwardIcon sx={{ fontSize: 12 }} />
58	</div>
59	);
60	};
NEW 61	const columnHeaders: ColumnHeader<Tenant>[] = [	×
62	{
63	title: 'Name',
64	attribute: {
65	name: 'name',
66	scope: ''
67	},
68	sortable: false,
69	textRender: defaultTextRender
70	},
71	{
72	title: 'Devices',
73	attribute: {
74	name: 'device_limit',
75	scope: ''
76	},
77	sortable: false,
78	textRender: DeviceLimitRender
79	},
80	{
81	title: 'Delta updates enabled ',
82	attribute: {
83	name: 'binary_delta',
84	scope: ''
85	},
86	sortable: false,
87	textRender: BoolRender
88	},
89	{
90	title: 'Created',
91	attribute: {
92	name: 'created_at',
93	scope: ''
94	},
95	sortable: false,
96	textRender: DateRender
97	},
98	{
99	title: 'More details',
100	attribute: {
101	name: '',
102	scope: ''
103	},
104	sortable: false,
105	textRender: moreDetailsRender
106	}
107	];
108
NEW 109	const DefaultAttributeRenderer = (props: RendererProp<Tenant>) => {	×
NEW 110	const { column, item } = props;	×
NEW 111	const text = column.textRender({ item, column });	×
NEW 112	return <AttributeRenderer content={text} textContent={text} />;	×
113	};
114
NEW 115	const TenantListItem = (props: ListItemComponentProps<Tenant>) => {	×
NEW 116	const { listItem, columnHeaders, onClick } = props;	×
NEW 117	const handleOnClick = useCallback(() => {	×
NEW 118	onClick(listItem);	×
119	}, [listItem.id, onClick]);
120
NEW 121	return (	×
122	<div onClick={handleOnClick} className={`deviceListRow deviceListItem clickable`}>
123	{columnHeaders.map((column: ColumnHeader<Tenant>) => {
NEW 124	const Component = column.component ? column.component : DefaultAttributeRenderer;	×
NEW 125	return <Component column={column} item={listItem} key={column.title} />;	×
126	})}
127	</div>
128	);
129	};
NEW 130	export const TenantList = () => {	×
NEW 131	const tenantListState = useSelector(getTenantsList);	×
NEW 132	const { tenants, perPage, selectedTenant } = tenantListState;	×
NEW 133	const dispatch: AppDispatch = useDispatch();	×
NEW 134	useEffect(() => {	×
NEW 135	dispatch(getTenants());	×
136	}, [dispatch]);
NEW 137	const onExpandClick = useCallback(	×
138	(tenant: Tenant) => {
NEW 139	return dispatch(setTenantsListState({ selectedTenant: tenant }));	×
140	},
141	[dispatch]
142	);
NEW 143	const onCloseClick = useCallback(() => {	×
NEW 144	return dispatch(setTenantsListState({ selectedTenant: null }));	×
145	}, [dispatch]);
NEW 146	const onChangePagination = useCallback(	×
147	(page, currentPerPage = perPage) => {	×
NEW 148	dispatch(setTenantsListState({ page, perPage: currentPerPage }));	×
149	},
150	[dispatch, perPage]
151	);
NEW 152	return (	×
153	<div>
154	<CommonList
155	columnHeaders={columnHeaders}
156	listItems={tenants}
157	listState={tenantListState}
NEW 158	onChangeRowsPerPage={newPerPage => onChangePagination(1, newPerPage)}	×
159	onExpandClick={onExpandClick}
160	onPageChange={onChangePagination}
161	onResizeColumns={false}
162	onSelect={false}
163	pageLoading={false}
164	ListItemComponent={TenantListItem}
165	></CommonList>
166	{selectedTenant && <ExpandedTenant onCloseClick={onCloseClick} tenantId={selectedTenant.id}></ExpandedTenant>}	×
167	</div>
168	);
169	};

mendersoftware / mender-server / 1501783099

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

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