feat(ui) - custom metrics - wip

frontend/app/components/Dashboard/Dashboard.js

@@ -243,7 +243,7 @@ export default class Dashboard extends React.PureComponent {
                     </div>
                   }
                 >
-                  <div className={cn("gap-4 grid grid-cols-2")} ref={this.list[CUSTOM_METRICS]}>
+                  <div className={cn("")} ref={this.list[CUSTOM_METRICS]}>
                     <CustomMetricsWidgets onClickEdit={(e) => null}/>
                   </div>
                 </WidgetSection>

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/CustomMetricPercentage.tsx

@@ -11,7 +11,8 @@ function CustomMetriPercentage(props: Props) {
     return (
         <div className="flex flex-col items-center justify-center" style={{ height: '240px'}}>
             <div className="text-6xl">{data.count}</div>
-            <div className="text-lg mt-6">{`${data.previousCount} ( ${data.countProgress}% ) from previous period.`}</div>
+            <div className="text-lg mt-6">{`${data.previousCount} ( ${data.countProgress}% )`}</div>
+            <div className="color-gray-medium">from previous period.</div>
         </div>
     )
 }

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx

@@ -94,39 +94,45 @@ function CustomMetricWidget(props: Props) {
 
   return (
     <div className="mb-10">
-      <div className="flex items-center mb-4">
+      <div className="flex items-center">
         <div className="mr-auto font-medium">Preview</div>
         <div className="flex items-center">
           {isTimeSeries && (
-            <SegmentSelection
-              name="viewType"
-              className="my-3"
-              primary
-              icons={true}
-              onSelect={ chagneViewType }
-              value={{ value: metric.viewType }}
-              list={ [
-                { value: 'lineChart', name: 'Chart', icon: 'graph-up-arrow' },
-                { value: 'progress', name: 'Progress', icon: 'hash' },
-              ]}
-            />
+            <>
+              <span className="mr-1 color-gray-medium">Visualization</span>
+              <SegmentSelection
+                name="viewType"
+                className="my-3"
+                primary
+                icons={true}
+                onSelect={ chagneViewType }
+                value={{ value: metric.viewType }}
+                list={ [
+                  { value: 'lineChart', name: 'Chart', icon: 'graph-up-arrow' },
+                  { value: 'progress', name: 'Progress', icon: 'hash' },
+                ]}
+              />
+            </>
           )}
 
           {isTable && (
-            <SegmentSelection
-              name="viewType"
-              className="my-3"
-              primary={true}
-              icons={true}
-              onSelect={ chagneViewType }
-              value={{ value: metric.viewType }}
-              list={[
-                { value: 'table', name: 'Table', icon: 'table' },
-                { value: 'pieChart', name: 'Chart', icon: 'graph-up-arrow' },
-              ]}
-            />
+            <>
+              <span className="mr-1 color-gray-medium">Visualization</span>
+              <SegmentSelection
+                name="viewType"
+                className="my-3"
+                primary={true}
+                icons={true}
+                onSelect={ chagneViewType }
+                value={{ value: metric.viewType }}
+                list={[
+                  { value: 'table', name: 'Table', icon: 'table' },
+                  { value: 'pieChart', name: 'Chart', icon: 'pie-chart-fill' },
+                ]}
+              />
+            </>
           )}
-          <div className="mx-2" />
+          <div className="mx-4" />
           <span className="mr-1 color-gray-medium">Time Range</span>
           <DateRange
             rangeValue={metric.rangeName}

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx

@@ -16,6 +16,7 @@ interface Props {
 function CustomMetricsWidgets(props: Props) {
   const { list } = props;
   const [activeMetricId, setActiveMetricId] = useState(null);
+  const activeList = list.filter(item => item.active);
 
   useEffect(() => {
     props.fetchList()
@@ -23,27 +24,35 @@ function CustomMetricsWidgets(props: Props) {
 
   return (
     <>
-      {list.map((item: any) => (
-        <LazyLoad>
-          <CustomMetricWidget
-            key={item.metricId}
-            metric={item}
-            onClickEdit={props.onClickEdit}
-            onAlertClick={(e) => {
-              setActiveMetricId(item.metricId)
-              props.initAlert({ query: { left: item.series.first().seriesId }})
-            }}
-          />
-        </LazyLoad>
-      ))}
+      <div className="gap-4 grid grid-cols-2">
+        {activeList.map((item: any) => (
+          <LazyLoad>
+            <CustomMetricWidget
+              key={item.metricId}
+              metric={item}
+              onClickEdit={props.onClickEdit}
+              onAlertClick={(e) => {
+                setActiveMetricId(item.metricId)
+                props.initAlert({ query: { left: item.series.first().seriesId }})
+              }}
+            />
+          </LazyLoad>
+        ))}
+      </div>
 
       {list.size === 0 && (
         <div className="flex items-center py-2">
-          <div className="mr-2">Be proactive by monitoring the metrics you care about the most.</div>
+          <div className="mr-2 color-gray-medium">Be proactive by monitoring the metrics you care about the most.</div>
           <CustomMetrics />
         </div>
       )}
 
+      {list.size > 0 && activeList && activeList.size === 0 && (
+        <div className="flex items-center py-2">
+          <div className="mr-2 color-gray-medium">It's blank here, add a metric to this section.</div>
+        </div>
+      )}
+
       <AlertFormModal
         showModal={!!activeMetricId}
         metricId={activeMetricId}
@@ -54,5 +63,5 @@ function CustomMetricsWidgets(props: Props) {
 }
 
 export default connect(state => ({
-  list: state.getIn(['customMetrics', 'list']).filter(item => item.active),
+  list: state.getIn(['customMetrics', 'list']),
 }), { fetchList, initAlert })(CustomMetricsWidgets);

frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx

@@ -168,7 +168,9 @@ function CustomMetricForm(props: Props) {
         </div>
 
         <div className="form-group">
-          <label className="font-medium">Chart Series</label>
+          <label className="font-medium">
+            {`${isTable ? 'Filter by' : 'Chart Series'}`}
+          </label>
           {metric.series && metric.series.size > 0 && metric.series.take(isTable ? 1 : metric.series.size).map((series: any, index: number) => (
             <div className="mb-2">
               <FilterSeries

frontend/app/svg/icons/pie-chart-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pie-chart-fill" viewBox="0 0 16 16">
+  <path d="M15.985 8.5H8.207l-5.5 5.5a8 8 0 0 0 13.277-5.5zM2 13.292A8 8 0 0 1 7.5.015v7.778l-5.5 5.5zM8.5.015V7.5h7.485A8.001 8.001 0 0 0 8.5.015z"/>
+</svg>