From 8a8fdbedfd5753b3f7809f2ce6ed39605906f3ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Dudfield?= Date: Wed, 10 Nov 2021 11:13:02 +0100 Subject: [PATCH] frontend: Add Groups stories and interface docs - Named files after component (GroupItem.tsx not Item.tsx) - Separated some components into their own files --- .../ActivityContainer.stories.storyshot | 12 +- .../GroupCharts/StatusCountTimeline.tsx | 2 +- .../components/Groups/GroupItemExtended.tsx | 2 +- .../{Common.tsx => InstanceCountLabel.tsx} | 2 +- .../Instances/InstanceDetails.stories.tsx | 618 ++++++++++++++++++ .../{Details.tsx => InstanceDetails.tsx} | 8 +- .../Instances/InstanceItem.stories.tsx | 34 + .../Instances/{Item.tsx => InstanceItem.tsx} | 0 .../Instances/InstanceList.stories.tsx | 592 +++++++++++++++++ .../Instances/{List.tsx => InstanceList.tsx} | 23 +- .../Instances/InstanceTable.stories.tsx | 316 +++++++++ .../{Table.tsx => InstanceTable.tsx} | 18 +- .../Instances/charts/InstanceStatusArea.tsx | 128 ++++ .../ProgressDoughnut.tsx} | 129 +--- .../{StatusDefs.ts => statusDefs.ts} | 4 +- .../src/components/Layouts/InstanceLayout.tsx | 4 +- .../components/Layouts/InstanceListLayout.tsx | 8 +- 17 files changed, 1731 insertions(+), 169 deletions(-) rename frontend/src/components/Instances/{Common.tsx => InstanceCountLabel.tsx} (97%) create mode 100644 frontend/src/components/Instances/InstanceDetails.stories.tsx rename frontend/src/components/Instances/{Details.tsx => InstanceDetails.tsx} (99%) create mode 100644 frontend/src/components/Instances/InstanceItem.stories.tsx rename frontend/src/components/Instances/{Item.tsx => InstanceItem.tsx} (100%) create mode 100644 frontend/src/components/Instances/InstanceList.stories.tsx rename frontend/src/components/Instances/{List.tsx => InstanceList.tsx} (97%) create mode 100644 frontend/src/components/Instances/InstanceTable.stories.tsx rename frontend/src/components/Instances/{Table.tsx => InstanceTable.tsx} (94%) create mode 100644 frontend/src/components/Instances/charts/InstanceStatusArea.tsx rename frontend/src/components/Instances/{Charts.tsx => charts/ProgressDoughnut.tsx} (55%) rename frontend/src/components/Instances/{StatusDefs.ts => statusDefs.ts} (96%) diff --git a/frontend/src/components/Activity/__snapshots__/ActivityContainer.stories.storyshot b/frontend/src/components/Activity/__snapshots__/ActivityContainer.stories.storyshot index eb886a4b4..232523984 100644 --- a/frontend/src/components/Activity/__snapshots__/ActivityContainer.stories.storyshot +++ b/frontend/src/components/Activity/__snapshots__/ActivityContainer.stories.storyshot @@ -218,7 +218,7 @@ exports[`Storyshots activity/ActivityContainer List 1`] = ` />

Rows per page:

@@ -227,9 +227,9 @@ exports[`Storyshots activity/ActivityContainer List 1`] = ` >
@@ -672,7 +672,7 @@ exports[`Storyshots activity/ActivityContainer Multiple Days 1`] = ` />

Rows per page:

@@ -681,9 +681,9 @@ exports[`Storyshots activity/ActivityContainer Multiple Days 1`] = ` >
diff --git a/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx b/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx index 8e19429bf..f1917ba8f 100644 --- a/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx +++ b/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx @@ -12,7 +12,7 @@ import { groupChartStore } from '../../../stores/Stores'; import { getInstanceStatus, makeLocaleTime } from '../../../utils/helpers'; import Loader from '../../Common/Loader'; import SimpleTable from '../../Common/SimpleTable'; -import makeStatusDefs from '../../Instances/StatusDefs'; +import makeStatusDefs from '../../Instances/statusDefs'; import TimelineChart from './TimelineChart'; export interface StatusCountTimelineProps { diff --git a/frontend/src/components/Groups/GroupItemExtended.tsx b/frontend/src/components/Groups/GroupItemExtended.tsx index dd14ed554..6298bbcae 100644 --- a/frontend/src/components/Groups/GroupItemExtended.tsx +++ b/frontend/src/components/Groups/GroupItemExtended.tsx @@ -17,7 +17,7 @@ import ChannelItem from '../Channels/ChannelItem'; import { CardFeatureLabel, CardHeader, CardLabel } from '../Common/Card'; import MoreMenu from '../Common/MoreMenu'; import TimeIntervalLinks from '../Common/TimeIntervalLinks'; -import InstanceStatusArea from '../Instances/Charts'; +import InstanceStatusArea from '../Instances/charts/InstanceStatusArea'; import StatusCountTimeline from './GroupCharts/StatusCountTimeline'; import VersionCountTimeline from './GroupCharts/VersionCountTimeline'; import { formatUpdateLimits } from './GroupItem'; diff --git a/frontend/src/components/Instances/Common.tsx b/frontend/src/components/Instances/InstanceCountLabel.tsx similarity index 97% rename from frontend/src/components/Instances/Common.tsx rename to frontend/src/components/Instances/InstanceCountLabel.tsx index 5086bad4b..1627fc373 100644 --- a/frontend/src/components/Instances/Common.tsx +++ b/frontend/src/components/Instances/InstanceCountLabel.tsx @@ -24,7 +24,7 @@ const useInstanceCountStyles = makeStyles((theme: Theme) => ({ }, })); -export function InstanceCountLabel(props: { +export default function InstanceCountLabel(props: { countText: string | number; href?: object; instanceListView?: boolean; diff --git a/frontend/src/components/Instances/InstanceDetails.stories.tsx b/frontend/src/components/Instances/InstanceDetails.stories.tsx new file mode 100644 index 000000000..0fa41ca3a --- /dev/null +++ b/frontend/src/components/Instances/InstanceDetails.stories.tsx @@ -0,0 +1,618 @@ +export {}; + +// const InstanceDetailsView = { +// application: { +// id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// product_id: null, +// name: 'Flatcar Container Linux', +// description: 'Linux for massive server deployments', +// created_ts: '2021-11-08T09:02:45.991164+01:00', +// groups: [ +// { +// id: 'b4b2fa22-c1ea-498c-a8ac-c1dc0b1d7c17', +// name: 'Edge (ARM)', +// description: 'Experimental features and patches (ARM)', +// created_ts: '2018-04-10T12:25:39.677359+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '30b6ffa6-e6dc-4a01-bea6-9ce7f1a5bb34', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '30b6ffa6-e6dc-4a01-bea6-9ce7f1a5bb34', +// name: 'edge', +// color: '#f4ab3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'edge', +// }, +// { +// id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// name: 'Edge (AMD64)', +// description: 'Experimental features and patches (AMD64)', +// created_ts: '2018-04-10T12:25:39.677359+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// name: 'edge', +// color: '#f44e3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// package: { +// id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// type: 1, +// version: '2247.99.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.99.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.99.0', +// size: '486809098', +// hash: 'tGBe5k1+n/9Xw2oRdw58JNUrzEk=', +// created_ts: '2019-09-05T13:25:35.210186+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '96d04b09-609f-4f42-8aa5-c4f6609db416', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'sql8QQ4UEN8N6niHlCHtNLo8IYnncpoF2pNnrzZ5Lcc=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'edge', +// }, +// { +// id: '5b810680-e36a-4879-b98a-4f989e80b899', +// name: 'Alpha (AMD64)', +// description: 'Tracks current development work and is released frequently (AMD64)', +// created_ts: '2015-09-19T07:09:34.274911+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'a87a03ad-4984-47a1-8dc4-3507bae91ee1', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'a87a03ad-4984-47a1-8dc4-3507bae91ee1', +// name: 'alpha', +// color: '#1fbb86', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// package: { +// id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// type: 1, +// version: '2261.0.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2261.0.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2261.0.0', +// size: '467500954', +// hash: 'GTNbHomjMXq/x2OU3B9vMtaBYXw=', +// created_ts: '2019-09-13T15:52:45.275675+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '86703e7d-4fa8-4359-8e6a-8c68bb1eaacb', +// event: 'postinstall', +// chromeos_version: '', +// sha256: '2T/RPs3fe46Ogt3obgb3jsSfNLp1b94erg16ejudymg=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'alpha', +// }, +// { +// id: 'e641708d-fb48-4260-8bdf-ba2074a1147a', +// name: 'Alpha (ARM)', +// description: 'Tracks current development work and is released frequently (ARM)', +// created_ts: '2015-09-19T07:09:34.274911+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'def12ce0-3ba4-4649-b290-8843f3b455eb', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'def12ce0-3ba4-4649-b290-8843f3b455eb', +// name: 'alpha', +// color: '#1fa2bb', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'alpha', +// }, +// { +// id: 'd112ec01-ba34-4a9e-9d4b-9814a685f266', +// name: 'Beta (ARM)', +// description: 'Promoted alpha releases, to catch bugs specific to your configuration (ARM)', +// created_ts: '2015-09-19T07:09:34.273244+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'cf20698b-1f19-43d6-b6f6-d15c796cb217', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'cf20698b-1f19-43d6-b6f6-d15c796cb217', +// name: 'beta', +// color: '#fce433', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'beta', +// }, +// { +// id: '3fe10490-dd73-4b49-b72a-28ac19acfcdc', +// name: 'Beta (AMD64)', +// description: +// 'Promoted alpha releases, to catch bugs specific to your configuration (AMD64)', +// created_ts: '2015-09-19T07:09:34.273244+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '128b8c29-5058-4643-8e67-a1a0e3c641c9', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '128b8c29-5058-4643-8e67-a1a0e3c641c9', +// name: 'beta', +// color: '#fc7f33', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// package: { +// id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// type: 1, +// version: '2247.2.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.2.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.2.0', +// size: '467048659', +// hash: 'Oa9u83Dxc+kbZnu6wEaxzocVvJo=', +// created_ts: '2019-09-13T15:39:32.794613+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '021b5853-26fb-4833-b5d9-a9fa040841a9', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'Zs9u/PomrPzR6JuixoajzZY6rPn1lOXpFUONrvwuaw0=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'beta', +// }, +// { +// id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// name: 'Stable (AMD64)', +// description: 'For production clusters (AMD64)', +// created_ts: '2015-09-19T07:09:34.269062+02:00', +// rollout_in_progress: true, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// name: 'stable', +// color: '#14b9d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// package: { +// id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// type: 1, +// version: '2191.5.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2191.5.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2191.5.0', +// size: '465881871', +// hash: 'r3nufcxgMTZaxYEqL+x2zIoeClk=', +// created_ts: '2019-09-05T12:41:09.265687+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '1f6e1bcf-4ebb-4fe6-8ca3-2cb6ad90d5dd', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'LIkAKVZY2EJFiwTmltiJZLFLA5xT/FodbjVgqkyF/y8=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'stable', +// }, +// { +// id: '11a585f6-9418-4df0-8863-78b2fd3240f8', +// name: 'Stable (ARM)', +// description: 'For production clusters (ARM)', +// created_ts: '2015-09-19T07:09:34.269062+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '5dfe7b12-c94a-470d-a2b6-2eae78c5c9f5', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '5dfe7b12-c94a-470d-a2b6-2eae78c5c9f5', +// name: 'stable', +// color: '#1458d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'stable', +// }, +// ], +// channels: [ +// { +// id: 'def12ce0-3ba4-4649-b290-8843f3b455eb', +// name: 'alpha', +// color: '#1fa2bb', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: 'a87a03ad-4984-47a1-8dc4-3507bae91ee1', +// name: 'alpha', +// color: '#1fbb86', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// package: { +// id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// type: 1, +// version: '2261.0.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2261.0.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2261.0.0', +// size: '467500954', +// hash: 'GTNbHomjMXq/x2OU3B9vMtaBYXw=', +// created_ts: '2019-09-13T15:52:45.275675+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '86703e7d-4fa8-4359-8e6a-8c68bb1eaacb', +// event: 'postinstall', +// chromeos_version: '', +// sha256: '2T/RPs3fe46Ogt3obgb3jsSfNLp1b94erg16ejudymg=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// { +// id: '128b8c29-5058-4643-8e67-a1a0e3c641c9', +// name: 'beta', +// color: '#fc7f33', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// package: { +// id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// type: 1, +// version: '2247.2.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.2.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.2.0', +// size: '467048659', +// hash: 'Oa9u83Dxc+kbZnu6wEaxzocVvJo=', +// created_ts: '2019-09-13T15:39:32.794613+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '021b5853-26fb-4833-b5d9-a9fa040841a9', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'Zs9u/PomrPzR6JuixoajzZY6rPn1lOXpFUONrvwuaw0=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// { +// id: 'cf20698b-1f19-43d6-b6f6-d15c796cb217', +// name: 'beta', +// color: '#fce433', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: '30b6ffa6-e6dc-4a01-bea6-9ce7f1a5bb34', +// name: 'edge', +// color: '#f4ab3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// name: 'edge', +// color: '#f44e3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// package: { +// id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// type: 1, +// version: '2247.99.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.99.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.99.0', +// size: '486809098', +// hash: 'tGBe5k1+n/9Xw2oRdw58JNUrzEk=', +// created_ts: '2019-09-05T13:25:35.210186+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '96d04b09-609f-4f42-8aa5-c4f6609db416', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'sql8QQ4UEN8N6niHlCHtNLo8IYnncpoF2pNnrzZ5Lcc=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// { +// id: '5dfe7b12-c94a-470d-a2b6-2eae78c5c9f5', +// name: 'stable', +// color: '#1458d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// name: 'stable', +// color: '#14b9d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// package: { +// id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// type: 1, +// version: '2191.5.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2191.5.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2191.5.0', +// size: '465881871', +// hash: 'r3nufcxgMTZaxYEqL+x2zIoeClk=', +// created_ts: '2019-09-05T12:41:09.265687+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '1f6e1bcf-4ebb-4fe6-8ca3-2cb6ad90d5dd', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'LIkAKVZY2EJFiwTmltiJZLFLA5xT/FodbjVgqkyF/y8=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// ], +// instances: { count: 213 }, +// }, +// group: { +// id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// name: 'Stable (AMD64)', +// description: 'For production clusters (AMD64)', +// created_ts: '2015-09-19T07:09:34.269062+02:00', +// rollout_in_progress: true, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// name: 'stable', +// color: '#14b9d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// package: { +// id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// type: 1, +// version: '2191.5.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2191.5.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2191.5.0', +// size: '465881871', +// hash: 'r3nufcxgMTZaxYEqL+x2zIoeClk=', +// created_ts: '2019-09-05T12:41:09.265687+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '1f6e1bcf-4ebb-4fe6-8ca3-2cb6ad90d5dd', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'LIkAKVZY2EJFiwTmltiJZLFLA5xT/FodbjVgqkyF/y8=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'stable', +// }, +// instance: { +// id: 'deadbeef22340d00aeaa6442eb2aeedd', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:34.616325+01:00', +// application: { +// instance_id: 'deadbeef22340d00aeaa6442eb2aeedd', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:38.779459+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// }; diff --git a/frontend/src/components/Instances/Details.tsx b/frontend/src/components/Instances/InstanceDetails.tsx similarity index 99% rename from frontend/src/components/Instances/Details.tsx rename to frontend/src/components/Instances/InstanceDetails.tsx index 644f5d049..875ec637c 100644 --- a/frontend/src/components/Instances/Details.tsx +++ b/frontend/src/components/Instances/InstanceDetails.tsx @@ -42,7 +42,7 @@ import Empty from '../Common/EmptyContent'; import ListHeader from '../Common/ListHeader'; import Loader from '../Common/Loader'; import MoreMenu from '../Common/MoreMenu'; -import makeStatusDefs from './StatusDefs'; +import makeStatusDefs from './statusDefs'; const useDetailsStyles = makeStyles((theme: Theme) => ({ timelineContainer: { @@ -281,14 +281,14 @@ function EditDialog(props: EditDialogProps) { ); } -interface DetailsViewProps { +interface InstanceDetailsProps { application: Application; group: Group; instance: Instance; onInstanceUpdated: () => void; } -function DetailsView(props: DetailsViewProps) { +export default function InstanceDetails(props: InstanceDetailsProps) { const classes = useDetailsStyles(); const theme = useTheme(); const { application, group, instance, onInstanceUpdated } = props; @@ -461,5 +461,3 @@ function DetailsView(props: DetailsViewProps) { ); } - -export default DetailsView; diff --git a/frontend/src/components/Instances/InstanceItem.stories.tsx b/frontend/src/components/Instances/InstanceItem.stories.tsx new file mode 100644 index 000000000..4a29b4b16 --- /dev/null +++ b/frontend/src/components/Instances/InstanceItem.stories.tsx @@ -0,0 +1,34 @@ +export {}; + +// const InstanceItem = { +// instance: { +// id: 'deadbeef22340d0aa744a5362c702717', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:30.576732+01:00', +// application: { +// instance_id: 'deadbeef22340d0aa744a5362c702717', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:41.795962+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d0aa744a5362c702717', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// lastVersionChannel: '2191.5.0', +// versionNumbers: [], +// selected: false, +// }; diff --git a/frontend/src/components/Instances/Item.tsx b/frontend/src/components/Instances/InstanceItem.tsx similarity index 100% rename from frontend/src/components/Instances/Item.tsx rename to frontend/src/components/Instances/InstanceItem.tsx diff --git a/frontend/src/components/Instances/InstanceList.stories.tsx b/frontend/src/components/Instances/InstanceList.stories.tsx new file mode 100644 index 000000000..da09702a8 --- /dev/null +++ b/frontend/src/components/Instances/InstanceList.stories.tsx @@ -0,0 +1,592 @@ +export {}; + +// const InstanceListView = { +// application: { +// id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// product_id: null, +// name: 'Flatcar Container Linux', +// description: 'Linux for massive server deployments', +// created_ts: '2021-11-08T09:02:45.991164+01:00', +// groups: [ +// { +// id: 'b4b2fa22-c1ea-498c-a8ac-c1dc0b1d7c17', +// name: 'Edge (ARM)', +// description: 'Experimental features and patches (ARM)', +// created_ts: '2018-04-10T12:25:39.677359+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '30b6ffa6-e6dc-4a01-bea6-9ce7f1a5bb34', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '30b6ffa6-e6dc-4a01-bea6-9ce7f1a5bb34', +// name: 'edge', +// color: '#f4ab3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'edge', +// }, +// { +// id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// name: 'Edge (AMD64)', +// description: 'Experimental features and patches (AMD64)', +// created_ts: '2018-04-10T12:25:39.677359+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// name: 'edge', +// color: '#f44e3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// package: { +// id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// type: 1, +// version: '2247.99.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.99.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.99.0', +// size: '486809098', +// hash: 'tGBe5k1+n/9Xw2oRdw58JNUrzEk=', +// created_ts: '2019-09-05T13:25:35.210186+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '96d04b09-609f-4f42-8aa5-c4f6609db416', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'sql8QQ4UEN8N6niHlCHtNLo8IYnncpoF2pNnrzZ5Lcc=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'edge', +// }, +// { +// id: '5b810680-e36a-4879-b98a-4f989e80b899', +// name: 'Alpha (AMD64)', +// description: 'Tracks current development work and is released frequently (AMD64)', +// created_ts: '2015-09-19T07:09:34.274911+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'a87a03ad-4984-47a1-8dc4-3507bae91ee1', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'a87a03ad-4984-47a1-8dc4-3507bae91ee1', +// name: 'alpha', +// color: '#1fbb86', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// package: { +// id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// type: 1, +// version: '2261.0.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2261.0.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2261.0.0', +// size: '467500954', +// hash: 'GTNbHomjMXq/x2OU3B9vMtaBYXw=', +// created_ts: '2019-09-13T15:52:45.275675+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '86703e7d-4fa8-4359-8e6a-8c68bb1eaacb', +// event: 'postinstall', +// chromeos_version: '', +// sha256: '2T/RPs3fe46Ogt3obgb3jsSfNLp1b94erg16ejudymg=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'alpha', +// }, +// { +// id: 'e641708d-fb48-4260-8bdf-ba2074a1147a', +// name: 'Alpha (ARM)', +// description: 'Tracks current development work and is released frequently (ARM)', +// created_ts: '2015-09-19T07:09:34.274911+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'def12ce0-3ba4-4649-b290-8843f3b455eb', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'def12ce0-3ba4-4649-b290-8843f3b455eb', +// name: 'alpha', +// color: '#1fa2bb', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'alpha', +// }, +// { +// id: 'd112ec01-ba34-4a9e-9d4b-9814a685f266', +// name: 'Beta (ARM)', +// description: 'Promoted alpha releases, to catch bugs specific to your configuration (ARM)', +// created_ts: '2015-09-19T07:09:34.273244+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'cf20698b-1f19-43d6-b6f6-d15c796cb217', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'cf20698b-1f19-43d6-b6f6-d15c796cb217', +// name: 'beta', +// color: '#fce433', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'beta', +// }, +// { +// id: '3fe10490-dd73-4b49-b72a-28ac19acfcdc', +// name: 'Beta (AMD64)', +// description: +// 'Promoted alpha releases, to catch bugs specific to your configuration (AMD64)', +// created_ts: '2015-09-19T07:09:34.273244+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '128b8c29-5058-4643-8e67-a1a0e3c641c9', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '128b8c29-5058-4643-8e67-a1a0e3c641c9', +// name: 'beta', +// color: '#fc7f33', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// package: { +// id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// type: 1, +// version: '2247.2.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.2.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.2.0', +// size: '467048659', +// hash: 'Oa9u83Dxc+kbZnu6wEaxzocVvJo=', +// created_ts: '2019-09-13T15:39:32.794613+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '021b5853-26fb-4833-b5d9-a9fa040841a9', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'Zs9u/PomrPzR6JuixoajzZY6rPn1lOXpFUONrvwuaw0=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'beta', +// }, +// { +// id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// name: 'Stable (AMD64)', +// description: 'For production clusters (AMD64)', +// created_ts: '2015-09-19T07:09:34.269062+02:00', +// rollout_in_progress: true, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// name: 'stable', +// color: '#14b9d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// package: { +// id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// type: 1, +// version: '2191.5.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2191.5.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2191.5.0', +// size: '465881871', +// hash: 'r3nufcxgMTZaxYEqL+x2zIoeClk=', +// created_ts: '2019-09-05T12:41:09.265687+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '1f6e1bcf-4ebb-4fe6-8ca3-2cb6ad90d5dd', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'LIkAKVZY2EJFiwTmltiJZLFLA5xT/FodbjVgqkyF/y8=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'stable', +// }, +// { +// id: '11a585f6-9418-4df0-8863-78b2fd3240f8', +// name: 'Stable (ARM)', +// description: 'For production clusters (ARM)', +// created_ts: '2015-09-19T07:09:34.269062+02:00', +// rollout_in_progress: false, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: '5dfe7b12-c94a-470d-a2b6-2eae78c5c9f5', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: '5dfe7b12-c94a-470d-a2b6-2eae78c5c9f5', +// name: 'stable', +// color: '#1458d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// track: 'stable', +// }, +// ], +// channels: [ +// { +// id: 'def12ce0-3ba4-4649-b290-8843f3b455eb', +// name: 'alpha', +// color: '#1fa2bb', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: 'a87a03ad-4984-47a1-8dc4-3507bae91ee1', +// name: 'alpha', +// color: '#1fbb86', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// package: { +// id: '0c2635c7-4ef8-4e4b-b768-6292508f9700', +// type: 1, +// version: '2261.0.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2261.0.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2261.0.0', +// size: '467500954', +// hash: 'GTNbHomjMXq/x2OU3B9vMtaBYXw=', +// created_ts: '2019-09-13T15:52:45.275675+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '86703e7d-4fa8-4359-8e6a-8c68bb1eaacb', +// event: 'postinstall', +// chromeos_version: '', +// sha256: '2T/RPs3fe46Ogt3obgb3jsSfNLp1b94erg16ejudymg=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// { +// id: '128b8c29-5058-4643-8e67-a1a0e3c641c9', +// name: 'beta', +// color: '#fc7f33', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// package: { +// id: 'cbc1ca68-f739-43de-91bc-542aec9eeac5', +// type: 1, +// version: '2247.2.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.2.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.2.0', +// size: '467048659', +// hash: 'Oa9u83Dxc+kbZnu6wEaxzocVvJo=', +// created_ts: '2019-09-13T15:39:32.794613+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '021b5853-26fb-4833-b5d9-a9fa040841a9', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'Zs9u/PomrPzR6JuixoajzZY6rPn1lOXpFUONrvwuaw0=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// { +// id: 'cf20698b-1f19-43d6-b6f6-d15c796cb217', +// name: 'beta', +// color: '#fce433', +// created_ts: '2015-09-19T07:09:34.264334+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: '30b6ffa6-e6dc-4a01-bea6-9ce7f1a5bb34', +// name: 'edge', +// color: '#f4ab3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: '72834a2b-ad86-4d6d-b498-e08a19ebe54e', +// name: 'edge', +// color: '#f44e3b', +// created_ts: '2015-09-19T07:09:34.265754+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// package: { +// id: 'b6cd0aa9-6d5c-4818-ae0e-10c07aca4c3a', +// type: 1, +// version: '2247.99.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2247.99.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2247.99.0', +// size: '486809098', +// hash: 'tGBe5k1+n/9Xw2oRdw58JNUrzEk=', +// created_ts: '2019-09-05T13:25:35.210186+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '96d04b09-609f-4f42-8aa5-c4f6609db416', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'sql8QQ4UEN8N6niHlCHtNLo8IYnncpoF2pNnrzZ5Lcc=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// { +// id: '5dfe7b12-c94a-470d-a2b6-2eae78c5c9f5', +// name: 'stable', +// color: '#1458d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: null, +// package: null, +// arch: 2, +// }, +// { +// id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// name: 'stable', +// color: '#14b9d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// package: { +// id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// type: 1, +// version: '2191.5.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2191.5.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2191.5.0', +// size: '465881871', +// hash: 'r3nufcxgMTZaxYEqL+x2zIoeClk=', +// created_ts: '2019-09-05T12:41:09.265687+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '1f6e1bcf-4ebb-4fe6-8ca3-2cb6ad90d5dd', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'LIkAKVZY2EJFiwTmltiJZLFLA5xT/FodbjVgqkyF/y8=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// ], +// instances: { count: 213 }, +// }, +// group: { +// id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// name: 'Stable (AMD64)', +// description: 'For production clusters (AMD64)', +// created_ts: '2015-09-19T07:09:34.269062+02:00', +// rollout_in_progress: true, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// channel_id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// policy_updates_enabled: true, +// policy_safe_mode: false, +// policy_office_hours: false, +// policy_timezone: 'Europe/Berlin', +// policy_period_interval: '1 minutes', +// policy_max_updates_per_period: 999999, +// policy_update_timeout: '60 minutes', +// channel: { +// id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// name: 'stable', +// color: '#14b9d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// package: { +// id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// type: 1, +// version: '2191.5.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2191.5.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2191.5.0', +// size: '465881871', +// hash: 'r3nufcxgMTZaxYEqL+x2zIoeClk=', +// created_ts: '2019-09-05T12:41:09.265687+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '1f6e1bcf-4ebb-4fe6-8ca3-2cb6ad90d5dd', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'LIkAKVZY2EJFiwTmltiJZLFLA5xT/FodbjVgqkyF/y8=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// track: 'stable', +// }, +// }; diff --git a/frontend/src/components/Instances/List.tsx b/frontend/src/components/Instances/InstanceList.tsx similarity index 97% rename from frontend/src/components/Instances/List.tsx rename to frontend/src/components/Instances/InstanceList.tsx index bbea7a6d7..b6d68ea46 100644 --- a/frontend/src/components/Instances/List.tsx +++ b/frontend/src/components/Instances/InstanceList.tsx @@ -15,7 +15,6 @@ import Paper from '@material-ui/core/Paper'; import Select from '@material-ui/core/Select'; import TablePagination from '@material-ui/core/TablePagination'; import { useTheme } from '@material-ui/styles'; -import PropTypes from 'prop-types'; import React, { ChangeEvent } from 'react'; import { useTranslation } from 'react-i18next'; import { useHistory, useLocation } from 'react-router-dom'; @@ -35,9 +34,9 @@ import ListHeader from '../Common/ListHeader'; import SearchInput from '../Common/ListSearch'; import Loader from '../Common/Loader'; import TimeIntervalLinks from '../Common/TimeIntervalLinks'; -import { InstanceCountLabel } from './Common'; -import makeStatusDefs from './StatusDefs'; -import Table from './Table'; +import InstanceCountLabel from './InstanceCountLabel'; +import InstanceTable from './InstanceTable'; +import makeStatusDefs from './statusDefs'; // The indexes for the sorting names match the backend index for that criteria as well. const SORT_ORDERS = ['asc', 'desc']; @@ -136,7 +135,12 @@ function InstanceFilter(props: InstanceFilterProps) { ); } -function ListView(props: { application: Application; group: Group }) { +export interface InstanceListProps { + application: Application; + group: Group; +} + +export default function InstanceList(props: InstanceListProps) { const classes = useStyles(); const theme = useTheme(); const { t } = useTranslation(); @@ -488,7 +492,7 @@ function ListView(props: { application: Application; group: Group }) { {!instanceFetchLoading ? ( instancesObj.instances.length > 0 ? ( - ); } - -ListView.propTypes = { - application: PropTypes.object.isRequired, - group: PropTypes.object.isRequired, -}; - -export default ListView; diff --git a/frontend/src/components/Instances/InstanceTable.stories.tsx b/frontend/src/components/Instances/InstanceTable.stories.tsx new file mode 100644 index 000000000..f9d030e56 --- /dev/null +++ b/frontend/src/components/Instances/InstanceTable.stories.tsx @@ -0,0 +1,316 @@ +export {}; + +// const InstanceTable = { +// channel: { +// id: 'e06064ad-4414-4904-9a6e-fd465593d1b2', +// name: 'stable', +// color: '#14b9d6', +// created_ts: '2015-09-19T07:09:34.261241+02:00', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// package_id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// package: { +// id: '84b4c599-9b6b-44a8-b13c-d4263fff0403', +// type: 1, +// version: '2191.5.0', +// url: 'https://update.release.flatcar-linux.net/amd64-usr/2191.5.0/', +// filename: 'flatcar_production_update.gz', +// description: 'Flatcar Container Linux 2191.5.0', +// size: '465881871', +// hash: 'r3nufcxgMTZaxYEqL+x2zIoeClk=', +// created_ts: '2019-09-05T12:41:09.265687+02:00', +// channels_blacklist: null, +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// flatcar_action: { +// id: '1f6e1bcf-4ebb-4fe6-8ca3-2cb6ad90d5dd', +// event: 'postinstall', +// chromeos_version: '', +// sha256: 'LIkAKVZY2EJFiwTmltiJZLFLA5xT/FodbjVgqkyF/y8=', +// needs_admin: false, +// is_delta: false, +// disable_payload_backoff: true, +// metadata_signature_rsa: '', +// metadata_size: '', +// deadline: '', +// created_ts: '2019-08-20T02:12:37.532281+02:00', +// }, +// arch: 1, +// metadata_type: null, +// metadata_content: null, +// }, +// arch: 1, +// }, +// instances: [ +// { +// id: 'deadbeef22340d00aeaa6442eb2aeedd', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:34.616325+01:00', +// application: { +// instance_id: 'deadbeef22340d00aeaa6442eb2aeedd', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:38.779459+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d00aeaa6442eb2aeedd', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d01bda492e7d21e4655', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:29.592075+01:00', +// application: { +// instance_id: 'deadbeef22340d01bda492e7d21e4655', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:33.945812+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d01bda492e7d21e4655', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d0294066aa053fea92e', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:30.577513+01:00', +// application: { +// instance_id: 'deadbeef22340d0294066aa053fea92e', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:37.795418+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d0294066aa053fea92e', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d02a740e8ff7bb992b1', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:27.690862+01:00', +// application: { +// instance_id: 'deadbeef22340d02a740e8ff7bb992b1', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:34.772146+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d02a740e8ff7bb992b1', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d02a9636a8408c4b62d', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:29.681238+01:00', +// application: { +// instance_id: 'deadbeef22340d02a9636a8408c4b62d', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:38.842748+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d02a9636a8408c4b62d', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d068561f0b4fc090d84', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:27.692927+01:00', +// application: { +// instance_id: 'deadbeef22340d068561f0b4fc090d84', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:32.789259+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d068561f0b4fc090d84', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d06948edceca3707373', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:33.585683+01:00', +// application: { +// instance_id: 'deadbeef22340d06948edceca3707373', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:40.790699+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d06948edceca3707373', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d078426e0f0da795bec', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:31.578141+01:00', +// application: { +// instance_id: 'deadbeef22340d078426e0f0da795bec', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:35.860852+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d078426e0f0da795bec', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d07af3957150dbf9cd9', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:34.596054+01:00', +// application: { +// instance_id: 'deadbeef22340d07af3957150dbf9cd9', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:38.769065+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d07af3957150dbf9cd9', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// { +// id: 'deadbeef22340d0aa744a5362c702717', +// ip: '127.0.0.1', +// created_ts: '2021-11-08T09:04:30.576732+01:00', +// application: { +// instance_id: 'deadbeef22340d0aa744a5362c702717', +// application_id: 'e96281a6-d1af-4bde-9a0a-97b76e56dc57', +// group_id: '9a2deb70-37be-4026-853f-bfdd6b347bbe', +// version: '2191.5.0', +// created_ts: '0001-01-01T00:00:00Z', +// status: 1, +// last_check_for_updates: '2021-11-08T09:04:41.795962+01:00', +// last_update_granted_ts: null, +// last_update_version: '2191.5.0', +// update_in_progress: false, +// }, +// alias: 'deadbeef22340d0aa744a5362c702717', +// statusInfo: { +// type: 'InstanceStatusUndefined', +// className: '', +// spinning: false, +// icon: '', +// description: '', +// status: 'Undefined', +// explanation: '', +// }, +// }, +// ], +// isDescSortOrder: 0, +// sortQuery: '2', +// }; diff --git a/frontend/src/components/Instances/Table.tsx b/frontend/src/components/Instances/InstanceTable.tsx similarity index 94% rename from frontend/src/components/Instances/Table.tsx rename to frontend/src/components/Instances/InstanceTable.tsx index e153a4dfa..01935f7e9 100644 --- a/frontend/src/components/Instances/Table.tsx +++ b/frontend/src/components/Instances/InstanceTable.tsx @@ -3,7 +3,7 @@ import menuSwap from '@iconify/icons-mdi/menu-swap'; import menuUp from '@iconify/icons-mdi/menu-up'; import Icon from '@iconify/react'; import { IconButton } from '@material-ui/core'; -import MuiTable from '@material-ui/core/Table'; +import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableHead from '@material-ui/core/TableHead'; @@ -14,7 +14,7 @@ import semver from 'semver'; import _ from 'underscore'; import { Channel, Instance } from '../../api/apiDataTypes'; import { cleanSemverVersion, InstanceSortFilters } from '../../utils/helpers'; -import Item from './Item'; +import InstanceItem from './InstanceItem'; function TableCellWithSortButtons(props: { sortQuery: string; @@ -44,14 +44,16 @@ function TableCellWithSortButtons(props: { ); } -function Table(props: { +export interface InstanceTableProps { version_breakdown?: any; channel: Channel; instances: Instance[]; sortQuery: string; isDescSortOrder: boolean; sortHandler: (isDescSortOrder: boolean, sortKey: string) => void; -}) { +} + +export default function InstanceTable(props: InstanceTableProps) { const { sortHandler, sortQuery, isDescSortOrder } = props; const [selectedInstance, setSelectedInstance] = React.useState(null); const { t } = useTranslation(); @@ -71,7 +73,7 @@ function Table(props: { } return ( - +
{props.instances.map((instance, i) => ( - ))} - +
); } - -export default Table; diff --git a/frontend/src/components/Instances/charts/InstanceStatusArea.tsx b/frontend/src/components/Instances/charts/InstanceStatusArea.tsx new file mode 100644 index 000000000..2cf3dd2f3 --- /dev/null +++ b/frontend/src/components/Instances/charts/InstanceStatusArea.tsx @@ -0,0 +1,128 @@ +import { Theme } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import { useTheme } from '@material-ui/styles'; +import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; +import Empty from '../../Common/EmptyContent'; +import Loader from '../../Common/Loader'; +import InstanceCountLabel from '../InstanceCountLabel'; +import makeStatusDefs from '../statusDefs'; +import ProgressDoughnut from './ProgressDoughnut'; + +interface InstanceStats { + [key: string]: number; + total: number; +} + +interface InstanceStatusAreaProps { + instanceStats: InstanceStats | null; + href?: object; + period: string; +} + +interface InstanceStatusCount { + status: string; + count: { + key: string; + label?: string; + }[]; +} + +export default function InstanceStatusArea(props: InstanceStatusAreaProps) { + const theme = useTheme(); + const statusDefs = makeStatusDefs(theme); + const { t } = useTranslation(); + + const { instanceStats, href, period } = props; + const instanceStateCount: InstanceStatusCount[] = [ + { + status: 'InstanceStatusComplete', + count: [{ key: 'complete' }], + }, + { + status: 'InstanceStatusDownloaded', + count: [{ key: 'downloaded' }], + }, + { + status: 'InstanceStatusOther', + count: [ + { key: 'onhold', label: t('instances|InstanceStatusOnHold') }, + { key: 'undefined', label: t('instances|InstanceStatusUndefined') }, + ], + }, + { + status: 'InstanceStatusInstalled', + count: [{ key: 'installed' }], + }, + { + status: 'InstanceStatusDownloading', + count: [ + { key: 'downloading', label: t('instances|InstanceStatusDownloading') }, + { key: 'update_granted', label: t('instances|InstanceStatusUpdateGranted') }, + ], + }, + { + status: 'InstanceStatusError', + count: [{ key: 'error' }], + }, + ]; + + statusDefs['InstanceStatusOther'] = { ...statusDefs['InstanceStatusUndefined'] }; + statusDefs['InstanceStatusOther'].label = t('instances|Other'); + + const totalInstances = instanceStats ? instanceStats.total : 0; + + if (!instanceStats) { + return ; + } + + return totalInstances > 0 ? ( + + + + + + {instanceStateCount.map(({ status, count }, i) => { + // Sort the data entries so the smaller amounts are shown first. + count.sort((obj1, obj2) => { + const stats1 = instanceStats[obj1.key]; + const stats2 = instanceStats[obj2.key]; + if (stats1 === stats2) return 0; + if (stats1 < stats2) return -1; + return 1; + }); + + return ( + + { + const statusLabel = statusDefs[label].label; + return { + value: instanceStats[key] / instanceStats.total, + color: statusDefs[label].color, + description: t('{{statusLabel}}: {{stat, number}} instances', { + statusLabel: statusLabel, + stat: instanceStats[key], + }), + }; + })} + width={140} + height={140} + {...statusDefs[status]} + /> + + ); + })} + + + ) : ( + + + No instances have registered with this group for the past {period}. +
+
+ Instances will be shown here automatically the next time they request an update. + + + ); +} diff --git a/frontend/src/components/Instances/Charts.tsx b/frontend/src/components/Instances/charts/ProgressDoughnut.tsx similarity index 55% rename from frontend/src/components/Instances/Charts.tsx rename to frontend/src/components/Instances/charts/ProgressDoughnut.tsx index dc23e7795..758169d59 100644 --- a/frontend/src/components/Instances/Charts.tsx +++ b/frontend/src/components/Instances/charts/ProgressDoughnut.tsx @@ -4,13 +4,8 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import { makeStyles, useTheme } from '@material-ui/styles'; import React from 'react'; -import { Trans, useTranslation } from 'react-i18next'; import { Cell, Label, Pie, PieChart } from 'recharts'; -import Empty from '../Common/EmptyContent'; -import LightTooltip from '../Common/LightTooltip'; -import Loader from '../Common/Loader'; -import { InstanceCountLabel } from './Common'; -import makeStatusDefs from './StatusDefs'; +import LightTooltip from '../../Common/LightTooltip'; interface DoughnutLabelProps { color: string; @@ -32,7 +27,7 @@ interface ProgressData { description: string; } -interface ProgressDoughnutProps { +export interface ProgressDoughnutProps { label: string; width: number; height: number; @@ -48,7 +43,7 @@ interface RechartsPieData { description?: string; } -function ProgressDoughnut(props: ProgressDoughnutProps) { +export default function ProgressDoughnut(props: ProgressDoughnutProps) { const { label, data, width = 100, height = 100, color = '#afafaf', icon } = props; const [hoverData, setHoverData] = React.useState(null); const [showTooltip, setShowTooltip] = React.useState(false); @@ -167,121 +162,3 @@ function ProgressDoughnut(props: ProgressDoughnutProps) { ); } - -interface InstanceStats { - [key: string]: number; - total: number; -} - -interface InstanceStatusAreaProps { - instanceStats: InstanceStats | null; - href?: object; - period: string; -} - -interface InstanceStatusCount { - status: string; - count: { - key: string; - label?: string; - }[]; -} - -export default function InstanceStatusArea(props: InstanceStatusAreaProps) { - const theme = useTheme(); - const statusDefs = makeStatusDefs(theme); - const { t } = useTranslation(); - - const { instanceStats, href, period } = props; - const instanceStateCount: InstanceStatusCount[] = [ - { - status: 'InstanceStatusComplete', - count: [{ key: 'complete' }], - }, - { - status: 'InstanceStatusDownloaded', - count: [{ key: 'downloaded' }], - }, - { - status: 'InstanceStatusOther', - count: [ - { key: 'onhold', label: t('instances|InstanceStatusOnHold') }, - { key: 'undefined', label: t('instances|InstanceStatusUndefined') }, - ], - }, - { - status: 'InstanceStatusInstalled', - count: [{ key: 'installed' }], - }, - { - status: 'InstanceStatusDownloading', - count: [ - { key: 'downloading', label: t('instances|InstanceStatusDownloading') }, - { key: 'update_granted', label: t('instances|InstanceStatusUpdateGranted') }, - ], - }, - { - status: 'InstanceStatusError', - count: [{ key: 'error' }], - }, - ]; - - statusDefs['InstanceStatusOther'] = { ...statusDefs['InstanceStatusUndefined'] }; - statusDefs['InstanceStatusOther'].label = t('instances|Other'); - - const totalInstances = instanceStats ? instanceStats.total : 0; - - if (!instanceStats) { - return ; - } - - return totalInstances > 0 ? ( - - - - - - {instanceStateCount.map(({ status, count }, i) => { - // Sort the data entries so the smaller amounts are shown first. - count.sort((obj1, obj2) => { - const stats1 = instanceStats[obj1.key]; - const stats2 = instanceStats[obj2.key]; - if (stats1 === stats2) return 0; - if (stats1 < stats2) return -1; - return 1; - }); - - return ( - - { - const statusLabel = statusDefs[label].label; - return { - value: instanceStats[key] / instanceStats.total, - color: statusDefs[label].color, - description: t('{{statusLabel}}: {{stat, number}} instances', { - statusLabel: statusLabel, - stat: instanceStats[key], - }), - }; - })} - width={140} - height={140} - {...statusDefs[status]} - /> - - ); - })} - - - ) : ( - - - No instances have registered with this group for the past {period}. -
-
- Instances will be shown here automatically the next time they request an update. - - - ); -} diff --git a/frontend/src/components/Instances/StatusDefs.ts b/frontend/src/components/Instances/statusDefs.ts similarity index 96% rename from frontend/src/components/Instances/StatusDefs.ts rename to frontend/src/components/Instances/statusDefs.ts index 754009500..3e1d01187 100644 --- a/frontend/src/components/Instances/StatusDefs.ts +++ b/frontend/src/components/Instances/statusDefs.ts @@ -9,7 +9,7 @@ import progressDownload from '@iconify/icons-mdi/progress-download'; import { Theme } from '@material-ui/core'; import { useTranslation } from 'react-i18next'; -function makeStatusDefs(theme: Theme): { +export default function makeStatusDefs(theme: Theme): { [key: string]: { label: string; color: string; @@ -70,5 +70,3 @@ function makeStatusDefs(theme: Theme): { }, }; } - -export default makeStatusDefs; diff --git a/frontend/src/components/Layouts/InstanceLayout.tsx b/frontend/src/components/Layouts/InstanceLayout.tsx index 7588bf655..dba94f448 100644 --- a/frontend/src/components/Layouts/InstanceLayout.tsx +++ b/frontend/src/components/Layouts/InstanceLayout.tsx @@ -7,7 +7,7 @@ import { applicationsStore } from '../../stores/Stores'; import { getInstanceStatus } from '../../utils/helpers'; import Loader from '../Common/Loader'; import SectionHeader from '../Common/SectionHeader'; -import Details from '../Instances/Details'; +import InstanceDetails from '../Instances/InstanceDetails'; export default function InstanceLayout() { const { appID, groupID, instanceID } = useParams<{ @@ -87,7 +87,7 @@ export default function InstanceLayout() { {!instance ? ( ) : ( -
(); @@ -63,7 +63,11 @@ export default function InstanceLayout() { }, ]} /> - {!group || !application ? : } + {!group || !application ? ( + + ) : ( + + )} ); }