BITMAKER-2844 Environment values masked (#170)

* Setting masked field in SpiderJobEnvVar model * Add masked variables in cronjob and job creation modal * Show tooltip over masked key in cronjo and job detail page * Correct bitmaker logo in login and register page * Fix shown text when no tags or env vars are present * Handle null values in items, requests, and stats * Add TB to formatBytes --------- Co-authored-by: Raymond Negron <[email protected]> Co-authored-by: emegona <[email protected]>
bitmakerla · Apr 20, 2023 · 82c9b36 · 82c9b36
1 parent afa0e02
commit 82c9b36
Show file tree

Hide file tree

Showing 16 changed files with 333 additions and 95 deletions.
diff --git a/estela-api/api/serializers/job_specific.py b/estela-api/api/serializers/job_specific.py
@@ -12,7 +12,12 @@ class Meta:
 class SpiderJobEnvVarSerializer(serializers.ModelSerializer):
     class Meta:
         model = SpiderJobEnvVar
-        fields = ("name", "value")
+        fields = ("name", "value", "masked")
+
+    def to_representation(self, instance):
+        ret = super().to_representation(instance)
+        ret["value"] = None if instance.masked else instance.value
+        return ret
 
 
 class SpiderJobTagSerializer(serializers.ModelSerializer):

diff --git a/estela-api/core/migrations/0027_spiderjobenvvar_masked.py b/estela-api/core/migrations/0027_spiderjobenvvar_masked.py
@@ -0,0 +1,20 @@
+# Generated by Django 3.1.14 on 2023-04-18 15:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("core", "0026_auto_20230411_0631"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="spiderjobenvvar",
+            name="masked",
+            field=models.BooleanField(
+                default=False, help_text="Whether the env variable value is masked."
+            ),
+        ),
+    ]
diff --git a/estela-api/core/models.py b/estela-api/core/models.py
@@ -363,6 +363,9 @@ class SpiderJobEnvVar(models.Model):
     )
     name = models.CharField(max_length=1000, help_text="Env variable name.")
     value = models.CharField(max_length=1000, help_text="Env variable value.")
+    masked = models.BooleanField(
+        default=False, help_text="Whether the env variable value is masked."
+    )
 
 
 class SpiderJobTag(models.Model):

diff --git a/estela-api/docs/api.yaml b/estela-api/docs/api.yaml
@@ -1407,6 +1407,10 @@ definitions:
         type: string
         maxLength: 1000
         minLength: 1
+      masked:
+        title: Masked
+        description: Whether the env variable value is masked.
+        type: boolean
   SpiderJobTag:
     description: Cron job tags.
     required:

diff --git a/estela-web/src/components/CronJobDetailPage/index.tsx b/estela-web/src/components/CronJobDetailPage/index.tsx
@@ -22,6 +22,7 @@ import {
     Checkbox,
     Input,
     message,
+    Tooltip,
 } from "antd";
 import type { DatePickerProps, RadioChangeEvent } from "antd";
 import cronstrue from "cronstrue";
