Show Azure site tags in EntityAzureSitesOverviewWidget

Signed-off-by: Deepankumar Loganathan <deepan0433@gmail.com>

.changeset/curvy-dingos-jump.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-azure-sites': minor
+---
+
+Show Azure site tags in EntityAzureSitesOverviewWidget

plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx

@@ -18,6 +18,7 @@ import React, { Dispatch, useEffect, useState } from 'react';
 import {
   Box,
   Card,
+  Chip,
   IconButton,
   LinearProgress,
   Menu,
@@ -91,6 +92,18 @@ const Kind = ({ value }: { value: Kinds }) => {
   );
 };
 
+const Tags = ({ tags }: { tags: any }) => {
+  return Object.keys(tags).map((key: any) => (
+    <Chip
+      key={key}
+      label={`${key}: ${tags[key]}`}
+      size="small"
+      variant="default"
+      style={{ marginBottom: '1px' }}
+    />
+  ));
+};
+
 type TableProps = {
   data: AzureSite[];
   loading: boolean;
@@ -223,6 +236,11 @@ export const AzureSitesOverviewTable = ({ data, loading }: TableProps) => {
       field: 'status',
       render: (func: AzureSite) => <State value={func.state as States} />,
     },
+    {
+      title: 'Tags',
+      field: 'tags',
+      render: (func: AzureSite) => (func.tags ? <Tags tags={func.tags} /> : ''),
+    },
     {
       title: 'last modified',
       field: 'lastModifiedDate',