fixed_azure_logo_in_chaosHub Signed-off-by: khushi Tiwari (#5294)

* fixed_azure_logo_in_chaosHub Signed-off-by: khushi Tiwari
<[email protected]>

Signed-off-by: khushi Tiwari <[email protected]>

* fix: correct Azure fault icon rendering in ChaosFaults component

Signed-off-by: khushi Tiwari <[email protected]>

---------

Signed-off-by: khushi Tiwari <[email protected]>
Signed-off-by: khushi1310 <[email protected]>
Co-authored-by: khushi <[email protected]>
Co-authored-by: Pritesh Kiri <[email protected]>

Author: 3 people

chaoscenter/web/src/components/LitmusBreadCrumbs/LitmusBreadCrumbs.tsx

@@ -18,9 +18,7 @@ export default function LitmusBreadCrumbs({ baseUrl, ...rest }: LitmusBreadCrumb
     ...(rest.links || [])
   ];
 
-  const validLinks = combinedLinks.filter(
-    link => link && typeof link.label === 'string' && link.label.trim() !== ''
-  );
+  const validLinks = combinedLinks.filter(link => link && typeof link.label === 'string' && link.label.trim() !== '');
 
   return <Breadcrumbs {...rest} links={validLinks} />;
 }

chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx

@@ -355,7 +355,7 @@ const TunePropertiesStep: React.FC<StepProps<StepData>> = props => {
         {formikProps => {
           return (
             <Form style={{ height: '100%' }}>
-              <Layout.Vertical height={516} style={{ overflow: 'auto' }} padding={{ left: "xsmall", right: "xsmall" }}>
+              <Layout.Vertical height={516} style={{ overflow: 'auto' }} padding={{ left: 'xsmall', right: 'xsmall' }}>
                 <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'large' }}>
                   {getString(`properties`)}
                 </Text>

chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx

@@ -89,6 +89,7 @@ function ChaosFaults({ hubDetails, faultCategories, loading, searchValue }: Chao
   };
 
   const FaultCard = (fault: Fault): React.ReactElement => {
+    const isAzureFault = fault.tag.toLowerCase() === 'azure';
     const isChartNameAws = fault.chartName.toLowerCase().includes('aws');
     const isK6Fault = fault.name.toLowerCase().includes('k6-loadgen');
     const isGcpFault = fault.tag.toLowerCase() === 'gcp';
@@ -102,7 +103,15 @@ function ChaosFaults({ hubDetails, faultCategories, loading, searchValue }: Chao
         <Card key={fault.name} interactive className={css.insideCard}>
           <Layout.Vertical spacing="medium">
             <Layout.Horizontal spacing="small">
-              {isChartNameAws ? (
+              {isAzureFault ? (
+                <img
+                  src="https://hub.litmuschaos.io/api/icon/3.22.0/azure/azure-instance-stop.png"
+                  alt="Azure"
+                  width={23}
+                  height={23}
+                  style={{ objectFit: 'contain' }}
+                />
+              ) : isChartNameAws ? (
                 <img
                   src="https://hub.litmuschaos.io/api/icon/3.22.0/aws/aws-az-chaos.png"
                   alt="AWS"

chaoscenter/web/src/views/ChaosHubs/ChaosHubs.module.scss

@@ -46,14 +46,11 @@
 .card {
   min-height: 260px;
   gap: 1rem;
-
 }
 
 .chaosHubCard {
   position: relative;
 
-  
-
   .tagsList {
     display: flex;
     align-items: center;

chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.module.scss

@@ -111,7 +111,6 @@
   max-width: 320px;
 }
 
-
 .noEnvExecution {
   width: 100%;
   display: flex;
@@ -145,4 +144,4 @@
   .button {
     margin-top: 20px;
   }
-}
+}

chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.tsx

@@ -125,12 +125,8 @@ export default function EnvironmentListView({
       {environmentTableData === null && !loading.listEnvironments ? (
         <Container className={css.noEnvExecution} height="calc(100vh - 100px)">
           <img src={Envirnoment} alt={getString('environment')} />
-          <Text className={css.title}>
-            {getString('noEnvironmentFound')}
-          </Text>
-          <Text className={css.subtitle}>
-            {getString('noEnvironmentFoundNewMessage')}
-          </Text>
+          <Text className={css.title}>{getString('noEnvironmentFound')}</Text>
+          <Text className={css.subtitle}>{getString('noEnvironmentFoundNewMessage')}</Text>
         </Container>
       ) : (
         <Loader

chaoscenter/web/src/views/ExperimentBuilderTemplateSelection/blankCanvasTemplate.ts

@@ -11,10 +11,10 @@ export default function blankCanvasTemplate(
   switch (infrastructureType) {
     case InfrastructureType.KUBERNETES:
       return kubernetesBlankCanvasTemplate(
-        experimentName, 
+        experimentName,
         experiment?.chaosInfrastructure?.namespace,
-        undefined, 
-        experiment?.imageRegistry,
+        undefined,
+        experiment?.imageRegistry
       );
   }
 }

chaoscenter/web/src/views/KubernetesChaosInfrastructureTable/KubernetesChaosInfrastructureTable.tsx

@@ -78,8 +78,6 @@ export function RenderChaosInfrastructureOptions({
             text={`kubectl delete chaosexperiment,chaosengine,chaosresult --all -n ${chaosInfrastructureNamespace}`}
             isCopyButtonEnabled
           />
-
-
         </Container>
         {chaosInfrastructureScope === InfraScope.NAMESPACE && (
           <Layout.Vertical spacing="small">

chaoscenter/web/src/views/StudioOverview/StudioOverview.tsx

@@ -23,8 +23,8 @@ import { ChaosInfrastructureReferenceFieldProps, StudioErrorState, StudioTabs }
 import experimentYamlService from 'services/experiment';
 import KubernetesChaosInfrastructureReferenceFieldController from '@controllers/KubernetesChaosInfrastructureReferenceField';
 import { InfrastructureType } from '@api/entities';
-import { getImageRegistry } from '@api/core/ImageRegistry'; 
-import { getScope } from '@utils'; 
+import { getImageRegistry } from '@api/core/ImageRegistry';
+import { getScope } from '@utils';
 import css from './StudioOverview.module.scss';
 
 interface StudioOverviewViewProps {
@@ -56,17 +56,18 @@ export default function StudioOverviewView({
 
   const scope = getScope();
 
-   // Fetch the image registry data using Apollo's useQuery hook
-   const { data: getImageRegistryData, loading: imageRegistryLoading } = getImageRegistry({
-    projectID: scope.projectID,
+  // Fetch the image registry data using Apollo's useQuery hook
+  const { data: getImageRegistryData, loading: imageRegistryLoading } = getImageRegistry({
+    projectID: scope.projectID
   });
 
-  const imageRegistry = getImageRegistryData?.getImageRegistry?{
-      name: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRegistryName,
-      repo: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRepoName,
-      secret: getImageRegistryData.getImageRegistry.imageRegistryInfo.secretName,
-  }
-  : undefined;
+  const imageRegistry = getImageRegistryData?.getImageRegistry
+    ? {
+        name: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRegistryName,
+        repo: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRepoName,
+        secret: getImageRegistryData.getImageRegistry.imageRegistryInfo.secretName
+      }
+    : undefined;
 
   React.useEffect(() => {
     experimentHandler?.getExperiment(experimentKey).then(experiment => {
@@ -101,8 +102,7 @@ export default function StudioOverviewView({
           })
         })}
         onSubmit={values => {
-
-          values.imageRegistry = imageRegistry
+          values.imageRegistry = imageRegistry;
 
           if (values.chaosInfrastructure.namespace === undefined) {
             delete values.chaosInfrastructure.namespace;
@@ -164,10 +164,10 @@ export default function StudioOverviewView({
                       onClick={openDiscardDialog}
                     />
                     <Button
-                      type="submit" 
-                      intent="primary" 
-                      text={getString('next')} 
-                      rightIcon="chevron-right" 
+                      type="submit"
+                      intent="primary"
+                      text={getString('next')}
+                      rightIcon="chevron-right"
                       disabled={imageRegistryLoading}
                     />
                   </Layout.Horizontal>