@@ -8,112 +8,83 @@ import { PageWithSubMenu } from "../components/PageWithSubMenu";
88import { adminMenu } from "./admin-menu" ;
99
1010import { LicenseContext } from "../license-context" ;
11- import { ReactElement , useContext } from "react" ;
12- import { UserContext } from "../user-context" ;
13- import { Redirect } from "react-router-dom" ;
11+ import { ReactElement , useContext , useEffect } from "react" ;
1412import { BlackBox , LightBox } from "../components/InfoBox" ;
13+ import { getGitpodService } from "../service/service" ;
1514
16- import { ReactComponent as Bang } from "../images/exclamation.svg" ;
17- import { ReactComponent as Tick } from "../images/tick.svg" ;
15+ import { ReactComponent as Alert } from "../images/exclamation.svg" ;
16+ import { ReactComponent as Success } from "../images/tick.svg" ;
17+ import { ReactComponent as Tick } from "../images/check.svg" ;
18+ import { ReactComponent as Cross } from "../images/x.svg" ;
1819
1920export default function License ( ) {
20- // @ts -ignore
2121 const { license, setLicense } = useContext ( LicenseContext ) ;
22- const { user } = useContext ( UserContext ) ;
2322
24- if ( ! user || ! user ?. rolesOrPermissions ?. includes ( "admin" ) ) {
25- return < Redirect to = "/" /> ;
26- }
23+ useEffect ( ( ) => {
24+ if ( isGitpodIo ( ) ) {
25+ return ; // temporarily disable to avoid hight CPU on the DB
26+ }
27+ ( async ( ) => {
28+ const data = await getGitpodService ( ) . server . adminGetLicense ( ) ;
29+ setLicense ( data ) ;
30+ } ) ( ) ;
31+ } , [ ] ) ;
2732
2833 const featureList = license ?. enabledFeatures ;
2934 const features = license ?. features ;
30- const licenseType = license ?. type ? capitalizeInitials ( license ?. type ) : "" ;
3135
36+ // if user seats is 0, it means that there is user limit in the license
3237 const userLimit = license ?. seats == 0 ? "Unlimited" : license ?. seats ;
33- // const communityLicense = license?.key == "default-license"
3438
3539 const [ licenseLevel , paid , msg , tick ] = getSubscriptionLevel (
3640 license ?. plan || "" ,
3741 license ?. userCount || 0 ,
3842 license ?. seats || 0 ,
39- false ,
43+ license ?. fallbackAllowed || false ,
4044 ) ;
4145
4246 return (
4347 < div >
4448 < PageWithSubMenu subMenu = { adminMenu } title = "License" subtitle = "License information of your account." >
45- { ! license ?. valid ? (
46- < p className = "text-base text-gray-500 pb-4 max-w-2xl" >
47- You do not have a valid license associated with this account. { license ?. errorMsg }
48- </ p >
49- ) : (
50- < div className = "flex flex-row space-x-4" >
51- < div >
52- < BlackBox >
53- < p className = "text-white dark:text-black font-bold pt-4 text-sm" > { licenseLevel } </ p >
54- < p className = "font-semibold dark:text-gray-500" > { paid } </ p >
55- < p className = "font-semibold text-gray-400 pt-4 pb-2 text-sm" > Available features:</ p >
56- < div className = "pb-4" >
57- { features &&
58- features . map ( ( feat : string ) => (
59- < div >
60- { featureList ?. includes ( feat ) ? (
61- < svg
62- xmlns = "http://www.w3.org/2000/svg"
63- className = "h-4 w-4 inline-block pr-1"
64- fill = "none"
65- viewBox = "0 0 24 24"
66- stroke = "currentColor"
67- strokeWidth = { 2 }
68- >
69- < path
70- strokeLinecap = "round"
71- strokeLinejoin = "round"
72- d = "M5 13l4 4L19 7"
73- />
74- </ svg >
75- ) : (
76- < svg
77- xmlns = "http://www.w3.org/2000/svg"
78- className = "h-4 w-4 inline-block pr-1"
79- fill = "none"
80- viewBox = "0 0 24 24"
81- stroke = "currentColor"
82- strokeWidth = { 2 }
83- >
84- < path
85- strokeLinecap = "round"
86- strokeLinejoin = "round"
87- d = "M6 18L18 6M6 6l12 12"
88- />
89- </ svg >
90- ) }
91- { capitalizeInitials ( feat ) }
92- </ div >
93- ) ) }
94- </ div >
95- </ BlackBox >
96- </ div >
97- < div >
98- < LightBox >
99- < div className = "text-gray-600 dark:text-gray-200 font-semibold text-sm flex py-4" >
100- < div > { msg } </ div >
101- < div className = "pr-4 pl-1 py-1" > { getLicenseValidIcon ( tick ) } </ div >
102- </ div >
103- < p className = "font-semibold dark:text-gray-500 pt-4 " > Registered Users</ p >
104- < h4 className = "font-semibold inline-block" >
105- < span className = "dark:text-gray-300 pt-1 text-lg" > { license . userCount || 0 } </ span >
106- < span className = "dark:text-gray-500 text-gray-400 pt-1 text-lg" >
107- { " " }
108- / { userLimit } { " " }
109- </ span >
110- </ h4 >
111- < p className = "font-semibold dark:text-gray-500 pt-2 " > License Type</ p >
112- < h4 className = "font-semibold dark:text-gray-300 pt-1 text-lg" > { licenseType } </ h4 >
113- </ LightBox >
114- </ div >
49+ < div className = "flex flex-row space-x-4" >
50+ < div >
51+ < BlackBox >
52+ < p className = "text-white dark:text-black font-bold pt-4 text-sm" > { licenseLevel } </ p >
53+ < p className = "font-semibold dark:text-gray-500" > { paid } </ p >
54+ < p className = "font-semibold text-gray-400 pt-4 pb-2 text-sm" > Available features:</ p >
55+ < div className = "pb-4" >
56+ { features &&
57+ features . map ( ( feat : string ) => (
58+ < div className = "flex" >
59+ { featureList ?. includes ( feat ) ? (
60+ < Tick className = "h-4 pr-1" />
61+ ) : (
62+ < Cross className = "h-4 pr-1" />
63+ ) }
64+ { capitalizeInitials ( feat ) }
65+ </ div >
66+ ) ) }
67+ </ div >
68+ </ BlackBox >
69+ </ div >
70+ < div >
71+ < LightBox >
72+ < div className = "text-gray-600 dark:text-gray-200 font-semibold text-sm py-4 flex-row flex items-center" >
73+ < div > { msg } </ div >
74+ < div className = "px-4" > { getLicenseValidIcon ( tick ) } </ div >
75+ </ div >
76+ < p className = "font-semibold dark:text-gray-500" > Registered Users</ p >
77+ < h4 className = "font-semibold inline-block" >
78+ < span className = "dark:text-gray-300 pt-1 text-lg" > { license ?. userCount || 0 } </ span >
79+ < span className = "dark:text-gray-500 text-gray-400 pt-1 text-lg" > / { userLimit } </ span >
80+ </ h4 >
81+ < p className = "font-semibold dark:text-gray-500 pt-2 " > License Type</ p >
82+ < h4 className = "font-semibold dark:text-gray-300 pt-1 text-lg" >
83+ { capitalizeInitials ( license ?. type || "" ) }
84+ </ h4 >
85+ </ LightBox >
11586 </ div >
116- ) }
87+ </ div >
11788 </ PageWithSubMenu >
11889 </ div >
11990 ) ;
@@ -146,10 +117,11 @@ function getSubscriptionLevel(level: string, userCount: number, seats: number, f
146117}
147118
148119function professionalPlan ( userCount : number , seats : number ) : string [ ] {
149- const aboveLimit : boolean = userCount >= seats ;
120+ const aboveLimit : boolean = userCount > seats ;
121+ console . log ( userCount , seats ) ;
150122 let msg : string , tick : string ;
151123 if ( aboveLimit ) {
152- msg = "You have reached the usage limit." ;
124+ msg = "You have exceeded the usage limit." ;
153125 tick = "red-cross" ;
154126 } else {
155127 msg = "You have an active professional license." ;
@@ -160,15 +132,15 @@ function professionalPlan(userCount: number, seats: number): string[] {
160132}
161133
162134function communityPlan ( userCount : number , seats : number , fallbackAllowed : boolean ) : string [ ] {
163- const aboveLimit : boolean = userCount >= seats ;
135+ const aboveLimit : boolean = userCount > seats ;
164136
165137 let msg : string = "You are using the free community edition" ;
166138 let tick : string = "grey-tick" ;
167139 if ( aboveLimit ) {
168140 if ( fallbackAllowed ) {
169141 msg = "No active license. You are using the community edition." ;
170142 } else {
171- msg = "No active license. You have reached your usage limit." ;
143+ msg = "No active license. You have exceeded the usage limit." ;
172144 tick = "red-cross" ;
173145 }
174146 }
@@ -179,12 +151,16 @@ function communityPlan(userCount: number, seats: number, fallbackAllowed: boolea
179151function getLicenseValidIcon ( iconname : string ) : ReactElement {
180152 switch ( iconname ) {
181153 case "green-tick" :
182- return < Tick fill = "green" > </ Tick > ;
154+ return < Success fill = "green" className = "h-8 w-8" / >;
183155 case "grey-tick" :
184- return < Tick fill = "gray" > </ Tick > ;
156+ return < Success fill = "gray" className = "h-8 w-8" / >;
185157 case "red-cross" :
186- return < Bang fill = "red" > </ Bang > ;
158+ return < Alert fill = "red" className = "h-8 w-8" / >;
187159 default :
188- return < Bang fill = "gray" > </ Bang > ;
160+ return < Alert fill = "gray" className = "h-8 w-8" / >;
189161 }
190162}
163+
164+ function isGitpodIo ( ) {
165+ return window . location . hostname === "gitpod.io" || window . location . hostname === "gitpod-staging.com" ;
166+ }
0 commit comments