Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
C
compendium-v2
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
geant-swd
compendium-v2
Merge requests
!135
Refactor remaining pages & improvements
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
Refactor remaining pages & improvements
FixPills
into
develop
Overview
0
Commits
21
Pipelines
0
Changes
9
Merged
Bjarke Madsen
requested to merge
FixPills
into
develop
6 months ago
Overview
0
Commits
21
Pipelines
0
Changes
9
Expand
0
0
Merge request reports
Viewing commit
115b72b3
Prev
Next
Show latest version
9 files
+
160
−
396
Inline
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
9
Search (e.g. *.vue) (Ctrl+P)
115b72b3
Use PillTable for more pages
· 115b72b3
Bjarke Madsen
authored
6 months ago
compendium-frontend/src/pages/Network/AlienWave.tsx
+
24
−
54
Options
import
React
,
{
useContext
}
from
"
react
"
;
import
{
Table
}
from
"
react-bootstrap
"
;
import
{
AlienWave
}
from
"
../../Schema
"
;
import
{
createNrenTableLookup
}
from
"
../../helpers/dataconversion
"
;
import
ColorPill
from
"
../../components/ColorPill
"
;
import
{
createNrenTableLookup
,
addTooltip
}
from
"
../../helpers/dataconversion
"
;
import
DataPage
from
"
../../components/DataPage
"
;
import
Filter
from
"
../../components/graphing/Filter
"
;
import
{
Sections
}
from
"
../../helpers/constants
"
;
import
{
FilterSelectionContext
}
from
"
../../providers/FilterSelectionProvider
"
;
import
ChartContainer
from
"
../../components/graphing/ChartContainer
"
;
import
{
useData
}
from
"
../../helpers/useData
"
;
import
PillTable
from
"
../../components/PillTable
"
;
function
AlienWavePage
():
React
.
ReactElement
{
const
dataField
=
'
alien_wave_third_party
'
;
const
validityCheck
=
(
data
:
AlienWave
)
=>
data
[
dataField
]
!==
null
;
const
{
filterSelection
,
setFilterSelection
}
=
useContext
(
FilterSelectionContext
);
const
{
data
:
pertTeamData
,
years
,
nrens
}
=
useData
<
AlienWave
>
(
'
/api/network/alien-wave
'
,
setFilterSelection
);
const
{
data
,
years
,
nrens
}
=
useData
<
AlienWave
>
(
'
/api/network/alien-wave
'
,
setFilterSelection
,
validityCheck
);
const
selectedData
=
(
pertTeamD
ata
)
.
filter
(
data
=>
const
selectedData
=
d
ata
.
filter
(
data
=>
filterSelection
.
selectedYears
.
includes
(
data
.
year
)
&&
filterSelection
.
selectedNrens
.
includes
(
data
.
nren
)
);
const
dataLookup
=
createNrenTableLookup
(
selectedData
,
'
alien_wave_third_party
'
);
const
dataLookup
=
createNrenTableLookup
(
selectedData
,
dataField
);
const
withTooltip
=
addTooltip
(
dataLookup
,
'
nr_of_alien_wave_third_party_services
'
,
undefined
,
'
No. of alien wavelength services:
'
);
const
columns
=
[
"
Yes
"
,
"
Planned
"
,
"
No
"
,
]
const
columnValueMap
=
new
Map
<
string
,
string
>
([
[
columns
[
0
],
"
yes
"
],
[
columns
[
1
],
"
planned
"
],
[
columns
[
2
],
"
no
"
],
]);
const
filterNode
=
<
Filter
filterOptions
=
{
{
availableYears
:
[...
years
],
availableNrens
:
[...
nrens
.
values
()]
}
}
@@ -28,8 +42,6 @@ function AlienWavePage(): React.ReactElement {
coloredYears
/>
const
showYears
=
[...
filterSelection
.
selectedYears
.
filter
(
year
=>
years
.
has
(
year
))].
sort
();
return
(
<
DataPage
title
=
"NREN Use of 3rd Party Alienwave/Lightpath Services"
description
=
"
The
table
below
shows
NREN
usage
of
alien
wavelength
or
lightpath
services
provided
by
third
parties
.
@@ -43,51 +55,9 @@ function AlienWavePage(): React.ReactElement {
box
.
These
are
indicated
by
a
black
line
around
the
coloured
marker
."
category
=
{
Sections
.
Network
}
filter
=
{
filterNode
}
data
=
{
selectedData
}
filename
=
"alien_wave_nrens_per_year"
>
<>
<
ChartContainer
>
<
Table
className
=
"charging-struct-table"
striped
bordered
>
<
colgroup
>
<
col
span
=
{
1
}
style
=
{
{
width
:
"
25%
"
}
}
/>
<
col
span
=
{
1
}
style
=
{
{
width
:
"
25%
"
}
}
/>
<
col
span
=
{
1
}
style
=
{
{
width
:
"
25%
"
}
}
/>
<
col
span
=
{
1
}
style
=
{
{
width
:
"
25%
"
}
}
/>
</
colgroup
>
<
thead
>
<
tr
>
<
th
></
th
>
<
th
>
Yes
</
th
>
<
th
>
Planned
</
th
>
<
th
>
No
</
th
>
</
tr
>
</
thead
>
<
tbody
>
{
Array
.
from
(
dataLookup
.
entries
()).
map
(([
nren
,
nrenMap
])
=>
(
<
tr
key
=
{
nren
}
>
<
td
>
{
nren
}
</
td
>
{
[
"
yes
"
,
"
planned
"
,
"
no
"
].
map
(
column_key
=>
(
<
td
key
=
{
column_key
}
>
{
nrenMap
.
has
(
column_key
)
&&
showYears
.
map
(
year
=>
{
const
chargingYears
=
nrenMap
.
get
(
column_key
)
!
;
const
alienWaveInfo
=
chargingYears
.
get
(
year
);
return
<
ColorPill
key
=
{
year
}
year
=
{
year
}
active
=
{
chargingYears
.
has
(
year
)
}
tooltip
=
{
alienWaveInfo
?.
nr_of_alien_wave_third_party_services
!=
null
?
`No. of Individual alien wavelength services:
${
alienWaveInfo
.
nr_of_alien_wave_third_party_services
}
`
:
""
}
/>;
})
}
</
td
>
))
}
</
tr
>
))
}
</
tbody
>
</
Table
>
</
ChartContainer
>
</>
<
ChartContainer
>
<
PillTable
columns
=
{
columns
}
columnLookup
=
{
columnValueMap
}
dataLookup
=
{
withTooltip
}
/>
</
ChartContainer
>
</
DataPage
>
);
}
Loading