@@ -41,6 +42,7 @@ import {
     ApiProjectsSpidersJobsListRequest,
     ApiProjectsSpidersCronjobsRunOnceRequest,
     SpiderCronJob,
+    SpiderJobEnvVar,
     SpiderJob,
     SpiderCronJobUpdateStatusEnum,
     SpiderCronJobDataStatusEnum,
@@ -59,11 +61,6 @@ interface ArgsData {
     value: string;
 }
 
-interface EnvVarsData {
-    name: string;
-    value: string;
-}
-
 interface TagsData {
     name: string;
 }
@@ -95,7 +92,7 @@ interface CronJobDetailPageState {
     loaded: boolean;
     name: string | undefined;
     args: ArgsData[];
-    envVars: EnvVarsData[];
+    envVars: SpiderJobEnvVar[];
     tags: TagsData[];
     status: string | undefined;
     jobs: SpiderJobData[];
@@ -283,18 +280,9 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
         };
         this.apiService.apiProjectsSpidersCronjobsRead(requestParams).then(
             async (response: SpiderCronJob) => {
-                let args = response.cargs;
-                if (args === undefined) {
-                    args = [];
-                }
-                let envVars = response.cenvVars;
-                if (envVars === undefined) {
-                    envVars = [];
-                }
-                let tags = response.ctags;
-                if (tags === undefined) {
-                    tags = [];
-                }
+                const args = response.cargs || [];
+                const envVars = response.cenvVars || [];
+                const tags = response.ctags || [];
                 this.initial_schedule = response.schedule || "";
                 const data = await this.getJobs(1);
                 const errorJobs = data.data.filter((job: SpiderJobData) => job.status === "ERROR");
@@ -867,7 +855,7 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
                                     </Tag>
                                 ) : (
                                     <Tag
-                                        className="border-estela-black-medium bg-estela-white-low text-estela-black-medium rounded-md"
+                                        className="border-estela-black-medium text-estela-black-medium rounded-md"
                                         key={"false"}
                                     >
                                         No
@@ -887,21 +875,39 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
                                             {tag.name}
                                         </Tag>
                                     ))}
+                                    {tags.length == 0 && (
+                                        <Text className="text-estela-black-medium text-xs">No tags</Text>
+                                    )}
                                 </Space>
                             </Col>
                         </Row>
                         <Row className="grid grid-cols-3 py-1 px-4 rounded-lg">
                             <Col>Environment variables</Col>
                             <Col>
                                 <Space direction="vertical">
-                                    {envVars.map((envVar: EnvVarsData, id) => (
-                                        <Tag
-                                            className="border-estela-blue-full bg-estela-blue-low text-estela-blue-full rounded-md"
-                                            key={id}
-                                        >
-                                            {envVar.name}: {envVar.value}
-                                        </Tag>
-                                    ))}
+                                    {envVars.map((envVar: SpiderJobEnvVar, id) =>
+                                        envVar.masked ? (
+                                            <Tooltip
+                                                title="Masked variable"
+                                                showArrow={false}
+                                                overlayClassName="tooltip"
+                                                key={id}
+                                            >
+                                                <Tag className="environment-variables" key={id}>
+                                                    {envVar.name}
+                                                </Tag>
+                                            </Tooltip>
+                                        ) : (
+                                            <Tag className="environment-variables" key={id}>
+                                                {envVar.name}: {envVar.value}
+                                            </Tag>
+                                        ),
+                                    )}
+                                    {envVars.length == 0 && (
+                                        <Text className="text-estela-black-medium text-xs">
+                                            No environment variables
+                                        </Text>
+                                    )}
                                 </Space>
                             </Col>
                         </Row>
@@ -917,6 +923,9 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
                                             {arg.name}: {arg.value}
                                         </Tag>
                                     ))}
+                                    {args.length == 0 && (
+                                        <Text className="text-estela-black-medium text-xs">No arguments</Text>
+                                    )}
                                 </Space>
                             </Col>
                         </Row>
@@ -1223,7 +1232,7 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
                         <Space direction="vertical" className="w-full">
                             <Text className="text-2xl text-black">Data persistence</Text>
                             <p className="text-sm text-estela-black-medium">
-                                Data persistence will be applied to all jobs creadted from this schedue job by default.
+                                Data persistence will be applied to all jobs created from this schedule job by default.
                             </p>
                             <Space direction="horizontal">
                                 <Text className="text-estela-black-full text-sm mr-2">

diff --git a/estela-web/src/components/CronJobDetailPage/styles.scss b/estela-web/src/components/CronJobDetailPage/styles.scss
@@ -25,3 +25,21 @@ $estela-black-medium: #6C757D;
 .ant-tabs-nav::before {
     border-bottom: none !important;
 }
+
+.environment-variables {
+    border: 1px solid $estela-blue-full;
+    border-radius: 6px;
+    background-color: white;
+    color: #4D47C3 !important;
+    padding: 1px 4px;
+}
+
+.tooltip {
+    padding: 0px;
+  }
+
+  .ant-tooltip-inner {
+    color: white;
+    border-radius: 8px;
+  }
+